從零開始搭建部落格第一部分，Github註冊及Github Pages建立
什麼是 Hexo？
Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
一：註冊Github
1：開啟Github首頁，點選Sign up 進行註冊。
二：Github Pages 靜態網頁建立
1：在新頁面點選 NEW 按鈕，建立屬於自己的新倉庫。
2: 點選 Code
3: 點選 Create new file
4: 輸入 index.html，在 Edit new file 書寫內容。
5：點選 Commit new file 進行建立。
6：用瀏覽器開啟 使用者名稱.github.io
Github Pages 靜態網頁建立完成。
三：Hexo部落格本地環境安裝
1: 安裝 Node
2: 安裝 Git
4: 初始化 Hexo
-
電腦中任選碟符新建一個資料夾作為部落格網站的根目錄，檔名好不要是中文。
-
空白處右鍵點選
Git Bash Here
安裝 Hexo
$ npm install -g hexo-cli
複製程式碼等待執行完成後依次輸入以下命令
$ hexo init <新建資料夾的名稱>
$ cd <新建資料夾的名稱>
$ npm install
複製程式碼注意:後續的命令均需要在站點目錄下（即資料夾內）使用Git Bash執行。
此時Hexo框架的本地搭建已經完成了。我們來執行一下看看：
命令列依次輸入以下命令:
$ hexo clean #清除瀏覽器快取
$ hexo g
$ hexo s
複製程式碼瀏覽器中開啟(http://locakhost:4000)或者(127.0.0.1:4000),說明Hexo部落格已經成功在本地執行。
四：本地部落格釋出到Github Pages
1：需要在Github上建立好Github Pages倉庫
2：安裝將 Hexo 部署到 Git 的外掛
-
在站點目錄中執行命令列輸入
npm install hexo-deployer-git --save -
後續還要安裝各種外掛，實現部落格的各種功能。等待外掛安裝完成
3：將本地目錄與Github關聯起來
- 命令列輸入
$ ssh-keygen -t rsa -C "郵箱地址"
複製程式碼-
1： 這裡要輸入之前註冊Github時的郵箱，例如我之前註冊用的是 123@qq.com，那命令列就輸入ssh-keygen -t rsa -C "123@qq.com"輸入後一直回車。
-
2：開啟 C:\Users\ 使用者名稱，資料夾內尋找 .ssh 資料夾
-
3：資料夾內會有兩個檔案，一個id_rsa.pub一個id_rsa，用文字方式開啟id_rsa.pub，推薦使用Vscode 開啟，複製裡面的的內容。
-
4：開啟Github 點選右上角的頭像 Settings 選擇SSH and GPG keys
-
5：點選
New SSH key將之前複製的內容粘帖到Key的框中。 上面的title 可以隨意 點選Add SSH key完成新增。 -
6: 此時回到命令列。 試一下是否跟Github連線成功。命令列輸入
ssh -T git@github.com，彈出的內容輸入yes，看到出現Hi ! You've successfully authenticated, but GitHub doesnot provide shell access. 說明連結成功。此處這個應該是你Github的使用者名稱。
4: 修改Hexo站點的 _config.yml檔案
- 進入部落格資料夾， 找到
_config.yml部落格的配置檔案。以後修改部落格的樣式或內容會多次用到它。
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: #網站標題
subtitle: #網站副標題
description: #網站描述 主要用於SEO
keywords: #網站關鍵詞 主要用於SEO
author: #網站作者
language: zh-CN #網站語言
timezone: #網站時區：Hexo 預設使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。
複製程式碼# URL 網址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: #修改為https://<使用者名稱>.github.io
root: / #如果您的網站存放在子目錄中，例如 http://yoursite.com/blog，則請將您的 url 設為 http://yoursite.com/blog 並把 root 設為 /blog/。
permalink: :year/:month/:day/:title/ #文章的永久連結格式
permalink_defaults: #永久連結中各部分的預設值
複製程式碼- 在檔案底部 deploy 新增如下程式碼：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: #部署部分的設定
type: git
repo: git@github.com:<Github使用者名稱>/<github使用者名稱>.github.io.git
branch: master
複製程式碼5: 儲存配置，將生成的本地頁面上傳至Github
-
命令列輸入
hexo g，此時Hexo會根據配置檔案渲染出一套靜態頁面。 -
完成後輸入
hexo d，此時會將之前渲染出的一系列檔案上傳至Github。
注意：也可以直接輸入hexo g -d直接完成渲染和上傳。
上傳完成後，開啟https://<使用者名稱>.github.io檢視上傳的網頁。如果頁面變成了之前本地除錯時的樣子，說明上傳以及完成了。沒變的話檢視一下上傳時命令列視窗的資訊有沒有錯誤資訊，沒有的話清除一下瀏覽器快取試試。
五：Hexo部落格主題安裝及Next主題個性化修改
基於Next主題的修改和配置
注意：部落格配置檔案是指部落格根目錄下的**config.yml檔案，主題配置檔案是指/themes/主題名/路徑下的_config.yml**檔案，例如我使用的主題為next主題，主題配置檔案為/themes/next/config.yml。
1：主題選擇
- 到 Nexo官網主題頁選擇喜歡的主題。每個主題配置方法略有不同，建議使用流行主題，推薦Next主題，因為我的部落格就是用Next主題搭建的。
2：主題修改
主題安裝
-
部落格根目錄開啟命令列輸入
git clone https://github.com/theme-next/hexo-theme-next themes/next
複製程式碼- 1：安裝完成後，開啟 部落格配置檔案 修改theme 主題：
# Extensions 擴充套件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #當前主題名稱。值為false時禁用主題
複製程式碼- 2：修改 主題配置檔案 是根目錄/themes/next目錄下的_config.yml檔案。
修改選單及建立分類頁
- 1:定位到 Hexo 站點目錄下,在命令列輸入如下命令：
$ hexo new page tags
複製程式碼新建出標籤頁
同樣的道理，開啟分類頁的時候要輸入hexo new page categories來新建出分類頁。
- 2:設定頁面型別：編輯剛新建的頁面，將頁面的型別設定為 tags ，主題將自動為這個頁面顯示標籤雲。頁面內容如下：
---
title: 標籤
date: 2014-12-22 12:39:04
type: "tags"
---
複製程式碼- 3:修改 主題配置 檔案下的menu項：
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
複製程式碼修改主題風格
- Next自帶四種主題風格，可以在主題配置檔案搜尋Scheme項，將需要的風格前的#去掉，注意只能開啟一個風格。
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
複製程式碼設定作者頭像
-
編輯主題配置檔案，搜尋修改欄位 avatar， 值設定成頭像的連結地址。可以設定成線上的圖片地址。也可以把圖片放在本地。
-
本地設定：放置在source/images目錄下，設定為url: /images/avatar.jpg
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/cat.jpg
# If true, the avatar would be dispalyed in circle.
rounded: false
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true
複製程式碼設定作者暱稱與站點描述
# Site 網站
title: #網站標題
subtitle: #網站副標題
description: #網站描述 主要用於SEO
keywords: #網站關鍵詞 主要用於SEO
#### 設定程式碼高亮主題
- NexT 使用 [Tomorrow Theme](https://github.com/chriskempson/tomorrow-theme) 作為程式碼高亮，共有5款主題供你選擇。 NexT 預設使用的是 白色的 normal 主題，可選的值有 normal，night， night blue， night bright， night eighties：
- 編輯主題配置檔案，更改 highlight_theme 欄位，將其值設定成你所喜愛的高亮主題，例如：
複製程式碼Code Highlight theme
Available values: normal | night | night eighties | night blue | night bright
github.com/chriskempso…
highlight_theme: night eighties
#### 側邊欄社交連結
- 側欄社交連結的修改包含兩個部分，第一是連結，第二是連結圖示。 兩者配置均在 主題配置檔案 中。
複製程式碼Social Links.
Usage: Key: permalink || icon
Key is the link label showing to end users.
Value before || delimeter is the target permalink.
Value after || delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social: GitHub: github.com/yourname || github E-Mail: mailto:yourname@qq.com || envelope #Weibo: weibo.com/yourname || weibo #Google: plus.google.com/yourname || google #Twitter: twitter.com/yourname || twitter #FB Page: www.facebook.com/yourname || facebook #VK Group: vk.com/yourname || vk #StackOverflow: stackoverflow.com/yourname || stack-overflow #YouTube: youtube.com/yourname || youtube #Instagram: instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype
- 設定連結的圖示，對應的欄位是 social_icons。其鍵值格式是 匹配鍵: [Font Awesome](https://www.lixint.me/www.fontawesome.com.cn) 圖示名稱， 匹配鍵 與上一步所配置的連結的 顯示文字 相同（大小寫嚴格匹配），圖示名稱 是 Font Awesome 圖示的名字（不必帶 fa- 字首）。 enable 選項用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。
複製程式碼social_icons: enable: true icons_only: false transition: false
#### 開啟打賞功能
- 越來越多的平臺（微信公眾平臺，新浪微博，簡書，百度打賞等）支援打賞功能，付費閱讀時代越來越近，特此增加了打賞功能，支援微信打賞和支付寶打賞。 只需要 主題配置檔案 中填入 微信 和 支付寶 收款二維碼圖片地址 即可開啟該功能。
複製程式碼Reward
If true, reward would be displayed in every article by default.
And you can show or hide one article specially through add page variable reward: true/false.
reward: enable: true comment: 如果覺得文字對您有幫助，歡迎打賞 wechatpay: /images/wechat.png alipay: /images/zhifubao.jpg bitcoin: /images/qq.png
**注意：將儲存的圖片放到 /source/images/圖片名稱**
##### 修改打賞字型不閃動
- 滑鼠一指就瘋狂抖動。
- 修改檔案next/source/css/_common/components/post/post-reward.styl，然後註釋其中的函式#QR > div:hover p函式即可。css檔案註釋用/ 和 / 包裹程式碼即可。
複製程式碼#QR > div:hover p { animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; }
- 這個post-reward.styl檔案是跟按鈕及圖片相關的，如果需要修改關於打賞的其他屬性，例如按鈕大小，樣式，圖片大小等，都可以修改post-reward.styl檔案實現。
#### 開啟友情連結 or 側邊欄推薦閱讀
- 主題配置檔案 中搜尋links_title欄位，修改links_icon、links_title、links_layout、links四個欄位的內容實現自定義風格。
- link_icon是title前面的圖示，用法跟之前的社交連結的圖示用法是一樣的， 用Font Awesome圖示。
links_title為標題，如果是作為友情連結使用，可以設定為
links_title: 友情連結
在links欄位設定友情連結名字及連結
- 這個模組的自由度比較高，可以用來放置友情連結，也可以放置推薦閱讀。
複製程式碼Blog rolls
links_icon: link links_title: Links links_layout: block #links_layout: inline #links: #Title: example.com
#### hexo生成博文插入圖片顯示不出來
1. 把主頁配置檔案_config.yml 裡的`post_asset_folder`:這個選項設定為true
2. 在hexo的目錄下執行`npm install https://github.com/CodeFalling/hexo-asset-image --save`（需要等待一段時間）。
3. 完成安裝後用hexo新建文章 `hexo new "文章標題"` 的時候會發現_posts目錄下面會多出一個和文章名字一樣的資料夾。
4. 只要使用`  `就可以插入圖片。其中[]裡面不寫文字則沒有圖片標題。
#### 文章左側的目錄如何弄出來？
1. 1、首先在你的markdown檔案裡面要有標題，所謂標題就是例如這種一級標題(#)，二級標題(##)，三級標題(###)的。
2. 2、在主題的_config檔案裡面，將toc的enable設定為true就ok了，預設的目錄是有序號的，如果你不想要序號，你需要把number置為false 。
#### 設定 RSS
1. NexT 中 RSS 有三個設定選項，滿足特定的使用場景。 更改 主題配置 檔案，設定 rss 欄位的值：
- false：禁用 RSS，不在頁面上顯示 RSS 連線。
- 留空：使用 Hexo 生成的 Feed 連結。 你可以需要先安裝 [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed) 外掛。
- 安裝方法：根目錄下命令列輸入`npm install hexo-generator-feed --save`
- 具體的連結地址：適用於已經燒製過Feed的情形。
建議直接使用外掛，比較省事。
#### 設定網站圖示
1. 在[EasyIcon](http://www.easyicon.net/)中分別找一張（16 16與32 32）的ico圖示,或者去別的網站下載或者製作，並將圖示名稱改為favicon16.ico與favicon32.ico。
2. 把圖示放在/themes/next/source/images或者放在根目錄的/source/images資料夾裡。
3. 在 主題配置檔案 內搜尋favicon欄位，把 small、medium欄位的地址修改為/images/favicon16.ico 與 /images/favicon32.ico。
#### 實現全站及文章字數統計及閱讀時長
1. 根目錄命令執行：
複製程式碼npm install hexo-symbols-count-time --save
2. 部落格配置檔案底部新增如下內容，儲存。
複製程式碼1，實現全站及文章數字統計及閱讀時長
執行 npm install hexo-symbols-count-time --save
symbols_count_time: symbols: true time: true total_symbols: true total_time: true
#### 新增頂部載入條
1. 根目錄開啟命令列，輸入如下命令：
複製程式碼git clone github.com/theme-next/… themes/next/source/lib/pace
2. 然後主題配置檔案搜尋pace欄位，修改pace: false為pace: true即可開啟載入條功能，修改下方的pace-theme欄位還可以修改載入條的樣式。
複製程式碼Progress bar in the top during page loading.
Dependencies: github.com/theme-next/…
pace: true
Themes list:
#pace-theme-big-counter #pace-theme-bounce #pace-theme-barber-shop #pace-theme-center-atom #pace-theme-center-circle #pace-theme-center-radar #pace-theme-center-simple #pace-theme-corner-indicator #pace-theme-fill-left #pace-theme-flash #pace-theme-loading-bar #pace-theme-mac-osx #pace-theme-minimal
For example
pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
#### 自定義滑鼠樣式
1. 開啟themes/next/source/css/_custom/custom.styl,在裡面寫下如下程式碼:
複製程式碼// 滑鼠樣式
- { cursor: url("om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important }
2. 在[EasyIcon](http://www.easyicon.net/)中找一張16 * 16的ico圖，放在/source/images/中，修改上述程式碼中的連結為/images/xxx.ico，如果不放在本地的話，可以把圖片放在圖床，直接替換連結即可。
3. 第一行的連結是預設狀態下的滑鼠樣式，第二行的是滑鼠按下時的樣式。
複製程式碼// 滑鼠樣式
- { cursor: url("/images/cat.ico"),auto!important } :active { cursor: url(""/images/cat2.ico""),auto!important }
#### 實現點選出現桃心 以及 爆炸效果
1. 在/themes/next/source/js/src下新建檔案love.js並填入如下程式碼：
```javascript
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
複製程式碼或建一個叫fireworks.js的檔案並寫入如下程式碼：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
複製程式碼- 開啟themes/next/layout/_layout.swig,在上面寫下如下程式碼：
{% if theme.fireworks && not theme.love %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
{% if theme.love && not theme.fireworks %}
<script type="text/javascript" src="/js/src/love.js"></script>
{% endif %}
複製程式碼- 在 主題配置檔案 最下方加入如下程式碼：
# Fireworks and love
fireworks: true
love: false
複製程式碼注意：fireworks是爆炸效果，love是心形效果。兩個不能同時開。
修改網頁底部的小圖示
- 在 主題配置檔案 搜尋footer欄位，修改下方的icon欄位下的name欄位。name欄位後的名字是 Font Awesome 圖示的名字（不必帶 fa- 字首）。
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
#since: 2015
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: user
# If you want to animate the icon, set it to true.
animated: true #animated自動為閃動開關，設定為true後圖示會閃動。
# Change the color of icon, using Hex Code.
color: "#808080"
複製程式碼去掉頁面底部的強力驅動資訊及設定備案資訊
- 主題配置檔案搜尋copyright欄位，修改powered下的enable欄位的true為false即可去掉強力驅動部分的內容
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian: #如果部落格有備案的話，下方beian欄位設定為true，icp後填寫備案號。
enable: false
icp:
複製程式碼新增動態背景
注意：儘量不要新增，耗費資源較大，載入速度非常慢
- 1.根目錄開啟命令列，輸入：
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
複製程式碼- 2.主題配置檔案搜尋canvas-nest欄位，enable項設定為true。
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: false
onmobile: true # display on mobile or not
color: '0,0,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines
複製程式碼-
3.其他配置項說明：
-
color ：線條顏色, 預設: '0,0,0'；三個數字分別為(R,G,B)
-
opacity: 線條透明度（0~1）, 預設: 0.5
-
count: 線條的總數量, 預設: 150
-
zIndex: 背景的z-index屬性，css屬性用於控制所在層的位置, 預設: -1
-
onmobile：是否在手機端顯示。
增加波浪背景動畫
- 根目錄開啟命令列，輸入:
git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
複製程式碼- 主題配置檔案搜尋three_waves欄位，設定為true
# Internal version: 1.0.0
# See: https://github.com/theme-next/theme-next-three
# Example:
# three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js
# three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js
three:
three_waves:
canvas_lines:
canvas_sphere:
複製程式碼three_waves、canvas_lines、canvas_sphere三個的效果各不相同，可以自己嘗試一下選一個喜歡的。
新增靜態背景
- 開啟
部落格根目錄/themes/next/source/css/_custom/custom.styl檔案，編輯如下：
// Custom styles.
body {
background-image: url(/images/background.png); //動圖也可以新增
background-attachment: fixed; // 不隨螢幕滾動而滾動
background-repeat: repeat; // 如果背景圖不夠螢幕大小則重複鋪，改為no-repeat則表示不重複鋪
background-size: contain; // 等比例鋪滿螢幕
複製程式碼部落格主頁自定義樣式修改
開啟
部落格根目錄/themes/next/source/css/_custom/custom.styl檔案:用 css 語言修改自己想要的主頁樣式就可以
在右上角實現fork me on github按鈕
- 最新的Next主題已經內建了增加右上角的Fork me on github按鈕功能，只需要在主題配置檔案搜尋github_banner欄位，去掉前面的#，把||前面的github連結替換成自己的即可。
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/wudiufo || Follow me on GitHub
複製程式碼||後的引數為按鈕的title，為滑鼠指在按鈕上時顯示的文字。
增加回到頂部按鈕及顯示當前瀏覽進度
- 主題配置檔案搜尋b2t欄位，將b2t欄位的false修改為true即可，（注意此功能只能用於Pisces和Gemini主題）。
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true
# Scroll percent label in b2t button.
# scrollpercent欄位設定為true即可實現當前瀏覽進度的顯示。
scrollpercent: true
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: true
複製程式碼修改頂部選單與下方資訊欄的間隙大小
- 主題配置檔案搜尋offset欄位，將offset的畫素數大小設定為需要的值，預設為12。
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
複製程式碼網站標題欄背景顏色
- 開啟 themes/next/source/css/_custom/custom.styl ,在裡面寫下如下程式碼：
// 網站標題欄背景顏色
.site-meta {
background: #FF0033; //修改為自己喜歡的顏色
}
複製程式碼為部落格加上萌萌的動圖
- 首先安裝外掛，根目錄命令列輸入：
$ npm install --save hexo-helper-live2d
複製程式碼- 主題配置檔案最下方新增如下程式碼:
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
model:
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 150
height: 300
position: right
hOffset: 0
vOffset: -20
mobile:
show: true
scale: 0.5
react:
opacityDefault: 0.7
opacityOnHover: 0.2
複製程式碼更多設定可以檢視官方文件
新增DaoVoice 實現線上聯絡
- 本功能可以實現線上留言，作者會收到郵件，如果繫結了微信，作者還會收到微信通知。
- 首先到DaoVoice註冊一個Daovioce賬號。
- 註冊完成後會進到DaoCloud，重新訪問連線即可。進到Daovoice皮膚，點選左側邊欄的應用設定-- 安裝到網站。在下方的程式碼中會看到app_id: "xxxx"字樣。
- 開啟 themes/next/layout/_partials/head/head.swig 檔案中最下方加入如下程式碼：
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
複製程式碼- 在主題配置檔案 _config.yml，新增如下程式碼：
# DaoVoice
daovoice: true
daovoice_app_id: 這裡輸入前面獲取的app_id
複製程式碼-
回到Daovoice控制皮膚，點選聊天設定可以對聊天圖示的顏色及位置進行設定。
-
最後到右上角選擇管理員，微信繫結，可以繫結你的微訊號。這樣收到訊息後可以通過小程式進行回覆。
主頁文章新增陰影效果
- 開啟\themes\next\source\css_custom\custom.styl,加入如下程式碼：
// 主頁文章新增陰影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
複製程式碼- 可以自行修改程式碼來修改陰影效果
增加本地搜尋功能
- 首先安裝外掛，根目錄命令列輸入:
$ npm install hexo-generator-searchdb --save
複製程式碼- 編輯部落格配置檔案，新增以下內容到任意位置：
search:
path: search.xml
field: post
format: html
limit: 10000
複製程式碼- 主題配置檔案搜尋local_search欄位，設定enable為true
# Local search
local_search:
enable: true
複製程式碼新增圖片懶載入
- 部落格根目錄開啟命令輸入
$ git clone https://github.com/theme-next/theme-next-jquery-lazyload themes/next/source/lib/jquery_lazyload
複製程式碼- 然後在配置檔案中搜尋 lazyload,將其修改為true
# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true
複製程式碼新增評論
新增方法
- 在來必力的官網上註冊賬號。
- 在此處獲取data-uid。
- 開啟NexT主題的配置檔案—config中，搜尋livere_uid，將livere_uid前面的#號去掉，將id填寫到livere_uid：後面。
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
#livere_uid: your uid
複製程式碼程式碼塊複製功能
前言
為了提高部落格程式碼塊的使用者體驗，僅僅程式碼高亮還不行，最好還能一鍵複製程式碼。故此文將講述Hexo Next主題部落格的程式碼塊複製功能配置。
下載
需要下載 clipboard.js
提供下載:（推薦用這個）
- 將下載的檔案存到如下目錄：（相對目錄為工程目錄，沒有目錄則建立）
.\themes\next\source\lib\zclip\clipboard.min.js
匯入
- 新建檔案
custom.js，目錄如下：（相對目錄為工程目錄）
\themes\next\source\js\src\custom.js
修改 custom.js為如下內容：
//此函式用於建立複製按鈕
function createCopyBtns() {
var $codeArea = $("figure table");
//檢視頁面是否具有程式碼區域，沒有程式碼塊則不建立 複製按鈕
if ($codeArea.length > 0) {
//複製成功後將要乾的事情
function changeToSuccess(item) {
$imgOK = $("#copyBtn").find("#imgSuccess");
if ($imgOK.css("display") == "none") {
$imgOK.css({
opacity: 0,
display: "block"
});
$imgOK.animate({
opacity: 1
}, 1000);
setTimeout(function() {
$imgOK.animate({
opacity: 0
}, 2000);
}, 2000);
setTimeout(function() {
$imgOK.css("display", "none");
}, 4000);
};
};
//建立 全域性複製按鈕，僅有一組。包含：複製按鈕，複製成功響應按鈕
//值得注意的是：1.按鈕預設隱藏，2.位置使用絕對位置 position: absolute; (position: fixed 也可以，需要修改程式碼)
$(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
//建立 複製 外掛，繫結單機時間到 指定元素，支援JQuery
var clipboard = new Clipboard('#copyBtn', {
target: function() {
//返回需要複製的元素內容
return document.querySelector("[copyFlag]");
},
isSupported: function() {
//支援複製內容
return document.querySelector("[copyFlag]");
}
});
//複製成功事件繫結
clipboard.on('success',
function(e) {
//清除內容被選擇狀態
e.clearSelection();
changeToSuccess(e);
});
//複製失敗繫結事件
clipboard.on('error',
function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
//滑鼠 在複製按鈕上滑動和離開後漸變顯示/隱藏效果
$("#copyBtn").hover(
function() {
$(this).stop();
$(this).css("opacity", 1);
},
function() {
$(this).animate({
opacity: 0
}, 2000);
}
);
}
}
//感應滑鼠是否在程式碼區
$("figure").hover(
function() {
//-------滑鼠活動在程式碼塊內
//移除之前含有複製標誌程式碼塊的 copyFlag
$("[copyFlag]").removeAttr("copyFlag");
//在新的（當前滑鼠所在程式碼區）程式碼塊插入標誌：copyFlag
$(this).find(".code").attr("copyFlag", 1);
//獲取複製按鈕
$copyBtn = $("#copyBtn");
if ($copyBtn.lenght != 0) {
//獲取到按鈕的前提下進行一下操作
//停止按鈕動畫效果
//設定為 顯示狀態
//修改 複製按鈕 位置到 當前程式碼塊開始部位
//設定程式碼塊 左側位置
$copyBtn.stop();
$copyBtn.css("opacity", 0.8);
$copyBtn.css("display", "block");
$copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
$copyBtn.css("left", -$copyBtn.width() - 3);
}
},
function() {
//-------滑鼠離開程式碼塊
//設定複製按鈕可見度 2秒內到 0
$("#copyBtn").animate({
opacity: 0
}, 2000);
}
);
//頁面載入完成後，建立複製按鈕
$(document).ready(function() {
createCopyBtns();
});
複製程式碼配置
- 新建檔案
custom.swig，目錄：.\themes\next\layout_custom\custom.swig（相對目錄為工程目錄）
<script type="text/javascript" src="/lib/zclip/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>
複製程式碼- 修改檔案
_layout.swig，目錄：\themes\next\layout\_layout.swig（相對目錄為工程目錄）
新增如下程式碼：
<!doctype html>
{% include '_third-party/math/mathjax.swig' %}
{% include '_custom/custom.swig' %}
</body>
</html>
複製程式碼向檔案中 </body> 前一行插入檔案引用，如第 15 行效果。
{% include '_custom/custom.swig' %}
複製程式碼-
在主題配置檔案
_config.yml中找到以下程式碼：將enable修改為true，show_result修改為true
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true
複製程式碼六：Hexo撰寫文章
一、建立文章
- 在站點資料夾中開啟git bash，輸入如下命令建立文章，其中title為文章的標題：
hexo new "title"
複製程式碼- 此時就會在source/_post資料夾中建立了一個檔案，命名為：title.md，而這個檔案就是將要釋出到網站上的原始檔案，記錄文章內容，以下我們將要在這個檔案中寫下我們的第一篇部落格
二、編寫文章（基於Markdown）
-
推薦大家一款簡潔易用的markdown編輯器 Typora,點選下載。
1.模板設定
- 當我們使用命令 hexo new "title" 去建立我們的文章時，Hexo會根據/scaffolds/post.md檔案對新建檔案進行初始化，換言之，/scaffolds/post.md檔案就是建立新文章的模板，所以我們可以修改它來適應自己的寫作習慣，一個簡單的示例如下：
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---
複製程式碼2.頭部設定
- 在部落格文章的開頭會有對文章的說明文字，叫做文章頭部，文章的頭部除了可以設定文章標題、書寫日期等基礎資訊外，還可以對文章新增標籤、分類等，一個簡單的示例如下:
---
title: Title #標題
date: YYYY-MM-DD HH:MM:SS #檔案建立日期
tags: #標籤（不適用於分頁）
- 標籤1
- 標籤2
categories: #分類（不適用於分頁）
- 分類1
- 分類2
layout: #佈局
updated: YYYY-MM-DD HH:MM:SS #檔案更新日期
comments：true #開啟文章的評論功能
permalink：覆蓋文章網址
---
複製程式碼注意，屬性和屬性值之間必須有一個空格，否則會解析錯誤
3.首頁顯示
-
1.在Hexo框架部落格的首頁會顯示文章的內容（預設顯示文章的全部內容），如果當文章太長的時候就會顯得十分冗餘，所以我們有必要對其進行精簡，只需在文章中使用
<!--more-->標誌，表示只會顯示標誌前面的內容 -
2.推薦使用：
在主題配置檔案中找到
auto_excerpt，將enable變為true，程式碼如下：# Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: true length: 150 #長度可自由調節 複製程式碼
三，頂部統計每篇文章閱讀次數
在主題配置檔案中查詢busuanzi_count,將其按照如下方式修改：
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
複製程式碼七，生成sitemap站點地圖
百度+谷歌都無法搜尋到我的部落格 不能忍
1.先確認部落格是否被收錄
-
在百度或者谷歌上面輸入下面格式來判斷，如果能搜尋到就說明被收錄，否則就沒有。
site:寫你要搜尋的域名 # site:wudiufo.github.io 複製程式碼
2.建立站點地圖檔案
站點地圖是一種檔案，您可以通過該檔案列出您網站上的網頁，從而將您網站內容的組織架構告知Google和其他搜尋引擎。搜尋引擎網頁抓取工具會讀取此檔案，以便更加智慧地抓取您的網站。
- 先安裝一下，開啟你的hexo部落格根目錄，分別用下面兩個命令來安裝針對谷歌和百度的外掛:
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
複製程式碼-
在部落格根目錄的_config.yml中新增如下程式碼:
baidusitemap: path: baidusitemap.xml sitemap: path: sitemap.xml 複製程式碼- 執行以下命令，編譯你的部落格
$ hexo g 複製程式碼- 在你的部落格根目錄的public下面發現生成了sitemap.xml以及baidusitemap.xml就表示成功了
- 執行
hexo s看站點地圖是否生成
3.讓百度,360和谷歌收錄我們的部落格
驗證網站
在百度和360，谷歌上分別搜尋：
site:寫你要搜尋的域名 # site:wudiufo.github.io
複製程式碼-
其中的域名換成你的部落格域名，如果此前沒有進行過操作，應該是搜不到的，並且搜尋出來的結果含有搜尋引擎提交入口
-
分別進入搜尋引擎提交入口，新增域名，選擇驗證網站，有3種驗證方式，本文推薦採用HTML標籤驗證
-
這裡演示百度站長平臺
開啟Hexo主題配置檔案，新增以下兩行:
google_site_verification: #索引擎提供給你的HTML標籤的content後的字串
baidu_site_verification: #索引擎提供給你的HTML標籤content後的字串
複製程式碼還有其他搜尋引擎，自行新增
然後執行：
hexo clean && hexo generate
hexo deploy
複製程式碼然後點選驗證，就可以通過驗證了
4，百度自動推送
-
將
主題配置檔案中的baidu_push設定為true，然後將/next/layout/_scripts資料夾下面的baidu-push.swig檔案中的 `` 替換為百度提供的自動推送程式碼,如下：
<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> 複製程式碼
5.谷歌收錄我們的部落格
谷歌操作比較簡單，就是向Google站長工具提交sitemap 登入Google賬號，新增了站點驗證通過後，選擇站點，之後在抓取——站點地圖——新增/測試站點地圖