目录

Hugo+Loveit优化记

本地调试时加载评论系统

使用 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.xmlsite.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 >}}

示例

注意
type=note
摘要
type=abstract
信息
type=info
技巧
type=tip
成功
type=success
问题
type=question
警告
type=warning
失败
type=failure
危险
type=danger
Bug
type=Bug
示例
type=example
引用
type=quote

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的 这篇文章

注意
上面雨临Lewis的两篇文章中有许多地方对于 LoveIt_v0.2.10 是不必要的。

换用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/[email protected]/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 官网 查看。

自定义邮件通知模板

博主通知邮件模板

适用场景:

  • 当博客上有新的评论时(博主自己发表的评论除外),系统发送邮件通知博主。
  • 当博主发表的评论收到回复时,系统发送邮件通知博主。
效果图
您在 八荒山人的博客 发表的文章有新评论
某某某的评论如下:
这是一条评论
您可以查看回复的完整內容, 欢迎再次光临八荒山人的博客


请注意:此邮件由 八荒山人的博客 自动发送,请勿直接回复。
代码
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div style="padding:10px;margin:30px auto">
    <div
        style="border-radius:10px;font-size:15px;color:#000;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB','微软雅黑','Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;border:1px solid #eee;box-shadow:0 1px 5px #cbc5b5">
        <div
            style="border-radius:10px 10px 0 0;background:linear-gradient(90deg,rgba(67,198,184,.5),rgba(255,209,244,.5))">
            <div style="border-radius:10px 10px 0 0;font-size:17px;color:#fff;word-break:break-all;padding:23px 32px">您在
                <a href="${POST_URL}" style="text-decoration:none;color:#12addb"
                    ;target="_blank"><strong>${SITE_NAME}</strong></a>&nbsp;发表的文章有新评论</div>
        </div>
        <div style="margin:40px auto;width:90%">
            <div><strong>${NICK}</strong>的评论如下:</div>
            <div
                style="border-radius:5px;background-color:#fafafa;background-image:repeating-linear-gradient(-45deg,#fff,#fff 15px,transparent 15px,transparent 30px);box-shadow:0 2px 5px #cbc5b5;margin:20px 0;padding:15px">
                ${COMMENT}</div>
            <div>您可以查看<a style="text-decoration:none;color:#12addb" href="${POST_URL}" target="_blank">回复的完整內容</a>,
                欢迎再次光临<a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a></div><br><br>
            <div style="font-size:13px;color:#909090">请注意:此邮件由 <a style="text-decoration:none;color:#12addb"
                    href="${SITE_URL}" target="_blank">${SITE_NAME}</a> 自动发送,请勿直接回复。</div>
        </div>
    </div>
</div>
不要使用压缩代码

如果将上面的代码压缩后,再粘贴到 twikoo 管理面板中,系统就不能发送邮件了,不知道是哪里出了问题。

建议直接复制上面的代码粘贴使用。

普通通知邮件模板

适用场景:

  • 当访问者发表的评论收到回复时,系统发送邮件通知被回复的访问者。
效果图
您在 八荒山人的博客 的评论收到新的回复
1号,您曾发表评论:
这是一条评论
2号的回复如下:
这是一条对评论的回复
您可以查看回复的完整內容, 欢迎再次光临八荒山人的博客


请注意:此邮件由 八荒山人的博客 自动发送,请勿直接回复。
代码
 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
<div style="padding:10px;margin:30px auto">
    <div
        style="border-radius:10px;font-size:15px;color:#000;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB','微软雅黑','Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;border:1px solid #eee;box-shadow:0 1px 5px #cbc5b5">
        <div
            style="border-radius:10px 10px 0 0;background:linear-gradient(90deg,rgba(67,198,184,.5),rgba(255,209,244,.5))">
            <div style="border-radius:10px 10px 0 0;font-size:17px;color:#fff;word-break:break-all;padding:23px 32px">
                您在
                <a href="${POST_URL}" style="text-decoration:none;color:#12addb"
                    ;target="_blank"><strong>${SITE_NAME}</strong></a>&nbsp;的评论收到新的回复
            </div>
        </div>
        <div style="margin:40px auto;width:90%">
            <div><strong>${PARENT_NICK}</strong>,您曾发表评论:</div>
            <div
                style="border-radius:5px;background-color:#fafafa;background-image:repeating-linear-gradient(-45deg,#fff,#fff 15px,transparent 15px,transparent 30px);box-shadow:0 2px 5px #cbc5b5;margin:20px 0;padding:15px">
                ${PARENT_COMMENT}</div>
            <div><strong>${NICK}</strong>的回复如下:</div>
            <div
                style="border-radius:5px;background-color:#fafafa;background-image:repeating-linear-gradient(-45deg,#fff,#fff 15px,transparent 15px,transparent 30px);box-shadow:0 2px 5px #cbc5b5;margin:20px 0;padding:15px">
                ${COMMENT}</div>
            <div>您可以查看<a style="text-decoration:none;color:#12addb" href="${POST_URL}" target="_blank">回复的完整內容</a>,
                欢迎再次光临<a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a></div><br><br>
            <div style="font-size:13px;color:#909090">请注意:此邮件由 <a style="text-decoration:none;color:#12addb"
                    href="${SITE_URL}" target="_blank">${SITE_NAME}</a> 自动发送,请勿直接回复。</div>
        </div>
    </div>
</div>
再次提示,不要使用压缩代码

如果将上面的代码压缩后,再粘贴到 twikoo 管理面板中,系统就不能发送邮件了,不知道是哪里出了问题。

建议直接复制上面的代码粘贴使用。

部署方式

几种选择

  1. GitHub Actions
  2. CircleCINetlifyTravis CIVercel 等第三方服务

最后还是选了GitHub Actions,因为不用到另外的网站上再配置一通,使用 actions-hugoactions-gh-pages 这两个Action,每次写完博客,push一下,GitHub Actions就会自动构建和部署博客。

GitHub Actions自动部署Hugo

参考 actions-hugoactions-gh-pages

  1. 创建一个私有仓库用来存放博客源码。
  2. 创建一个公有仓库用来发布博客。
  3. 创建一个个人 token ,名字可以叫做 blog
  4. 此token的访问范围选择 repoworkflow
  5. 生成token,记住它的值。
  6. 到博客源码仓库的 SettingsSecrets 中新建一个 Actions secrets ,名字也叫做 blog ,Value填入上一步中的个人token的值。
  7. 在博客源码仓库的根目录下创建 .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/[email protected]

      - name: Setup Hugo #安装hugo
        uses: peaceiris/[email protected] #使用peaceiris开发的actions-hugo
        with:
          hugo-version: 'latest' #可以指定版本号,也可以使用latest表示最新版
          extended: true #支持hugo的扩展版

      - name: Build #使用hugo构建博客
        run: hugo --gc --minify

      - name: Deploy #部署博客
        uses: peaceiris/[email protected] #使用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。