WordPress 无头 CMS 的 Next.js 起始模板

观看演示视频

9d8 制作的 WordPress_Next_js 起始模板

这是一个起始模板，用于构建使用 WordPress REST API 从 WordPress 站点获取数据的 Next.js 应用程序。该模板包含了从 WordPress 站点获取文章、分类、标签、作者和特色媒体的函数，并在 Next.js 应用程序中渲染它们。

next-wp 使用 Next.js 14、React、Typescript、Tailwind、shadcn/ui 和 brijr/craft 构建。它与 brijr/components 搭配使用，可以实现快速开发体验。由 9d8 构建。

概述

lib/wordpress.ts -> 通过 REST API 获取 WordPress CMS 的函数
lib/wordpress.d.ts -> WP REST API 的类型声明
components/posts/post-card.tsx -> 文章的组件和样式
app/posts/filter.tsx -> 处理文章过滤的组件

需要在 .env.local 文件中设置两个 env 变量：

WORDPRESS_URL="https://wordpress.com"
WORDPRESS_HOSTNAME="wordpress.com"

你可以在 .env.example 文件（以及 Vercel）中找到 .env.local 文件的示例：

WordPress 函数

lib/wordpress.ts 文件包含了几个使用 WordPress REST API 从 WordPress 站点获取数据的函数。以下是每个函数的简要概述：

getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }): 从 WordPress 站点获取所有文章。可以选择传递过滤参数，按作者、标签或分类过滤文章。
getPostById(id: number): 通过 ID 获取单篇文章。
getPostBySlug(slug: string): 通过别名获取单篇文章。
getAllCategories(): 从 WordPress 站点获取所有分类。
getCategoryById(id: number): 通过 ID 获取单个分类。
getCategoryBySlug(slug: string): 通过别名获取单个分类。
getPostsByCategory(categoryId: number): 通过分类 ID 获取属于特定分类的所有文章。
getPostsByTag(tagId: number): 通过标签 ID 获取带有特定标签的所有文章。
getTagsByPost(postId: number): 通过文章 ID 获取与特定文章相关的所有标签。
getAllTags(): 从 WordPress 站点获取所有标签。
getTagById(id: number): 通过 ID 获取单个标签。
getTagBySlug(slug: string): 通过别名获取单个标签。
getAllPages(): 从 WordPress 站点获取所有页面。
getPageById(id: number): 通过 ID 获取单个页面。
getPageBySlug(slug: string): 通过别名获取单个页面。
getAllAuthors(): 从 WordPress 站点获取所有作者。
getAuthorById(id: number): 通过 ID 获取单个作者。
getAuthorBySlug(slug: string): 通过别名获取单个作者。
getPostsByAuthor(authorId: number): 通过作者 ID 获取特定作者写的所有文章。
getPostsByAuthorSlug(authorSlug: string): 通过作者别名获取特定作者写的所有文章。
getPostsByCategorySlug(categorySlug: string): 通过分类别名获取属于特定分类的所有文章。
getPostsByTagSlug(tagSlug: string): 通过标签别名获取带有特定标签的所有文章。
getFeaturedMediaById(id: number): 通过 ID 获取特色媒体（如特色图片）。

这些函数提供了一种方便的方式与 WordPress REST API 交互，并从你的 WordPress 站点检索各种类型的数据。它们可以在你的 Next.js 应用程序中用于获取和显示 WordPress 内容。

WordPress 类型

lib/wordpress.d.ts 文件包含了各种 WordPress 实体和相关数据结构的 TypeScript 类型定义。以下是主要类型的概述：

Post: 表示一个 WordPress 文章，包含诸如 id、title、content、excerpt、author、categories、tags 等属性。
Category：表示 WordPress 分类，具有 id、name、slug、description、parent 和 count 等属性。
Tag：表示 WordPress 标签，具有与 Category 类似的属性，包括 id、name、slug、description 和 count。
Page：表示 WordPress 页面，具有 id、title、content、excerpt、author、parent 和 template 等属性。
Author：表示 WordPress 作者，具有 id、name、slug、description、avatar_urls 和 meta 等属性。
BlockType：表示 WordPress 区块类型，具有 name、title、description、icon、category、attributes 等属性。
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 以及每个选项的选定值。

这些类型定义在 Next.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 类来设置文章卡片样式，包括悬停效果和过渡。