太微华的博客
文章 标签 系列 导航 影视
太微华的博客

Hugo+Loveit优化记

太微华
     约 3073 字  预计阅读 7 分钟 

此文中的LoveIt版本是v0.2.10。

使用hugo server,会得到终端的提示:

1
2

Current environment is "development". The "comment system", "CDN" and "fingerprint" will be disabled.
当前运行环境是 "development". "评论系统", "CDN" 和 "fingerprint" 不会启用.
解决方法
使用hugo server -e production命令即可运行生产环境进行调试, 就能加载评论系统了。
一定要处理
如果不处理的话, 会影响网站的打开速度。

到Favicon Generator处理自己的网站图标, 最后会下载一个压缩包, 包括生成的图标和browserconfig.xml、site.webmanifest等文件, 将这些文件放到blog\themes\LoveIt\static中即可。

顺便一提
blog\themes\LoveIt\static这个目录里的文件, 最后会出现在网站根目录中。

更多扩展Shortcodes的应用方法请查看LoveIt主题作者写的使用说明。

admonition比较常用, 有12个样式, 但是主题作者并没说明每种样式对应的type是什么。我从源码中找到了它们的对应关系, 在此记录一下。

1
2
3

{{< admonition type=tip title="This is a tip" open=true >}}
一个"技巧"横幅
{{< /admonition >}}

或者

1
2
3

{{< 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

参考Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录。

前提配置

在站点配置文件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 }}">
参考链接
  1. Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录
  2. Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
注意
  1. 上面两篇文章中的许多地方对于LoveIt_v0.2.10是不必要的。
  2. 大部分搜索引擎和网站都放弃使用meta keyword了, 参考Pull request, 所以这keywords不设置也罢。

LoveIt主题没有适配适配twikoo评论系统, 所以需要手动设置一下。

建议使用DoIt主题
🎉DoIt主题已适配twikoo🎉

可以修改评论系统模板文件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/npmtwikoo@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官网查看。

适用场景:

  • 当博客上有新的评论时 (博主自己发表的评论除外) , 系统发送邮件通知博主。
  • 当博主发表的评论收到回复时, 系统发送邮件通知博主。
您在 ${SITE_NAME} 发表的文章有新评论
${NICK}的评论如下:
${COMMENT}
您可以查看回复的完整內容, 欢迎再次光临${SITE_NAME}。


请注意: 此邮件由 ${SITE_NAME} 自动发送, 请勿直接回复。
 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管理面板中, 系统就不能发送邮件了, 不知道是哪里出了问题。

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

适用场景:

  • 当访问者发表的评论收到回复时, 系统发送邮件通知被回复的访问者。
您在 ${SITE_NAME} 的评论收到新的回复
${PARENT_NICK}, 您曾发表评论:
${PARENT_COMMENT}
${NICK}的回复如下:
${COMMENT}
您可以查看回复的完整內容, 欢迎再次光临${SITE_NAME}。


请注意: 此邮件由 ${SITE_NAME} 自动发送, 请勿直接回复。
 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管理面板中, 系统就不能发送邮件了, 不知道是哪里出了问题。

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

更新于 2023-09-02  0c5ae3d
阅读原始文档 | 查看源代码 | 编辑此页 | 报告问题
 Blog, Hugo
返回 | 主页