Version: 3.4.0

📦 插件内容博客

提供博客功能，是Docusaurus的默认博客插件。

some features production only

feed 功能通过提取构建输出来工作，并且仅在生产环境中激活。

安装

npm
Yarn
pnpm

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

yarn add @docusaurus/plugin-content-blog

pnpm add @docusaurus/plugin-content-blog

tip

如果你使用预设的@docusaurus/preset-classic，你不需要将此插件作为依赖项安装。

你可以通过预设选项来配置此插件。

配置

接受的字段：

Name	Type	Default	Description
`path`	`string`	`'blog'`	Path to the blog content directory on the file system, relative to site dir.
`editUrl`	`string \| EditUrlFn`	`undefined`	Base URL to edit your site. The final URL is computed by `editUrl + relativePostPath`. Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links.
`editLocalizedFiles`	`boolean`	`false`	The edit URL will target the localized file, instead of the original unlocalized file. Ignored when `editUrl` is a function.
`blogTitle`	`string`	`'Blog'`	Blog page title for better SEO.
`blogDescription`	`string`	`'Blog'`	Blog page meta description for better SEO.
`blogSidebarCount`	`number \| 'ALL'`	`5`	Number of blog post elements to show in the blog sidebar. `'ALL'` to show all blog posts; `0` to disable.
`blogSidebarTitle`	`string`	`'Recent posts'`	Title of the blog sidebar.
`routeBasePath`	`string`	`'blog'`	URL route for the blog section of your site. DO NOT include a trailing slash. Use `/` to put the blog at root path.
`tagsBasePath`	`string`	`'tags'`	URL route for the tags section of your blog. Will be appended to `routeBasePath`.
`pageBasePath`	`string`	`'page'`	URL route for the pages section of your blog. Will be appended to `routeBasePath`.
`archiveBasePath`	`string \| null`	`'archive'`	URL route for the archive section of your blog. Will be appended to `routeBasePath`. DO NOT include a trailing slash. Use `null` to disable generation of archive.
`include`	`string[]`	`['*/.{md,mdx}']`	Array of glob patterns matching Markdown files to be built, relative to the content path.
`exclude`	`string[]`	See example configuration	Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the `include` option.
`postsPerPage`	`number \| 'ALL'`	`10`	Number of posts to show per page in the listing page. Use `'ALL'` to display all posts on one listing page.
`blogListComponent`	`string`	`'@theme/BlogListPage'`	Root component of the blog listing page.
`blogPostComponent`	`string`	`'@theme/BlogPostPage'`	Root component of each blog post page.
`blogTagsListComponent`	`string`	`'@theme/BlogTagsListPage'`	Root component of the tags list page.
`blogTagsPostsComponent`	`string`	`'@theme/BlogTagsPostsPage'`	Root component of the "posts containing tag" page.
`blogArchiveComponent`	`string`	`'@theme/BlogArchivePage'`	Root component of the blog archive page.
`remarkPlugins`	`any[]`	`[]`	Remark plugins passed to MDX.
`rehypePlugins`	`any[]`	`[]`	Rehype plugins passed to MDX.
`beforeDefaultRemarkPlugins`	`any[]`	`[]`	Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins.
`beforeDefaultRehypePlugins`	`any[]`	`[]`	Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins.
`truncateMarker`	`RegExp`	`/<!--\struncate\s-->/` \| `\{\/\\struncate\s\\/\}/`	Truncate marker marking where the summary ends.
`showReadingTime`	`boolean`	`true`	Show estimated reading time for the blog post.
`readingTime`	`ReadingTimeFn`	The default reading time	A callback to customize the reading time number displayed.
`authorsMapPath`	`string`	`'authors.yml'`	Path to the authors map file, relative to the blog content directory.
`feedOptions`	See below	`{type: ['rss', 'atom']}`	Blog feed.
`feedOptions.type`	`FeedType \| FeedType[] \| 'all' \| null`	Required	Type of feed to be generated. Use `null` to disable generation.
`feedOptions.createFeedItems`	`CreateFeedItemsFn \| undefined`	`undefined`	An optional function which can be used to transform and / or filter the items in the feed.
`feedOptions.limit`	`number \| null \| false`	`20`	Limits the feed to the specified number of posts, `false` or `null` for all entries. Defaults to `20`.
`feedOptions.title`	`string`	`siteConfig.title`	Title of the feed.
`feedOptions.description`	`string`	`${siteConfig.title} Blog`	Description of the feed.
`feedOptions.copyright`	`string`	`undefined`	Copyright message.
`feedOptions.language`	`string` (See documentation for possible values)	`undefined`	Language metadata of the feed.
`sortPosts`	`'descending' \| 'ascending'`	`'descending'`	Governs the direction of blog post sorting.
`processBlogPosts`	`ProcessBlogPostsFn`	`undefined`	An optional function which can be used to transform blog posts (filter, modify, delete, etc...).
`showLastUpdateAuthor`	`boolean`	`false`	Whether to display the author who last updated the blog post.
`showLastUpdateTime`	`boolean`	`false`	Whether 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`, use`fetch-depth: 0`.
`tags`	`string \| false \| null \| undefined`	`tags.yml`	Path to the YAML tags file listing pre-defined tags. Relative to the blog content directory.
`onInlineTags`	`'ignore' \| 'log' \| 'warn' \| 'throw'`	`warn`	The plugin behavior when blog posts contain inline tags (not appearing in the list of pre-defined tags, usually `tags.yml`).

类型

`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';

