跳到主要内容

本站博客配置

Docusaurus 很强大,但是默认初始的时候并没有开启,为了获得一些强大的功能,我们需要研究各种功能的配置,多少有些浪费时间。这里记录一下,方便大家也方便自己以后查阅。

基本配置

{
themeConfig: {
// ...
navbar: {
items: [
// ...
{to: 'blog', label: '博客', position: 'left'}, // or position: 'right'
],
},
},
presets: [
[
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
({
blog: {
// 显示阅读时间
showReadingTime: true,

// 文章列表分页
postsPerPage: 10, // 你应该不会想改为 'ALL',把所有的文章都放在一页上吧?

// 侧边栏配置
blogSidebarTitle: "最近文章",
blogSidebarCount: 15, // 你应该不会想改为 'ALL',把所有的文章都放在侧边栏上吧?

// 禁用了未定义标签警告
onInlineTags: "ignore", // 为每个 Tag 定义元信息这个特性用起来太麻烦了,所以我们禁用了这个特性
// 禁用了无截断文章警告
onUntruncatedBlogPosts: "ignore", // 虽然我们应该为文章设置截断,但是忘记了我们也不想看到警告
},
}),
],
],
}

运行多套博客系统

本站启用了两套博客系统,一套是 preset-classic 里自带的,用来记录自己写的文章,同时我还想翻译一些外文,这不属于原创,只是搬运,文章的质量可能更高,但毕竟不是原创的,所以我不想和我的博客混在一起,Docusaurus 支持这样的操作,而且很简单。

docusaurus.config.js
{
plugins: [
[
"@docusaurus/plugin-content-blog",
{
showReadingTime: true,
feedOptions: {
type: ["rss", "atom"],
xslt: true,
},
id: "translated-blog",
path: "./blog-translated",
routeBasePath: "/translated",
blogTitle: "博客译站",
blogDescription: "翻译优秀的外文博客文章",
postsPerPage: 10,
blogSidebarTitle: "最近文章",
blogSidebarCount: 15,

onInlineTags: "ignore",
onUntruncatedBlogPosts: "ignore",
onInlineAuthors: "ignore",
},
],
],
}

只要增加了这个配置,就可以另起一套博客了,博客目录在 blog-translated 目录下,访问路径是 /translated

你可以把新的博客系统和原来的博客并列显示在首页导航上。

docusaurus.config.js
{
themeConfig: {
navbar: {
items: [
{
to: "/blog",
label: "博客",
position: "left",
},
{
to: "/translated",
label: "博客译站",
position: "left",
},
],
},
},
}

添加博文

需要注意以下几点:

  1. 可以把博文放到不同的文件夹,但这会影响路径,一般是按照日期来分类,比如 2022/01/01,这样的路径会被解析为 2022/01/01。如果博文不多,一般只按年区分就可以了,比如 2022/my-blog-title.md
  2. 如果不那么在意 SEO,文件名可以用中文,如果在意,可以把文件名用英文,尽量不要用拼音。
  3. 使用 <!--truncate--> 来截断文章,这样首页就不会显示全文了。
  4. 博文支持 front matter,可以添加作者、标签等信息。主要关注以下几个字段:
  • draft: 如果暂时不想发布
  • unlisted: 如果想上线,但是不想在列表页显示
  • hide_table_of_contents: 如果不想显示 TOC
  • date: 准确的发布时间可以用来调整文章排序