hexo摸爬滾打之進階教程

時間 2020-07-06

標籤 hexo 摸爬滾打進階教程简体版

原文原文鏈接

本文首發在個人我的博客：http://muyunyun.cn/javascript

寫博客有三個層次，第一層次是借鑑居多的博文，第二層次是借鑑後通過消化後有必定量產出的博文，第三層次是原創好文居多的博文。在參考了大量前輩搭建hexo的心得後，此文儘可能把一些別人未提到的點以及比較好用的點給提出來。因此你在參考本文的時候，應該已經過完了hexo。css

快速實現博客壓縮

項目壓縮也叫代碼醜化,分別對html、css、js、images進行優化，即把重複的代碼合併，把多餘的空格去掉，用算法把images進行壓縮。壓縮後的博客，加載速度會有較大的提高，天然能留住更多遊客。html

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

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

文章連接惟一化

也許你會數次更改文章題目或者變動文章發佈時間，在默認設置下，文章連接都會改變，不利於搜索引擎收錄，也不利於分享。惟一永久連接纔是更好的選擇。git

安裝github

npm install hexo-abbrlink --save

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

permalink: posts/:abbrlink/  # 「posts/」 可自行更換

這裏有個知識點：算法

百度蜘蛛抓取網頁的規則: 對於蜘蛛說網頁權重越高、信用度越高抓取越頻繁，例如網站的首頁和內頁。蜘蛛先抓取網站的首頁，由於首頁權重更高，而且大部分的連接都是指向首頁。而後經過首頁抓取網站的內頁，並非全部內頁蜘蛛都會去抓取。npm

搜索引擎認爲對於通常的中小型站點，3層足夠承受全部的內容了，因此蜘蛛常常抓取的內容是前三層，而超過三層的內容蜘蛛認爲那些內容並不重要，因此不常常爬取。出於這個緣由因此permalink後面跟着的最好不要超過2個斜槓。json

而後在站點配置文件中添加以下代碼:

# 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的知識點不難實現歌單模塊以及播放器。效果以下圖：

核心代碼在\themes\next\source\js\src\music\nmlist中，點擊看源碼，其核心思路就是經過jsonp的方式對定義好的歌單進行調用。

在調試的過程當中，發現了小鬍子哥代碼的一個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上面：