Hexo | （五）Yilia主題優化

yilia主題簡單優雅，可是缺乏一些我想要的功能，因此我本身稍微擴展了一些功能，好比添加了以前使用的LiveRe評論系統，新增了百度自動推送功能，在文章底部追加了版權聲明，勉強實現了相冊功能。
優化後的yilia主題：https://github.com/liziczh/hexo-theme-yilia

add:LiveRe評論系統

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版安裝代碼已完成 -->

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)
   }) %>
<% } %>

3.編輯yilia/_config.yml，添加livere_uid屬性

#0、liveRe評論
livere_uid: false

add:百度推送

1.在yilia/layout/_partial下添加baidu-push.ejs文件

<% if (theme.baidu_push){ %>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<% } %>

2.編輯layout/_partial/head.ejs，引用baidu-push.ejs

<%- partial('baidu-push') %>

3.編輯yilia/_config.yml，添加baidu_push屬性

# 百度推送
baidu_push: true

add:版權聲明

1.編輯layout/_partial/head.ejs，添加post-copyright代碼

<% if (((theme.copyright_type === 2 && !post.copyright) || (theme.copyright_type === 1 && post.copyright)) && !index){ %>
<div> 
    <ul class="post-copyright">
        <li>
            <strong>本文做者：</strong><%= config.author%>
        </li>
        <li>
            <strong>本文連接：</strong>
            <a href="<%= config.url %><%- url_for(post.path) %>" title="<%= config.title %>"><%= config.url %><%- url_for(post.path) %></a>
        </li>
        <li>
            <strong>版權聲明： </strong>
            本博客全部文章除特別聲明外，均採用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 許可協議。轉載請註明出處!
        </li>
    </ul>
</div>
<% } %>

2.添加.post-copyright的樣式

.post-copyright{
    margin: 0em 0em 0em 0em;
    padding: 0.5em 1em;
    border-left:3px solid #ff1700;
    background-color: #f9f9f9;
    list-style: none;
    font-size: 14px;
}

3.編輯yilia/_config.yml，添加copyright_type屬性

# 版權聲明
# type：0-關閉版權聲明； 1-存在copyright:true屬性的文章，顯示版權聲明； 2-全部文章均有版權聲明
copyright_type: 0

new:相冊頁面（未完成）

暫時是直接將如下代碼嵌入index.md文檔中，勉強實現相冊功能。但這樣寫我本身看着都難受，以後有時間再改。

1.相冊圖片CSS

<style>
.img{width:240px;display:inline-block;margin:0 10px 10px 0;}
.img-last{width:240px;display:inline-block;margin:0 0 10px 0;}
</style>

2.原生JS實現jQuery入口函數，實現手機圖片自適應。

<script>
/*原生JS實現jQuery入口函數*/
function ready(fn){
    if(document.addEventListener{
       document.addEventListener('DOMContentLoaded',function(){
        document.removeEventListener('DOMContentLoaded',arguments.callee,false);
        fn();
    },false);
}else if(document.attachEvent){
    document.attachEvent('onreadystatechange',function(){
        if(document.readyState=='complete'){
            document.detachEvent('onreadystatechange',arguments.callee);
            fn();
        }
    });
}}; 
/*手機圖片自適應*/
ready(function(){
    var img = document.getElementsByTagName("img");
    if(window.screen.width < 500){
        for(var i = 0 ; i < img.length;i++){
            var len = (window.screen.width-40) / 2;
            img[i].style.width = len.toString()+"px";
        }
    }
}); 
</script>

new:Ones頁面（未完成）

單獨寫一個Ones的靜態界面，暫未完成，以後再說。