基于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>次 &nbsp;&nbsp;
    </span>
    </a>
  <% } %>

进行测试

hexo clean
hexo g
hexo s

如果没有问题

hexo d

注意：如果是托管在github上的，在等一会才会加载，多刷新几次就好

赏

谢谢你请我吃糖果