本文首發在我的個人博客：http://muyunyun.cn/, 歡迎star。

寫博客有三個層次，第一層次是借鑒居多的博文，第二層次是借鑒后經過消化后有一定量產出的博文，第三層次是原創好文居多的博文。在參考了大量前輩搭建hexo的心得后，此文盡量把一些別人未提到的點以及比較好用的點給提出來。所以你在參考本文的時候，應該已經?過完了hexo。本文有以下內容:

• 快速實現博客壓縮
• 文章鏈接唯一化
• 添加酷炫的??打賞二維碼
• 自定義JS和CSS
• 添加酷炫的歌單模塊以及播放器
• github分支管理博客思路
• 秒傳圖片到七牛云并展現在博客中
• 將博客同時部署到github和coding

快速實現博客壓縮

?項目壓縮也叫代碼丑化,?分別對html、css、js、images進行優化，即把重復的代碼合并，把多余的空格去掉，用算法?把images進行壓縮。壓縮后的博客，加載速度?會有較大的提升，自然能留住更多游客。

蠻多朋友使用了gulp對博客進行壓縮，這也是一個辦法，?但在社區逛了下，找到了一個比較好用的模塊hexo-all-minifier，這個模塊集成了對html、css、js、image的優化。?安裝上此模塊后，只要在根目錄下的_config.yml文件中加上如下字段就可對博客所有內容進行壓縮。

html_minifier:
  enable: true
  ignore_error: false
  exclude:

css_minifier:
  enable: true
  exclude:
    - '*.min.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

文章鏈接唯一化

也許你會數次更改文章題目或者變更文章發布時間，在默認設置下，文章鏈接都會改變，不利于搜索引擎收錄，也不利于分享。唯一永久鏈接才是更好的選擇。

安裝

npm install hexo-abbrlink --save

在站點配置文件中查找代碼permalink，將其更改為:

permalink: posts/:abbrlink/  # “posts/” 可自行更換

這里有個知識點：

百度蜘蛛抓取網頁的規則: 對于蜘蛛說網頁權重越高、信用度越高抓取越頻繁，例如網站的首頁和內頁。蜘蛛先抓取網站的首頁，因為首頁權重更高，并且大部分的鏈接都是指向首頁。然后通過首頁抓取網站的內頁，并不是所有內頁蜘蛛都會去抓取。

搜索引擎認為對于一般的中小型站點，3層足夠承受所有的內容了，所以蜘蛛經常抓取的內容是前三層，而超過三層的內容蜘蛛認為那些內容并不重要，所以不經常爬取。出于這個原因所以permalink后面跟著的最好不要超過2個斜杠。

然后在站點配置文件中添加如下代碼:

# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 進制：dec(default) and hex

可選擇模式：

• crc16 & hex
• crc16 & dec
• crc32 & hex
• crc32 & dec

添加酷炫的??打賞二維碼

看了好些博客，支付寶的?收款碼和微信的收款碼都是分開的，且是沒有美化過的二維碼，讓人?打賞的欲望自然就下降了。來看一下我的贊賞二維碼(支持?微信和支付寶支付喲)

實現這個酷炫二維碼的流程?如下：

• 首先，分別獲得支付寶和微信的收款碼
• 接著到芝麻二維碼里將兩張二維碼合并
• 最后到第九工場生成自己喜歡的造型

講生成的圖片pay.png放到根目錄的source文件中，并在主題配置文件中加上

alipay: /pay.png

打賞字體不閃動

?修改文件next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數wechat:hover和alipay:hover，如下：

/* 注釋文字閃動函數
 #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;
}
*/

自定義JS和CSS

博主用的是next主題，別的主題目錄結構可能不太一樣，但是整個框架是一樣的，生成方式是一樣的，所以引用方式也是相同的

添加自定義js樣式

• 首先把js文件放在\themes\next\source\js\src文件目錄下
• 然后找到\themes\next\layout目錄下的布局文件_layout.swig
• 把script引用代碼加入到該文件中即可

<script type="text/javascript" src="/js/src/js文件名.js"></script>

添加自定義css樣式

添加外部css樣式和引用自定義js代碼是一樣的，在對應css文件夾內添加自定義外部css樣式文件，然后在layout文件中添加引用即可。也可以在\themes\next\source\css\_custom\custom.styl文件中進行樣式的添加。

添加酷炫的歌單模塊以及播放器

這個模塊借鑒了@小胡子哥。根據上面的自定義JS和CSS的知識點不難實現?歌單模塊以及播放器。?效果如下?圖：

在調試的過程中，發現了小胡子哥代碼的一個bug：當點擊一個專輯暫停后，再點擊其他的專輯，這時候點擊暫停、播放的控制邏輯有錯誤。經過排查在nmlist.js文件中的bind方法中加上了$("#nmPlayer").removeAttr("data-paused")解決了這個bug。

