博客功能

优质

小牛编辑

146浏览

2023-12-01

初始设置

要为网站添加博客功能，请先创建一个 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**](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。

截取摘要

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

---
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: {

访问信息流：

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',
      },
    ],
  ],
};

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