今天终于好好配置了一下Hugo

最近武汉肺炎(2019-nCov)疫情蛮严重的呢,今天又是窝在家里给国家做贡献的一天。

疫情 2019-nCov(本文写作时丁香园数据)
确诊 8149
疑似 12169
治愈 135
死亡 171

今天做了什么

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

换主题

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

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

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

添加只要一个命令:

git submodule add <url> <path>

删要手动删:

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

重新配置MathJax和mermaid

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

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

{{ 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: trueusemermaid: true,才为当前页面引入相应的.js。

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

使用mermaid

​```mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
​```
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处理输出\( \LaTeX \)

给文章换标题

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

打标签tags

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

重新写了部署脚本

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

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