站点翻新

Overview

1. 前言

笔者第一次使用hugo建站是在2015年,因为只是尝鲜,转过头又投入WordPress的怀抱。

第二次使用hugo建站则是2019年1月13号,当时觉得一切富文本编辑手段都是技术绑架,铁了心要用Markdown来记录东西,最后在让人眼花的主题库里选了jane,使用至今。

今天是2022年5月3号,在过去的两天里又在让人眼花的主题库里选择了一个新主题:hugo-clarity,做了一些适配工作,这里稍作记录。

2. 新主题功能

2.1 页面排版

使用左右分隔的排版,左侧显示博客内容,右侧sidebar展示最近文章、类别和标签,接近最初使用的WordPress博客主题,相比jane的居中布局在桌面端提升了页面利用空间,方便展示图表。

2.2 站内搜索

在写了这么多年的博客后,笔者终于进入到 忘记自己写过哪些东西 的阶段了。搜索功能是一个迫切的需求,比起去网上翻找各种教程,不如先看下以前的记录。jane使用谷歌搜索站点,不是很符合笔者的预期,而hugo-clarity实现搜索的功能大致如下:

  • 生成index.json文件
  • 根据关键词检索index.json文件,展示搜索结果

虽然生成的json比较大,但是也比使用许多地区无法访问的谷歌要好,但这里的搜索功能有一个缺点:

就是暂不支持zh-cn的语言,但笔者修改默认语言为en后,测试可用。

2.3 代码块

增加了一键复制和显示/隐藏行号的功能,配色默认也是笔者常用的暗色主题。

2.4 图表

hugo没有将mermaid集成到默认功能中,需要自行添加shortcodes来使用,例如添加文件:layout/shortcodes/mermaid.html,内容如下:

 1<script type="application/javascript" src="/js/mermaid.min.js">
 2  var config = {
 3    startOnLoad:true,
 4    theme:'{{ if .Get "theme" }}{{ .Get "theme" }}{{ else }}dark{{ end }}',
 5    align:'{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}'
 6  };
 7  mermaid.initialize(config);
 8</script>
 9
10<div class="mermaid">
11  {{.Inner}}
12</div>

然后在需要使用mermaid绘图的地方,添加shortcodes渲染图表,如下:

这次则通过拓展markup的mermaid渲染实现,将代码块标记成mermaid后就可以绘图,如下:

创建文件:layout/_default/_markup/render-codeblock-mermiad.html,内容如下:

1<div class="mermaid">
2  {{- .Inner | safeHTML }}
3</div>

创建文件:layout/partials/hooks/head-end.html,内容如下:

1{{ if .Page.Params.mermaid }}
2  <script type="application/javascript" src="/js/mermaid.min.js"></script>
3  <script>
4    mermaid.initialize({ startOnLoad: true });
5  </script>
6{{ end }}

上述代码中引用的 /js/mermaid.min.js 放置在 static/js/mermaid.min.js

在需要绘图的文章头部,设置mermaid为true,如下:

 1---
 2title: 使用V2ray反向代理实现内网穿透
 3date: 2022-03-31T21:40:22+08:00
 4author: wbuntu
 5type: post
 6url: /implement-nat-traversal-with-v2ray-reverse-proxy
 7categories:
 8  - JustForFun
 9tags:
10  - v2ray
11  - 内网穿透
12mermaid: true
13toc: true
14---

然后创建一个代码块,设置类型为mermaid,即可展示图表,如下:

这种使用方式和typora和vscode markdown插件的一致。

2.5 自动加载评论

jane需要点击按键才可以加载评论,而hugo-clarity滑动到底部时会自动展开评论。

3. 最后

笔者在编写内部文档时,遇到最多的问题就是:能不能先画个图?因为图像传递的信息远比文字描述来得直观,希望接下来也能多写博客多画图。

comments powered by Disqus