写在前面
注意
本文章转载于
八荒山人的博客 。本博客采用的 Twikoo 评论系统的 Hugo 兼容方案也源自于大佬的文章。
以及Hugo编译不了的问题解决方案。下载
Hugo-extend 成功解决！非常感谢！
本地调试时加载评论系统
使用 hugo server ,会得到终端的提示：
1
2
|
Current environment is "development". The "comment system", "CDN" and "fingerprint" will be disabled.
当前运行环境是 "development". "评论系统", "CDN" 和 "fingerprint" 不会启用.
|
解决方法
使用 hugo server -e production 命令即可运行生产环境进行调试，就能加载评论系统了。
Console报错找不到 site.webmanifest
参考LoveIt主题作者的 方法
,到 Favicon Generator 处理自己的网站图标，最后会下载一个压缩包，包括生成的图标和 browserconfig.xml 、 site.webmanifest 等文件，将这些文件放到 blog\themes\LoveIt\static 中即可。
顺嘴一提
blog\themes\LoveIt\static 这个目录里的文件，最后会出现在网站根目录中。
LoveIt扩展Shortcodes
更多扩展Shortcodes的应用方法请查看LoveIt主题作者写的 使用说明 。
admonition
admonition比较常用，有12个样式，但是主题作者并没说明每种样式对应的 type 是什么。我从源码中找到了它们的对应关系，在此记录一下。
用法
1
2
3
4
5
6
7
8
9
|
{{< admonition type=tip title="This is a tip" open=true >}}
一个"技巧"横幅
{{< /admonition >}}
或者
{{< admonition tip "This is a tip" true >}}
一个"技巧"横幅
{{< /admonition >}}
|
示例
keywords不生效
参考自 雨临Lewis 的这篇文章。
前提配置
在站点配置文件 config.toml 中填好网站关键词：
1
2
|
# 网站关键词
keywords = "keyword1,keyword2"
|
虽然已经设置了 keywords ，但是F12查看网站源码后发现缺少 keywords 这个 meta 标签，而且在 站长工具 里查询站点时发现页面TDK信息里的关键词 KeyWords 为空。
debug
检查模板文件后发现是LoveIt主题没有引入该标签，需要修改模板。
解决方法
将 blog\themes\LoveIt\layouts\partials\head\meta.html 复制到 blog\layouts\partials\head\meta.html ，打开该文件并在
1
|
<meta name="Description" content="{{ $params.description | default .Site.Params.description }}">
|
的上方添加如下代码：
1
|
<meta name="keywords" content="{{ $params.keywords | default .Site.Params.keywords }}">
|
参考链接
更多踩坑记录请参考雨临Lewis的 这篇文章 。
更多优化美化指南请参考雨临Lewis的 这篇文章 。
换用twikoo评论系统
最开始用的评论系统是 valine ，后来换用了带有后台的 waline ，再之后发现 twikoo 后台配置很方便，界面也很好看，于是决定换一波。
但有个问题，twikoo只适配了Hexo的部分主题，而没有适配Hugo主题。
解决方法
可以修改评论系统模板文件 blog\themes\LoveIt\layouts\partials\comment.html 来手动添加对twikoo的支持，在 <div id="comments"></div> 中添加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{{- /* twikoo Comment System */ -}}
{{- $twikoo := $comment.twikoo}}
{{- if $twikoo.enable -}}
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.3.1/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: '',
// 此处填写您的环境id
el: '#tcomment',
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
// path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
})
</script>
{{- end }}
|
然后在博客配置文件 blog\config.toml 中的
1
2
3
|
# 评论系统设置
[params.page.comment]
enable = true
|
下面添加
1
2
3
|
# twikoo评论系统
[params.page.comment.twikoo]
enable = true
|
更多twikoo配置
云部署及版本更新等信息，请到twikoo
官网 查看。
部署方式
几种选择
- GitHub Actions
- CircleCI 、Netlify 、Travis CI 、Vercel 等第三方服务
最后还是选了GitHub Actions，因为不用到另外的网站上再配置一通，使用 actions-hugo 和 actions-gh-pages 这两个Action，每次写完博客，push一下，GitHub Actions就会自动构建和部署博客。
GitHub Actions自动部署Hugo
参考 actions-hugo 和 actions-gh-pages
- 创建一个私有仓库用来存放博客源码。
- 创建一个公有仓库用来发布博客。
- 创建一个个人 token ，名字可以叫做
blog 。
- 此token的访问范围选择
repo 和 workflow 。
- 生成token，记住它的值。
- 到博客源码仓库的
Settings → Secrets 中新建一个 Actions secrets ,名字也叫做 blog ,Value填入上一步中的个人token的值。
- 在博客源码仓库的根目录下创建
.github/workflows/gh-pages.yml 文件，写入以下代码，然后提交：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
name: Deploy Blog #名字随便起
on:
push:
branches:
- master #源码所在分支
jobs:
deploy:
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v2
- name: Setup Hugo #安装hugo
uses: peaceiris/actions-hugo@v2.4.13 #使用peaceiris开发的actions-hugo
with:
hugo-version: 'latest' #可以指定版本号，也可以使用latest表示最新版
extended: true #支持hugo的扩展版
- name: Build #使用hugo构建博客
run: hugo --gc --minify
- name: Deploy #部署博客
uses: peaceiris/actions-gh-pages@v3.7.3 #使用peaceiris开发的actions-gh-pages
with:
personal_token: ${{ secrets.blog }}
external_repository: #用来发布博客的公有仓库
publish_branch: master
publish_dir: ./public
cname: #填写你的域名
commit_message: ${{ github.event.head_commit.message }}
|
双仓库模式
本博客即采用上面的 gh-pages.yml ，使用私有仓库存放博客源码，将Hugo构建好的 public 目录推送到公有仓库来发布。
双分支模式
也可以在一个公有仓库中创建两个分支，一个放源码，一个用来发布，但是那样会暴露源码中一些服务的ID和Key。
