使用Hugo框架搭建博客的过程 - 主题配置
博客部署完成后，恭喜你可以发表第一篇：Hello world！但是LoveIt这么好用的主题，不配置一番可惜了。
主题配置最好参考已有的配置，比如LoveIt作者写的介绍，还有主题目录下的配置文件\themes\LoveIt\exampleSite\config.toml文件。
笔者认为一些配置项解释的不够清楚，所以将网站的源码放在了Github上，仅供参考。
下面介绍其中一些配置。
双语言配置
配置后需要每篇文章存在多个语言的文件，否则会报错。
例如：content\about\index.en.md、content\about\index.zh-cn.md
Gravatar头像
gravatar头像注册，需要使用wordpress帐号，注册帐号时，有些邮箱的邮件会被过滤，使用163邮箱等了1个多小时方才收到注册的邮件。
图片画廊功能
在配置文件config.toml中开启lightgallery
# 是否使用 lightgallery
lightgallery = true或者在文章的头部参数中设置lightgallery: true
最后文章中的图片引用格式为：，注意路径后面要加"内容"。
搜索配置
使用algolia作为搜索引擎，因为lunr的加载速度会让你等到花都谢了。虽然algolia需要上传index.json，但是可以使用Algolia Atomic简化操作。
评论系统设置
国内不能用disqus，不过还有Valine评论系统。留言可以设置邮件提醒功能，但是LeanCloud的云引擎域名需要使用自己的域名并配置DNS解析。
社交信息设置
首页的社交信息，不同语言的界面，可分别设置。
社交信息拓展
以微信公众号为例。
在config.toml的社交信息中添加
# 作者的社交信息设置
[social]
...
Wechat = "https://img.xiaodejiyi.com/img/wechat%20logo_500px.png"
...配置themes\LoveIt\assets\data\social.yml:
# 064: wechat
wechat:
# weight值排序
Weight: 2
Title: 公众号
Newtab: true
Icon:
Simpleicons: wechat其中图标可参考其他形式，如：
# Src形式
cnblog:
Weight: 1
Prefix: https://www.cnblogs.com/
Title: 博客园
Icon:
# themes\LoveIt\assets\svg\icons\cnblog.svg
Src: svg/icons/cnblog.svg
# fontawesome class形式
mastodon:
Weight: 56
Prefix: https://mastodon.social/
Title: Mastodon
Icon:
Class: fab fa-mastodon fa-fw
# Simpleicons
googlescholar:
Weight: 54
Template: https://scholar.google.com/citations?%v
Title: Google Scholar
Icon:
# themes\LoveIt\assets\lib\simple-icons
Simpleicons: googlescholar使用站长工具，向搜索引擎提交网站地图
让搜索引擎收录网站内容。
百度搜索资源平台
Google search console
https://search.google.com/search-console/about?hl=zh-CN
网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
[verification]
google = "xxxxxxxxxxxxxxxx"
bing = ""
yandex = ""
pinterest = ""
baidu = "code-xxxxxxx"
网站流量分析
分析网站点击流量，访客IP等数据。
- Google Analytics
- 百度统计
注册后，需要先添加DNS解析，验证域名所有权，可能会与其他解析记录存在冲突。
解决方法，暂停其他解析，验证所有权通过后，在网站分析中配置ID，最后删除验证的DNS解析，重新开启其他冲突的解析记录。
# Google网站分析配置
[analytics]
enable = true
# Google Analytics
[analytics.google]
id = "G-xxxxxxx"
# 是否匿名化用户 IP
anonymizeIP = true百度统计需要在网站代码中加入百度的统计代码，可以在themes\LoveIt\layouts\partials\plugin\analytics.html中添加以下代码。
{{- /* baidu Analytics */ -}}
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
# 需要修改为自己的url
hm.src = "https://hm.baidu.com/hm.js?9c04b6d35915817e67da8ad2fdcfbfdf";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
# 下面网站访问数量统计中，友盟+和51LA也可以加在这里。
{{- /* 51la Analytics */ -}}
<script type="text/javascript" src="//js.users.51.la/21009067.js"></script>网站访问数量统计
对比样式之后，选择了51LA统计。也可以用JS修改统计的样式。
这三个访问统计都需要在网站代码中加入统计的JS代码。注册后，获取JS统计代码，可以和网站流量分析中百度分析一样加到themes\LoveIt\layouts\partials\plugin\analytics.html中。
不算子
样式：
本文总阅读量929966次
本站总访问量3152598次
本站总访客数672421人
友盟+
互联网数据服务平台缔元信和CNZZ合并成为友盟+。
样式：
站长统计 | 今日IP[43] | 今日PV[191] | 昨日IP[31] | 昨日PV[133] | 当前在线[5]
51LA
样式：
总访问量 21,195，本月访问量 2,820，昨日访问量 93，今日访问量 103，当前在线 4
分类页文章总数
在themes\LoveIt\layouts\_default\section.html中添加以下代码：
<!-- articles -->
<span style="font-size:.8rem;font-weight:500;">
{{- len ( where .Site.RegularPages "Section" "posts" ) | dict "Nums" | T "totalPageNums" -}}
</span>T和i18n函数是翻译函数，按照不同的语言，使用对应语言的字符串。参考i18n
i18n配置为：
# themes\LoveIt\i18n\zh-CN.toml
[totalPageNums]
other = "共 {{ .Nums }} 篇文章"
# themes\LoveIt\i18n\en.toml
[totalPageNums]
other = " {{ .Nums }} articles"网站总字数统计
关于知识共享许可协议
可以看这篇“知识共享”（CC协议）简单介绍，笔者最终决定采用：知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。
网站运行时间
在themes\LoveIt\layouts\partials\footer.html中加入以下代码。
{{- /* Hugo and LoveIt */ -}}
{{- if ne .Site.Params.footer.hugo false -}}
<div class="footer-line">
# 运行时间在这里
<span id="timeDate">{{ T "worktime" }} | </span>
<script>
var now = new Date();
function createtime() {
var start_time= new Date("09/16/2020 00:00:00");
now.setTime(now.getTime()+250);
days = (now - start_time ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
var worktime = document.getElementById("timeDate").innerHTML.replace(/time/, Math.floor(days));
document.getElementById("timeDate").innerHTML = worktime ;
}
createtime();
</script>
{{- $hugo := printf `<a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo %v">Hugo</a>` hugo.Version -}}
{{- $theme := .Scratch.Get "version" | printf `<a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt %v"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>` -}}
{{- dict "Hugo" $hugo "Theme" $theme | T "poweredBySome" | safeHTML }}
</div>
{{- end -}}i18n配置为：
# themes\LoveIt\i18n\zh-CN.toml
[worktime]
other = "运行 time 天"
# themes\LoveIt\i18n\en.toml
[worktime]
other = "Almost time days."小徽章
如果你喜欢这样的小徽章，前往shield进行DIY吧！参考动态小牌子制作
使用jsdelivr加速第三方库文件的加载。
LoveIt主题对cdn文件的加载过程是这样的。
配置文件中补充cdn文件名称，可以直接复制主题的cdn文件到blog的
assets/data/cdn/目录下。[params.cdn]
# CDN 数据文件名称, 默认不启用
# ("jsdelivr.yml")
# 位于 "themes/LoveIt/assets/data/cdn/" 目录
# 可以在你的项目下相同路径存放你自己的数据文件:
# "assets/data/cdn/"
data = ""themes\LoveIt\layouts\partials\init.html中读取cdn文件中的数据，.Scratch.Set "cdn" $cdn设置全局变量，之后在其他文件中使用.Scratch.Get "cdn"获取cdn数据。themes\LoveIt\layouts\partials\assets.html将cdn中的第三方库渲染后，追加在页面结尾部分。
调用JS的三种方法
查找jsdelivr已有的第三方库，加入jsdelivr.yml中。
在
themes\LoveIt\layouts\partials\assets.html中添加jquery.min.js，需要jquery文件位于assets\js\jquery.min.js。{{- /* custom jquery */ -}}
{{- $source := $cdn.jqueryJS | default ( resources.Get "js/jquery.min.js" ) -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}配置文件中添加第三方库配置
第三方库配置
[page.library]
[page.library.css]
# someCSS = "some.css"
# 位于 "assets/"
# 或者
# someCSS = "https://cdn.example.com/some.css"
# css路径：assets\css\custom.css
customCSS = "css/custom.css"[page.library.js] # someJavascript = "some.js" # 位于 "assets/" # 或者 # someJavascript = "https://cdn.example.com/some.js" customJS = "js/custom.js"
手机扫一扫
移动阅读更方便
你可能感兴趣的文章