前言

研究 hugo 建站之初是打算采用 Github Pages 来发布静态博客

  • 优点
    • 仅需一个github账号和简单配置即可将静态博客发布到 github pages
    • 没有维护的时间成本，可以将精力更多的放到博客内容本身上去
    • 无需备案
    • 无需ssl证书
  • 缺点
    • 访问速度较慢
    • 访问速度较慢
    • 访问速度较慢

后来发现了 Netlify

twikoo评论

所有部署方式：https://twikoo.js.org/quick-start.html

Railway+mongodb+github部署方式参考：https://www.sulvblog.cn/posts/blog/hugo_twikoo/

前端代码

创建或者修改 layouts\partials\comments.html

<!-- Twikoo -->
<div>
    <div class="pagination__title">
        <span class="pagination__title-h" style="font-size: 20px;">💬评论</span>
        <hr />
    </div>
    <div id="tcomment"></div>
    <script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js"></script>
    <script>
        twikoo.init({
            envId: "", //填自己的，例如：https://example.com
            el: "#tcomment",
            lang: 'zh-CN',
            path: window.TWIKOO_MAGIC_PATH||window.location.pathname,
        });
    </script>
</div>

调用上述twikoo代码的位置：layouts/_default/single.html

<article class="post-single">
  // 其他代码......
  {{- if (.Param "comments") }}
    {{- partial "comments.html" . }}
  {{- end }}
</article>

在站点配置文件config中加上版本号

params:
	twikoo:
      version: 1.6.11

更新

  1. 拉取新版本docker pull imaegoo/twikoo
  2. 停止旧版本容器docker stop twikoo
  3. 删除旧版本容器docker rm twikoo
  4. 部署新版本容器docker-compose up -d
  5. 在hugo配置文件 config.yml 中修改 twikoo版本

修改数据

直接修改blog/data/twikoo/目录下的文件后重启容器，❗慎重修改

修改smms图床的api地址

由于sm.ms域名国内无法访问，twikoo官方还没有出具体的修改方式，自己修改容器配置文件进行修改

# 复制配置文件
[root@lvbibir blog]# docker cp twikoo:/app/node_modules/twikoo-func/utils/image.js /root/blog/conf/twikoo/

# 修改配置文件，原来的配置是 https://sm.ms/api.v2/upload
[root@lvbibir blog]# grep smms conf/twikoo/image.js
      } else if (config.IMAGE_CDN === 'smms') {
    const uploadResult = await axios.post('https://smms.app/api/v2/upload', formData, {

# 将配置文件映射进容器内，重启容器即可
[root@lvbibir blog]# grep twikoo docker-compose.yml
  twikoo:
    image: imaegoo/twikoo
    container_name: twikoo
      - $PWD/data/twikoo:/app/data
      - $PWD/conf/twikoo/image.js:/app/node_modules/twikoo-func/utils/image.js

自定义字体

可以使用一些在线的字体，可能会比较慢，推荐下载想要的字体放到自己的服务器或者cdn上

修改assets\css\extended\fonts.css，添加@font-face

@font-face {
    font-family: "LXGWWenKaiLite-Bold";
    src: url("https://your.domain.com/fonts/test.woff2") format("woff2");
    font-display: swap;
}

修改assets\css\extended\blank.css，推荐将英文字体放在前面，可以实现英文和中文使用不同字体。

.post-content {
    font-family: Consolas, "LXGWWenKaiLite-Bold"; //修改
}

body {
    font-family: Consolas, "LXGWWenKaiLite-Bold"; //修改
}

修改链接颜色

在 hugo+papermod 默认配置下，链接颜色是黑色字体带下划线的组合，个人非常喜欢typora-vue的渲染风格hugo官方文档给出了通过render hooks覆盖默认的markdown渲染link的方式

新建layouts/_default/_markup/render-link.html文件，内容如下。在官方给出的示例中添加了 style="color:#42b983，颜色可以自行修改

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener" style="color:#42b983";{{ end }}>{{ .Text | safeHTML }}</a>

shortcode

ppt、bilibili、youtube、豆瓣阅读和电影卡片

https://www.sulvblog.cn/posts/blog/shortcodes/

mermaid

https://www.sulvblog.cn/posts/blog/hugo_mermaid/

图片画廊

https://github.com/liwenyip/hugo-easy-gallery/

https://www.liwen.id.au/heg/

自定义footer

自定义页脚内容

添加完下面的页脚内容后要修改 assets\css\extended\blank.css 中的 --footer-height 的大小，具体数字需要考虑到行数和字体大小

自定义徽标

徽标功能源自：https://shields.io/ 考虑到访问速度，可以在生成完徽标后放到自己的cdn上

在 layouts\partials\footer.html 中的 <footer> 添加如下

<a href="https://gohugo.io/" target="_blank">
    <img src="https://img.shields.io/static/v1?&style=plastic&color=308fb5&label=Power by&message=hugo&logo=hugo" style="display: unset;">
</a>

网站运行时间

在 layouts\partials\footer.html 中的 <footer> 添加如下

起始时间自行修改

    <span id="runtime_span"></span> 
    <script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new Date("7/13/2021 1:00:00");Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);runtime_span.innerHTML="网站已运行"+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();</script>

访问人数统计

统计功能源自：http://busuanzi.ibruce.info/

在 layouts\partials\footer.html 中的 <footer> 添加如下

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    总访客数: <i class="fa fa-user"></i><span id="busuanzi_value_site_uv"></span>
    |
    总访问量: <i class="fa fa-eye"></i><span id="busuanzi_value_site_pv"></span>
    |
    本页访问量: <i class="fa fa-eye"></i><span id="busuanzi_value_page_pv"></span>
</span>