跳转至主内容
Version: 2.0.0-alpha.74

博客

初始设置#

要为您的站点设置博客,请先创建 blog 目录。

然后,在 docusaurus.config.js 内创建指向您博客的链接项。

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

添加文章#

要发布博文,请在 blog 目录内创建名称类似 YYYY-MM-DD-博文名称.md 的文件。 发帖日期将自动从文件名获取。

下方是 my-website/blog/2019-09-05-hello-docusaurus-v2.md 文件示例:

---
title: 欢迎来到 Docusaurus v2
author: Joel Marcey
author_title: 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: 这是我在 Docusaurus 2 上的首篇博文。
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---
欢迎来到此博客。 此博客使用 [**Docusaurus 2 alpha**](https://docusaurus.io/) 构建。
<!--truncate-->
这是我在 Docusaurus 2 上的首篇博文。
下方是一系列内容。

页眉选项#

页眉中必填项仅为 title;但是,我们也提供了包括作者信息在内的其他选项。

  • author - 要显示的作者名。
  • author_url - 作者名指向的 URL。 这可为 GitHub、Twitter、Facebook 页面等等。
  • author_image_url - 作者缩略图的 URL。
  • author_title - 作者简介。
  • title - 博文标题。
  • tags - 博文标签。
  • draft - 标识博文为草稿且不应被发布的布尔值标签。 但是,草稿仍将在开发模式中显示。
  • description - 博文描述,这将被放入 <head><meta name="description" content="..."/><meta property="og:description" content="..."/> 中,且可被搜索引擎使用。 若此字段不存在,则其将默认为博文的第一行。
  • image - 显示博文链接时所用的缩略图或封面。
  • hide_table_of_contents - 是否隐藏右侧的目录。 默认情况下为 false

摘要截取#

在博文中使用 <!--truncate--> 来标记文章摘要。 <!--truncate--> 以上的内容均将成为摘要。 举个例子:

---
title: 摘要示例
---
这些都将作为博文摘要。
甚至包括这一行。
<!--truncate-->
但这一行和这一行下方的内容将不会被截取。
这行不会。
这行也不会。

订阅源#

您可以通过传递 feedOptions 参数来生成 RSS/Atom 订阅源。 默认情况下将自动生成 RSS 及 Atom 订阅源。 要关闭订阅源生成,请将 feedOptions.type 设置为 null

feedOptions?: {
type?: 'rss' | 'atom' | 'all' | null;
title?: string;
description?: string;
copyright: string;
language?: string; // 语言代码请参见: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: `版权所有 © ${new Date().getFullYear()} Facebook, Inc.`,
},
},
},
],
],
};

访问订阅源:

您的 RSS 订阅源位于:

https://{您的域名}/blog/rss.xml

Atom 源:

https://{您的域名}/blog/atom.xml

进阶议题#

仅博客模式#

您可将去除您 Docusaurus 2 站点上的着陆页,并将博文列表设置为首页。 将 routeBasePath 设置为 '/' 以指定为根目录。

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: false,
blog: {
path: './blog',
routeBasePath: '/', // 将其设置为 '/'。
},
},
],
],
};
caution

别忘记在之后删除 ./src/pages/index.js 处的默认首页,否则两个文件均将映射到相同的路由!

您也可以在博文列表页添加元描述以来进行搜索引擎优化:

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
blogTitle: 'Docusaurus 博客!',
blogDescription: '基于 Docusaurus 的博客!',
},
},
],
],
};

多个博客#

默认情况下,经典主题假设一个网站仅有一个博客,故仅有一个博客插件实例。 若您想在单一站点上部署多个博客,这也可以! 您可以在 docusaurus.config.js 中的 plugins 选项中指定其他博客插件来添加博客。

routeBasePath 设置为第二个博客的 URL 路由。 请注意,此处的 routeBasePath 应与第一个博客的路由不同,否则将导致路径冲突问题! 此外,请将 path 设置为包含您第二个博客条目的目录路径。

多实例插件中所述,您需要为每个插件分配唯一 ID。

docusaurus.config.js
module.exports = {
// ...
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* 多实例插件必填。
*/
id: 'second-blog',
/**
* 您网站上博客的 URL 路由。
* *请务必不要*添加斜杠。
*/
routeBasePath: 'my-second-blog',
/**
* 相对于站点目录的文件系统数据路径。
*/
path: './my-second-blog',
},
],
],
};

为了演示,我们在此处部署了第二个博客。