庄小帅的博客

前言

在上一篇博客中，我们介绍了如何搭建自己的博客。今天我们接着说说如何进行博客的主题 (theme) 配置来美化自己的博客页面。首先可以在 hexo 官网主题页寻找你喜欢的个性主题，根据官网使用文档说明修改相应的配置，达到自己想要的效果，例如设置字体、开启打赏功能、添加评论系统、数据统计等功能。设置不同的主题，博客的页面外观风格完全不同。我们推荐的主题是 litten 老哥制作的 yilia 主题，可以点击 litten 老哥的博客预览效果。

yilia.png

主题选择与下载安装

我们以 yilia 主题为例，说说如何下载安装主题。可以在 hexo 主题官网中进行搜索相应主题，也可以打开 yilia 主题主页查看如何操作。如果不求甚解的话，简单，直接打开命令行，敲下面一行代码就完事了。
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这样，yilia 主题就已经下载安装到本地博客文件夹下的 themes/yilia/ 文件夹下了。

主题使用

修改 hexo 博客根目录下的配置文件 _config.yml 的 theme属性为 yilia 即可(注意冒号后面有一个空格)：
theme: yilia

这样博客就已经配置为 yilia 主题了，可以在本地 hexo s 预览下效果。

主题配置

基本配置

打开 yilia 主题的配置文件 /themes/yilia/_config.yml，有关主题的配置几乎都在这个文件里实现了，可以根据我的配置文件进行相应修改添加。

# Header
menu: # 菜单
  主页: /
  技术: tags/tech
  随笔: tags/something
  相册: /photos

subtitle: # 博客名字下面的个性签名

# SubNav
subnav: # 页面左侧的社交图标
  github: "https://github.com/你的Github"
  #weibo: "微博主页链接"
  zhihu: "知乎主页链接"
  #qq: "#"
  weixin: "微信二维码链接"
  #douban: "豆瓣主页链接"
  #mail: "邮箱"
# RSS 功能
rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content
excerpt_link: more # md文章中插入 <!-- more --> 就会截断文章显示摘要，在对应位置显示"more"
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: true
# fancybox
fancybox: true

# 打赏功能设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
reward_wording: '谢谢大佬' # 打赏显示的字
# 支付宝收款二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /assets/img/alipay.png
# 微信收款二维码图片地址
weixin: /assets/img/wxpay.png

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: '475fe3bc980b2bb65bae8bbf8de77994' # 百度分析
google_analytics: ''
favicon: /assets/img/myico.ico # 网页加载图标

#你的头像
avatar: /assets/img/heichuan.png 

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  #header: '#4d4d4d'
  header: '#00000'
  # 右滑板块背景
  #slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
  slider: 'linear-gradient(200deg,#1E90FF,#B0C4DE)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: true

# 配置gitalk
gitalk:
  enable: true
  owner: Username
  repo: '存储评论的 repo'
  clientID: ''
  clientSecret: ''
  admin: Username
  distractionFreeMode: true

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
friends: true # 友链
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends: # 友链
  水恒涛的博客: http://hengtao.top/
  刘看山的博客: https://xiangyuliuseu.github.io/
  吕归尘的博客: https://guichenlv.github.io/

# aboutme: 你好<br><br>这是我的博客<br>很高兴认识大家<br><br>Le vent se lève,<br>il faut tenter de vivre

修复失效的微信分享二维码

由于 yilia 主题作者已经不维护了，微信分享的二维码已经过期了，因此需要进行相应的替换。打开 themes\yilia\layout\_partial\post\share.ejs 文件，把第49行中的 //pan.baidu.com/share/qrcode?url= 修改为: //api.qrserver.com/v1/create-qr-code/?size=150x150&data=

同时，修改博客配置文件 _config.yml 的 url 为你的博客站点，如：

url: http://littledream.top

这样，点击文章页面右下角的分享按钮就可以将文章分享到微信了。

所有文章按钮功能启用

启用 yilia 主题后会发现点击“所有文章”按钮会出现错误，提示缺少模块。在博客根目录安装相应模块。
npm i hexo-generator-json-content --save
接着在博客配置文件 _config.yml 最下面加上以下代码即可。

# 缺失模块解决
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

添加图片资源文件夹

