是不是宅太无聊？来，手把手教你玩转个人网站

前言

前两篇文章
个人博客网站搭建(1) | 相关软件环境的准备
个人博客网站搭建(2) | 初始网站的建立
已经帮助大家把基本的博客框架搭起来了，剩下的就是在网站上部署你的信息了，但这却也是最重要的呢。
首先我先在这里感谢一个大神，是他开源了主题yilia，这里献上他的github地址：
https://github.com/litten/hexo-theme-yilia
然后，还要在感谢一位大佬，在对上述项目做了优化，将yilia主题做了升级yilia-plus，这里献上他的github地址：
https://github.com/JoeyBling/hexo-theme-yilia-plus
是他们给我们提供了一个既美观又容易上手的博客框架。

下载升级版主题yilia-plus

在blog下，打开Git Bush Here ,输入命令

git clone http://github.com/JoeyBling/hexo-theme-yilia-plus.git  themes/yilia-plus

出现以下界面，则表示下载成功

然后我们打开blog/_config.yml，找到如下图示这部分代码，将landscape
改成yilia-plus，然后保存

这时我们就可以根据上一篇文章提出的三步预览操作来检查下载好的主题效果了

hexo clean//清理
hexo g//生成
hexo s//预览

预览效果如下

设置个人信息，添加头像，增加标签栏

首先我们需要给自己起一个博客名，打开\blog_config.yml，将author 后面改成自己起的名字，例如我的，改成了mmc。改完一定要记得保存哦

在目录D:\Desktop\blog\themes\yilia-plus\source\img下存放一些自己常用的社交号的二维码以及支付宝和微信的收款码（下面用到的所有图片都存在这里），然后打开\blog\themes\yilia-plus_config.yml，配置相关信息。
将这部分按自己的需要设置，这部分主要设置主页里面的标签栏，以我的为例

下面这部分也按自己的需要设置，以我的为例，我主要用的社交号有知乎，QQ以及WeChat。

然后就是网站头像，主页头像，以及赞赏时二维码的设计了，下面以我的为例


这时，我们个人的基本信息以及主页标签栏就做好了，下面就来展示预览效果。
首先是自定义网站图标

然后是主页显示
从上图可以看出，此时个人主页已经按要求生成。

增加网易云音乐插件和阅读量统计

增加网易云音乐插件

由于yilia-plus上已经部署好了添加背景音乐代码，因此这里我们做的工作很少。首先我们从浏览器进入网易云音乐官网，搜索自己喜欢的音乐，如下图，点击生成外链播放器

然后复制生成的HTML代码

打开blog/themes/yilia/layout/_partial/left-col.ej文件，找到如下代码

将其替换为你复制的外链代码，这里我选择的音乐是安河桥。然后，在themes/yilia-plus/_config.yml添加如下代码

# 网易云音乐插件
music:
  enable: true
  autoplay: true  # 是否开启自动播放

阅读量统计

这部分就更简单了，由于作者已经在yilia主题的升级版yilia-plus将相关代码添加进去了，因此我们只需要在blog/themes/yilia/layout/_partial/left-col.ej文件下，添加如下代码就可以了

# 是否开启访问量统计功能(不蒜子)
busuanzi:
 enable: true

这里要说明的一点是在主题yilia-plus中将这个功能的大部分已经完成，因此，我们做起来才这么轻松。如果在其他主题，或者是yilia主题，则我们还需要老老实实去添加代码，具体操作，这里给大家提供一个大佬的参考链接，希望对大家有帮助。

Hexo博客添加访问量统计

增加版权说明和来必力评论区

增加版权说明

对于增加版权说明，我们需要在themes/yilia-plus/_config.yml下找到如下代码，并将copyright_type后面的数字改为2，这样我们的每篇原创后面都会有版权说明

# 版权声明type设定：0-关闭版权声明； 1-文章对应的md文件里有copyright: true属性，才有版权声明； 2-所有文章均有版权声明
copyright_type: 2

增加来必力评论区

首先去来比力注册自己的账号，获取自己的id(注意，来比力是一个韩国网站，但这丝毫不影响我们的操作，就是速度有点慢)

然后在themes/yilia-plus/layout/_partial/post下新建livere.ejs，双击打开，在里面添加如下代码

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
    })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

再从 themes/yilia-plus/layout/_partial/article.ejs 文件下，找到：<% if (!index && post.comments){ %> ，在其后面添加如下代码：

  <%if (theme.livere_uid) { %>
      <%- partial('post/livere') %>
    <% } %>

这时，来必力已经部署完成，如果我们想启用，只需用在themes/yilia-plus/_config.yml下添加代码

livere: true
livere_uid: 你的id

预览效果如下

开始自己的第一篇博客

在目录blogs/ource/_posts下新建md文件，就可以开始写自己的博客了，这里我非常建议用vscode打开，这样，你就可以边写边预览，非常方便。

写完之后，我们就三步走

hexo clean//清理
hexo g//生成
hexo s//预览

预览效果无误就使用命令

hexo d

部署到github，然后我们就可以直接用我们的仓库名访问了。

不足之处

到此为止，一个属于你自己的博客网站就建好了，但小问题还有许多，至于遇到那个，各位小伙伴在自己搭建时遇到的话在与我交流。这里我需要提出的一点是：本系列教程目前还不支持像csdn里面那样可以写数学公式，这部分，其实网上的教程很多的，作者正在优化，以后在向各位小伙伴推出。

参考文献

[1] https://github.com/litten/hexo-theme-yilia
[2] https://github.com/JoeyBling/hexo-theme-yilia-plus
[3] https://www.jianshu.com/p/c9f83d5b893a

精彩回顾

个人博客网站搭建(1) | 相关软件环境的准备
个人博客网站搭建(2) | 初始网站的建立

欢迎关注本人微信公众号。