跳转至主内容
Version: 2.0.0-beta.9

📦 plugin-content-blog

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

安装

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

若您已安装 @docusaurus/preset-classic,您则并不需要安装此依赖。

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

配置

Accepted fields:

NameTypeDefaultDescription
pathstring'blog'Path to the blog content directory on the filesystem, relative to site dir.
editUrl!!crwdBlockTags_267_sgaTkcolBdwrc!!undefinedBase URL to edit your site. The final URL is computed by editUrl + relativeDocPath. Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links.
editLocalizedFilesbooleanfalseThe edit URL will target the localized file, instead of the original unlocalized file. Ignored when editUrl is a function.
blogTitlestring'Blog'Blog page title for better SEO.
blogDescriptionstring'Blog'Blog page meta description for better SEO.
blogSidebarCount!!crwdBlockTags_268_sgaTkcolBdwrc!!5Number of blog post elements to show in the blog sidebar. 'ALL' to show all blog posts; 0 to disable
blogSidebarTitlestring'Recent posts'Title of the blog sidebar.
routeBasePathstring'blog'URL route for the blog section of your site. 请务必不要添加末尾的斜杠。 Use / to put the blog at root path.
tagsBasePathstring'tags'URL route for the tags list page of your site. It is prepended to the routeBasePath.
archiveBasePathstring'/archive'URL route for the archive blog section of your site. It is prepended to the routeBasePath. 请务必不要添加末尾的斜杠。
includestring[]['**/*.{md,mdx}']Matching files will be included and processed.
excludestring[]参见示例配置被匹配的文件将不会有对应的路由被创建。
postsPerPage!!crwdBlockTags_269_sgaTkcolBdwrc!!10Number of posts to show per page in the listing page. Use 'ALL' to display all posts on one listing page.
blogListComponentstring'@theme/BlogListPage'Root component of the blog listing page.
blogPostComponentstring'@theme/BlogPostPage'Root component of each blog post page.
blogTagsListComponentstring'@theme/BlogTagsListPage'Root component of the tags list page
blogTagsPostsComponentstring'@theme/BlogTagsPostsPage'Root component of the "posts containing tag" page.
remarkPluginsany[][]Remark plugins passed to MDX.
rehypePluginsany[][]Rehype plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]在默认的 Docusaurus Remark 插件之前被传递给 MDX 的 Remark 插件。
beforeDefaultRehypePluginsany[][]在默认的 Docusaurus Rehype 插件之前被传递给 MDX 的 Rehype 插件。
truncateMarkerstring/<!--\s*(truncate)\s*-->/Truncate marker, can be a regex or string.
showReadingTimebooleantrueShow estimated reading time for the blog post.
readingTimeReadingTimeFunctionOptionThe default reading timeA callback to customize the reading time number displayed.
authorsMapPathstring'authors.yml'Path to the authors map file, relative to the blog content directory specified with path. Can also be a json file.
feedOptionsSee below{type: ['rss', 'atom']}Blog feed. If undefined, no rss feed will be generated.
feedOptions.type!!crwdBlockTags_270_sgaTkcolBdwrc!! (or array of multiple options)RequiredType of feed to be generated.
feedOptions.titlestringsiteConfig.titleTitle of the feed.
feedOptions.descriptionstring!!crwdBlockTags_271_sgaTkcolBdwrc!!Description of the feed.
feedOptions.copyrightstringundefinedCopyright message.
feedOptions.languagestring (See documentation for possible values)undefinedLanguage metadata of the feed.
type EditUrlFunction = (params: {
blogDirPath: string;
blogPath: string;
permalink: string;
locale: string;
}) => string | undefined;

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

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

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

示例配置

Here's an example configuration object.

You can provide it as preset options or plugin options.

tip

Most Docusaurus users configure this plugin through the preset options.

const config = {
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}) => {
return `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('remark-math')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
truncateMarker: /<!--\s*(truncate)\s*-->/,
showReadingTime: true,
feedOptions: {
type: '',
title: '',
description: '',
copyright: '',
language: undefined,
},
};

Preset options

If you use a preset, configure this plugin through the preset options:

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
path: 'blog',
// ... configuration object here
},
},
],
],
};

Plugin options

If you are using a standalone plugin, provide options directly to the plugin:

docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-content-blog',
{
path: 'blog',
// ... configuration object here
},
],
],
};

Markdown 前言

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

Accepted fields:

NameTypeDefaultDescription
authorsAuthorsundefinedList of blog post authors (or unique author). Read the authors guide for more explanations. Prefer authors over the author_* FrontMatter fields, even for single author blog posts.
authorstringundefined⚠️ Prefer using authors. The blog post author's name.
author_urlstringundefined⚠️ Prefer using authors. The URL that the author's name will be linked to. This could be a GitHub, Twitter, Facebook profile URL, etc.
author_image_urlstringundefined⚠️ Prefer using authors. The URL to the author's thumbnail image.
author_titlestringundefined⚠️ Prefer using authors. A description of the author.
titlestringMarkdown titleThe blog post title.
datestringFile name or file creation timeThe 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.
tagsTag[]undefinedA list of strings or objects of two string fields label and permalink to tag to your post.
draftbooleanfalseA boolean flag to indicate that the blog post is work-in-progress and therefore should not be published yet. 但是,草稿仍将在开发模式中显示。
hide_table_of_contentsbooleanfalseWhether to hide the table of contents to the right.
toc_min_heading_levelnumber2The 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_levelnumber3The max heading level shown in the table of contents. Must be between 2 and 6.
keywordsstring[]undefinedKeywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
descriptionstringThe first line of Markdown contentThe 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 when displaying the link to your post.
slugstringFile pathAllows to customize the blog post url (/<routeBasePath>/<slug>). Support multiple patterns: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.
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 FrontMatter authors field allows various possible shapes
type Authors = AuthorKey | Author | (AuthorKey | Author)[];

示例:

---
title: Welcome Docusaurus v2
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: [hello, docusaurus-v2]
description: This is my first post on Docusaurus 2.
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---
A Markdown blog post

i18n

请先阅读 i18n 简介

翻译文件位置

  • 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

文件系统结构示例

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