从零开始搭建博客第一部分，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：主题修改

主题安装

• 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/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /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 作为代码高亮，共有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 || githubE-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: trueicons_only: falsetransition: 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: truecomment: 如果觉得文本对您有帮助，欢迎打赏wechatpay: /images/wechat.pngalipay: /images/zhifubao.jpgbitcoin: /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生成博文插入图片显示不出来

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. 只要使用![logo](本地图片测试/logo.jpg)就可以插入图片。其中[]里面不写文字则没有图片标题。

文章左侧的目录如何弄出来？

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 插件。
• 安装方法：根目录下命令行输入npm install hexo-generator-feed --save
• 具体的链接地址：适用于已经烧制过Feed的情形。 建议直接使用插件，比较省事。

设置网站图标

1. 在EasyIcon中分别找一张（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
复制代码

1. 博客配置文件底部添加如下内容，保存。

# 1，实现全站及文章数字统计及阅读时长
# 运行 npm install hexo-symbols-count-time --save
symbols_count_time:symbols: truetime: truetotal_symbols: truetotal_time: true
复制代码

添加顶部加载条

1. 根目录打开命令行，输入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
复制代码

1. 然后主题配置文件搜索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
复制代码

自定义鼠标样式

1. 打开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}
复制代码

1. 在EasyIcon中找一张16 * 16的ico图，放在/source/images/中，修改上述代码中的链接为/images/xxx.ico，如果不放在本地的话，可以把图片放在图床，直接替换链接即可。

2. 第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。

// 鼠标样式* {cursor: url("/images/cat.ico"),auto!important}:active {cursor: url(""/images/cat2.ico""),auto!important}
复制代码

实现点击出现桃心 以及 爆炸效果

1. 在/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)};
复制代码

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 %}
复制代码

1. 在 主题配置文件 最下方加入如下代码：

# Fireworks and love
fireworks: true
love: false
复制代码

注意：fireworks是爆炸效果，love是心形效果。两个不能同时开。

修改网页底部的小图标

1. 在 主题配置文件 搜索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: truetheme:# 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.cnbeian: #如果博客有备案的话，下方beian字段设置为true，icp后填写备案号。enable: falseicp:
复制代码

添加动态背景

注意：尽量不要添加，耗费资源较大，加载速度非常慢

• 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: falseonmobile: true # display on mobile or notcolor: '0,0,255' # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 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：是否在手机端显示。

增加波浪背景动画

1. 根目录打开命令行，输入:

git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
复制代码

1. 主题配置文件搜索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.jsthree: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按钮

1. 最新的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，为鼠标指在按钮上时显示的文本。

增加回到顶部按钮及显示当前浏览进度

1. 主题配置文件搜索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
复制代码

修改顶部菜单与下方信息栏的间隙大小

1. 主题配置文件搜索offset字段，将offset的像素数大小设置为需要的值，默认为12。

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12
复制代码

网站标题栏背景颜色

1. 打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码：

// 网站标题栏背景颜色
.site-meta {background: #FF0033; //修改为自己喜欢的颜色
}
复制代码

为博客加上萌萌的动图

1. 首先安装插件，根目录命令行输入：

$ npm install --save hexo-helper-live2d
复制代码

1. 主题配置文件最下方添加如下代码:

# 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: 1hHeadPos: 0.5vHeadPos: 0.618display:superSample: 2width: 150height: 300position: righthOffset: 0vOffset: -20mobile:show: truescale: 0.5react:opacityDefault: 0.7opacityOnHover: 0.2
复制代码

更多设置可以查看官方文档

添加DaoVoice 实现在线联系

1. 本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。
2. 首先到DaoVoice注册一个Daovioce账号。
3. 注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置-- 安装到网站。在下方的代码中会看到app_id: "xxxx"字样。
4. 打开 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 %}
复制代码

1. 在主题配置文件 _config.yml，添加如下代码：

# DaoVoice
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id
复制代码

1. 回到Daovoice控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。

2. 最后到右上角选择管理员，微信绑定，可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。

主页文章添加阴影效果

1. 打开\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);}
复制代码

1. 可以自行修改代码来修改阴影效果

增加本地搜索功能

1. 首先安装插件，根目录命令行输入:

$ npm install hexo-generator-searchdb --save
复制代码

1. 编辑博客配置文件，新增以下内容到任意位置：

search:path: search.xmlfield: postformat: htmllimit: 10000
复制代码

1. 主题配置文件搜索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
复制代码

添加评论

添加方法

1. 在来必力的官网上注册账号。
2. 在此处获取data-uid。
3. 打开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

1. 将下载的文件存到如下目录：（相对目录为工程目录，没有目录则创建）

.\themes\next\source\lib\zclip\clipboard.min.js

导入

1. 新建文件 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>');//创建 复制 插件，绑定单机时间到 指定元素，支持JQueryvar 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();
});
复制代码

配置

1. 新建文件 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>
复制代码

1. 修改文件 _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' %}
复制代码

1. 在主题配置文件_config.yml中找到以下代码：

   将enable修改为true，show_result修改为true

codeblock:# Manual define the border radius in codeblock# Leave it empty for the default 1border_radius:# Add copy button on codeblockcopy_button:enable: true# Show text copy resultshow_result: true复制代码

六：Hexo撰写文章

一、创建文章

1. 在站点文件夹中打开git bash，输入如下命令创建文章，其中title为文章的标题：

hexo new "title"
复制代码

• 此时就会在source/_post文件夹中创建了一个文件，命名为：title.md，而这个文件就是将要发布到网站上的原始文件，记录文章内容，以下我们将要在这个文件中写下我们的第一篇博客

二、编写文章（基于Markdown）

1. 推荐大家一款简洁易用的markdown编辑器 Typora,点击下载。

2. 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: truelength: 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: truetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_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账号，添加了站点验证通过后，选择站点，之后在抓取——站点地图——添加/测试站点地图