關於Hexo6.0搭建個人部落格(高階篇)

darryrzhong發表於2018-04-30
Hexo

本篇博文將繼續帶大家深入文章效果優化,教你打造炫酷的個人部落格站點.

閱讀本文前建議先行閱讀本人另外兩篇遍基礎博文 1.關於Hexo6.0搭建個人部落格(基礎篇) 2.關於Hexo6.0搭建個人部落格(進階篇)

#目錄

  • 優化部落格文章樣式
    • 修改文章內連結文字樣式
    • 修改文章底部的的標籤樣式
    • 在每篇文章末尾統一新增“本文結束”標記
    • 實現文章字數統計和閱讀預估時間
    • 在文章底部增加版權資訊
    • 文章加密訪問
    • 將博文置頂
    • 開啟文章底部打賞功能
    • 開啟留言評論功能

1.修改文章內連結文字樣式

開啟檔案themes\next\source\css\_common\components\post\post.styl，在末尾新增以下css樣式:

// 文章內連結文字樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
複製程式碼

其中顏色可以自定義,在這裡選中狀態為橙色,連結樣式為藍色.效果如下:

style.png

2. 修改文章底部的的標籤樣式

開啟模板檔案/themes/next/layout/_macro/post.swig，找到rel="tag">#欄位， 將# 換成<i class="fa fa-tag"></i>,其中tag是你選擇標籤圖示的名字,也是可以自定義的, 如下:

<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>

biaoq.png

3. 在每篇文章末尾統一新增“本文結束”標記

效果如下:

end.png
實現方法如下:

  1. 在\themes\next\layout\_macro下新建 passage-end-tag.swig 檔案,並新增以下程式碼：
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-heart"></i>感謝閱讀-------------</div>
    {% endif %}
</div>
複製程式碼
  1. 開啟\themes\next\layout\_macro\post.swig檔案，在post-body 之後， post-footer （post-footer之前有兩個DIV）之前新增如下程式碼：
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
複製程式碼

footer.png
3. 開啟主題配置檔案_config.yml在末尾新增以下欄位：

# 文章末尾新增“本文結束”標記
passage_end_tag:
  enabled: true
複製程式碼

到此,就大功告成了.

4.實現文章字數統計和閱讀預估時間

效果如下:

count.png

1.在站點根目錄下使用GitBash命令安裝 hexo-wordcount外掛:

$ npm install hexo-wordcount --save

2.在全域性配置檔案_config.yml中啟用外掛:

ymbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
複製程式碼

3.在主題的配置檔案_config.yml中進行如下配置:

  time_minutes: true
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

複製程式碼

到此,我們就實現了文章字數統計和預估時間的顯示功能

5. 在文章底部增加版權資訊

效果如下:

show1.png

1.在next/layout/_macro/下新建檔案my-copyright.swig： 新增以下程式碼:

  {% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS庫 sweetalert 可修改路徑 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人部落格">{{ theme.author }}</a></p>
  <p><span>釋出時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始連結:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點選複製文章連結"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文連結及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '複製成功',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>
{% endif %}
複製程式碼

2.在next/source/css/_common/components/post/下新建檔案my-post-copyright.styl： 新增以下程式碼:

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
複製程式碼
  1. 開啟next/layout/_macro/post.swig檔案,新增以下程式碼:
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>
複製程式碼

新增為止如下:找到wechat-subscriber欄位,在其欄位之前加入上述程式碼

copyright.png

4.開啟next/source/css/_common/components/post/post.styl檔案，在末尾增加程式碼：

@import "my-post-copyright"

到此版權資訊說明也就成功了. 說明一下,想要在文章底部顯示版權資訊,需要在文章頭部copyright: true才可以正常顯示

6.文章加密訪問

開啟next\layout\_partials\head\head.swig檔案,插入以下程式碼:

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯誤！');
                history.back();
            }
        }
    })();
</script>
複製程式碼

插入位置如下:

base64.png
這樣如果你的文章需要加密處理的話,就可以在頭部寫上password:*******; 如:

title: Hello World
tag: hexo 
copyright: true
password: 123456
---
複製程式碼

效果如下:

password.png

到此,文章解密功能就完成了.

7.將博文置頂

開啟檔案：node_modules/hexo-generator-index/lib/generator.js,將以下程式碼替換原來的;

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是隻有一篇文章top有定義，那麼將有top的排在前面（這裡用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
複製程式碼

在文章中新增 top 值，數值越大文章越靠前，

tag: hexo 
copyright: true
password: 123456
top: 150
---
複製程式碼

8.開啟文章底部打賞功能

效果如下:

Alipay.png

1.準備支付寶和微信二維碼 2.在主題配置檔案_config.yml中配置圖片及資訊

# Reward
reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png
複製程式碼

將對應得二維碼圖片路徑換成自己的就可以了. 3.設定打賞字型不閃動 開啟next\source\css\_common\components\post\post-reward.styl檔案,註釋以下程式碼即可:

/*註釋文字閃動
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/
複製程式碼

ok,這樣就完美開啟了我們的打賞功能了.

9.開啟留言評論功能

效果如下:

chart.png

這裡說明下,本人所使用的是搜狐的暢言開放評論,而且在本地伺服器上跑時不能留言,所以只是教大家整合評論功能,之後會教大家如何使用它接收留言提醒和回覆評論等.

1.獲取暢言評論的APP ID 和APP KEY 首先註冊賬號,登入成功後進入後臺總覽頁面底部會有我們需要的APP ID 和APP KEY 如下:

id_key.png

2.配置暢言評論 開啟 主題配置檔案_config.yml,找到changyan欄位;將剛才的id和key填入

# changyan
changyan:
  enable: true
  appid: *********
  appkey: *************************

複製程式碼

next本身已經整合了暢言,所以到這裡我們算是成功開啟了評論留言功能了. 重新執行下,看看效果吧;

changyan.png
由於使用暢言需要站點備案,很多朋友就放棄了,其實備案很容易,在下一篇博文我也會教大家如何破解的. 對的 就是這樣子的,看到這樣子就證明我們成功了.

到此,我們的文章優化基本算是完成了,到目前為止我一直都是教大家在本地打造個人部落格,也就是隻有自己電腦上才能訪問,我想很多朋友肯定已經迫不及待的想要將部落格上線運營了,所以我將在下一篇終極篇教大家將站點上線託管至GitHub,SEO優化、以及發表第一篇博文等,讓你開始真正擁有一個屬於自己的個人站點,歡迎關注darryrzhong,更多幹貨等你來拿喲!

請賞個小紅心！因為你的鼓勵是我寫作的最大動力！

更多精彩文章請關注

相關文章