使用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
最后文章中的图片引用格式为：![weichat](/images/weichat-logo_500px.png "公众号")，注意路径后面要加"内容"。

搜索配置

使用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

使用站长工具，向搜索引擎提交网站地图

让搜索引擎收录网站内容。

• 百度搜索资源平台
  https://ziyuan.baidu.com/site/index#/

• 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等数据。

1. Google Analytics
2. 百度统计

注册后，需要先添加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 */ -}}

# 下面网站访问数量统计中，友盟+和51LA也可以加在这里。
{{- /* 51la Analytics */ -}}

网站访问数量统计

对比样式之后，选择了51LA统计。也可以用JS修改统计的样式。

这三个访问统计都需要在网站代码中加入统计的JS代码。注册后，获取JS统计代码，可以和网站流量分析中百度分析一样加到themes\LoveIt\layouts\partials\plugin\analytics.html中。

1. 不算子
   样式：
   本文总阅读量929966次
   本站总访问量3152598次
   本站总访客数672421人

2. 友盟+
   互联网数据服务平台缔元信和CNZZ合并成为友盟+。
   样式：
   站长统计 | 今日IP[43] | 今日PV[191] | 昨日IP[31] | 昨日PV[133] | 当前在线[5]

3. 51LA
   样式：
   总访问量 21,195，本月访问量 2,820，昨日访问量 93，今日访问量 103，当前在线 4

分类页文章总数

在themes\LoveIt\layouts\_default\section.html中添加以下代码：

    {{- len ( where .Site.RegularPages "Section" "posts" ) | dict "Nums" | T "totalPageNums" -}}

T和i18n函数是翻译函数，按照不同的语言，使用对应语言的字符串。参考i18n

i18n配置为：

# themes\LoveIt\i18n\zh-CN.toml
[totalPageNums]
other = "共 {{ .Nums }} 篇文章"

# themes\LoveIt\i18n\en.toml
[totalPageNums]
other = " {{ .Nums }} articles"

网站总字数统计

参考Hugo 总文章数和总字数。

底部链接设计

关于知识共享许可协议

可以看这篇“知识共享”（CC协议）简单介绍，笔者最终决定采用：知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

网站运行时间

在themes\LoveIt\layouts\partials\footer.html中加入以下代码。

{{- /* Hugo and LoveIt */ -}}
{{- if ne .Site.Params.footer.hugo false -}}
    

        # 运行时间在这里
        
        
        {{- $hugo := printf `Hugo` hugo.Version -}}
        {{- $theme := .Scratch.Get "version" | printf ` LoveIt` -}}
        {{- dict "Hugo" $hugo "Theme" $theme | T "poweredBySome" | safeHTML }}
    
{{- 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文件的加载过程是这样的。

1. 配置文件中补充cdn文件名称，可以直接复制主题的cdn文件到blog的assets/data/cdn/目录下。

[params.cdn]
    # CDN 数据文件名称, 默认不启用
    # ("jsdelivr.yml")
    # 位于 "themes/LoveIt/assets/data/cdn/" 目录
    # 可以在你的项目下相同路径存放你自己的数据文件:
    # "assets/data/cdn/"
    data = ""

2. themes\LoveIt\layouts\partials\init.html中读取cdn文件中的数据，.Scratch.Set "cdn" $cdn设置全局变量，之后在其他文件中使用.Scratch.Get "cdn"获取cdn数据。
3. themes\LoveIt\layouts\partials\assets.html将cdn中的第三方库渲染后，追加在页面结尾部分。

调用JS的三种方法

1. 查找jsdelivr已有的第三方库，加入jsdelivr.yml中。
2. 在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" -}}

3. 配置文件中添加第三方库配置

#  第三方库配置
[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"

完成以上配置后，可满足很多功能需求。但如果要拓展主题功能，像分类，列表页面，则需要学习Hugo语法。

参考

• LoveIt主题文档
• LoveIt-extend
• Hugo帮助文档