一、首頁圖標(biāo)修改
上次利用LeaveIt主題的hugo網(wǎng)站基本搭建好了,但是下載的主題中有些東西與自己實(shí)際想要的并不相符,比如說首頁的圖標(biāo)拳魁。
今天就來添加自己想要的圖標(biāo)。
主題的圖標(biāo)使用的是iconfont字體圖標(biāo)撮弧,并且在阿里矢量圖標(biāo)庫上看到了與主題相適應(yīng)的風(fēng)格潘懊,所以可以在阿里矢量圖標(biāo)庫
選擇自己喜歡的圖標(biāo)下載使用姚糊。
那么如何下載使用到主題中去呢
1.首先再阿里矢量圖標(biāo)庫中選擇自己喜歡的圖標(biāo),點(diǎn)擊購物車加入到自己的購物車當(dāng)中授舟。
2.點(diǎn)擊右上角的購物車救恨,可以看到自己選擇的一些圖標(biāo)
3.點(diǎn)擊下載代碼,得到一個(gè)iconfont壓縮包岂却。解壓得到一下文件
4.將解壓的文件復(fù)制到網(wǎng)站項(xiàng)目中去忿薇,具體目錄如下所示:
5.打開iconfont.css文件裙椭,可以看到一些icon-xxx的名稱躏哩,這些都是對(duì)應(yīng)的各個(gè)圖標(biāo),打開social.html,將其中的圖標(biāo)更換成自己想要的
6.最后修改config.toml中的params.social即可揉燃,更換后的首頁圖標(biāo)為
二扫尺、添加評(píng)論系統(tǒng)
一個(gè)好的博客網(wǎng)站如果沒有評(píng)論系統(tǒng),至少有些遺憾炊汤,接下來就介紹如何添加評(píng)論系統(tǒng)正驻。
評(píng)論系統(tǒng)千千萬,我就選擇了valine,本來想用來比力抢腐,奈何破網(wǎng)站翻墻也是注冊不了姑曙。valine的評(píng)論系統(tǒng)放在LeanCloud上,大家先去注冊迈倍。
注冊完后伤靠,就可以創(chuàng)建應(yīng)用,像我們自己開發(fā)來玩的就選擇開發(fā)版的好了啼染,畢竟窮Q绾稀!迹鹅!
應(yīng)用創(chuàng)建完后卦洽,可以去設(shè)置里應(yīng)用KEY看到APPID、APPKEY斜棚。準(zhǔn)備工作搞定后阀蒂,就可以正式開始了。
1.首先在config.toml里添加valine的配置弟蚀。
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
enable = true
appId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
appKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
verify = false # Verification code
avatar = 'mm'
placeholder = '說點(diǎn)什么吧...'
visitor = true
appId和appKey換成自己的蚤霞,關(guān)于配置的其他參數(shù)問題可以查看官方文檔。
2.在主題目錄下的layouts--》partials下新建一個(gè)名為comments.html文件
<!-- valine -->
{{- if .Site.Params.valine.enable -}}
<!-- id 將作為查詢條件 -->
<div id="vcomments"></div>
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script type="text/javascript">
new Valine({
el: '#vcomments' ,
appId: '{{ .Site.Params.valine.appId }}',
appKey: '{{ .Site.Params.valine.appKey }}',
notify: '{{ .Site.Params.valine.notify }}',
verify: '{{ .Site.Params.valine.verify }}',
avatar:'{{ .Site.Params.valine.avatar }}',
placeholder: '{{ .Site.Params.valine.placeholder }}',
visitor: '{{ .Site.Params.valine.visitor }}'
});
</script>
{{- end }}
3.最后在layouts--_default下的single頁面最后引入評(píng)論系統(tǒng)粗梭,comments.hmtl
<div class="post-comment">
<!-- 加入評(píng)論功能 -->
{{ partial "comments.html" . }}
</div>
這樣還不行的話争便,你找我。