基于Hexo个人博客界面优化
选择主题
经过多个对比,选择简单一点的的
yilia
1.将主题文件下载解压到 你的博客目录的 themes下
下载
yilia
主题文件
2.改写配置
打开你的
_config.yml
#theme: landscape 这是·原来的,改成下面这个
theme: yilia
注意一下,_config.yml 路径是指 根目录下的,而非 yilia 主题下的 config文件
3.重启
在你的博客根目录下进入git-bash
#清除
hexo clean
#重构
hexo g
#本地启动
hexo s
# 推送到服务端
hexo d
修改主题样式
1.作者名
如果不显示作者名,打开yilia目录下的_config.yml
#在最前面添加
author: Your Name
2.所有文章显示
yilia 在首次使用时,点击所有文章 时,会出现模块找不到的错误,可按照提示操作即可
注意一下,_config.yml 路径是指 根目录下的,而非 yilia 主题下的 config文件
3.配置图片资源
添加图片资源文件夹。 路径为 themes/yilia/source/下,可添加一个 assets 文件夹,里面存放图片资源即可
配置文件中直接引用即可。路径为 themes/yilia/_config.yml,找到如下即yml
# 微信二维码图片
weixin: /assets/img/YourWeiXin.png
# 头像图片
avatar: /assets/img/YourAvater.jpg
# 网页图标
favicon: /assets/img/YourFavicon.jpg
4.摘要显示
- 点击主页时,发现所有文章都是全文显示,太难看
- 在你 MD 格式文章正文插入
即可,只会显示它之前的,此后的就不显示,且在你的themes/yilia/_config.yml里的
excerpt_link:
标签注释掉
# excerpt_link: more
- 效果图
5.显示目录
#在 themes/yilia/_config.ym中将toc标签值改为2
toc: 2
6.增加tag标签
主题自带随笔标签访问,怎么添加标签呢?
在文件的头部进行下面操作
---
title: xxx
tags: 随笔
#如果想要添加多个标签则是
tags: [随笔, xxx]
---
7.增加不蒜子统计
在 themes\yilia\layout_partial\after-footer.ejs最后添加
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
- 添加统计网站访问量
修改 themes\yilia\layout_partial\footer.ejs
# PV方式,单个用户连续点击 n 篇,记录 n 次记录值
<span id="busuanzi_container_site_pv"> 本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
# UV方式,单个用户连续点击 n 篇,记录 1 次记录值
<span id="busuanzi_container_site_uv"> 本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>
- 单篇文章点击量
themes\yilia\layout_partial\article.ejs中 ,
在<%- partial('post/title', {class_name: 'article-title'}) %>
插入如下代码
<!--显示阅读次数-->
<% if (!index && post.comments){ %>
<br/>
<a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
<span class="icon-sort"></span>
<span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
阅读数: <span id="busuanzi_value_page_pv"></span>次
</span>
</a>
<% } %>
进行测试
hexo clean
hexo g
hexo s
如果没有问题
hexo d
注意:如果是托管在github上的,在等一会才会加载,多刷新几次就好