Skip to main content

博客

初始化设置

设置站点的blog, 先创建 blog 目录. 然后向docusaurus.config.js添加item链接:

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://v2.docusaurus.io/).

<!--truncate-->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

内容头选项

只有title字段必选, 同时我们提供了一些额外选项用于向你的博文添加作者信息.

  • author - 用来显示作者的姓名
  • author_url - 作者姓名链接的地址, 可以是GitHub, Facebook Twitter 等URL
  • author_image_url - 作者图片地址
  • author_title - 作者信息描述
  • title - 博文标题
  • tags - 博文标签列表
  • draft - 值为boolean, 用来标识还处于草稿中的博文. 草稿中的博文不会被发布, 但是会在开发模式中显示.
  • description - 博文信息描述, 用来在<head> 中生成 <meta name="description" content="..."/><meta property="og:description" content="..."/>, 用于SEO. 如果此值没有提供, 默认使用内容第一行的值.
  • image: 显示博文链接是的缩略图
  • hide_table_of_contents: 是否隐藏右边的目录, 默认 false.

摘要截取

可以在博文中使用<!--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.

高级主题

Blog-only 模式

你可以以没有landing页面(首页)的方式运行Docusaurus 2, 取而代之使用博客列表页面作为首页. 设置rootBasePath的值为/, 表示这是根路径:

// docusaurus.config.js

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

注意, 不要忘记删除现有首页./src/pages/index.js, 否则会有两个文件映射到同一个路由.

你也可以给博客列表添加meta信息, 支持更好的SEO:

//docusaurus.config.js

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

多个博客

经典模式默认假设一个站点只有一个博客, 因此仅包含了一个博客插件实例. 如果你想在一个站点有多个博客, 也是可以的. 你可以在docusaurus.config.jsplugins选项中指定另一个博客插件:

// docusaurus.config.js 
module.exports = {
// ...
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* Required for any multi-instance plugin
*/
id: 'second-blog',
/**
* URL route for the blog section of your site.
* *DO NOT* include a trailing slash.
*/
routeBasePath: 'my-second-blog',
/**
* Path to data on filesystem relative to site dir.
*/
path: './my-second-blog',
},
],
],
};

原文 - Docusaurus blog 文档规范