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

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"

网站总字数统计

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

底部链接设计

关于知识共享许可协议

可以看这篇“知识共享”（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" }}&nbsp;|&nbsp;</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"

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

参考