共计 27754 个字符，预计需要花费 70 分钟才能阅读完成。
从零开始搭建博客第一部分，Github 注册及 Github Pages 建立
什么是 Hexo？
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
<!–more–>
一：注册 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 <account name>! You’ve successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个 <account name> 应该是你 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：主题修改
主题安装
Next 主题文档页面
Nest 主题 Github 页面
博客根目录打开命令行输入
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
author: #网站作者
language: zh-CN #网站语言
timezone: #网站时区：Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC。
设置代码高亮主题
NexT 使用 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
# https://github.com/chriskempson/tomorrow-theme
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: https://github.com/yourname || github
E-Mail: mailto:yourname@qq.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称，匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 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: http://example.com
hexo 生成博文插入图片显示不出来
把主页配置文件_config.yml 里的 post_asset_folder: 这个选项设置为 true
在 hexo 的目录下执行 npm install https://github.com/CodeFalling/hexo-asset-image –save（需要等待一段时间）。
完成安装后用 hexo 新建文章 hexo new “ 文章标题 ” 的时候会发现_posts 目录下面会多出一个和文章名字一样的文件夹。
只要使用  就可以插入图片。其中 [] 里面不写文字则没有图片标题。
文章左侧的目录如何弄出来？
1、首先在你的 markdown 文件里面要有标题，所谓标题就是例如这种一级标题 (#)，二级标题(##)，三级标题(###) 的。
2、在主题的_config 文件里面，将 toc 的 enable 设置为 true 就 ok 了，默认的目录是有序号的，如果你不想要序号，你需要把 number 置为 false。
设置 RSS
NexT 中 RSS 有三个设置选项，满足特定的使用场景。更改 主题配置 文件，设定 rss 字段的值：
false：禁用 RSS，不在页面上显示 RSS 连接。
留空：使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed 插件。
安装方法：根目录下命令行输入 npm install hexo-generator-feed –save
具体的链接地址：适用于已经烧制过 Feed 的情形。
建议直接使用插件，比较省事。
设置网站图标
在 EasyIcon 中分别找一张（16 16 与 32 32）的 ico 图标, 或者去别的网站下载或者制作，并将图标名称改为 favicon16.ico 与 favicon32.ico。
把图标放在 /themes/next/source/images 或者放在根目录的 /source/images 文件夹里。
在 主题配置文件 内搜索 favicon 字段，把 small、medium 字段的地址修改为 /images/favicon16.ico 与 /images/favicon32.ico。
实现全站及文章字数统计及阅读时长
根目录命令运行：
npm install hexo-symbols-count-time –save
博客配置文件底部添加如下内容，保存。
# 1，实现全站及文章数字统计及阅读时长
# 运行 npm install hexo-symbols-count-time –save
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
添加顶部加载条
根目录打开命令行，输入如下命令：
git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
然后主题配置文件搜索 pace 字段，修改 pace: false 为 pace: true 即可开启加载条功能，修改下方的 pace-theme 字段还可以修改加载条的样式。
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
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
自定义鼠标样式
打开 themes/next/source/css/_custom/custom.styl, 在里面写下如下代码:
// 鼠标样式
* {
cursor: url(“http://om8u46rmb.bkt.clouddn.com/sword2.ico”),auto!important
}
:active {
cursor: url(“http://om8u46rmb.bkt.clouddn.com/sword1.ico”),auto!important
}
在 EasyIcon 中找一张 16 * 16 的 ico 图，放在 /source/images/ 中，修改上述代码中的链接为 /images/xxx.ico，如果不放在本地的话，可以把图片放在图床，直接替换链接即可。
第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。
// 鼠标样式
* {
cursor: url(“/images/cat.ico”),auto!important
}
:active {
cursor: url(“”/images/cat2.ico””),auto!important
}
实现点击出现桃心 以及 爆炸效果
在 /themes/next/source/js/src 下新建文件 love.js 并填入如下代码：
!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, 在 </body> 上面写下如下代码：
{% 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 控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。
最后到右上角选择管理员，微信绑定，可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。
主页文章添加阴影效果
打开 themesnextsourcecss_customcustom.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
主页
Github
提供下载:（推荐用这个）
clipboard.min.js
将下载的文件存到如下目录：（相对目录为工程目录，没有目录则创建）
.themesnextsourcelibzclipclipboard.min.js
导入
新建文件 custom.js，目录如下：（相对目录为工程目录）
themesnextsourcejssrccustom.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，目录：.themesnextlayout_customcustom.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, 点击下载。
Markdown 语法及在线编辑
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 type=”text/javascript” async src=”//push.zhanzhang.baidu.com/push.js”></script>
` 替换为百度提供的自动推送代码, 如下：
<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 账号，添加了站点验证通过后，选择站点，之后在抓取——站点地图——添加 / 测试站点地图
