在上一篇文章中曾经说到把博客从WordPress转到了Hugo,经过这几天的使用,发现还是很不错的,用起来也比较方便。但是,在使用PaperMod主题的时候,也是遇到了一些问题,本文就遇到的问题作一个记录。目前,主题的代码高亮功能还是没有搞定,不过也是影响不大,先放一放也无所谓。

首页不显示文章

把WordPress导出的md文件导入的Hugo的psots目录后,在使用代码创建新文件时候

1
hugo new posts/***.md

发现新建的md文件,生成网页后不会在首页显示。但是在栏目里是会有的。后来的在@阿甘博客博客的提醒下,使用导出的md文件的文档属性标头,成功的显示了。但是,每次在生成文章md的时候,都需要手动的更改,不是太方便。后来,在看某篇文章的时候得到启发,修改archetypes/default.md,把默认的代码删除,改成:

1
2
3
4
5
6
7
8
9
---
title: "{{ replace .Name "-" " " | title }}" 
author: 老刘

date: {{ .Date }}
url: /optics-weekly-issue-8/
categories:
  - 齐物论
---

然后,再创建md文件后,只需要修改一下url里的值就OK了。

增加评论功能

这个主要是copy了阿甘博客的方法。 在artalk的官方文档中找到Artalk.cssArtalk.js文件的cdn地址然后下载到本地,在hugo项目根目录的/static文件夹下面新建一个叫 artalk的文件夹,然后把前述两个静态文件放进这个文件夹

创建模板文件 /主题目录/layouts/partials/comment/artalk.html,文件内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<link href="/artalk/Artalk.css" rel="stylesheet">
<script src="/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>

<script>
  Artalk.init({
    el:        '#Comments',
    pageKey:   '{{ .Permalink }}',
    pageTitle: '{{ .Title }}',
    server:    '{{ $.Site.Params.artalk.server }}',
    site:      '{{ $.Site.Params.artalk.site }}',
    // ...你的其他配置
  })
</script>

文章页模板 /主题目录/layouts/_default/single.html 合适的位置添加:

1
2
3
<div class="article-comments">
  {{- partial "comment/artalk" . -}}
</div>

具体位置为single.html文件的{{- if (.Param “comments”) }}判断体中,完整的代码如下:

1
2
3
4
5
{{- if (.Param "comments") }}
  <div class="article-comments">
  {{- partial "comment/artalk" . -}}
</div>
  {{- end }}

然后在 Hugo 配置文件中添加如下内容:

1
2
3
4
params:
  artalk:
    server: 'https://artalk.sharpgan.com'
    site: '图南博客'

至于artalk的部署方法,可以用docker来部署,官方有详细的方法

不加载CSS和JS

这个问题有点玄学,很多教程给出的答案都是去Cloudflare里修改,使优化不压缩js和CSS,但是在我这里没有效果。看了错误的提示好像是SHA-256完整性的检查不通过,浏览器阻塞了。 一般的解决办法是: 是要么关闭 SRI,要么取消 Cloudflare 的「Auto Minify」。 Cloudflare 关闭的方法:速度 - 优化 - Auto Minify。 在 Hugo 中关闭的方法:

1
2
3
params:
  assets:
    disableFingerprinting: true

但是,在我这里怎么搞都没有用。 后来看到一个哥们的博客,网址我忘掉了,通过修改一个值,搞定了。 在 themes\PaperMod\layouts\partials 文件夹下找到一个 head.html 文件,发现里面确实有 integrity="{{ $stylesheet.Data.Integrity }}" 这么一句代码,把它改为 integrity="" 然后重新发布

代码高亮

这个我参考了阿甘和其他的一些文章,但是都没有成功,有时候有一点颜色,有时候一丢丢颜色也没有。我感觉可能是和物品修改了上面的那个head.html有关系。 然而,我的猜测是错误❌的,加上那个代码也没有用。然后我回复用官方的一个dome,发现是可以显示代码高亮的,仔细查看了我的配置文件和官方的配置文件的差别,发现是在设置代码高亮的那个地方,有一个选项不能是true,不然就不显示,太玄学了。 具体代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
highlight:

# anchorLineNos: true

noClasses: false

# anchorLineNos: true

#codeFences: true

#guessSyntax: true

lineNos: true

style: monokai