博客
初始化设置
设置站点的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 等URLauthor_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.js
的plugins
选项中指定另一个博客插件:
// 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',
},
],
],
};