`CreateFeedItemsFn`

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

`ProcessBlogPostsFn`

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

示例配置

您可以通过预设选项或插件选项来配置此插件。

tip

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

预设选项
插件选项

如果您使用预设，请通过预设选项配置此插件：

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          path: 'blog',
          // 简单用例：字符串 editUrl
          // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
          // 高级用例：函数式 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')],</

如果您使用的是独立插件，请直接将选项提供给插件：

docusaurus.config.js
module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        path: 'blog',
        // 简单用例：字符串 editUrl
        // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
        // 高级用例：函数式 editUrl
        editUrl: ({locale, blogDirPath, blogPath, permalink}) =>
          `https://github.com/facebook/docusaurus/edit/main/website/${blogDirPath}/${blogPath}`,
        editLocalizedFiles: false,
        blogTitle: '博客标题',
        blogDescription: '博客',
        blogSidebarCount: 5,
        blogSidebarTitle: '所有文章',
        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: [<span class="token punctuation" style="color

Markdown 前置内容

Markdown 文档可以使用以下 Markdown front matter 元数据字段，由一行 --- 包围。

接受的字段：

Name	Type	Default	Description
`authors`	`Authors`	`undefined`	List of blog post authors (or unique author). Read the `authors` guide for more explanations. Prefer `authors` over the `author_*` front matter fields, even for single author blog posts.
`author`	`string`	`undefined`	⚠️ Prefer using `authors`. The blog post author's name.
`author_url`	`string`	`undefined`	⚠️ Prefer using `authors`. The URL that the author's name will be linked to. This could be a GitHub, X, Facebook profile URL, etc.
`author_image_url`	`string`	`undefined`	⚠️ Prefer using `authors`. The URL to the author's thumbnail image.
`author_title`	`string`	`undefined`	⚠️ Prefer using `authors`. A description of the author.
`title`	`string`	Markdown title	The blog post title.
`date`	`string`	File name or file creation time	The blog post creation date. 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`. Otherwise, it is the Markdown file creation time.
`tags`	`Tag[]`	`undefined`	A 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`)
`draft`	`boolean`	`false`	Draft blog posts will only be available during development.
`unlisted`	`boolean`	`false`	Unlisted 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_contents`	`boolean`	`false`	Whether to hide the table of contents to the right.
`toc_min_heading_level`	`number`	`2`	The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value.
`toc_max_heading_level`	`number`	`3`	The max heading level shown in the table of contents. Must be between 2 and 6.
`keywords`	`string[]`	`undefined`	Keywords meta tag, which will become the `<meta name="keywords" content="keyword1,keyword2,..."/>` in `<head>`, used by search engines.
`description`	`string`	The first line of Markdown content	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.
`image`	`string`	`undefined`	Cover 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.
`slug`	`string`	File path	Allows to customize the blog post URL (`/<routeBasePath>/<slug>`). Support multiple patterns: `slug: my-blog-post`, `slug: /my/path/to/blog/post`, slug: `/`.
`last_update`	`FrontMatterLastUpdate`	`undefined`	Allows 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;

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

// 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
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插件选项来配置YAML标签文件的路径。

按照惯例，插件将在您的内容文件夹的根目录中查找一个tags.yml文件。

此文件可以包含一系列预定义的标签。您可以在Markdown文件中通过它们的键引用这些标签，这要归功于tags front matter。

Keeping tags consistent

使用标签文件，您可以确保在插件内容集中标签的使用是一致的。使用onInlineTags: 'throw'插件选项来强制执行这种一致性，并防止使用即时声明的内联标签。

类型

提供的标签文件的YAML内容应遵循以下格式：

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>;

示例

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

国际化

首先阅读i18n介绍。

翻译文件位置

基础路径: website/i18n/[locale]/docusaurus-plugin-content-blog
多实例路径: website/i18n/[locale]/docusaurus-plugin-content-blog-[pluginId]
JSON 文件: 使用 docusaurus write-translations 提取
Markdown 文件: website/i18n/[locale]/docusaurus-plugin-content-blog

示例文件系统结构

website/i18n/[locale]/docusaurus-plugin-content-blog
│
│ # translations for website/blog
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md
│
│ # translations for the plugin options that will be rendered
└── options.json

安装​

配置​

类型​

EditUrlFn​

ReadingTimeFn​

FeedType​

CreateFeedItemsFn​

ProcessBlogPostsFn​

示例配置​

Markdown 前置内容​

标签文件​

类型​

示例​

国际化​

翻译文件位置​

示例文件系统结构​

安装

配置

类型