跳到主要内容
版本:3.5.2

📦 plugin-content-blog

Provides the Blog feature and is the default blog plugin for Docusaurus.

some features production only

The feed feature works by extracting the build output, and is only active in production.

Installation

npm install --save @docusaurus/plugin-content-blog
提示

If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

You can configure this plugin through the preset options.

Configuration

接受的字段:

参数类型默认值描述
pathstring'blog'博客内容目录的文件系统路径,相对于站点目录。
editUrlstring | EditUrlFnundefined编辑文档的基础 URL。 The final URL is computed by editUrl + relativePostPath. 使用函数可以允许你更精细地控制每一个文件。 完全忽略这个变量就会禁用编辑链接。
editLocalizedFilesbooleanfalse编辑 URL 会指向本地化的文件,而不是原始的未翻译文件。 Ignored when editUrl is a function.
blogTitlestring'Blog'用于增进 SEO 的博客页面标题。
blogDescriptionstring'Blog'用于增进 SEO 的博客页面元描述。
blogSidebarCountnumber | 'ALL'5在博客侧边栏中展示的博文项目数量。 'ALL' to show all blog posts; 0 to disable.
blogSidebarTitlestring'Recent posts'博客侧边栏的标题。
routeBasePathstring'blog'站点博客部分的 URL 前缀。 DO NOT include a trailing slash. Use / to put the blog at root path.
tagsBasePathstring'tags'博客标签部分的 URL 前缀。 Will be appended to routeBasePath.
pageBasePathstring'page'URL route for the pages section of your blog. Will be appended to routeBasePath.
archiveBasePathstring | null'archive'博客归档部分的 URL 前缀。 Will be appended to routeBasePath. DO NOT include a trailing slash. Use null to disable generation of archive.
authorsBasePathstring'authors'URL route for the authors pages of your blog. Will be appended to path.
includestring[]['**/*.{md,mdx}']相对于内容路径的 glob 模式列表,匹配到的 Markdown 文件会被构建。
excludestring[]See example configurationGlob 模式列表,匹配到的 Markdown 文件会被排除。 Serves as refinement based on the include option.
postsPerPagenumber | 'ALL'10每个博文列表页面显示的博文数量。 Use 'ALL' to display all posts on one listing page.
blogListComponentstring'@theme/BlogListPage'博客列表页的根组件。
blogPostComponentstring'@theme/BlogPostPage'每个博文页面的根组件。
blogTagsListComponentstring'@theme/BlogTagsListPage'标签列表页的根组件。
blogTagsPostsComponentstring'@theme/BlogTagsPostsPage'「包含某标签的所有博文」页面的根组件。
blogArchiveComponentstring'@theme/BlogArchivePage'博客归档页的根组件。
blogAuthorsPostsComponentstring'@theme/Blog/Pages/BlogAuthorsPostsPage'Root component of the blog author page.
blogAuthorsListComponentstring'@theme/Blog/Pages/BlogAuthorsListPage'Root component of the blog authors page index.
remarkPluginsany[][]传递给 MDX 的 Remark 插件。
rehypePluginsany[][]传递给 MDX 的 Rehype 插件。
rehypePluginsany[][]Recma plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]在 Docusaurus 默认 Remark 插件之前传递给 MDX 的自定义 Remark 插件。
beforeDefaultRehypePluginsany[][]在 Docusaurus 默认 Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。
truncateMarkerRegExp/<!--\s*truncate\s*-->/ | \{\/\*\s*truncate\s*\*\/\}/标明摘要结束处的标记。
showReadingTimebooleantrue在博文上显示估计阅读时间。
readingTimeReadingTimeFn默认阅读时间用于自定义显示的阅读时间数字的回调。
authorsMapPathstring'authors.yml'作者记录表的文件路径,相对于博客内容目录。
feedOptionsSee below{type: ['rss', 'atom']}博客订阅源。
feedOptions.typeFeedType | FeedType[] | 'all' | nullRequired要生成的订阅源类型。 Use null to disable generation.
feedOptions.createFeedItemsCreateFeedItemsFn | undefinedundefinedAn optional function which can be used to transform and / or filter the items in the feed.
feedOptions.limitnumber | null | false20Limits the feed to the specified number of posts, false or null for all entries. Defaults to 20.
feedOptions.titlestringsiteConfig.title订阅源的标题。
feedOptions.descriptionstring`${siteConfig.title} Blog`订阅源的描述。
feedOptions.copyrightstringundefined版权信息。
feedOptions.xsltboolean | FeedXSLTOptionsundefined版权信息。
feedOptions.languagestring (See documentation for possible values)undefined订阅源的语言元数据。
sortPosts'descending' | 'ascending' 'descending'决定博文排序的方向。
processBlogPostsProcessBlogPostsFnundefinedAn optional function which can be used to transform blog posts (filter, modify, delete, etc...).
showLastUpdateAuthorbooleanfalseWhether to display the author who last updated the blog post.
showLastUpdateTimebooleanfalseWhether to display the last date the blog post was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub actions/checkout, usefetch-depth: 0.
tagsstring | false | null | undefinedtags.ymlPath to the YAML tags file listing pre-defined tags. Relative to the blog content directory.
onInlineTags'ignore' | 'log' | 'warn' | 'throw'warnThe plugin behavior when blog posts contain inline tags (not appearing in the list of pre-defined tags, usually tags.yml).
onUntruncatedBlogPosts'ignore' | 'log' | 'warn' | 'throw'warnThe plugin behavior when blog posts do not contain a truncate marker.

