Hugo mermaid替换

辛琪

2021-08-19 2021-08-19 约 1198 字预计阅读 3 分钟次阅读

好好配置了一下Hugo

换了个新的主题，原来的主题有Bug。
重新配置了MathJax和mermaid，原本随便弄的那个用不了了。
给旧文章换了标题
给文章打了tags
中文文章要设置isCJKLanguage=true不然字数是错的
重新写了部署脚本

换主题

之前用的主题叫hugo_theme_pickles，研究了下发现bug非常严重。它对主页的渲染就存在很大的问题，文章不会显示在主页上。遂尝试更新。更新之后问题更大了，除了Posts菜单下的文章都显示不出来了。而且看了一眼那个项目的提交历史也是非常混乱……

去Hugo主题页找主题咯，最后发现自己还是喜欢Hermit这种简约的风格。

有些主题会让你把它加到你Git储存库的submodules，说是方便你升级。其实这个东西加上去很容易，要删就麻烦了

添加只要一个命令：

1

git submodule add <url> <path>

Copy

删要手动删：

1
2
3
4
5


# https://blog.csdn.net/guotianqing/article/details/82391665
rm -rf            #子模块目录 删除子模块目录及源码
vi .gitmodules    #删除项目目录下.gitmodules文件中子模块相关条目
vi .git/config    #删除配置项中子模块相关条目
rm .git/module/*  #删除模块下的子模块目录，注意只删除对应的子模块目录即可

Copy

重新配置MathJax和mermaid

MathJax是用来渲染数学公式的，mermaid是用来渲染图表的。Hugo升级之后不给我直接在Markdown里嵌HTML了，然后就探索了一下到底应该怎么弄

配置这两个东西主要要把<script>标签加到页面里，所以要在/layouts/partials目录下创建一个自定义的页面头模版。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{ if .Params.usemermaid}}
<script src="/mermaid.min.js"></script>
<script>
    window.onload = function () {
        mermaid.initialize({ theme: "dark" })
        mermaid.init(undefined, ".language-mermaid");
    };
</script>
{{ end }}
{{ if .Params.usemathjax }}
<script src='/MathJax.js' async></script>
{{ end }}

用模版的语法判断当前页面是否启用了MathJax或者mermaid支持，只有当在文章开头的Front Matter里面显式地注明usemathjax: true和usemermaid: true，才为当前页面引入相应的.js。

网上有种配置mermaid的方法要用到shortcodes，但是那种用起来麻烦。我这种的话直接在Markdown里定义一个语言类型为mermaid的代码块就能渲染出图表了

使用mermaid

1
2
3
4
5
6
7


```mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

1
2
3
4
5


graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

ps: 在代码块里嵌入要用到零宽字符\u200b`

使用MathJax

在文章里写\\( \\LaTeX \\) 会被Markdown转义为\( \LaTeX \) 经过MathJax处理输出LATEXLATEX

给文章换标题

要有一个好标题才能吸引读者吧哈哈哈

打标签`tags`

直接在Front Matter里面写tags: ["tag1", "tag2"]就好了，Hugo会自动分类

重新写了部署脚本

我之前自己写的用的是笨办法，是先tar打包，然后scp传上服务器，再在服务端解压，所以每次都要传输全部的数据。

直到我今天看的Hugo介绍的部署方法，用rsync可以实现增量同步

目录