跳到主要内容

博客功能

初始设置#

要为网站添加博客功能，请先创建一个 blog 目录。

然后，在 docusaurus.config.js 文件中添加一个指向博客的链接：

docusaurus.config.js
module.exports = {
themeConfig: {
// ...
navbar: {
items: [
// ...
{to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right'
],
},
},
};

添加文章#

要发布文章，请在 blog 目录中创建一个文件，文件名的格式为 YYYY-MM-DD-my-blog-post-title.md。文章的发布日期将从文件名中提取。

例如，my-website/blog/2019-09-05-hello-docusaurus-v2.md 文件：

---
title: Welcome Docusaurus v2
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://graph.facebook.com/611217057/picture/?height=200&width=200
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
---
Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://docusaurus.io/).
<!--truncate-->
This is my first post on Docusaurus 2.
A whole bunch of exploration to follow.

文章属性#

title 是唯一必须的字段。但是，我们还提供了将作者信息以及其它参数添加到博客文章中的字段。

  • author - 用于显示的作者的姓名。
  • author_url - 作者的姓名所链接到的 URL。可以是 GitHub、Twitter、Facebook 个人资料链接等。
  • author_image_url - 指向作者头像图片的链接。
  • author_title - 作者简介。
  • title - 文章标题。
  • tags - 文章标签的列表。
  • draft - 这是一个布尔（boolean）值，表明此文章正在写作中，因此不发布。但是，草稿状态的文章在网站开发过程中是显示的。
  • description: 文章的描述信息，将用于填充 <head> 中的 <meta name="description" content="..."/> 和 <meta property="og:description" content="..."/>，用于搜索引擎索引该文章。如果此字段未设置，则将使用文章第一行的内容代替。
  • image: 文章的封面图，在显示只想文章的链接时使用。
  • hide_table_of_contents: 是否隐藏文章的目录列表（显示在页面右侧）。默认为 false。

截取摘要#

在你的博客文章中使用 <!--truncate--> 来标记文章的摘要并显示在文章列表中。在 <!--truncate--> 标记上方的内容都将成为摘要。例如：

---
title: Truncation Example
---
All these will be part of the blog post summary.
Even this.
<!--truncate-->
But anything from here on down will not be.
Not this.
Or this.

信息流（Feed）#

通过设置 feedOptions 来告诉 Docusaurus 生成 RSS/Atom 信息流。 默认是生成 RSS 和 Atom 信息流的。如需禁禁止生成信息流，请将 feedOptions.type 设置为 null。

feedOptions?: {
type?: 'rss' | 'atom' | 'all' | null;
title?: string;
description?: string;
copyright: string;
language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
};

用法示例：

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
feedOptions: {
type: 'all',
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
},
},
},
],
],
};

访问信息流：

RSS 信息流可以通过如下链接访问：

https://{your-domain}/blog/rss.xml

Atom 信息流可以通过如下链接访问：

https://{your-domain}/blog/atom.xml

高级主题#

纯博客模式#

你可以取消 Docusaurus 2 网站默认的首页（或落地页），而将博客的文章列表作为首页。通过将 routeBasePath 设置为 '/' 即可。

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: false,
blog: {
path: './blog',
routeBasePath: '/', // Set this value to '/'.
},
},
],
],
};
caution

不要忘记删除现有的首页，即 ./src/pages/index.js 文件，否则将导致两个文件映射到同一路由上！

你也可以为文章列表添加描述信息，以获得更好的 SEO 效果：

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
blogTitle: 'Docusaurus blog!',
blogDescription: 'A docusaurus powered blog!',
},
},
],
],
};

多博客实例#

默认情况下，classic 主题会假设每个网站只有一个博客，因此仅包含了一个博客插件（即 plugin-content-blog 插件）的实例。如果你希望在一个网站上拥有多个博客，那也没问题！你可以通过在 docusaurus.config.js 配置文件中的 plugins 配置项中添加另一个博客插件即可。

通过 routeBasePath 参数为第二个博客设置访问链接（URL）。请注意，此处的 routeBasePath 必须与第一个博客的设置不同，否则可能产生路径冲突！另外，将 path 设置为包含第二个博客内容的目录的路径。

如 多实例插件 所述，你需要为每个插件实例分配一个唯一的 id。

docusaurus.config.js
module.exports = {
// ...
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* 此参数对于任何支持多实例的插件都需要
*/
id: 'second-blog',
/**
* URL route for the blog section of your site.
* *不要* 在末尾添加斜线（/）
*/
routeBasePath: 'my-second-blog',
/**
* 指向存放博客文章的目录的路径。相对于网站根目录。
*/
path: './my-second-blog',
},
],
],
};

我们创建了第二个博客作为此功能的示例，可以通过 此链接 访问。

编辑此页