前言
博客部署完成后,恭喜你可以發表第一篇: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"
完成以上配置后,可滿足很多功能需求。但如果要拓展主題功能,像分類,列表頁面,則需要學習Hugo語法。