Types

EditUrlFn

type EditUrlFunction = (params: {
blogDirPath: string;
blogPath: string;
permalink: string;
locale: string;
}) => string | undefined;

ReadingTimeFn

type ReadingTimeOptions = {
wordsPerMinute: number;
wordBound: (char: string) => boolean;
};

type ReadingTimeCalculator = (params: {
content: string;
frontMatter?: BlogPostFrontMatter & Record<string, unknown>;
options?: ReadingTimeOptions;
}) => number;

type ReadingTimeFn = (params: {
content: string;
frontMatter: BlogPostFrontMatter & Record<string, unknown>;
defaultReadingTime: ReadingTimeCalculator;
}) => number | undefined;

FeedType

type FeedType = 'rss' | 'atom' | 'json';

FeedXSLTOptions

Permits to style the blog XML feeds so that browsers render them nicely with XSLT.

  • Use true to let the blog use its built-in .xsl and .css files to style the blog feed
  • Use a falsy value (undefined | null | false) to disable the feature
  • Use a string to provide a file path to a custom .xsl file relative to the blog content folder. By convention, you must provide a .css file with the exact same name.
type FeedXSLTOptions =
| boolean
| undefined
| null
| {
rss?: string | boolean | null | undefined;
atom?: string | boolean | null | undefined;
};

CreateFeedItemsFn

type CreateFeedItemsFn = (params: {
blogPosts: BlogPost[];
siteConfig: DocusaurusConfig;
outDir: string;
defaultCreateFeedItemsFn: CreateFeedItemsFn;
}) => Promise<BlogFeedItem[]>;

ProcessBlogPostsFn

type ProcessBlogPostsFn = (params: {
blogPosts: BlogPost[];
}) => Promise<void | BlogPost[]>;

Example configuration

你可以通过预设选项或插件选项来配置这个插件。

提示

大多数 Docusaurus 用户通过预设选项配置此插件。

如果你使用预设,你可以通过预设选项配置这个插件:

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
path: 'blog',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
editUrl: ({locale, blogDirPath, blogPath, permalink}) =>
`https://github.com/facebook/docusaurus/edit/main/website/${blogDirPath}/${blogPath}`,
editLocalizedFiles: false,
blogTitle: 'Blog title',
blogDescription: 'Blog',
blogSidebarCount: 5,
blogSidebarTitle: 'All our posts',
routeBasePath: 'blog',
include: ['**/*.{md,mdx}'],
exclude: [
'**/_*.{js,jsx,ts,tsx,md,mdx}',
'**/_*/**',
'**/*.test.{js,jsx,ts,tsx}',
'**/__tests__/**',
],
postsPerPage: 10,
blogListComponent: '@theme/BlogListPage',
blogPostComponent: '@theme/BlogPostPage',
blogTagsListComponent: '@theme/BlogTagsListPage',
blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
remarkPlugins: [require('./my-remark-plugin')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
truncateMarker: /<!--\s*(truncate)\s*-->/,
showReadingTime: true,
feedOptions: {
type: '',
title: '',
description: '',
copyright: '',
language: undefined,
createFeedItems: async (params) => {
const {blogPosts, defaultCreateFeedItems, ...rest} = params;
return defaultCreateFeedItems({
// keep only the 10 most recent blog posts in the feed
blogPosts: blogPosts.filter((item, index) => index < 10),
...rest,
});
},
},
},
},
],
],
};

Markdown front matter

Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

接受的字段:

参数类型默认值描述
authorsAuthorsundefined博文作者列表(或者唯一作者)。 Read the authors guide for more explanations. Prefer authors over the author_* front matter fields, even for single author blog posts.
authorstringundefined⚠️ Prefer using authors. 博文作者的名字。
author_urlstringundefined⚠️ Prefer using authors. 作者名字链接指向的 URL。 This could be a GitHub, X, Facebook profile URL, etc.
author_image_urlstringundefined⚠️ Prefer using authors. 作者头像图片的 URL。
author_titlestringundefined⚠️ Prefer using authors. 作者的描述。
titlestringMarkdown 标题博文的标题。
datestring文件名或文件创建时间博文的创建时间。 If not specified, this can be extracted from the file or folder name, e.g, 2021-04-15-blog-post.mdx, 2021-04-15-blog-post/index.mdx, 2021/04/15/blog-post.mdx. 如果也没有,会使用 Markdown 文件的创建时间。
tagsTag[]undefinedA list of strings or objects of two string fields label and permalink to tag to your post. Strings can be a reference to keys of a tags file (usually tags.yml)
draftbooleanfalseDraft blog posts will only be available during development.
unlistedbooleanfalseUnlisted blog posts will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link.
hide_table_of_contentsbooleanfalse是否隐藏右侧的文档目录。
toc_min_heading_levelnumber2目录中显示的最小标题层级。 必须介于 2 到 6 之间,并且小于等于最大值。
toc_max_heading_levelnumber3目录中显示的最大标题层级。 必须介于 2 和 6。
keywordsstring[]undefinedKeywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
descriptionstringMarkdown 正文的第一行The description of your document, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head>, used by search engines.
imagestringundefinedCover or thumbnail image that will be used as the <meta property="og:image" content="..."/> in the <head>, enhancing link previews on social media and messaging platforms.
slugstring文件路径Allows to customize the blog post URL (/<routeBasePath>/<slug>). Support multiple patterns: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.
last_updateFrontMatterLastUpdateundefinedAllows overriding the last update author/date. Date can be any parsable date string.
type FrontMatterLastUpdate = {date?: string; author?: string};

type Tag = string | {label: string; permalink: string};

// An author key references an author from the global plugin authors.yml file
type AuthorKey = string;

// Social platform name -> Social platform link
// Example: {MyPlatform: 'https://myplatform.com/myusername'}
// Pre-defined platforms ("x", "github", "twitter", "linkedin", "stackoverflow") accept handles:
// Example: {github: 'slorber'}
type AuthorSocials = Record<string, string>;

type Author = {
key?: AuthorKey;
name: string;
title?: string;
url?: string;
image_url?: string;
socials?: AuthorSocials;
};

// The front matter authors field allows various possible shapes
type Authors = AuthorKey | Author | (AuthorKey | Author)[];

示例:

---
title: Welcome Docusaurus
authors:
- slorber
- yangshun
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
socials:
x: joelmarcey
github: JoelMarcey
tags: [docusaurus]
description: This is my first post on Docusaurus.
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

A Markdown blog post

Tags File

Use the tags plugin option to configure the path of a YAML tags file.

By convention, the plugin will look for a tags.yml file at the root of your content folder(s).

This file can contain a list of predefined tags. You can reference these tags by their keys in Markdown files thanks to the tags front matter.

Keeping tags consistent

Using a tags file, you can ensure that your tags usage is consistent across your plugin content set. Use the onInlineTags: 'throw' plugin option to enforce this consistency and prevent usage of inline tags declared on the fly.

Types

The YAML content of the provided tags file should respect the following shape:

type Tag = {
label?: string; // Tag display label
permalink?: string; // Tag URL pathname segment
description?: string; // Tag description displayed in the tag page
};

type TagsFileInput = Record<string, Partial<Tag> | null>;

Example

tags.yml
releases:
label: 'Product releases'
permalink: '/product-releases'
description: 'Content related to product releases.'

# A partial tag definition is also valid
announcements:
label: 'Announcements'

# An empty tag definition is also valid
# Other attributes will be inferred from the key
emptyTag:
content.md
---
tags: [releases, announcements, emptyTag]
---

# Title

Content

Authors File

Use the authors plugin option to configure the path of a YAML authors file.

By convention, the plugin will look for a authors.yml file at the root of your blog content folder(s).

This file can contain a list of predefined global blog authors. You can reference these authors by their keys in Markdown files thanks to the authors front matter.

Types

The YAML content of the provided authors file should respect the following shape:

type AuthorsMapInput = {
[authorKey: string]: AuthorInput;
};

type AuthorInput = {
name?: string;
title?: string;
description?: string;
imageURL?: string;
url?: string;
email?: string;
page?: boolean | {permalink: string};
socials?: Record<string, string>;
[customAuthorAttribute: string]: unknown;
};

Example

tags.yml
slorber:
name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
page: true
socials:
x: sebastienlorber
github: slorber

jmarcey:
name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
email: [email protected]
page:
permalink: '/joel-marcey'
socials:
x: joelmarcey
github: JoelMarcey
blog/my-blog-post.md
---
authors: [slorber, jmarcey]
---

# My Blog Post

Content

i18n

Read the i18n introduction first.

Translation files location

  • Base path: website/i18n/[locale]/docusaurus-plugin-content-blog
  • Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-blog-[pluginId]
  • JSON files: extracted with docusaurus write-translations
  • Markdown files: website/i18n/[locale]/docusaurus-plugin-content-blog

Example file-system structure

website/i18n/[locale]/docusaurus-plugin-content-blog

# website/blog 的翻译
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md

# 会被渲染的选项的翻译
└── options.json