hugo LeaveIt主题优化一

一、首页图标修改

上次利用LeaveIt主题的hugo网站基本搭建好了，但是下载的主题中有些东西与自己实际想要的并不相符，比如说首页的图标。

首页图标

今天就来添加自己想要的图标。

主题的图标使用的是iconfont字体图标，并且在阿里矢量图标库上看到了与主题相适应的风格，所以可以在阿里矢量图标库
选择自己喜欢的图标下载使用。

那么如何下载使用到主题中去呢

1.首先再阿里矢量图标库中选择自己喜欢的图标，点击购物车加入到自己的购物车当中。

点击加入购物车

2.点击右上角的购物车，可以看到自己选择的一些图标

购物车中的图标

3.点击下载代码，得到一个iconfont压缩包。解压得到一下文件

解压所得文件

4.将解压的文件复制到网站项目中去，具体目录如下所示：

image

5.打开iconfont.css文件，可以看到一些icon-xxx的名称，这些都是对应的各个图标，打开social.html,将其中的图标更换成自己想要的

image

image

6.最后修改config.toml中的params.social即可，更换后的首页图标为

image

二、添加评论系统

一个好的博客网站如果没有评论系统，至少有些遗憾，接下来就介绍如何添加评论系统。

评论系统千千万，我就选择了valine,本来想用来比力，奈何破网站翻墙也是注册不了。valine的评论系统放在LeanCloud上，大家先去注册。

注册完后，就可以创建应用，像我们自己开发来玩的就选择开发版的好了，毕竟穷！！！

image

应用创建完后，可以去设置里应用KEY看到APPID、APPKEY。准备工作搞定后，就可以正式开始了。

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 = '说点什么吧...'
 visitor = true

appId和appKey换成自己的，关于配置的其他参数问题可以查看官方文档。

2.在主题目录下的layouts--》partials下新建一个名为comments.html文件

{{- if .Site.Params.valine.enable -}}


提交
0 评论
加载更多...
Powered By Valine
v1.5.2




{{- end }}

3.最后在layouts--_default下的single页面最后引入评论系统，comments.hmtl

    
    {{ partial "comments.html" . }}

这样还不行的话，你找我。