（三）Hexo-個人博客之博客實用功能添加

本文以作者blinkfox的matery主題爲例，對主題的部分地方進行優化，進行了一些美化。

沒有博客？

Github + Hexo 搭建個人博客超詳細教程

獲取我配置好的主題？

git clone [email protected]:MUYIio/Hexo-matery-Themes.git

須知： 不同的Hexo主題的美化方式可能存在一些差異，但也相差無幾，把源代碼放在合適的位置就可以。

前提條件： 進行博客主題美化前需要了解Hexo博客的目錄結構，主題的目錄結構！請閱讀官方文檔。瞭解 HTML、CSS、JS，瞭解 CSS 預處理語言 Sass、Less、Stylus,有一定的前端知識最好。

添加Gittalk評論插件

matery主題自帶gittalk評論插件，我們只需要開啓就可以了。

1.打開GitHub申請，填寫信息：

Application name //應用名稱，隨便填
Homepage URL //填自己的博客地址
Application description //應用描述，隨便填
Authorization callback URL //填自己的博客地址

2.打開themes/_config.yml下修改gitalk那裏：

gitalk:
  enable: true
  owner: 你的github用戶名
  repo: 你的github用戶名.github.io
  oauth:
	clientId: 粘貼剛剛註冊完顯示的字符串
	clientSecret: 粘貼剛剛註冊完顯示的字符串
  admin: 你的github用戶名

添加完成。

添加RSS訂閱

簡易信息聚合是“Really Simple Syndication”或“Richsite summary”(網站內容摘要)的中文名字。是站點用來和其他站點之間共享內容的一種簡易方式。英文縮寫爲RSS技術。

RSS是一種信息聚合的技術，是某一站點和其他站點之間共享內容的一種簡易信息發佈與傳遞的方式，使得一個網站可以方便的調用其他提供RSS訂閱服務的網站內容，從而形成非常高效的信息聚合，讓網站發佈的內容在更大的範圍內傳播。他是一種用於共享新聞和其他WEB內容的數據交換規範，也是使用最廣泛的一種擴展性標識語言。

安裝：

1.在本地hexo目錄下右鍵git bash here，輸入以下命令：

npm install hexo-generator-feed

2.安裝完成後，打開hexo目錄下配置文件的_config.yml，在末尾添加以下代碼：

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS訂閱
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

3.最後打開主題配置文件themes/_config.yml，添加以下代碼：

rss: /atom.xml

現在RSS訂閱就添加完成。

增加建站時間

1.在/themes/matery/layout/_partial/footer.ejs最後加上以下代碼：

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date對象距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(時間戳)
        year - 作爲date對象的年份，爲4位年份值
        month - 0-11之間的整數，做爲date對象的月份
        day - 1-31之間的整數，做爲date對象的天數
        hours - 0(午夜24點)-23之間的整數，做爲date對象的小時數
        minutes - 0-59之間的整數，做爲date對象的分鐘數
        seconds - 0-59之間的整數，做爲date對象的秒數
        microseconds - 0-999之間的整數，做爲date對象的毫秒數 */
        var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); // 北京時間2018-2-13 00:00:00
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "本站已運行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時 " + diffMinutes + " 分鐘 " + diffSeconds + " 秒";
    }
    siteTime();
</script>

2.然後在自己想添加的地方（比如網站底部）添加以下代碼：

<span id="sitetime"></span>

添加404頁面

1.在/source/目錄下新建一個404.md，加上以下代碼：

 ---
    title: 404
    date: 2019-07-19 16:41:10
    type: "404"
    layout: "404"
    description: "頁面丟失了 :("
    ---

2.然後在/themes/matery/layout/目錄下新建一個404.ejs文件，代碼如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

添加完成。

文章圖片水印

1.在博客根目錄下新建一個watermark.py，代碼如下：

# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont


def watermark(post_name):
    if post_name == 'all':
        post_name = '*'
    dir_name = 'source/_posts/' + post_name + '/*'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        draw.text((im.size[0] / 2, im.size[1] / 2),
                  u'@yourname', fill=(0, 0, 0), font=font)
        im.save(files)


if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')

寫完一篇文章可以運行python3 watermark.py postname添加水印，如果第一次運行要給所有文章添加水印，可以運行python3 watermark.py all

添加背景音樂

1.首先打開網易雲網頁版，找到想聽的歌曲，然後點擊生成外鏈：

2.選擇尺寸，複製代碼：

3.然後把代碼直接放到文章中就可以了：

寫完文章上傳就可以看到了。

持續更新中…