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建造
