整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
攻破技術(shù)難點時，總會隨機進入到別人的網(wǎng)站中，有時看到別人的博客那叫一個養(yǎng)眼悅目，心里難免有點小波瀾。
雖然知道它要么買的，要么用的動態(tài)博客，但沒人家美就沒人家美，咱不能失了風(fēng)度。
再者，自己網(wǎng)站當(dāng)初也是過五關(guān)斬六將，選框架選主題才把它孵化出來的，不至于就不愛了。
因此呢，為了解決內(nèi)心的小波瀾，稍微加點css，js美化一下，還是能做到的。
ps：操作對象為hugo博客，理論靜態(tài)博客或者H5都能使用。
先把字體改下，找到css或者新建個custom.css把下面代碼扔進去。
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
*{font-family: 'ZCOOL KuaiLe', cursive;}
字體再這里找：https://fonts.google.com/
效果如下：
PS：有些字體英文辨識度比較模糊，你可以放置兩個字體，英文在前面，中文在后面。
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kadwa&display=swap');
*{font-family: 'Kadwa','ZCOOL KuaiLe';}
hugo配置文件config.toml中甩入下列代碼
[markup]
[markup.highlight]
anchorLineNos=false
codeFences=true
guessSyntax=true
hl_Lines=''
lineAnchors=''
lineNoStart=1
lineNos=false
lineNumbersInTable=true
noClasses=true
style='murphy'
tabWidth=4
解釋幾個常用的:
guessSyntax：猜測語法，針對代碼塊沒有寫語言的
lineNos：是否顯示行號
style：高亮樣式，從在里找 https://xyproto.github.io/splash/docs/all.html
如果你的主題集成了highlightjs，可以使用它，不過你得把上面的注釋掉，免得互相渲染了。
config.toml中加入下列代碼
highlightjs=true
highlightjsCDN="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"
highlightjsExtraLanguages=["ocaml"]
highlightjsTheme="gradient-light"
highlightjsThemeDark="paraiso-dark"
主題在這里找: https://highlightjs.org/static/demo/
效果如下：
新建css或者放入已有的css中
/*start copy-to-clipboard */
.highlight {
position: relative;
}
.highlight pre {
padding-right: 75px;
background-color:#f8f8f8 !important;
}
.highlight-copy-btn {
position: absolute;
top: 7px;
right: 7px;
border: 0;
border-radius: 4px;
padding: 1px;
font-size: 0.8em;
line-height: 1.8;
color: #fff;
background-color: #777;
min-width: 55px;
text-align: center;
}
.highlight-copy-btn:hover {
background-color: #666;
}
/*end copy-to-clipboard */
新建js或者放入已有js中
// start copy-to-clipboard
(function() {
'use strict';
if(!document.queryCommandSupported('copy')) {
return;
}
function flashCopyMessage(el, msg) {
el.textContent=msg;
setTimeout(function() {
el.textContent="Copy";
}, 1000);
}
function selectText(node) {
var selection=window.getSelection();
var range=document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
return selection;
}
function addCopyButton(containerEl) {
var copyBtn=document.createElement("button");
copyBtn.className="highlight-copy-btn";
copyBtn.textContent="Copy";
var codeEl=containerEl.firstElementChild;
copyBtn.addEventListener('click', function() {
try {
var selection=selectText(codeEl);
document.execCommand('copy');
selection.removeAllRanges();
flashCopyMessage(copyBtn, 'Copied!')
} catch(e) {
console && console.log(e);
flashCopyMessage(copyBtn, 'Failed :\'(')
}
});
containerEl.appendChild(copyBtn);
}
// Add copy button to code blocks
var highlightBlocks=document.getElementsByClassName('highlight');
Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();
//end copy-to-clipboard
加入config.toml配置文件中
[params.advanced]
customCSS=["css/custom.css"]
customJS=["js/custom.js"]
效果：
前端的玩意太多了，互相替換的也多，我也不太喜歡侵入式強的框架，只能慢慢整了，先完成再完美。
收工。
注意，這篇文章篇幅較長，主要針對新手，每一步很詳細，所以可能會顯得比較啰嗦，建議基礎(chǔ)比較好小伙伴根據(jù)右側(cè)目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ o ⊙ )。
教程內(nèi)容隨意復(fù)制使用，引用的話請加一個參考鏈接，謝謝！
倒騰了一兩周總算把個人博客網(wǎng)站完善了，目前這個版本使用應(yīng)該是夠了，當(dāng)然還有一些優(yōu)化項和功能增加后續(xù)在慢慢更新，為了回饋開源，今天準備把我自己修改完善的blog網(wǎng)站源代碼開源。這不是生成后的網(wǎng)頁文件，是您可以直接使用的源碼，您只需要把博客相關(guān)信息換成您自己的就可以部署了，對于新手或者不懂編程的小伙伴來說，簡直是福音，極大簡化了您構(gòu)建博客的工作量和復(fù)雜度，每個人都可以下載并修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最后，我們還是給這個開源小項目取個名字吧，就叫hexo-blog-fly吧，怎么樣？<<<<<源代碼下載>>>>>
本博客基于Hexo框架搭建，用到hexo-theme-matery主題,并在此基礎(chǔ)之上做了很多修改，修復(fù)了一些bug，增加了一些新的特性和功能，博客地址：https://shw2018.github.io，博客演示：sunhwee.com。
簡單使用方法：
更多詳情教程，強烈推薦看我寫的：Hexo+Github博客搭建完全教程
有什么問題可以在文章最后評論區(qū)留言和討論，當(dāng)然，歡迎文章最后打賞投幣，請博主一杯冰闊樂，笑～
最后，如果項目和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我github項目倉庫點個star，謝謝您！
去年在博客園注冊了自己的第一個博客，當(dāng)時初衷就是想拿來作為自己的在線筆記本，做做學(xué)習(xí)記錄，分享一些學(xué)到的東西，使用第三方提供的博客服務(wù)其實也挺方便，現(xiàn)在市面上提供類似服務(wù)的博客網(wǎng)站也很多，如CSDN，博客園，簡書等平臺，可以直接在上面發(fā)表，用戶交互做的好，寫的文章百度也能搜索的到。但是缺點是比較不自由，會受到平臺的各種限制和惡心的廣告，個性化不足。而自己購買域名和服務(wù)器，搭建博客的成本實在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這么一個網(wǎng)站，還要定期的維護它，對于我們大多數(shù)人來說，也是沒有這樣的精力和時間。那么，我們能不能自己定制一個自己喜歡的個性化博客，同時也不用付出太高的成本啦？
這就引出了第三種選擇，基于開源框架搭建博客，然后直接在github page平臺上托管我們的博客。這樣就可以安心的來寫作，又不需要定期維護，基于這個想法，今年8月初的時候開始搭建第一個屬于自己的獨立博客，前后斷續(xù)弄了近一周，到現(xiàn)在稍微有點模樣了。我想可能有很多小伙伴應(yīng)該也想過搭建一個自己的博客，當(dāng)然，網(wǎng)上也有一堆詳細教程。寫這篇博客的目的大概有兩個，第一個是當(dāng)做自己的搭建記錄，方便以后自己隨時查看提示修改，第二個是稍稍總結(jié)一下具體的搭建步驟以及一些支持個性化定制的博客源碼修改的教程，稍稍分享一下這些修改經(jīng)驗，當(dāng)然，更多的一些個性化操作需要你自己以后在這個基礎(chǔ)上慢慢去摸索，有些寫的不太好的地方還希望看到的小伙伴多多包涵。
博客初步的頁面效果可以看一下我的博客：sunhwee.com，歡迎大家支持。
本博客基于Hexo，所以首先要了解一下我們搭建博客所要用到的框架。Hexo是高效的靜態(tài)網(wǎng)站生成框架，它基于Node.js，快速，簡單且功能強大，是搭建博客的首選框架。大家可以進入hexo官網(wǎng)進行詳細查看，因為Hexo的創(chuàng)建者是臺灣人，對中文的支持很友好，可以選擇中文進行查看。通過Hexo，你可以直接使用Markdown語法來撰寫博客。相信很多小伙伴寫工程都寫過README.md文件吧，對，就是這個格式的！寫完后只需兩三條命令即可將生成的網(wǎng)頁上傳到github或者coding等代碼管理托管平臺，然后別人就可以瀏覽你的博客網(wǎng)頁啦。是不是很簡單？你無需關(guān)心網(wǎng)頁源代碼的具體生成細節(jié)，只需要用心寫好你的博客文章內(nèi)容就行了。
簡單總結(jié)：Hexo, 產(chǎn)品成熟，使用簡單，功能強大，有豐富的各種插件資源；但，像發(fā)布后臺、站內(nèi)搜索，評論系統(tǒng)類似訴求，雖然有對應(yīng)的工具，但也需要自己折騰下，后續(xù)我們一步一步介紹。
教程大致分三個部分，
hexo的初級搭建還有部署到github page上，以及個人域名的綁定。
為了把本地的網(wǎng)頁文件上傳到github上面去，需要用到工具———Git[下載地址]。Git是目前世界上最先進的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項目版本管理。Git非常強大，建議每個人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以看一下。Git教程
windows：到git官網(wǎng)上下載.exe文件,Download git,安裝選項還是全部默認，只不過最后一步添加路徑時選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符里打開git了。
順便說一下，windows在git安裝完后，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點難用。
linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行代碼
sudo apt-get install git
安裝完成后在命令提示符中輸入git --version來查看一下版本驗證是否安裝成功。
Hexo是基于node.js編寫的，所以需要安裝一下node.js和里面的npm工具。
windows：下載穩(wěn)定版或者最新版都可以Node.js，安裝選項全部默認，一路點擊Next。
最后安裝好之后，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現(xiàn)版本號，那么就安裝成功了。
linux：命令行安裝：
sudo apt-get install nodejs
sudo apt-get install npm
不過不推薦命令行安裝，有時候有問題，建議直接到官網(wǎng)去下載編譯好的壓縮文件，如下所示:
然后解壓到你指定的文件夾即可，比如我解壓到我系統(tǒng)的/home/shw/MySoftwares目錄下了，如圖:
注意本壓縮包是.tar.xz格式的，需要兩次解壓
配置一下環(huán)境變量
sudo vim /etc/profile
復(fù)制下面兩行到剛打開的profile文件最底部(注意node的安裝地址
/home/shw/MySoftwares/node-v12.8.0-linux-x64換成自己的)：
export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin
保存后退出，再執(zhí)行下面命令將環(huán)境變量生效：
source /etc/profile
將目錄軟鏈接到全局環(huán)境下（命令后面的/usr/local/bin/node是固定的）
sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node
sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm
這樣安裝好了以后使用npm安裝的包(比如：ionic serve)，使用包的命令時可能會提示找不到命令，沒關(guān)系，在用戶目錄下終端執(zhí)行下面命令(固定寫法)：
echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc
這樣我們在所有用戶下，都可以使用npm，也可以使用npm安裝的包的命令。成功地將nodejs安裝并配置到全局環(huán)境下。
安裝完后，打開命令行終端，輸入:
node -v
npm -v
檢查一下有沒有安裝成功
如果沒有梯子的話，可以使用阿里的國內(nèi)鏡像進行加速。
npm config set registry https://registry.npm.taobao.org
前面git和nodejs安裝好后，就可以安裝hexo了，你可以先創(chuàng)建一個文件夾MyBlog，用來存放自己的博客文件，然后cd到這個文件夾下（或者在這個文件夾下直接右鍵git bash打開）。
比如我的博客文件都存放在D:\Study\MyBlog目錄下。
在該目錄下右鍵點擊Git Bash Here，打開git的控制臺窗口，以后我們所有的操作都在git控制臺進行，就不用Windows自帶的cmd了。
定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo?？赡軙袔讉€報錯，無視它就行。
npm install -g hexo-cli
安裝完后輸入hexo -v驗證是否安裝成功。
至此hexo就安裝完了。
接下來初始化一下hexo,即初始化我們的網(wǎng)站，輸入hexo init初始化文件夾
hexo init MyBlog
這個MyBlog可以自己取什么名字都行，然后，接著輸入npm install安裝必備的組件。
cd MyBlog //進入這個MyBlog文件夾
npm install
新建完成后，指定文件夾MyBlog目錄下載：
這樣本地的網(wǎng)站配置也弄好了，輸入hexo g生成靜態(tài)網(wǎng)頁，然后輸入hexo s打開本地服務(wù)器，
hexo g
hexo server(或者簡寫:hexo s）)
然后瀏覽器打開http://localhost:4000/，就可以看到我們的博客啦，效果如下：
按ctrl+c關(guān)閉本地服務(wù)器。
接下來就去注冊一個github賬號，用來存放我們的網(wǎng)站。大多數(shù)小伙伴應(yīng)該都有了吧，作為一個合格的程序猿（媛）還是要有一個的。
打開https://github.com/，新建一個項目倉庫New repository，如下所示：
然后如下圖所示，輸入自己的項目名字，后面一定要加.github.io后綴，README初始化也要勾上。
要創(chuàng)建一個和你用戶名相同的倉庫，后面加.http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是http://xxxx.github.io，其中xxx就是你注冊GitHub的用戶名。例如我的：http://shw2018.github.io
生成SSH添加到GitHub，連接Github與本地。
右鍵打開git bash，然后輸入下面命令：
git config --global user.name "yourname"
git config --global user.email "youremail"
這里的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應(yīng)它的賬戶。例如我的：
git config --global user.name "shw2018"
git config --global user.email "hwsun@std.uestc.edu.cn"
可以用以下兩條，檢查一下你有沒有輸對
git config user.name
git config user.email
然后創(chuàng)建SSH,一路回車
ssh，簡單來講，就是一個秘鑰，其中，id_rsa是你這臺電腦的私人秘鑰，不能給別人看的，id_rsa.pub是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當(dāng)你鏈接GitHub自己的賬戶時，它就會根據(jù)公鑰匹配你的私鑰，當(dāng)能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上。
ssh-keygen -t rsa -C "youremail"
這個時候它會告訴你已經(jīng)生成了.ssh的文件夾。在你的電腦中找到這個文件夾。或者git bash中輸入
cat ~/.ssh/id_rsa.pub
將輸出的內(nèi)容復(fù)制到框中，點擊確定保存。
打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的id_rsa.pub里面的信息復(fù)制進去。如圖：
在git bash輸入ssh -T git@github.com，如果如下圖所示，出現(xiàn)你的用戶名，那就成功了。
這一步，我們就可以將hexo和GitHub關(guān)聯(lián)起來，也就是將hexo生成的文章部署到GitHub上，打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這里你可以修改與博客配置相關(guān)的各種信息。
修改最后一行的配置：
deploy:
type: git
repository: https://github.com/shw2018/shw2018.github.io
branch: master
repository修改為你自己的github項目地址即可，就是部署時，告訴工具，將生成網(wǎng)頁通過git方式上傳到你對應(yīng)的鏈接倉庫中。
這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
然后
hexo clean
hexo generate
hexo deploy
其中 hexo clean清除了你之前生成的東西，也可以不加。 hexo generate顧名思義，生成靜態(tài)文章，可以用 hexo g縮寫 ，hexo deploy部署文章，可以用hexo d縮寫
注意deploy時可能要你輸入username和password。
得到下圖就說明部署成功了，過一會兒就可以在http://yourname.github.io 這個網(wǎng)站看到你的博客了！！
現(xiàn)在你的個人網(wǎng)站的地址是yourname.github.io，如果覺得這個網(wǎng)址逼格不太夠，這就需要你設(shè)置個人域名了。但是需要花錢。
不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續(xù)看后面的，以后想買域名了在還看這塊
首先你得購買一個專屬域名，xx云都能買，看你個人喜好了。
這篇以騰訊云為例，騰訊云官網(wǎng)購買：
然后實名認證后進入騰訊云控制臺，點云解析進去，找到你剛買的域名，點進去添加兩條解析記錄，如下圖所示：
然后打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你自己的域名，保存：
這時候你的項目根目錄應(yīng)該會出現(xiàn)一個名為CNAME的文件了。如果沒有的話，打開你本地博客/source目錄，我的是D:\Study\MyBlog\source，新建CNAME文件，注意沒有后綴。然后在里面寫上你的域名，保存。最后運行hexo g、hexo d上傳到github。
過不了多久，再打開你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網(wǎng)站啦！
首先在博客根目錄下右鍵打開git bash，安裝一個擴展npm i hexo-deployer-git。
然后輸入hexo new post "article title"，新建一篇文章。
然后打開D:\Study\MyBlog\source\_posts的目錄，可以發(fā)現(xiàn)下面多了一個文件夾和一個.md文件，一個用來存放你的圖片等數(shù)據(jù)，另一個就是你的文章文件啦。
你可以會直接在vscode里面編寫markdown文件，可以實時預(yù)覽，也可以用用其他編輯md文件的軟件的工具編寫。
編寫完markdown文件后，根目錄下輸入hexo g生成靜態(tài)網(wǎng)頁，然后輸入hexo s可以本地預(yù)覽效果，最后輸入hexo d上傳到github上。這時打開你的github.io主頁就能看到發(fā)布的文章啦。
到這兒基本第一部分就完成了，已經(jīng)完整搭建起一個比較簡陋的個人博客了，接下來我們就可以對我們的博客進行個性化定制了。
我們要定制自己的博客的話，首先就要來了解一下Hexo博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板并加入自己的定制源代碼實現(xiàn)個性化定制
從上圖可以看出，博客的目錄結(jié)構(gòu)如下：
- node_modules
- public
- scaffolds
- source
- _data
- _posts
- about
- archives
- categories
- friends
- tags
- themes
node_modules是node.js各種庫的目錄，public是生成的網(wǎng)頁文件目錄，scaffolds里面就三個文件，存儲著新文章和新頁面的初始設(shè)置，source是我們最常用到的一個目錄，里面存放著文章、各類頁面、圖像等文件，themes存放著主題文件，一般也用不到。
我們平時寫文章只需要關(guān)注source/_posts這個文件夾就行了。
在文件根目錄下的_config.yml，就是整個hexo框架的配置文件了?？梢栽诶锩嫘薷拇蟛糠值呐渲?。詳細可參考官方的配置描述。
參數(shù)描述title網(wǎng)站標題subtitle網(wǎng)站副標題description網(wǎng)站描述author您的名字language網(wǎng)站使用的語言timezone網(wǎng)站時區(qū)。Hexo 默認使用您電腦的時區(qū)。時區(qū)列表。比如說：America/New_York, Japan, 和 UTC 。
其中，description主要用于SEO，告訴搜索引擎一個關(guān)于您站點的簡單描述，通常建議在其中包含您網(wǎng)站的關(guān)鍵詞。author參數(shù)用于主題顯示文章的作者。
參數(shù)描述url網(wǎng)址root網(wǎng)站根目錄 permalink文章的永久鏈接格式permalink_defaults永久鏈接中各部分的默認值
在這里，你需要把url改成你的網(wǎng)站域名。
permalink，也就是你生成某個文章時的那個鏈接格式。
比如我新建一個文章叫temp.md，那么這個時候他自動生成的地址就是
http://yoursite.com/2018/09/05/temp。
以下是官方給出的示例，關(guān)于鏈接的變量還有很多，需要的可以去官網(wǎng)上查找 永久鏈接 。
參數(shù)結(jié)果
:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world
再往下翻，中間這些都默認就好了。
theme: landscap
theme就是選擇什么主題，也就是在themes這個文件夾下，在官網(wǎng)上有很多個主題，默認給你安裝的是lanscape這個主題。當(dāng)你需要更換主題時，在官網(wǎng)上下載，把主題的文件放在themes文件夾下，再修改這個主題參數(shù)就可以了。
Front-matter 是md文件最上方以 ---分隔的區(qū)域，用于指定個別文件的變量，舉例來說：
title: Hexo+Github博客搭建記錄
date: 2019-08-10 21:44:44
下是預(yù)先定義的參數(shù)，您可在模板中使用這些參數(shù)值并加以利用。
參數(shù)描述layout布局title標題date建立日期updated更新日期comments開啟文章的評論功能tags標簽（不適用于分頁）categories分類（不適用于分頁）permalink覆蓋文章網(wǎng)址
其中，分類和標簽需要區(qū)別一下，分類具有順序性和層次性，也就是說Foo，Bar不等于Bar，Foo；而標簽沒有順序和層次。
---
title: Hexo+Github博客搭建記錄
date: 2019-08-10 21:44:44
author: 洪衛(wèi)
img: /medias/banner/7.jpg
coverImg: /medias/banner/7.jpg
top: true
cover: true
toc: true
password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110
mathjax: true
summary: 這是你自定義的文章摘要內(nèi)容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內(nèi)容作為摘要
tags:
- Hexo
- Github
- 博客
categories:
- 軟件安裝與配置
---
1.2.4.1 post
當(dāng)你每一次使用代碼
hexo new XXX
它其實默認使用的是post這個布局，也就是在source文件夾下的_post里面。
Hexo有三種默認布局：post、page和draft，它們分別對應(yīng)不同的路徑，而您自定義的其他布局和post相同，都將儲存到source/_posts文件夾。
而new這個命令其實是：
hexo new [layout] <title>
只不過這個layout默認是post罷了。
1.2.4.2 page
如果你想另起一頁，那么可以使用
hexo new page newpage
系統(tǒng)會自動給你在source文件夾下創(chuàng)建一個newpage文件夾，以及newpage文件夾中的index.md，這樣你訪問的newpage對應(yīng)的鏈接就是http://xxx.xxx/newpage
1.2.4.3 draft
draft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那么可以
hexo new draft newdraft
這樣會在source/_draft中新建一個newdraft.md文件，如果你的草稿文件寫的過程中，想要預(yù)覽一下，那么可以使用
hexo server --draft
在本地端口中開啟服務(wù)預(yù)覽。
如果你的草稿文件寫完了，想要發(fā)表到post中，
hexo publish draft newdraft
就會自動把newdraft.md發(fā)送到post中。
我們在了解Hexo博客文件基礎(chǔ)之后，知道主題文件就放在themes文件下，那么我們就可以去Hexo官網(wǎng)下載喜歡的主題，復(fù)制進去然后修改參數(shù)即可。
網(wǎng)上大多數(shù)主題都是github排名第一的Next主題，但是我個人不是很喜歡，我在網(wǎng)上看到一個主題感覺還不錯：hexo-theme-matery，地址在傳送門。這個主題看著比較漂亮，并且響應(yīng)式比較友好，點起來很舒服，功能也比較很多。
當(dāng)然，人各有異，這個主題風(fēng)格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。
特性：
他的介紹文檔寫得非常的詳細，還有中英文兩個版本。效果圖如下：
首先先按照文檔教程安裝一遍主題，然后是可以正常打開的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據(jù)你自己的習(xí)慣和喜好修改一下， 下面記錄一下我這個博客修改了的一些地方。
首先為了新建文章方便，我們可以修改一下文章模板，建議將/scaffolds/post.md修改為如下代碼：
---
title: {{ title }}
date: {{ date }}
author:
img:
coverImg:
top: false
cover: false
toc: true
mathjax: false
password:
summary:
tags:
categories:
---
這樣新建文章后 一些Front-matter參數(shù)不用你自己補充了，修改對應(yīng)信息就可以了。
原來的主題沒有404頁面，我們加一個。首先在/source/目錄下新建一個404.md，內(nèi)容如下：
title: 404
date: 2019-08-5 16:41:10
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面 :("
然后在/themes/matery/layout/目錄下新建一個404.ejs文件，內(nèi)容如下：
<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>
// 每天切換 banner 圖. Switch banner image every day.
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
修改
/themes/matery/layout/about.ejs，找到<div class="card">標簽，然后找到它對應(yīng)的</div>標簽，接在后面新增一個card，語句如下：
<div class="card">
<div class="card-content">
<div class="card-content article-card-content">
<div class="title center-align" data-aos="zoom-in-up">
<i class="fa fa-address-book"></i> <%- __('myCV') %>
</div>
<div id="articleContent" data-aos="fade-up">
<%- page.content %>
</div>
</div>
</div>
</div>
這樣就會多出一張card，然后可以在/source/about/index.md下面寫上你的簡歷了，當(dāng)然這里的位置隨你自己設(shè)置，你也可以把簡歷作為第一個card。
2.4.1 解決mathjax與代碼高亮的沖突
如果你按照教程安裝了代碼高亮插件hexo-prism-plugin，單獨使用是沒有問題的，但如果你又使用了mathjax，并且按照網(wǎng)上教程，安裝kramed插件并修改了js文件里的正則表達式（為了解決markdown和mathjax的語法沖突），那你的代碼就無法高亮了。解決方法很簡單，別用kramed插件了，還用原來自帶的marked插件，直接改它的正則表達式就行了。
2.4.2 加數(shù)學(xué)公式顯示
打開/themes/matery/layout中的post.ejs文件，在最下方粘貼如下代碼：
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
由于markdown語法與mathjax語法存在沖突，所以還需要修改源文件。
打開/node_modules/marked/lib中的marked.js文件，第539行的escape:處替換成：
escape: /^$[`*\[\]()#$+\-.!_>])/
第553行的em:處替換成：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
這時在文章里寫數(shù)學(xué)公式基本沒有問題了，但是要注意：
數(shù)學(xué)公式中如果出現(xiàn)了連續(xù)兩個{，中間一定要加空格！
舉個例子:
行內(nèi)公式：y=f(x)y=f(x)
代碼：
$y=f(x)$
行間公式：
y=fg1(x)y=fg1(x)
代碼：
\\[y={f_{ {g_1}}}(x)\\]
注意上面花括號之間有空格！
修改
/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日午夜之間的毫秒數(shù)(時間戳)
year - 作為date對象的年份，為4位年份值
month - 0-11之間的整數(shù)，做為date對象的月份
day - 1-31之間的整數(shù)，做為date對象的天數(shù)
hours - 0(午夜24點)-23之間的整數(shù)，做為date對象的小時數(shù)
minutes - 0-59之間的整數(shù)，做為date對象的分鐘數(shù)
seconds - 0-59之間的整數(shù)，做為date對象的秒數(shù)
microseconds - 0-999之間的整數(shù)，做為date對象的毫秒數(shù) */
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>
然后在合適的地方（比如copyright聲明后面）加上下面的代碼就行了：
<span id="sitetime"></span>
因為不蒜子至今未開放注冊，所以沒辦法在官網(wǎng)修改初始化，只能自己動手了。和上一條一樣，我們在
/themes/matery/layout/_partial里的footer.ejs文件最后加上：
<script>
$(document).ready(function () {
var int=setInterval(fixCount, 50); // 50ms周期檢測函數(shù)
var pvcountOffset=80000; // 初始化首次數(shù)據(jù)
var uvcountOffset=20000;
function fixCount() {
if (document.getElementById("busuanzi_container_site_pv").style.display !="none") {
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
clearInterval(int);
}
if ($("#busuanzi_container_site_pv").css("display") !="none") {
$("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始數(shù)據(jù)
clearInterval(int); // 停止檢測
}
}
});
</script>
然后把上面幾行有段代碼：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv">
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
</span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv">
人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
</span>
<% } %>
修改為：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv" style='display:none'>
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
</span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv" style='display:none'>
人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
</span>
<% } %>
其實就是增加了兩個style='display:none'而已。
其實三步就行了，不用像網(wǎng)上有些教程那么復(fù)雜。
第一步：
npm install --save hexo-helper-live2d
第二步：
npm install live2d-widget-model-shizuku
這里的動漫模型可以改，只需要下載對應(yīng)模型就行了，你可以官方倉庫去看有哪些模型，下載你喜歡的就行。
第三步：
在根目錄配置文件中添加如下代碼：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: false
react:
opacity: 0.7
然后hexo g在hexo s就能預(yù)覽出效果了，但是有個注意的地方，這個動漫人物最好不要和不蒜子同時使用，不然不蒜子會顯示不出來。至于解決辦法后續(xù)更新。
解決動漫人物和不蒜子不能同時使用的bug（2019.08.11）：
打開themes\matery\layout\_partial中的footer.ejs，將本站總訪問量和訪客數(shù)的代碼改為如下：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
<span id="busuanzi_container_site_pv" style='display:none'></span>
<i class="fa fa-heart-o"></i>
本站總訪問量 <span id="busuanzi_value_site_pv" class="white-color"></span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
<span id="busuanzi_container_site_uv" style='display:none'></span>
人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
<% } %>
變化就在下面兩句，將源代碼對應(yīng)字段后面的＜/span＞寫在前面了。
<span id="busuanzi_container_site_pv" style='display:none'></span>
<span id="busuanzi_container_site_uv" style='display:none'></span>
發(fā)現(xiàn)按照上面改了過后，又出現(xiàn)一個新bug：文章頭部的閱讀次數(shù)不顯示了，解決辦法：（2019.08.11）：
打開themes\matery\layout\_partial中的post-detail.ejs，找到對應(yīng)代碼字段：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
<div id="busuanzi_container_page_pv" class="info-break-policy">
<i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:
<span id="busuanzi_value_page_pv" ></span>
</div>
<% } %>
修改為下面的就可以了：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
<span id="busuanzi_container_site_pv" style='display:none'></span>
<i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:
<span id="busuanzi_value_page_pv" ></span>
<% } %>
由于這個主題自帶了gittalk、gitment、valine等評論插件，所以我們只需要對應(yīng)插件參數(shù)就行了，這個博客用的是gittalk，如下：
當(dāng)然也可以用其他評論插件，只需要配置對應(yīng)項就是了，不是自帶的可以照著網(wǎng)上的教程自己弄一個，類似的文章有很多，可以搜索關(guān)鍵字就行了。
寫文章的時候，想插入一段BGM怎么辦？
其實我們可以借助一些在線音樂的外鏈播放方式，首先打開網(wǎng)易云網(wǎng)頁版，找到想聽的歌曲，然后點擊生成外鏈：
可能你會遇到問題，比如點擊生成外鏈會提示你由于版權(quán)原因，不能生成，那么可以用下面辦法(目前還有效，不知道后面會不會失效)
復(fù)制如下代碼：
粘貼到文章對應(yīng)位置就行了，為了美觀，設(shè)置一下居中，具體代碼如下：
<div align="middle">這里粘貼剛剛復(fù)制的代碼</div>
如果我們自己寫博客寫疲勞了，想放松一下聽聽歌又不想切出博客主頁，那么我們可以自己定制一個博客音樂播放界面，把自己喜歡的歌曲都放進來，這里用到是Aplayer插件，但是歌曲來源需要我們自己定義，但是，因為各大音樂平臺，由于版權(quán)原因，很多歌曲是不支持外鏈播放的，難道我們就必須每首歌下載然后上傳云空間，再獲取詞曲封面么？這就比較麻煩了。其實不然，研究了半個小時，我發(fā)現(xiàn)可以采取下面的辦法，很方便：
操作如下圖：
為博客新增對emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件來支持 emoji表情的生成，把對應(yīng)的markdown emoji語法（::,例如： :smile:）轉(zhuǎn)變成會跳躍的emoji表情，安裝命令如下：
npm install hexo-filter-github-emojis --save
在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
執(zhí)行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對應(yīng)位置看到你用emoji語法寫的表情了。
如下圖：
matery主題已經(jīng)集成Valine評論模塊，在主題配置文件.yml中配置相應(yīng)的字段就行了。enable: true，XXX字段是需要自己注冊登錄leancloud官網(wǎng)，創(chuàng)建應(yīng)用然后獲取appId和appKey，其他參數(shù)根據(jù)自己的需求修改就是，如下：
valine:
enable: true
appId: XXXXXXXXXXXXXXXXXXXXX
appKey: XXXXXXXXXXXXXXXXXXXX
notify: true
verify: true
visitor: true
avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: 'just go go' # Comment Box placeholder
注意：Valine用在matery主題上有個bug就是第一條評論位置會錯位
如下圖：
解決辦法：
F12開發(fā)者模式，控制臺定位bug位置，修改參數(shù)，調(diào)整對應(yīng)主題源文件參數(shù)，得以解決，如下圖示：
原理就是給博客增加一個事件判斷，如下圖所示：
打開博客主題文件夾，路徑：
themes/matery/layout/layout.ejs，在對應(yīng)位置添加如下代碼：
<script type="text/javascript">
var OriginTitile=document.title,
st;
document.addEventListener("visibilitychange", function () {
document.hidden ? (document.title="看不見我~看不見我~", clearTimeout(st)) : (document.title= "(??????) ?被發(fā)現(xiàn)了～", st=setTimeout(function () {
document.title=OriginTitile
}, 3e3))
})
</script>
然后 hexo clean && hexo g 即可。
hexo添加各種優(yōu)化功能，比如SEO優(yōu)化等。
待續(xù)......
網(wǎng)站推廣是一個比較煩人的事情，特別是對于專心搞技術(shù)的來說，可能就不是很擅長，那么怎么才能讓別人知道我們網(wǎng)站呢？也就是說我們需要想辦法讓別人通過搜索就可以搜索到博客的內(nèi)容，給我們帶來自然流量，這就需要seo優(yōu)化,讓我們的站點變得對搜索引擎友好
SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化”。SEO是指通過站內(nèi)優(yōu)化比如網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)、網(wǎng)站代碼優(yōu)化等以及站外優(yōu)化。
首先要做的就是讓各大搜索引擎收錄你的站點，我們在剛建站的時候各個搜索引擎是沒有收錄我們網(wǎng)站的，在搜索引擎中輸入site:<域名>,如果如下圖所示就是說明我們的網(wǎng)站并沒有被百度收錄。我們可以直接點擊下面的“網(wǎng)址提交”來提交我們的網(wǎng)站
登錄百度站長搜索資源平臺：
http://zhanzhang.baidu.com， 只要有百度旗下的賬號就可以登錄，登錄成功之后在站點管理中點擊添加網(wǎng)站然后輸入你的站點地址。
注意，這里需要輸入我們自己購買的域名,不能使用xxx.github.io之類域名.因為github是不允許百度的spider（蜘蛛）爬取github上的內(nèi)容的，所以如果想讓你的站點被百度收錄，只能使用自己購買的域名
在填完網(wǎng)址選擇完網(wǎng)站的類型之后需要驗證網(wǎng)站的所有權(quán)，驗證網(wǎng)站所有權(quán)的方式有三種：
其實使用哪一種方式都可以，都是比較簡單的。
但是一定要注意，使用文件驗證文件存放的位置需要放在sourc文件夾下，如果是html文件那么hexo就會將其編譯，所以必須要在html頭部加上的layout:false，這樣就不會被hexo編譯。（如果驗證文件是txt格式的就不需要）
其他兩種方式也是很簡單的，個人推薦文件驗證和CNAME驗證，CNAME驗證最為簡單，只需加一條解析就好~
我們需要使用npm自動生成網(wǎng)站的sitemap，然后將生成的sitemap提交到百度和其他搜索引擎
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
在根目錄配置文件.yml中修改url為你的站點地址
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shw2018.github.io/
url: https://sunhwee.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
執(zhí)行完hexo g命令之后就會在網(wǎng)站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過：
https://sunhwee.com/baidusitemap.xml, 查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。
然后我們就可以將我們生成的sitemap文件提交給百度，還是在百度站長平臺，找到鏈接提交，這里我們可以看到有兩種提交方式，自動提交和手動提交，自動提交又分為主動推送、自動推送和sitemap
如何選擇鏈接提交方式
主動推送：最為快速的提交方式，推薦您將站點當(dāng)天新產(chǎn)出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度?？梢耘c主動推送配合使用。sitemap：您可以定期將網(wǎng)站鏈接放到sitemap中，然后將sitemap提交給百度。百度會周期性的抓取檢查您提交的sitemap，對其中的鏈接進行處理，但收錄速度慢于主動推送。手動提交：一次性提交鏈接給百度，可以使用此種方式。
一般主動提交比手動提交效果好，這里介紹主動提交的三種方法
從效率上來說：
主動推送>自動推送>sitemap
安裝插件hexo-baidu-url-submit
npm install hexo-baidu-url-submit --save
然后再根目錄的配置文件中新增字段
baidu_url_submit:
count: 80 # 提交最新的一個鏈接
host: www.sunhwee.com # 在百度站長平臺中注冊的域名
token: xxxxxxxxxxxxxx # 請注意這是您的秘鑰， 所以請不要把博客源代碼發(fā)布在公眾倉庫里!
path: baidu_urls.txt # 文本文檔的地址， 新鏈接會保存在此文本文檔里
再加入新的deploy：
deploy:
- type: baidu_url_submitter
如圖所示：
注意,這里多個 type 的寫法應(yīng)該這么寫**,前面那個 type 是我推送到 Github 與 Coding的page頁面的配置,后面再講這個。
密鑰的獲取位置在網(wǎng)頁抓取中的鏈接提交這一塊,如下所示:
這樣執(zhí)行hexo deploy的時候，新的鏈接就會被推送了。
推送成功時,會有如下終端提示
在主題配置文件下設(shè)置,將baidu_push設(shè)置為true:
在主題配置文件下設(shè)置,將baidu_push設(shè)置為true:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
然后主題文件目錄加入下面代碼，一般在目錄
/themes/matery/layout/_partial中的head.ejs中加入下面JS代碼（有可能你的目錄不是這樣，原理類似），這樣全站都有了：
<% if (theme.baidu_push) { %>
<script>
(function(){
var bp=document.createElement('script');
var curProtocol=window.location.protocol.split(':')[0];
if (curProtocol==='https') {
bp.src='https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src='http://push.zhanzhang.baidu.com/push.js';
}
var s=document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<% } %>
這樣每次訪問博客中的頁面就會自動向百度提交sitemap
將我們上一步生成的sitemap文件提交到百度就可以了~
百度收錄過程還是蠻久的，需要大家耐心等待一下，提交鏈接在站長工具中有顯示大概是要兩天，站點被百度收錄大概花了半個月==，收錄了之后，可以在百度搜索site: xxxxx.com可以搜索到結(jié)果
相比于百度，google的效率實在不能更快，貌似十分鐘左右站點就被收錄了，其實方法是和百度是一樣的。
google站點平臺：
https://www.google.com/webmasters/
向 google 添加 sitemap 后: 進入 Google Search Console - 抓取 - 站點地圖,點擊「添加/測試站點地圖」,輸入你的博客網(wǎng)址. 若無報錯則站點地圖提交成功
一步一步來就好，過不了過久就可以被google收錄了
robots.txt 是一種存放于網(wǎng)站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網(wǎng)站中哪些內(nèi)容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成后在站點目錄 /public/ 下。
robots.txt 是一種存放于網(wǎng)站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網(wǎng)站中哪些內(nèi)容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成后在站點目錄 /public/ 下。
我的 robots.txt 文件內(nèi)容如下：
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
除了百度和google兩大搜索引擎，還有搜狗、360等其他的搜索引擎，流程都是一樣的，大家就自行選擇添加哈，這里就不再贅述了~
seo搜索引擎優(yōu)化認為，網(wǎng)站的最佳結(jié)構(gòu)是用戶從首頁點擊三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：
sitename/year/mounth/day/title四層的結(jié)構(gòu)，這樣的url結(jié)構(gòu)很不利于seo，爬蟲就會經(jīng)常爬不到我們的文章，于是，我們需要優(yōu)化一下網(wǎng)站文章url
方案一：
我們可以將url直接改成sitename/title的形式，并且title最好是用英文，在根目錄的配置文件下修改permalink如下：
url: https://sunhwee.com
root: /
permalink: :title.html
permalink_defaults:
方案二：
使用插件優(yōu)化url
插件hexo-abbrlink實現(xiàn)了這個功能，它將原來的URL地址重新進行了進制轉(zhuǎn)換和再編碼。
安裝hexo-abbrlink。
npm install hexo-abbrlink --save
配置博客根目錄下的_config.yml文件。
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 進制：dec(default) and hex
運行hexo clean和hexo g命令來重新生成文件看看，可以清楚的看到，URL結(jié)構(gòu)成功變?yōu)榱?層。
seo優(yōu)化應(yīng)該說是一個收益延遲的行為，可能你做的優(yōu)化短期內(nèi)看不到什么效果，但是一定要堅持，seo優(yōu)化也是有很深的可以研究的東西，從我們最初的網(wǎng)站設(shè)計，和最基礎(chǔ)的標簽的選擇都有很大的關(guān)系，網(wǎng)站設(shè)計就如我們剛剛說的，要讓用戶點擊三次可以到達網(wǎng)站的任何一個頁面，要增加高質(zhì)量的外鏈，增加相關(guān)推薦（比如說我們經(jīng)常見到右側(cè)本站的最高閱讀的排名列表），然后就是給每一個頁面加上keyword和描述
在代碼中，我們應(yīng)該寫出能讓瀏覽器識別的語義化HTML，這樣有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；并且對外鏈設(shè)置nofollow標簽，避免spider爬著爬著就爬出去了（減少網(wǎng)站的跳出率），并且我們要盡量在一些比較大的網(wǎng)站增加我們站點的曝光率，因為spider會經(jīng)常訪問大站，比如我們在掘金等技術(shù)社區(qū)發(fā)表文章中帶有我們的站點，這樣spider是很有可能爬到我們中的站點的，so....
由于代碼高亮插件prism_plugin的樣式?jīng)]有行號顯示和代碼塊整體復(fù)制功能，不是很方便，為了優(yōu)化觀感和易用性，我們可以對其進行修改：
待續(xù)......
我們在配置文件.yml中找到prism_plugin配置項line_number: false（# default false）改為true，開啟行號，但是在我們這個matery主題中中是無效的，有bug需要改一下matery.css樣式參數(shù),在第95行位置將：
pre {
padding: 1.5rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
改為：
pre {
padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
注釋掉緊接著的code代碼塊里面的font-size項，如下：
code {
padding: 1px 5px;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
/*font-size: 0.91rem;*/
color: #e96900;
background-color: #f8f8f8;
border-radius: 2px;
}
好了這下可以顯示行號了，如圖：
issue問題：
優(yōu)化網(wǎng)站加載邏輯問題：圖片最后加載，加入圖片懶加載方法
hexo-lazyload-image的作用原理是講你博客里面img標簽的src屬性替換為一個loading image，把真實的圖片地址放在data-origin屬性下面。然后當(dāng)你的網(wǎng)頁翻到那張圖片時（也就是圖片在窗口中完全可見時），他會有一段js用data-origin的內(nèi)容替換src，打到懶加載的目的。
一般情況下懶加載和gallery插件會發(fā)生沖突，比如按照我上面所說，最終結(jié)果就會變成，可能只有第一張圖片在gallery中打開是原圖，右翻左翻都會是那張loading image，需要你掌握js，可以修改matery.js里面的內(nèi)容，甚至可能換一個gallery，比如photosiwpe之類的
解決方法：修改/themes/matery/source/js中的matery.js文件
第103行：
$('#articleContent, #myGallery').lightGallery({
selector: '.img-item',
// 啟用字幕
subHtmlSelectorRelative: true,
showThumbByDefault: false //這句加上
});
后面加上：
$(document).find('img[data-original]').each(function(){
$(this).parent().attr("href", $(this).attr("data-original"));
});
再裝個插件，
https://github.com/Troy-Yang/hexo-lazyload-image
在博客根目錄配置.yml文件加入對應(yīng)字段，如下：
# lazyload configuration 2019.08.23
lazyload:
enable: true
onlypost: false
loadingImg: # eg ./images/loading.gif
好了，這樣實現(xiàn)了博客網(wǎng)站的圖片懶加載。
Gulp實現(xiàn)代碼壓縮，以提升網(wǎng)頁加載速度。
1 首先我們需要安裝Gulp插件和5個功能模塊，依次運行下面的兩條命令。
npm install gulp -g #安裝gulp
# 安裝功能模塊
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 額外的功能模塊
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save
2 接下來在博客的根目錄下新建gulpfile.js文件，并復(fù)制下面的內(nèi)容到文件中。
var gulp=require("gulp");
var debug=require("gulp-debug");
var cleancss=require("gulp-clean-css"); //css壓縮組件
var uglify=require("gulp-uglify"); //js壓縮組件
var htmlmin=require("gulp-htmlmin"); //html壓縮組件
var htmlclean=require("gulp-htmlclean"); //html清理組件
var imagemin=require("gulp-imagemin"); //圖片壓縮組件
var changed=require("gulp-changed"); //文件更改校驗組件
var gulpif=require("gulp-if"); //任務(wù) 幫助調(diào)用組件
var plumber=require("gulp-plumber"); //容錯組件（發(fā)生錯誤不跳出任務(wù)，并報出錯誤內(nèi)容）
var isScriptAll=true; //是否處理所有文件，(true|處理所有文件)(false|只處理有更改的文件)
var isDebug=true; //是否調(diào)試顯示 編譯通過的文件
var gulpBabel=require("gulp-babel");
var es2015Preset=require("babel-preset-es2015");
var del=require("del");
var Hexo=require("hexo");
var hexo=new Hexo(process.cwd(), {}); // 初始化一個hexo對象
// 清除public文件夾
gulp.task("clean", function() {
return del(["public/**/*"]);
});
// 下面幾個跟hexo有關(guān)的操作，主要通過hexo.call()去執(zhí)行，注意return
// 創(chuàng)建靜態(tài)頁面 （等同 hexo generate）
gulp.task("generate", function() {
return hexo.init().then(function() {
return hexo
.call("generate", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 啟動Hexo服務(wù)器
gulp.task("server", function() {
return hexo
.init()
.then(function() {
return hexo.call("server", {});
})
.catch(function(err) {
console.log(err);
});
});
// 部署到服務(wù)器
gulp.task("deploy", function() {
return hexo.init().then(function() {
return hexo
.call("deploy", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 壓縮public目錄下的js文件
gulp.task("compressJs", function() {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5檢查機制
})
)
.pipe(uglify()) //調(diào)用壓縮組件方法uglify(),對合并的文件進行壓縮
.pipe(gulp.dest("./public")); //輸出到目標目錄
});
// 壓縮public目錄下的css文件
gulp.task("compressCss", function() {
var option={
rebase: false,
//advanced: true, //類型：Boolean 默認：true [是否開啟高級優(yōu)化（合并選擇器等）]
compatibility: "ie7" //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //類型：Boolean 默認：false [是否保留換行]
//keepSpecialComments: '*' //保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴，如果不加這個參數(shù)，有可能將會刪除你的部分前綴
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 壓縮public目錄下的html文件
gulp.task("compressHtml", function() {
var cleanOptions={
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略處理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊處理
};
var minOption={
collapseWhitespace: true, //壓縮HTML
collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/>==> <input />
removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" />==> <input />
removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注釋
minifyJS: true, //壓縮頁面JS
minifyCSS: true, //壓縮頁面CSS
minifyURLs: true //替換頁面URL
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
// 壓縮 public/uploads 目錄內(nèi)圖片
gulp.task("compressImage", function() {
var option={
optimizationLevel: 5, //類型：Number 默認：3 取值范圍：0-7（優(yōu)化等級）
progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
multipass: false //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化
};
return gulp
.src("./public/medias/**/*.*")
.pipe(gulpif(!isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public"));
});
// 執(zhí)行順序： 清除public目錄 -> 產(chǎn)生原始博客內(nèi)容 -> 執(zhí)行壓縮混淆 -> 部署到服務(wù)器
gulp.task(
"build",
gulp.series(
"clean",
"generate",
"compressHtml",
"compressCss",
"compressJs",
"compressImage",
gulp.parallel("deploy")
)
);
// 默認任務(wù)
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
)
);
//Gulp4最大的一個改變就是gulp.task函數(shù)現(xiàn)在只支持兩個參數(shù)，分別是任務(wù)名和運行任務(wù)的函數(shù)
3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。
注意，很可能你會運行到第三步，也就是運行gulp壓縮命令時會報錯，如圖所示：
那是因為gulp安裝的本地版本和hexo自帶的版本不對應(yīng)導(dǎo)致，第三步gulp壓縮可以用下面命令強制使用本地版本：
node ./node_modules/gulp/bin/gulp.js
有時候我們想換一臺電腦繼續(xù)寫博客，最簡單的方法就是把博客整個目錄拷貝過去，就是這么暴力。不過，這種方法有個問題就是要是那天電腦崩了，本地源文件丟失了，比較麻煩，所以這時候就可以將博客目錄下的所有源文件都上傳到github上面。
首先在github博客倉庫下新建一個分支hexo，然后git clone到本地，把.git文件夾拿出來，放在博客根目錄下。
然后git branch -b hexo切換到hexo分支，然后git add .，然后git commit -m "xxx"，最后git push origin hexo提交就行了。
具體效果可以看我的博客源文件倉庫：傳送門。
大家也可以先用下文hexo安裝方法安裝完hexo，然后直接git clone -b hexo
https://github.com/shw2018/shw2018.github.io.git克隆我的所有源文件，這是我目前修改完的基本沒bug的定制化的博客，可以直接拿來用。
適應(yīng)網(wǎng)頁設(shè)計，維護同一個網(wǎng)頁代碼，即可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到智能手機或其他移動產(chǎn)品設(shè)備）上具有更好的閱讀體驗。那如何做了？下面就談?wù)勥@個問題。
1、在HTML頭部增加viewport標簽。
在網(wǎng)站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。
2、在CSS文件尾部增加針對不同屏幕分辨率的規(guī)則。
例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備（如iPhone等），網(wǎng)頁側(cè)欄隱藏中部內(nèi)容欄寬度自動調(diào)節(jié)。以下代碼針對Z-Blog，WordPress相關(guān)標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網(wǎng)頁總體框架可以使用絕對寬度，但往下的內(nèi)容框架、側(cè)欄等最好使用相對寬度，這樣針對不同分辨率進行修改就方便。當(dāng)然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對于大多數(shù)瀏覽器來說，通常用 em=px/16 換算，例如16px就等于1em。
5、圖片自適應(yīng)（非必要）
img標簽的話，只需要設(shè)置 max-width: 100%;或width:100%; 語句為：img { max-width: 98%; }
css加載的background-image如何自適應(yīng)大小呢，其實CSS3中是可以實現(xiàn)的，添加如下語句：background-size:100% 100%;
根據(jù)上面講述的幾點內(nèi)容，我針對我博客的CSS進行了一些修改，發(fā)現(xiàn)可以從iPhone手機瀏覽到體驗更佳的頁面，但有一個問題沒有解決，就是頂部導(dǎo)航欄navbar顯示有問題，換行后被下面的文章蓋住了，不知道怎樣能更好地解決這個問題（更新：經(jīng)過網(wǎng)友提示，在導(dǎo)航欄divNavbar的樣式里，加入 white-space:nowrap; overflow:hidden; 即可解決這個問題）。
總之，根據(jù)上面四步進行修改的話，可以很簡單地將一個網(wǎng)站修改為適合多種設(shè)備瀏覽的頁面，這對于通過手機訪問網(wǎng)站的用戶來說，的確是一件好事。
另外分享一個視頻：
http://v.youku.com/v_show/id_XNjQ5ODkwODI0.html
切圖網(wǎng)（qietu.com）是一家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，關(guān)注用戶體驗，歡迎訂閱微信公眾號：qietuwang
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
