部落格折騰記——tranquilpeak主題個性化

super.PentaKill發表於2018-10-14
UI

封面圖片

文章首發於部落格du_ok’s Notes，本文連結為部落格折騰記——tranquilpeak主題個性化

最近把部落格的主題從Next換成了tranquilpeak，於是小打小鬧的把這個主題個性化了一下下，主要包括版權資訊、評論系統、404、博文加密、文章字數統計、訪問人數統計。

基本配置

關於Tranquilpeak的基本配置我就不細說了，主要參見大神LouisBarranqueiro的配置文件就好啦。

404 not found

關於404介面的配置在官方文件中給出了一種方法：

To create a custom 404 page that fits the theme first create a 404.md file in your Hexo source folder.
Hide post meta, actions and comments using front-matter settings:

title: Page not found 
meta: false 
actions: false 
comments: false

Finally, you need to tell your server to use /404.html (which Hexo generates out of 404.md) as your default 404 error page.Here are tutorials for some common web servers/providers: Apache, Nginx, GitHub Pages, Amazon Cloudfront/S3.

而我是這樣乾的?：
在主題的source資料夾中直接建立一個404.html。在404.html中寫入自己個性化的404介面，如果引用了圖片或者js指令碼等資源的話可以將其放在主題的source/image和source/js資料夾中。在我的404介面如下（我的404） 。

404
you find my dog!
Thanks so much. He loves to run away and hide on pages that don’t exist.
Please let us know how you found him, then we’ll make sure it doesn’t happen again. Or just help him find his way back home.

博文加密

關於博文的加密只需要一個外掛即可實現。

  1. 首先在部落格的根目錄安裝hexo-blog-encrypt，並將其寫入package.json檔案中：
cd blog
npm install --save hexo-blog-encrypt
  1. 然後在部落格根目錄的_config.yml中新增如下：
encrypt:
    enable: true
  1. 寫文章時，在front-matter中設定你的密碼如下
---
password: `your password`
---

評論系統

在我之前使用的評論系統是disqus，然而由於大家都懂得原因，disqus在國內難以使用，於是乎使用了gitment。

  1. 首先進入tranquilpeak的配置檔案_config.yml中，找到如下程式碼，接下來只需要補充完整這些配置即可。 在評論配置中，提供了兩種評論系統，一種便是被牆了的disqus，另一種便是gitment。
# Your Disqus shortname
disqus_shortname: 
# Your Gitment information
gitment:
    enable: true
    github_id: 你的github賬戶名
    repo: 需要存放評論的repository，可以新建一個repository專門存放評論
    client_id: OAuth App的client_id
    client_secret: OAuth App的client_secret
  1. 然後登陸自己的github，根據這個順序進行點選操作：Personal setting->Developer settings->OAuth Apps->New OAuth App。對於新建的OAuth app的配置如下：
  • Application name：app的名字，隨便寫；
  • Homepage URL：填寫自己的主頁地址即可，如我的為http://notes.duyichao.site。
  • Application description：隨便填
  • Authorization callback URL：這一步最重要，也是填寫自己的部落格地址，這裡要注意到底是http與https，填寫的一定要與自己的部落格使用的一致。github會使用callback url回撥傳你一個code引數。
  1. 當上面的都填寫完畢時，就可以獲得這個app的client_id和client_secret。
  2. 寫文章時，在front-matter中新增:
---
comment: true
---

對於gitment還有問題：

  1. Not Found，這一般是owner或者repo配置錯誤了，注意名字和倉庫名字的大小寫。
  2. Comments Not Initialized：這一般是Authorization callback URL配置錯誤或者在這一個評論區沒有登入github賬號。
  3. validation failed：這是由於github issue的Label的長度限制小於50字元，我們可以將tranquilpeak\layout_partial\scripts.ejs的id由window.location.pathname改為post.date：
function render() {
    new Gitment({
        // id: window.location.pathname,
        id: '<%= post.date %>',
        owner: '<%- theme.gitment.github_id %>',
        repo: '<%- theme.gitment.repo %>',
        oauth: {
            client_id: '<%- theme.gitment.client_id %>',
            client_secret: '<%- theme.gitment.client_secret %>',
        }
    }).render('gitment');
}

還有一個坑：登入失敗，報錯[object ProgressEvent]，似乎是gitment的作者提供js指令碼的網址更改了，所以會登入不了。以防萬一，還是把指令碼down下來，使用自己的伺服器提供服務，或者直接存放於本地。

//更換下面兩個指令碼地址即可
gc.src = '//imsun.github.io/gitment/dist/gitment.browser.js';
gcs.href = '//imsun.github.io/gitment/style/default.css';

版權資訊

版權是一個非常嚴肅的問題，現在的網際網路上的抄襲現象很嚴重，還有一些爬蟲自動爬取你的文章然後直接釋出出去，所以我們需要在我們的文章里加入版權資訊。

  1. 在tranquilpeak\layout_partial\post資料夾中建立copyright.ejs檔案，內容如下：
<div class="article-footer-copyright">
    <p><span>本文標題:</span><href="<%- url_for(' ') %>"> <%= post.title %></a></p>
    <p><span>文章作者:</span><a href="/" title="訪問 <%= config.author %>的個人部落格"><%= config.author %></a></p>
    <p><span>釋出時間:</span><%= post.date.format("YYYY年MM月DD日 - HH:mm") %></p>
    <p><span>最後更新:</span><%= post.updated.format("YYYY年MM月DD日 - HH:mm") %></p>
    <p><span>原始連結:</span><a href="<%= url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a>
    <span class="copy-path"  title="點選複製文章連結"><i class="fa fa-clipboard" data-clipboard-text="<%= post.permalink %>"  aria-label="複製成功！"></i></span>
    </p>
    <p><span>許可協議:</span><i class="fab 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>
  1. 開啟tranquilpeak\languages中的en.yml檔案，在post部分新增如下程式碼：
post:
    copyright: "copyright"
  1. 在tranquilpeak\layout_partial中的post.ejs中找到下面程式碼:
<div class="post-content markdown">
    <div class="main-content-wrap">
        <%- postContent %>
        <%- partial('post/gallery') %>
    </div>
</div>

<div class="post-content markdown">
    <div class="main-content-wrap">
        <%- postContent %>
        <%- partial('post/gallery') %>
        <!-- 新增的部分 -->
        <!-- copyright -->
        <% if(post.copyright == true) { %>
            <%- partial('post/copyright') %>
        <% } %>
        <!-- copyright -->
    </div>
</div>
  1. 在寫文章時，在front-matter中新增
---
password: `your password`
---

文章字數統計、訪問數目統計

安裝hexo-wordcount、不蒜子統計、leancloud

參考連結

本文作者：du_milestone
本文連結：部落格折騰記——tranquilpeak主題個性化或部落格折騰記——tranquilpeak主題個性化
許可協議：署名-非商業性使用-禁止演繹 4.0 國際 轉載請保留原文連結及作者。

相關文章