hexo博客搭建感想及yilia主题的一些美化

2020-05-02

这篇文章主要列举了利用hexo搭建博客遇到的问题和解决方法以及yilia主题的一些美化功能的添加

遇见的问题一：在使用命令hexo s 运行后localhost:4000无法访问

运行hexo s之后没有出错，但是localhost:4000不能访问，应该是hexo默认的窗口被占用了，可以换一个窗口试试。

使用命令

hexo s -p 4001

若是还不能访问，可以等一段时间，因为该窗口可能没有反应过来。

遇见的问题二：将博客部署到github上面进行访问显示404页面

首先应该注意的地方就是github中的仓库名（xxx.github.io）中的xxx是不是github的用户名，他们两个应该保持一致。

另外的可能一点就是使用hexo d 命令后，访问的页面有延迟，可以等一段时间后再去访问。

以上的两个问题我都有遇到过，使用两种方法后都不能解决，又重新继续搭建，再次遇到这两种问题，我就直接等它一段时间再去访问，问题就解决了。

yilia主题的美化

1 文章显示目录

增加文章目录 TOC(table of content )，方便阅读文章, 在 themes/yilia/_config.ym中进行配置 toc: 2即可，它会将你 Markdown 语法的标题，生成目录，目录查看在右下角。

2 文章显示摘要

我们可以发现点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数。

解决办法：在你 MD 格式文章正文插入<! — more —>即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复

# excerpt_link: more

3 增加归档菜单

修改 themes/yilia/_config.yml文件

menu:
主页:  /
归档:  /archives/index.html

4 置顶文章

4.1安装插件

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

4.2配置置顶标准

打开：themes/yilia/layout/post.ejs 文件

直接在最前面加入以下代码

<% if (page.top) { %>
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
<% } %>

4.3配置文章

然后在需要置顶的文章的Front-matter中加上top选项

top后面的数字越大，优先级越高

---
title: hexo博客搭建感想及yilia主题的一些美化
date: 2020-05-02 20:18:39
top : 5
---

5 鼠标点击有小心心

在 hexo/themes/yilia/source 文件目录下面创建 love.js 文件

!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);

然后在 hexo/themes/yilia/layout/_partial/footer.ejs 文件的最后添加

<!--页面点击小红心-->
<script type="text/javascript" src="/love.js"></script>

6 头像后面的背景更改为图片

在 themes\yilia\layout_partial\left-col.ejs 文件中将

<div class="left-col" q-class="show:isShow">

改为

<div class="left-col" q-class="show:isShow" style="background: url('/assets/huahua.jpg') no-repeat center bottom;background-size: cover;" >

url中图片的地址：在themes/yilia/source文件目录下面新建一个文件夹assets，将图片复制进去，然后url的图片地址就是/assets/xxxx，注意xxxx中需要包括图片的后缀名。

7 在文章末尾添加“本文结束”标记

打开 themes\yilia\layout_partial\article.ejs 文件

<div class="reward-box-item">
                  <img class="reward-img" src="<%= theme.weixin%>">
                  <span class="reward-type">微信</span>
                </div>
                <% } %>
              </div>
            </span>
          </span>
        </span>
      </div>
      </a>
    </div>
  <% } %>
</div>
<!-- 添加本文结束标记-->
<% if ( !index ){ %>
<div style="text-align:center;color: #00BFFF;font-size:14px;">
   -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
   </div>
<% } %>
<!-- 添加完成 -->
<div class="article-info article-info-index">
  <%if(post.top){%>
    <div class="article-pop-out tagcloud">
      <i class="icon-tuding"></i>
      <a class="article-tag-list-link color3">置顶</a>
    </div>

8 添加访问量

利用这个统计可以知道博客的访问量

8.1 统计网站访问量

在 themes\yilia\layout_partial\footer.ejs 文件的适合位置添加不蒜子脚本和添加统计网站访问量代码

<!-- 引入不蒜子统计 -->
<script async src="/busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- 开始不蒜子统计 -->
<span id="busuanzi_container_site_pv">
        本站总访问量<span id="busuanzi_value_site_pv"></span>
</span>

<span id="busuanzi_container_site_uv" >
        本站总访客<span id="busuanzi_value_site_uv"></span>
</span>

其中

# PV方式，单个用户连续点击 n 篇，记录 n 次记录值
# UV方式，单个用户连续点击 n 篇，记录 1 次记录值

8.2 文章访问量

打开 themes\yilia\layout_partial\article.ejs 文件，添加单篇文章点击量

    <div class="article-pop-out tagcloud">
      <i class="icon-tuding"></i>
      <a class="article-tag-list-link color3">置顶</a>
    </div>
  <% } %>
  <%- partial('post/tag') %>
  <!-- 开始添加阅读量-->
<% if ( !index ){ %>
<span id="busuanzi_container_page_pv">阅读量<span id="busuanzi_value_page_pv"></span>次</span>
<% } %>
<!-- 添加完成 -->
<%- partial('post/category') %>

9 添加网易云背景音乐

登录网易云音乐网址

选择一首喜欢的歌曲，点击歌曲详情，点击生成外链播放器

复制外链代码

然后打开 themes/yilia/layout/_partial/left-col.ejs 文件，然后在文件末尾的div标签和nav标签中插入外链代码

<!-- 网易云音乐 -->
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=70 src="//music.163.com/outchain/player?type=2&id=167870&auto=0&height=66"></iframe>

可以修改外链代码中的播放器样式

然后在 themes/yilia/_config.yml 文件中添加属性

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

若是想要在md文章中插入音乐，可以直接在md文章最后插入外链代码。

最后不要忘记在git bash中执行命令

hexo clean
hexo g
hexo s

参考链接

hexo yilia 高级配置

hexo yilia 主题一揽子使用方案

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2020/05/02/hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%84%9F%E6%83%B3%E5%8F%8Ayilia%E4%B8%BB%E9%A2%98%E7%9A%84%E4%B8%80%E4%BA%9B%E7%BE%8E%E5%8C%96/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------