Hexo博客-yilia优化记录(不断更新)

一、下载yilia主题

---

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

二、点击所有文章提示缺失模块

---

2.1在博客根目录执行

npm install hexo-generator-json-content --save

2.2在配置文件里写入

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

三、侧边栏增加网易云播放器

---

3.1进入网易云网页版，找到喜欢的音乐，点击生成外链播放器，获得html代码

3.2打开 /hexo/themes/yilia/layout/_partial/left-col.ejs 文件，把音乐 HTML 代码粘贴进去,例如我的是：

<div style="position: absolute; bottom: 0px;left: 0px;width: 50%;">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=86 src="//music.163.com/outchain/player?type=2&id=28133171&auto=0&height=66"></iframe>
</div>

四、添加版权信息

---

4.1添加代码在 themes/yilia/layout/_partial/article.ejs

 <!-- 增加版权声明 -->

    <%
  var sUrl = url.replace(/index\.html$/, '');
  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
%>
<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
  <div class="declare">
    <strong>本文作者：</strong>
    <% if(config.author != undefined){ %>
      <%= config.author%>
    <% }else{%>
      <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    <%}%>
    <br>
    <strong>本文链接：</strong>
    <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
    <br>
    <strong>版权声明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    进行许可。转载请注明出处！
    <% if(theme.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

<!-- 增加版权声明结束 -->

4.2添加配置文件修改 themes/yilia/_config.yml：

#版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'

五、URL持久化

---

我们可以发现 hexo 默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。这种链接对搜索爬虫是很不友好的，它的 url 结构超过了三层，太深了。

5.1推荐安装 hexo-abbrlink 插件：

npm install hexo-abbrlink --save

5.2然后配置_config.yml

# URL
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

六、鼠标点击特效

---

6.1在 hexo/themes/yilia/source/assets 文件目录下添加 click_show_test.js 文件

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
			3000,
			function() {
			    $i.remove();
			});
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

6.2在 hexo/themes/yilia/layout/_partial/after-footer.ejs 文件的最后， 添加以下代码：

<script type="text/javascript" src="/assets/click_show_text.js"></script>

七、解决代码块乱行问题

---

这是因为 yilia/source/main.0cf68a.css 文件中的 pre 标签的样式造成的，将 white-space: pre-wrap; 注释掉即可，这个问题是自动换行造成的，使用不自动换行的 white-space: pre; 即可，这样样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

八、增加:LiveRe评论系统

---

8.1在yilia/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>
</div>
<!-- City版安装代码已完成 -->

8.2编辑yilia/layout/_partial/article.ejs，在评论代码中引用livere.ejs

<% if (theme.livere_uid){ %>
   <%- partial('post/livere', {
     key: post.slug,
     title: post.title,
     url: config.url+url_for(post.path)
   }) %>
<% } %>

8.3编辑yilia/_config.yml，添加livere_uid属性

livere: #新增
  enable: true
  livere_uid:   //你的评论id

本文作者： nowfitness
本文链接： https://www.nowfitness.top/archives/a15561ce.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

支付宝