next wp
1.0.0
觀看演示視頻
這是用於構建Next.js應用程序的啟動模板，該應用程序使用WordPress REST API從WordPress站點獲取數據。該模板包括用於獲取帖子，類別，標籤，作者的功能，以及來自WordPress站點的媒體，並在Next.js應用程序中渲染它們。
next-wp由Next.JS 14，React，Typescript，Tailwind，Shadcn/UI和Brijr/Craft構建。它與Brijr/組件很好地搭配，以獲得快速的開發體驗。由Cameron和Bridger於9D8建造。
lib/wordpress.ts >通過REST API獲取WordPress CMS的功能lib/wordpress.d.ts > wp rest api的類型聲明components/posts/post-card.tsx >帖子的組件和样式app/posts/filter.tsx .tsx->用於處理帖子過濾的組件/menu.config.ts >台式機和移動設備的站點導航菜單配置/site.config.ts > sitemap.ts的配置app/sitemap.ts >動態生成的站點地圖在.env.local文件中需要設置兩個env變量：
WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com " .env.local .env.example在。
lib/wordpress.ts文件包含幾個功能，用於使用WordPress REST API從WordPress站點獲取數據。這是每個功能的簡要概述：
getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) ：從WordPress站點中獲取所有帖子。可選地，您可以將過濾參數傳遞給作者，標籤或類別過濾帖子。
getPostById(id: number) ：通過其ID獲取一個帖子。
getPostBySlug(slug: string) ：通過其slug獲取一個帖子。
getAllCategories() ：從WordPress站點獲取所有類別。
getCategoryById(id: number) ：通過其ID獲取單個類別。
getCategoryBySlug(slug: string) ：通過其slug獲取單個類別。
getPostsByCategory(categoryId: number) ：通過其ID獲取屬於特定類別的所有帖子。
getPostsByTag(tagId: number) ：獲取所有用ID標記的標籤標籤的帖子。
getTagsByPost(postId: number) ：獲取與特定帖子ID相關聯的所有標籤。
getAllTags() ：從WordPress站點獲取所有標籤。
getTagById(id: number) ：通過其ID獲取一個標籤。
getTagBySlug(slug: string) ：通過其slug獲取一個標籤。
getAllPages() ：從WordPress站點獲取所有頁面。
getPageById(id: number) ：通過其ID獲取一個頁面。
getPageBySlug(slug: string) ：通過其slug獲取一個頁面。
getAllAuthors() ：從WordPress網站獲取所有作者。
getAuthorById(id: number) ：通過其ID獲取單個作者。
getAuthorBySlug(slug: string) ：通過其slug來獲取單個作者。
getPostsByAuthor(authorId: number) ：獲取由其ID的特定作者寫的所有帖子。
getPostsByAuthorSlug(authorSlug: string) ：獲取特定作者slug撰寫的所有帖子。
getPostsByCategorySlug(categorySlug: string) ：通過其slug獲取屬於特定類別的所有帖子。
getPostsByTagSlug(tagSlug: string) ：獲取所有用特定標籤標記的帖子。
getFeaturedMediaById(id: number) ：通過其ID獲取特色媒體（例如，特色圖像）。
這些功能提供了一種與WordPress REST API進行交互的方便方法，並從WordPress站點中檢索各種類型的數據。它們可以在您的下一個.js應用程序中用於獲取和顯示WordPress內容。
lib/wordpress.d.ts文件包含針對各種WordPress實體和相關數據結構的打字稿類型定義。這是主要類型的概述：
Post ：代表WordPress帖子，其中具有諸如id ， title ， content ， excerpt ， author ， categories ， tags等屬性。
Category ：代表WordPress類別，具有諸如id ， name ， slug ， description ， parent和count的屬性。
Tag ：表示具有類似於Category的屬性的WordPress標籤，包括id ， name ， slug ， description和count 。
Page ：代表一個WordPress頁面，其中具有id ， title ， content ， excerpt ， author ， parent和template等屬性。
Author ：代表WordPress作者，具有諸如id ， name ， slug ， description ， avatar_urls和meta的屬性。
BlockType ：代表具有諸如name ， title ， description ， icon ， category ， attributes等屬性的WordPress塊類型。
EditorBlock ：代表WordPress編輯器中的一個塊，具有id ， name ， attributes ， innerBlocks和innerHTML之類的屬性。
TemplatePart ：代表WordPress中的模板部分，具有id ， slug ， theme ， type ， content ， title和status等屬性。
SearchResult ：代表WordPress的搜索結果，具有id ， title ， url ， type和subtype類的屬性。
FeaturedMedia ：在WordPress中代表特色媒體（例如，特色圖像），具有id ， title ， caption ， alt_text ， media_details和source_url等屬性。
FilterBarProps ：代表具有屬性authors ， tags ， categories和每個選定值的過濾欄組件的支柱。
這些類型的定義在使用下一個js應用程序中使用WordPress數據時提供類型的安全性和自動完成。他們確保您在與WordPress REST API交互時訪問正確的屬性並傳遞預期數據類型。
components/posts/post-card.tsx文件包含PostCard組件，該組件負責在應用程序中呈現單個明信片。這是該組件的概述：
post ：代表要渲染的WordPress帖子的Post對象。該組件使用lib/wordpress.ts的getFeaturedMediaById ， getAuthorById和getCategoryById函數獲取了與帖子相關聯的特色媒體，作者和類別。
它使用指定選項的toLocaleDateString方法格式化了發布日期。
該組件使用帖子的slug呈現指向單個帖子頁面的鏈接。
在鏈接內部，它顯示了帖子的特色圖像，標題，摘錄，類別和日期。
帖子標題和摘錄是使用dangerouslySetInnerHTML屬性渲染的，以處理HTML內容。
該組件應用各種CSS類來樣式的明信片，包括懸停效果和過渡。
要使用PostCard組件，請將其導入到所需的頁面或組件中，然後將Post對像作為post prop。
components/posts/filter.tsx文件包含FilterPosts組件，該組件提供了基於標籤，類別和作者的帖子的過濾接口。這是該組件的概述：
authors ：代表可用作者要過濾的Author對象的數組。tags ：代表要過濾的可用標籤的Tag對像數組。categories ：代表要過濾的可用類別Category數組。selectedAuthor ：代表當前選擇的作者ID的可選字符串。selectedTag ：代表當前選擇的標籤ID的可選字符串。selectedCategory ：代表當前選擇的類別ID的可選字符串。該組件使用Next.js的useRouter鉤子根據所選過濾器處理導航和URL更新。
它渲染了三個Select組件，用於按標籤，類別和作者過濾帖子。每個Select組件都顯示可用的選項，並允許用戶選擇一個特定的值或選擇“全部”以重置過濾器。
當更改過濾器值時，使用過濾器類型和選定值調用handleFilterChange函數。它相應地更新URL查詢參數並導航到更新的URL。
該組件還包含一個“重置過濾器”按鈕，單擊時，該按鈕調用handleResetFilters功能將導航返回/posts頁面，而無需應用任何過濾器。
選定的濾波器值作為Props將其傳遞給組件，並用於設置Select組件的初始值。
選定的濾波器值作為Props將其傳遞給組件，並用於設置Select組件的初始值。
選定的濾波器值作為Props將其傳遞給組件，並用於設置Select組件的初始值。
next-wp的站點地圖是在@/app/sitemap.ts上生成的，並將在您的網站上播放yourdomain.com/sitemap.xml 。為了正確設置您的站點地圖，請確保將site_domain在site.config.ts中更新為前端的域（不是您的WordPress實例）。
由Bridger Tower和9d8的Cameron Youngblood建造
