使用Hugo框架搭建博客的過程 - 主題配置


前言

博客部署完成后,恭喜你可以發表第一篇:Hello world!但是LoveIt這么好用的主題,不配置一番可惜了。

基本功能配置

主題配置最好參考已有的配置,比如LoveIt作者寫的介紹,還有主題目錄下的配置文件\themes\LoveIt\exampleSite\config.toml文件。

筆者認為一些配置項解釋的不夠清楚,所以將網站的源碼放在了Github上,僅供參考。

下面介紹其中一些配置。

雙語言配置

配置后需要每篇文章存在多個語言的文件,否則會報錯。

例如:content\about\index.en.mdcontent\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

使用站長工具,向搜索引擎提交網站地圖

讓搜索引擎收錄網站內容。

# 網站驗證代碼,用於 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 */ -}}
<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中。

  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中添加以下代碼:

<!-- articles -->
<span style="font-size:.8rem;font-weight:500;">
    {{- len ( where .Site.RegularPages "Section" "posts" ) | dict "Nums" | T "totalPageNums" -}}
</span>

Ti18n函數是翻譯函數,按照不同的語言,使用對應語言的字符串。參考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文件的加載過程是這樣的。

  1. 配置文件中補充cdn文件名稱,可以直接復制主題的cdn文件到blog的assets/data/cdn/目錄下。
[params.cdn]
    # CDN 數據文件名稱, 默認不啟用
    # ("jsdelivr.yml")
    # 位於 "themes/LoveIt/assets/data/cdn/" 目錄
    # 可以在你的項目下相同路徑存放你自己的數據文件:
    # "assets/data/cdn/"
    data = ""
  1. themes\LoveIt\layouts\partials\init.html中讀取cdn文件中的數據,.Scratch.Set "cdn" $cdn設置全局變量,之后在其他文件中使用.Scratch.Get "cdn"獲取cdn數據。
  2. 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" -}}
  1. 配置文件中添加第三方庫配置
#  第三方庫配置
[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語法。

參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM