前言

這算是各種文章的集合了，如果你有耐心就看完吧(Ｔ▽Ｔ)
如果是明確想要哪一種功能的童鞋燕偶，那就直接查找吧( ? ?ω?? )?

本篇文章是在已經(jīng)搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：極簡搭建博客 或者Hexo和Git搭建博客喝噪，這兩篇博文都教了大家最基礎(chǔ)的怎么將博客搭建起來。本篇博文是使用next主題的進擊版本指么，主要是有以下內(nèi)容

• 域名綁定酝惧，將github博客和你的獨有域名綁定
• 添加更多的menu內(nèi)容
• 添加頭像
• 定義網(wǎng)站個性logo
• 自定義樣式，重寫默認樣式伯诬，個性化定制你的博客
• 炫酷動態(tài)背景制作
• 添加網(wǎng)易云音樂
• 添加網(wǎng)易云跟帖
• 添加leancloud閱讀次數(shù)統(tǒng)計功能
• 添加wordcount頁面字數(shù)統(tǒng)計
• 添加fork me on github功能

要想最快的知道這些功能的效果晚唇，請移步我的個人博客：https://rainyxy.github.io/，順便求個forkヽ(●′ε｀●)ノ

首先要說一下我使用的版本盗似，這個是很重要的哩陕，好多版本都已經(jīng)進行了更新，特別是next主題集成了更多的插件，簡直不要太爽＼（＠￣?￣＠）／

hexo v3.2.2

next v5.1.0

node v4.5.0

在改成自己想要的效果之后悍及，對整體的hexo的next主題我有了一個大概的了解闽瓢，其實next主題的最新版（5.1）已經(jīng)集成了大部分我們需要的插件，只需要在主題配置文件中將默認的false改為true即可心赶，但是我們也仍然需要知道都有哪些新的功能扣讼，最有效的方法是直接去查看官網(wǎng)的api：next官網(wǎng)

Alt text

授之于魚不如授之于漁
希望我們都能夠理解其源碼，制作出屬于自己專屬的個性化博客(?????)

我們需要改的文件其實也就那么幾個缨叫，大部分是不需要更改椭符，next都已經(jīng)幫我們配置好了~
默認目錄結(jié)構(gòu)：

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json

• deploy：執(zhí)行hexo deploy命令部署到GitHub上的內(nèi)容目錄
• public：執(zhí)行hexo generate命令，輸出的靜態(tài)網(wǎng)頁內(nèi)容目錄
• scaffolds：layout模板文件目錄耻姥，其中的md文件可以添加編輯
• scripts：擴展腳本目錄艰山，這里可以自定義一些javascript腳本
• source：文章源碼目錄，該目錄下的markdown和html文件均會被hexo處理咏闪。該頁面對應(yīng)repo的根目錄，404文件摔吏、favicon.ico文件鸽嫂，CNAME文件等都應(yīng)該放這里，該目錄下可新建頁面目錄征讲。
  • drafts：草稿文章
  • posts：發(fā)布文章
  • themes：主題文件目錄
• _config.yml：全局配置文件据某，大多數(shù)的設(shè)置都在這里
• package.json：應(yīng)用程序數(shù)據(jù)，指明hexo的版本等信息诗箍，類似于一般軟件中的關(guān)于按鈕

我們最先修改的應(yīng)該是在hexo根目錄下的配置文件_config.yml文件癣籽，這里是配置整個站點的配置信息，在文章的最后貼出我的配置文件滤祖，有興趣的朋友可以參考一下~
其次就是我們的主題配置文件

在對應(yīng)的主題下的_config.yml因為我使用的是next主題筷狼，所以目錄的路徑為C:\Hexo\themes\next\_config.yml 這里配置的是使用主題的配置文件，這個配置文件的東西就有點多了匠童，我們大部分的修改也是在這個文件下完成的埂材。比如說使用集成的第三方插件，默認為false汤求，我們需要將其改為true并且配置相應(yīng)的app_key就可以使用該插件了~有木有很方便(^ ??? ^)

然后我們需要修改樣式的話是需要設(shè)置css和甚至是修改模板俏险，
頁面展現(xiàn)的全部邏輯都在每個主題中控制，源代碼在hexo\themes\你使用的主題\中扬绪，以next主題為例：

├── .github #git信息
├── languages #多語言
| ├── default.yml #默認語言
| └── zh-Hans.yml #簡體中文
| └── zh-tw.yml #繁體中文
├── layout #布局竖独，根目錄下的.ejs文件是對主頁，分頁挤牛，存檔等的控制
| ├── _custom #可以自己修改的模板莹痢，覆蓋原有模板
| | ├── _header.swig #頭部樣式
| | ├── _sidebar.swig #側(cè)邊欄樣式
| ├── _macro #可以自己修改的模板，覆蓋原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打賞模板
| | ├── sidebar.swig #側(cè)邊欄模板
| ├── _partial #局部的布局
| | ├── head #頭部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主頁面模板
| ├── index.swig #主頁面模板
| ├── page #頁面模板
| └── tag.swig #tag模板
├── scripts #script源碼
| ├── tags #tags的script源碼
| ├── marge.js #頁面模板
├── source #源碼
| ├── css #css源碼
| | ├── _common #.styl基礎(chǔ)css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字體
| ├── images #圖片
| ├── uploads #添加的文件
| └── js #javascript源代碼
├── _config.yml #主題配置文件
└── README.md #用GitHub的都知道

公益404頁面

GitHub Pages 自定義404頁面非常容易，直接在根目錄下創(chuàng)建自己的404.html就可以格二。但是自定義404頁面僅對綁定頂級域名的項目才起作用劈彪，GitHub默認分配的二級域名是不起作用的，使用hexo server在本機調(diào)試也是不起作用的顶猜。

其實沧奴，404頁面可以做更多有意義的事，來做個404公益項目吧〕ふ現(xiàn)在滔吠，看下我的404頁面一個ibruce.info上不存在的頁面，做點有意義的事情挠日，也對得起這個域名疮绷。
目前有如下幾個公益404接入地址，我選擇了騰訊的嚣潜。404頁面冬骚，每個人可以做的更多。

• 騰訊公益404
• 404公益_益云(公益互聯(lián)網(wǎng))社會創(chuàng)新中心
• 失蹤兒童少年資料管理中心404

開啟打賞功能

越來越多的平臺（微信公眾平臺懂算，新浪微博只冻，簡書，百度打賞等）支持打賞功能计技，付費閱讀時代越來越近喜德，特此增加了打賞功能，支持微信打賞和支付寶打賞垮媒。 只需要 主題配置文件 中填入 微信 和 支付寶 收款二維碼圖片地址 即可開啟該功能舍悯。

打賞功能配置示例
reward_comment: 堅持原創(chuàng)技術(shù)分享，您的支持將鼓勵我繼續(xù)創(chuàng)作睡雇！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

友情鏈接

編輯 主題配置文件 添加：

友情鏈接配置示例

title
links_title: Links
links:
MacTalk: http://macshuo.com/
Title: http://example.com/

站點建立時間

這個時間將在站點的底部顯示萌衬，例如 ? 2013 - 2015。 編輯 主題配置文件它抱，新增字段 since奄薇。

配置示例

since: 2013

加入站點內(nèi)容搜索功能

本站點使用的是Local Search。加入站點內(nèi)容搜索功能步驟如下：

• 安裝hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save
注意：安裝時應(yīng)在站點根目錄下抗愁，即myBlog目錄下

• 添加search字段

在站點

search:
path: search.xml
field: post
format: html
limit: 10000
主題顏色
NexT主旨在于簡潔優(yōu)雅且易于使用馁蒂，主題本身提供了三種樣式供用戶選擇，但色彩過于單一蜘腌，今天為大家介紹如何修改主題的顏色和增加背景圖片沫屡。
打開```hexo/themes/next/source/css/_variables/base.styl```找到Colors代碼段，如下：
    // Colors
    // colors for use across theme.
    // --------------------------------------------------
      $whitesmoke   = #f5f5f5
      $gainsboro    = #eee  //這個是邊欄頭像外框的顏色撮珠，
      $gray-lighter = #ddd  //文章中插入圖片邊框顏色
      $grey-light   = #ccc  //文章之間分割線沮脖、下劃線顏色
      $grey         = #bbb  //頁面選中圓點顏色
      $grey-dark    = #999
      $grey-dim     = #666 //側(cè)邊欄目錄字體顏色
      $black-light  = #555 //修改文章字體顏色
      $black-dim    = #333
      $black-deep   = #495a80  //修改主題的顏色，這里我已經(jīng)改成老藍色了。
      $red          = #ff2a2a
      $blue-bright  = #87daff
      $blue         = #0684bd
      $blue-deep    = #262a30
      $orange       = #F39D01 //瀏覽文章時勺届，目錄選中的顏色