之前提到的头像、微信收款二维码、支付宝收款二维码、微信二维码、加载图标 ico 等图片源文件需要存放在对应的文件夹中。因此在博客根目录/source/下新建文件夹assets/img/文件夹，把之前提到的这些图片源文件存放在这个文件夹里即可。此时博客根目录下的 source 文件夹里有以下几个文件(夹)：

source.png

其中，_drafts 为博客草稿文件夹， _posts 为博客文件夹， assets 为图片资源文件夹， CNAME 为之前添加的存放博客域名的文件，tags 为添加的标签分类（下一篇博客会说到）。

ico 图标的制作与设置

ico 图标是干什么的呢？咱们看看下面的这张图就知道这里的 ico 图标是干什么的了：

ico.png

添加站点访问人数/次数统计

使用不蒜子来统计并显示访问次数，只需要两行代码。首先在 yilia 主题的配置文件中定义不蒜子属性：

busuanzi:
    enable: true

再打开 /themes/yilia/layout/_partial/footer.ejs，在 </footer> 上面添加以下代码：

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
      <!-- 不蒜子统计 -->
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <span id="busuanzi_container_site_pv" style='display:none'>
            本站总访问量<span id="busuanzi_value_site_pv"></span>次
      </span>
      <span class="post-meta-divider">|</span>
      <span id="busuanzi_container_site_uv" style='display:none'>
            本站总访客数<span id="busuanzi_value_site_uv"></span>人次
      </span>
<% } %>

这样在网页底部就会显示站点访问次数与访问人数。

添加文章阅读次数统计

与上面一条相似的，可以使用不蒜子统计每一篇文章的阅读次数。打开 /themes/yilia/layout/_partial/article.ejs，在 </header> 上面添加以下代码：

<% if ( !index ){ %>
  <span class="archive-article-date">
      阅读量：<span id="busuanzi_value_page_pv">
  </span>
<% } %>

这样在文章详情页面上部就可以显示文章的阅读次数。

添加文章字数/阅读时间统计

首先，安装字数统计插件，在博客根目录下 Git Bash Here:
npm i --save hexo-wordcount

接着，在 themes/yilia/layout/_partial/post/ 文件夹下新建 word.ejs 文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text" style="font-size: 14px;color: grey">  字数统计:</span>
        <!--这里样式可以自己定制-->
        <span class="post-count" style="font-size: 14px;color: grey"><%= wordcount(post.content)%>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text" style="font-size: 14px;color: grey">  阅读时长:</span>
        <span class="post-count" style="font-size: 14px;color: grey"><%= min2read(post.content)%>分钟</span>
      </span>
    </span>
</div>

然后，打开 themes/yilia/layout/_partial/article.ejs，修改相应代码为：

  <div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>

        <!-- 需要添加的位置 -->
        <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

        <% } %>

        <% if ( !index ){ %>
          <span class="archive-article-date">
              阅读量：<span id="busuanzi_value_page_pv">
          </span>
        <% } %>

      </header>
    <% } %>

最后，在yilia主题的配置文件 _config.yml 中添加技术属性：

# 字数计数
word_count: true

至此就完成了 yilia 主题的基本配置，如果还有一些其他的个性化要求，下一篇博客我们将接着介绍如何设置头像旋转、自定义左侧背景、添加 fork me on Github 图标、添加评论插件、更改社交软件图标等。

Hexo + Github Page 搭建技术博客教程系列(二) 之配置 yilia 主题

Hexo + Github Page 搭建技术博客教程系列(二) 之配置 yilia 主题

庄小帅的博客

前言

主题选择与下载安装

主题使用

主题配置

基本配置

修复失效的微信分享二维码

所有文章按钮功能启用

添加图片资源文件夹

ico 图标的制作与设置

添加站点访问人数/次数统计

添加文章阅读次数统计

添加文章字数/阅读时间统计

参考信息

Hexo + Github Page 搭建技术博客教程系列(二) 之 配置 yilia 主题

庄小帅的博客

前言

主题选择与下载安装

主题使用

主题配置

基本配置

修复失效的微信分享二维码

所有文章按钮功能启用

添加图片资源文件夹

ico 图标的制作与设置

添加站点访问人数/次数统计

添加文章阅读次数统计

添加文章字数/阅读时间统计

参考信息

Hexo + Github Page 搭建技术博客教程系列(二) 之配置 yilia 主题