再接著玩的話，可以給?播放器加上歌詞的功能。這里有一篇相關文章,?有機會可以去把玩一番。

github分支管理博客思路

有一個問題，如果我電腦?壞了怎么辦，因為在github中的我們github.io項目是只有編譯后的文件的，沒有源文件的，也就是說，如果我們的電腦壞了，打不開了，我們的博客就不能進行更新了，所以我們要把我們的源文件也上傳到github上。這個時候我可以選擇新建一個倉庫來存放源文件，也可以?把源文件push到user.github.io的其他?分支。我選擇了后者。

創建muyy(任意)分支

創建兩個分支：master 與 muyy,（這個muyy分支就是存放我們源文件的分支，我們只需要更新muyy分支上的內容據就好，master上的分支hexo編譯的時候會更新的）

初始化倉庫

然后我們再初始化倉庫，重新對我們的代碼進行版本控制

git init
git remote add origin <server>

<server>是指在線倉庫的地址。origin是本地分支,remote add操作會將本地倉庫映射到云端

將博客源文件上傳至muyy分支

.gitignore文件作用是聲明不被git記錄的文件，blog根目錄下的.gitignore是hexo初始化帶來的，可以先刪除或者直接編輯，對hexo不會有影響。建議.gitignore內添加以下內容：

/.deploy_git
/public
/_config.yml

.deploy_git是hexo默認的.git配置文件夾，不需要同步
public內文件是根據source文件夾內容自動生成，不需要備份，不然每次改動內容太多
即使是私有倉庫，除去在線服務商員工可以看到的風險外，還有云服務商被攻擊造成泄漏等可能，所以不建議將配置文件傳上去

依次執行

git add .
git commit -m "..."
git push origin muyy

秒傳圖片到七牛云并展現在博客中

在markdown中寫blog的朋友，想必這點是最煩惱的吧，一般來說都要手動上傳圖片到七牛云，再把鏈接寫到markdown中。逛了逛?社區，有人用phthon實現一個自動上傳的腳本，但是我覺得還不是特別方便，這時在github上找到一個一鍵貼圖工具qiniu-image-tool，它支持本地文件、截圖、網絡圖片一鍵上傳七牛云并返回圖片引用。?Mac是基于Alfred的，其windows也有相應版本windows版本。

按照其要求配置好以后，用截圖軟件截圖后，或者本地圖片后copy，然后直接按設置好的command+option+v，然后在圖片成功上傳到七牛云圖床上，剪貼板上也有相應的連接。

將博客同時部署到github和coding

通常我們把hexo托管在github，但是畢竟github是國外的，訪問速度上還是有點慢，所以想也部署一套在國內的托管平臺，目前gitcafe已經被coding收購了，所以就決定部署到coding。但是coding有個不好的地方就是訪問?自定義域名的站點時，不充值的話會有廣告跳轉頁，所以我現在也是處于觀望的態度，先把coding的環境代碼也先布置好，等它哪一天廣告跳轉頁沒了，就把域名指過去。

coding上創建一個新項目

這里只介紹coding上面如何創建項目，以及把本地hexo部署到coding上面

同步本地hexo到coding上

把獲取到了ssh配置_config.yml文件中的deploy下，如果是第一次使用coding的話，需要設置SSH公鑰，生成的方法可以參考coding幫助中心,?其實和github配置一模一樣的。

本地打開 id_rsa.pub 文件，復制其中全部內容，填寫到SSH_RSA公鑰key下的一欄，公鑰名稱可以隨意起名字。完成后點擊“添加”，然后輸入密碼或動態碼即可添加完成。

添加后，在git bash命令輸入：

ssh -T git@git.coding.net

如果得到下面提示就表示公鑰添加成功了：

Coding.net Tips : [Hello ! You've conected to Coding.net by SSH successfully! ]

想要同時部署到2個平臺，就要修改博客根目錄下面的_config.yml文件中的deploy如下
根據Hexo官方文檔需要修改成下面的形式

deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    gitcafe: <repository url>,[branch]

所以我是這樣的

deploy:
- type: git
  repo:
    github: https://github.com/MuYunyun/MuYunyun.github.io.git,master
    coding: git@git.coding.net:muyunyun/muyunyun.git,master

最后使用部署命令就能把博客同步到coding上面：

hexo deploy -g

pages服務方式部署

將代碼上傳至coding之后我們就要開啟pages服務了，在pages頁面我們只需要將部署來源選擇為master分支，然后將自定義域名填寫我們自己購買的域名就可以了

設置域名解析

現在要實現國內的走coding，海外的走github，只要配置2個CNAME就行。域名解析如下：

參考資料

• 小胡子哥
• Hexo Next主題設置和優化
• Hexo 博客補丁
• Water Sister's Blog
• Hexo+NexT主題配置備忘
• Cherry's Blog
• Hexo 3.1.1 靜態博客搭建指南
• hexo的next主題個性化教程:打造炫酷網站
• 將hexo博客同時托管到github和coding