其他的可以自行更改驶俊，看看效果
# 圖床
考慮到博客的速度，同時也為了便于博客的遷移免姿，圖床是必須的饼酿。我墻裂推薦七牛，訪問速度極快胚膊，支持日志故俐、防盜鏈和水印。
免費用戶有每月10GB流量+總空間10GB+PUT/DELETE 10萬次請求+GET 100萬次請求紊婉，這對個人博客來說足夠药版，不夠的話點這個活動頁面，也可通過邀請好友獲得獎勵喻犁，我也求一下七牛邀請槽片。有一點要說明的是，七牛沒有目錄的概念肢础，但是文件名可以包含/筐乳，比如2013/11/27/reading/photos-0.jpg，參考這里關(guān)于key-value存儲系統(tǒng)乔妈。
七牛除了作為圖床還可以作為其他靜態(tài)文件存儲空間，比如我的個人站點首頁有個字庫文件和JS文件下載較慢氓皱，有時間會把它弄到七牛上去路召，以提高首頁打開速度。請看這篇Linux中國采用七牛云存儲支撐圖片訪問波材。
如果非要說不足的話股淡，就是文件管理界面不是很友好，不支持CNAME到分配的永久鏈接廷区，也不能綁定未備案的自有域名唯灵，必須備案才可以。
如果你對七牛web版的文件管理界面不滿意隙轻，可以用官方的七牛云存儲工具埠帕。
您還可以使用如下圖床服務(wù) FarBox，Dropbox玖绿，又拍云敛瓷。
# 主題背景
打開```hexo/themes/next/source/css/_schemes/Pisces/index.styl```(Pisces為NexT提供的三種主題之一，根據(jù)使用的主題選擇）修改```body{}```內(nèi)的值斑匪，如下：
背景顏色直接更改即可：```body { background: #F0F0F0; }

添加背景：

{ background: url（’/images/background.jpg’); }(將背景圖片放到hexo/source/images“`中即可呐籽。

加入數(shù)據(jù)統(tǒng)計與分析功能

本站點使用的是百度統(tǒng)計。加入數(shù)據(jù)統(tǒng)計與分析功能步驟如下：
- 注冊站長賬號并登陸

在這里注冊站長賬號，并填寫信息狡蝶，網(wǎng)站域名和網(wǎng)站首頁以下圖為例來填寫庶橱，注冊完成后并登陸。

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

隱藏網(wǎng)頁底部powered By Hexo / 強力驅(qū)動

打開hexo/themes/next/layout/_partials/footer.swig,使用”

綁定域名

綁定域名的思路如下：
- 在萬網(wǎng)購買自己喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些丝格，有的只需要幾塊錢一年就可以）
- 解析DNS
- 在hexo中添加CNAME文件

購買域名

之前沒有買域名的時候我想使用網(wǎng)易云跟帖撑瞧，發(fā)現(xiàn)在注冊網(wǎng)易云跟帖的時候使用原來的域名提示“url已被使用”，這是因為網(wǎng)易云跟帖不認可二級域名显蝌，所以要自己買域名预伺。
我選擇的是萬網(wǎng)，阿里下面的曼尊。我選擇了一個.site的域名酬诀，原價8元，使用阿里云app支付還優(yōu)惠5元骆撇，等于3元到手一個域名（一年）~
按照官網(wǎng)的步驟一步一來就可以了~

解析DNS

購買完域名之后我們需要解析DNS地址瞒御，在管理控制臺中的左側(cè)有域名選項，然后找到你的域名神郊，點擊后面的“解析”

這里寫圖片描述

點擊添加解析肴裙，記錄類型選A或CNAME，

A記錄的記錄值就是ip地址涌乳，github(官方文檔)提供了兩個IP地址蜻懦，192.30.252.153和192.30.252.154，這兩個IP地址為github的服務(wù)器地址夕晓，兩個都要填上宛乃，
解析記錄設(shè)置兩個www和@，線路就默認就行了蒸辆，CNAME記錄值填你的github博客網(wǎng)址征炼。如我的是rainyxy.github.io。

在hexo中添加CNAME文件

接下來在你的hexo文件夾下source文件夾下新建一個CANME文件,里面加上你剛剛購買的域名比如我的cherryblog.site

這里寫圖片描述

這里寫圖片描述

添加菜單頁

添加菜單頁的思路（添加菜單頁就是添加一個頁面逗宜，有兩種方式）：第一種是使用git命令hexo new page "photo" 就直接創(chuàng)建了C:\Hexo\source\photo\index.md文件器罐，然后編輯index.md 文件就可以了~

這里寫圖片描述

剛開始的時候不理解怎么添加分類頁和添加文章的區(qū)別杂伟，公司有一個項目用到了wordpress底哗，然后發(fā)現(xiàn)兩者有相似的地方，不同的就是wordpress是有可視化的操作后臺，而hexo是需要git bash自己創(chuàng)建首先我們要分清什么是頁面，什么是文章，
在hexo中menu下的內(nèi)容都是新的頁面我們可以通過hexo new page "pagename" 創(chuàng)建肋坚，hexo默認的頁面只有home,archives,tags 三個，之后我們寫的博文就是文章肃廓，通過hexo new "name" 創(chuàng)建的name.md 文件在根目錄的source\_posts 下智厌，在每一個文章的頭部，我們可以配置其tags或者categories內(nèi)容盲赊，相當于文章是頁面的下一級

在配置文件中添加menu索引路徑

我們可以在主題配置的_config文件下找到相應(yīng)的字段铣鹏，字段前加# 表示被注釋掉，我們也可以自己添加menu的內(nèi)容哀蘑，比如我又新增了兩個menulife 和photo

這里寫圖片描述

這里寫圖片描述

在source文件添加menu文件夾

我們需要在這個路徑下自己建立對應(yīng)的頁面，比如說我新建了menulife 和photos绘迁，然后再source文件夾下面新建兩個名字為life 和photo 的文件夾合溺，里面添加一個index.md markdown文件，內(nèi)容是類似這樣的
—
title: photo
date: 2017-04-04 22:14:07
type: “photo”
comments: false
—
啦啦啦~

這里寫圖片描述

給menu添加icon

如果只是上面的步驟棠赛，那么你可能會創(chuàng)建出一個新的頁面，但是顯示的效果會是這樣：

這里寫圖片描述

這里寫圖片描述

查找FontAwsome icon

這時候你想要換一個自己喜歡的icon怎么辦，這就需要自己動手而芥，豐衣足食了律罢，你需要自己到FontAwsome官網(wǎng)，然后鼠標往下拉棍丐，在圖標集中選擇自己喜歡的icon误辑，然后記住名字，保存在上面的menu_icon字段中就可以啦~

這里寫圖片描述

在language添加zh-hans翻譯字段

上面的步驟完成之后你會發(fā)現(xiàn)巾钉，在你的博客首頁顯示的仍然是英文名，而我們想要有一個中文的名字秘案，并且想要個性化定制我們的頁面砰苍，我們可以在主題的language文件下的zh-hans（中文）語言包下增加相應(yīng)的字段（做過翻譯的童鞋應(yīng)該都知道什么意思_{）還可以修改其他的字段潦匈，這樣就可以定制我們的博客了呢}

這里寫圖片描述

在發(fā)表文章的時候添加對應(yīng)的menu字段

在我們寫文章的時候只要在頭部信息添加相應(yīng)的字段就在tags頁面和categories中顯示相應(yīng)的分類，例如:
—
title: Git使用中的報錯情況
date: 2017-03-11 23:54:11
tags: [git,實戰(zhàn)經(jīng)驗]
categories: git
—
tags赚导、categories都是支持數(shù)組的形式的茬缩，可以添加多個tags、categories吼旧。這樣我們在tags凰锡、categories頁面就可以看見相應(yīng)的分類了

這里寫圖片描述

添加頭像

我使用的主題頭像是位于側(cè)邊欄，顯示的效果如下圈暗，

這里寫圖片描述

這里寫圖片描述

設(shè)置網(wǎng)站logo

跟設(shè)置頭像其實是一個思路访忿，都是在配置文件中引入正確的地址就可以了瞧栗，不過網(wǎng)站的logo是對圖片有要求的，我們需要在Favicon在線制作工具中制作32*32的.ico圖片海铆，然后放在source/images下面迹恐。然后在主題配置文件下添加主題配置文件中添加：favicon: images/favicon.ico

自定義樣式

不得不說next還是很人性化的，你可以個性化定制你的網(wǎng)站卧斟，你所有的改動（css）需要放在主題文件的source/css/_costum/costum.styl文件中殴边，會覆蓋原來的css，所以只要你不想要你修改的樣式珍语，只需要刪除這個文件夾就可以了锤岸，再也不用擔心還原不回去了~

這里寫圖片描述

炫酷動態(tài)背景

之前做過一個類似的canvas-nest的效果。新版本的next已經(jīng)支持canvas-nest了板乙，但是效果不怎么樣是偷，就不用了，但是也介紹一下募逞，畢竟簡單蛋铆，只有兩步就可以了。
添加修改代碼next/layout/_layout.swig在</body>之前加上
{% if theme.canvas_nest %}

{% endif %}
打開next/_config.yml放接，添加以下代碼就可以了：

# Canvas-nest
canvas_nest: true

這種雖然簡單刺啦，但是我認為效果不夠好，于是我決定添加原生的js來仿知乎的登錄界面做背景纠脾，這就需要修改模板來實現(xiàn)了玛瘸。首先我們要知道next文件的結(jié)構(gòu)蜕青，這樣我們想改什么就知道在什么位置了~

這里寫圖片描述

添加網(wǎng)易云音樂

HTTP環(huán)境

這次主要分兩類來講捧韵，一類是http環(huán)境
也就是網(wǎng)址格式為”http://www.xxx.com“或”http://xxx.com“的網(wǎng)站
在知道了頁面的結(jié)構(gòu)之后市咆，你就可以將你的播放器添加在頁面的任意位置，開始我是放在了首頁再来，然后發(fā)現(xiàn)一上來就自動播放太吵了蒙兰，于是就放在了側(cè)邊欄，想要聽得朋友可以手動點擊播放芒篷，
我們可以直接在網(wǎng)易云音樂中搜索我們想要插入的音樂搜变，然后點擊生成外鏈播放器

這里寫圖片描述

這里寫圖片描述

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="http://music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

然后就可以在側(cè)邊欄看見我的播放器了~

這里寫圖片描述

HTTPS環(huán)境

現(xiàn)在使用https的網(wǎng)站越來越多篡帕，像百度殖侵、淘寶等等都是如此
另外使用github搭建hexo的同學們，現(xiàn)在gh-pages已經(jīng)強制要求全站https啦
這種網(wǎng)站格式一般為”https://xxx.github.io”
然后…發(fā)現(xiàn)網(wǎng)易云音樂已經(jīng)不能正常使用了
由于網(wǎng)易云目前并不支持https镰烧，所以我們只能通過插件來實現(xiàn)音樂播放
這里需要使用到163music-APlayer-you-get-docker項目
在github項目文檔上我們可以看見拢军，參數(shù)實在是太多，再加上版本迭代和英文介紹怔鳖，我一臉懵逼…
但是在iframe用法里面茉唉，我發(fā)現(xiàn)有一個demos
https://music.daoapp.io/iframe?song=287749&qnarrow=1&qssl=1
格式非常像上文介紹的網(wǎng)易云外鏈，于是我嘗試直接替換為

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.daoapp.io/iframe?song=287749&qssl=1&qlrc=0&qnarrow=0&autoplay=1"></iframe>

也就是把src=””里面的鏈接換掉结执，其他保持不變
接著來分析這段代碼

width和height是播放器的寬度和高度
287749這串數(shù)字是網(wǎng)易云音樂的歌曲編號
qlrc=0代表不顯示歌詞
autoplay=1代表自動播放

這樣如果沒有特殊要求的話度陆，每次只需在網(wǎng)易云找好歌曲編號，然后替換這串數(shù)字即可
粘貼到.md文件里面

這個項目的玩法非常多献幔，如果需要顯示歌詞的話
修改qlrc=1為再調(diào)整下播放器寬度（width）高度（height）數(shù)值

網(wǎng)易云跟帖

之前用的是多說懂傀，但是多說在2017年6月1日就關(guān)閉評論服務(wù)了= =，很憂傷蜡感，于是轉(zhuǎn)到了網(wǎng)易云跟帖蹬蚁。由于最新版（5.1）版本的next已經(jīng)集成了網(wǎng)易云跟帖，所以只需要在主題的設(shè)置文件中配置你的productKey就可以了铸敏。獲取productKey也很簡單缚忧，在官網(wǎng)網(wǎng)易云跟帖中注冊悟泵，然后在獲取代碼>通用代碼中拿到productKey杈笔，之后在你的主題配置文件中的gentie_productKey字段后添加即可~

添加Fork me on GitHub

去網(wǎng)址https://github.com/blog/273-github-ribbons 挑選自己喜歡的樣式，并復制代碼糕非，添加到themes\next\layout_layout.swig的body標簽之內(nèi)即可
記得把里面的url換成自己的!

hexo-wordcount實現(xiàn)統(tǒng)計功能

這里寫圖片描述
wordcount可以實現(xiàn)字數(shù)統(tǒng)計蒙具，閱讀時常還有總字數(shù)的統(tǒng)計功能
只需要npm install hexo-wordcount –save 就可以安裝wordcount插件球榆，
主要功能
字數(shù)統(tǒng)計:WordCount
閱讀時長預計:Min2Read
總字數(shù)統(tǒng)計: TotalCount
安裝完插件之后在主題的配置文件中開啟該功能就可以~

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

leancloud閱讀次數(shù)統(tǒng)計

next也集成了leancloud，在leancloud官網(wǎng)
中注冊賬號等一步一步的操作就不說了哈~禁筏，我們主要是為了拿到app_key和app_id,然后在主題配置文件做一下配置

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key

image

個人網(wǎng)站地址：https://rainyxy.github.io/，順便求個fork
致謝
在這里我聚集了很多人的教程篱昔，也希望能讓能多的人知道如何去做每强，還有NexT官網(wǎng)可以參照，希望大家能美化好自己的博客?(^?*)

附錄1：站點配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site                  站點信息
title: Rainy's Blog     #站點名字 
subtitle:               #副標題
description: 奔跑不單是一種能力州刽，更是一種態(tài)度空执，決定你人生高度的態(tài)度。                   #站點描述穗椅，在側(cè)邊欄顯示
author: Rainy           #博主名字
language: zh-Hans       #使用的語言包辨绊，語言包在主題文件的language文件夾下，可以更改網(wǎng)站顯示出的文案
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://RainyXY.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true         #新建一個頁面后自動生成一個同名文件夾（默認為false）
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:RainyXY/RainyXY.github.io.git
  branch: master

附錄2：背景腳本

<script>
class Circle {
    //創(chuàng)建對象
    //以一個圓為對象
    //設(shè)置隨機的 x匹表，y坐標门坷，r半徑，_mx袍镀，_my移動的距離
    //this.r是創(chuàng)建圓的半徑默蚌，參數(shù)越大半徑越大
    //this._mx,this._my是移動的距離，參數(shù)越大移動
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.r = Math.random() * 10 ;
        this._mx = Math.random() ;
        this._my = Math.random() ;

    }

    //canvas 畫圓和畫直線
    //畫圓就是正常的用canvas畫一個圓
    //畫直線是兩個圓連線流椒，為了避免直線過多敏簿，給圓圈距離設(shè)置了一個值，距離很遠的圓圈宣虾，就不做連線處理
    drawCircle(ctx) {
        ctx.beginPath();
        //arc() 方法使用一個中心點和半徑惯裕，為一個畫布的當前子路徑添加一條弧。
        ctx.arc(this.x, this.y, this.r, 0, 360)
        ctx.closePath();
        ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy)
        if (d < 150) {
            ctx.beginPath();
            //開始一條路徑绣硝，移動到位置 this.x,this.y蜻势。創(chuàng)建到達位置 _circle.x,_circle.y 的一條線：
            ctx.moveTo(this.x, this.y);   //起始點
            ctx.lineTo(_circle.x, _circle.y);   //終點
            ctx.closePath();
            ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
            ctx.stroke();
        }
    }

    // 圓圈移動
    // 圓圈移動的距離必須在屏幕范圍內(nèi)
    move(w, h) {
        this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
        this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
        this.x += this._mx / 2;
        this.y += this._my / 2;
    }
}
//鼠標點畫圓閃爍變動
class currentCirle extends Circle {
    constructor(x, y) {
        super(x, y)
    }

    drawCircle(ctx) {
        ctx.beginPath();
        //注釋內(nèi)容為鼠標焦點的地方圓圈半徑變化
        //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
        this.r = 8;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
        ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
        ctx.fill();

    }
}
//更新頁面用requestAnimationFrame替代setTimeout
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];
let current_circle = new currentCirle(0, 0)

let draw = function () {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);
        for (j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j])
        }
    }
    if (current_circle.x) {
        current_circle.drawCircle(ctx);
        for (var k = 1; k < circles.length; k++) {
            current_circle.drawLine(ctx, circles[k])
        }
    }
    requestAnimationFrame(draw)
}

let init = function (num) {
    for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
    }
    draw();
}
window.addEventListener('load', init(60));
window.onmousemove = function (e) {
    e = e || window.event;
    current_circle.x = e.clientX;
    current_circle.y = e.clientY;
}
window.onmouseout = function () {
    current_circle.x = null;
    current_circle.y = null;

};
</script>