Hexo+Node+Git搭建博客

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 34k | 阅读时长 ≈ 31 分钟

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

1
$ npm install -g hexo-cli

等待运行完成后依次输入以下命令

1
2
3
$ hexo init <新建文件夹的名称>
$ cd <新建文件夹的名称>
$ npm install

注意:后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。

此时Hexo框架的本地搭建已经完成了。我们来运行一下看看：

命令行依次输入以下命令:

1
2
3
$ 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关联起来

  • 命令行输入
1
$ 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 博客的配置文件。以后修改博客的样式或内容会多次用到它。
1
2
3
4
5
6
7
8
9
10
11
12
# 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 。
1
2
3
4
5
6
# 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 添加如下代码：
1
2
3
4
5
6
# 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：主题修改

主题安装

1
git clone https://github.com/theme-next/hexo-theme-next themes/next
  • 1：安装完成后，打开 博客配置文件 修改theme 主题：
1
2
3
4
# Extensions 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #当前主题名称。值为false时禁用主题
  • 2：修改 主题配置文件 是根目录/themes/next目录下的_config.yml文件。

修改菜单及创建分类页

  • 1:定位到 Hexo 站点目录下,在命令行输入如下命令：

    1
    $ hexo new page tags

    新建出标签页

    同样的道理，开启分类页的时候要输入hexo new page categories来新建出分类页。

  • 2:设置页面类型：编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

1
2
3
4
5
---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---
  • 3:修改 主题配置 文件下的menu项：
1
2
3
4
5
6
7
8
9
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项，将需要的风格前的#去掉，注意只能开启一个风格。
1
2
3
4
5
6
7
8
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

设置作者头像

  • 编辑主题配置文件，搜索修改字段 avatar， 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。

  • 本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg

1
2
3
4
5
6
7
8
9
10
11
12
# 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

设置作者昵称与站点描述

1
2
3
4
5
6
7
8
# 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：

Alt text

  • 编辑主题配置文件，更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：
1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

侧边栏社交链接

  • 侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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 来去掉图标。
1
2
3
4
social_icons:
  enable: true
  icons_only: false
  transition: false

开启打赏功能

  • 越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。
1
2
3
4
5
6
7
8
9
# 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文件注释用/ 和 / 包裹代码即可。

1
2
3
4
5
#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字段设置友情链接名字及链接

  • 这个模块的自由度比较高，可以用来放置友情链接，也可以放置推荐阅读。

1
2
3
4
5
6
7
# 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. 根目录命令运行：
1
npm install hexo-symbols-count-time --save
  1. 博客配置文件底部添加如下内容，保存。
1
2
3
4
5
6
7
# 1，实现全站及文章数字统计及阅读时长
# 运行 npm install hexo-symbols-count-time --save
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

添加顶部加载条

  1. 根目录打开命令行，输入如下命令：
1
git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
  1. 然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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,在里面写下如下代码:
1
2
3
4
5
6
7
// 鼠标样式
  * {
      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. 第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。

1
2
3
4
5
6
7
// 鼠标样式
  * {
      cursor: url("/images/cat.ico"),auto!important
  }
  :active {
      cursor: url(""/images/cat2.ico""),auto!important
  }

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

  1. 在/themes/next/source/js/src下新建文件love.js并填入如下代码：
1
!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的文件并写入如下代码：

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)}"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,在上面写下如下代码：
1
2
3
4
5
6
7
8
9
{% 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. 在 主题配置文件 最下方加入如下代码：
1
2
3
# Fireworks and love
fireworks: true
love: false

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

修改网页底部的小图标

  1. 在 主题配置文件 搜索footer字段，修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字（不必带 fa- 前缀）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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即可去掉强力驱动部分的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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.根目录打开命令行，输入：
1
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
  • 2.主题配置文件搜索canvas-nest字段，enable项设置为true。
1
2
3
4
5
6
7
8
9
# 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：是否在手机端显示。
增加波浪背景动画
  1. 根目录打开命令行，输入:
1
git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
  1. 主题配置文件搜索three_waves字段，设置为true
1
2
3
4
5
6
7
8
9
10
11
# 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文件，编辑如下：
1
2
3
4
5
6
// 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链接替换成自己的即可。
1
2
3
4
5
# 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主题）。
1
2
3
4
5
6
7
8
9
# 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。
1
2
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

网站标题栏背景颜色

  1. 打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码：
1
2
3
4
// 网站标题栏背景颜色
.site-meta {
  background: #FF0033; //修改为自己喜欢的颜色
}

为博客加上萌萌的动图

  1. 首先安装插件，根目录命令行输入：
1
$ npm install --save hexo-helper-live2d
  1. 主题配置文件最下方添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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 实现在线联系

  1. 本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。
  2. 首先到DaoVoice注册一个Daovioce账号。
  3. 注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置– 安装到网站。在下方的代码中会看到app_id: “xxxx”字样。
  4. 打开 themes/next/layout/_partials/head/head.swig 文件中最下方加入如下代码：
1
2
3
4
5
6
7
8
9
{% 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，添加如下代码：
1
2
3
# DaoVoice 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

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

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

主页文章添加阴影效果

  1. 打开\themes\next\source\css_custom\custom.styl,加入如下代码：
1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .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. 首先安装插件，根目录命令行输入:
1
$ npm install hexo-generator-searchdb --save
  1. 编辑博客配置文件，新增以下内容到任意位置：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. 主题配置文件搜索local_search字段，设置enable为true
1
2
3
# Local search
local_search:
  enable: true

添加图片懒加载

  • 博客根目录打开命令输入
1
$ git clone https://github.com/theme-next/theme-next-jquery-lazyload themes/next/source/lib/jquery_lazyload
  • 然后在配置文件中搜索 lazyload,将其修改为true
    1
    2
    3
    # 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：后面。
1
2
3
# 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

提供下载:（推荐用这个）

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

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

导入
  1. 新建文件 custom.js，目录如下：（相对目录为工程目录）

\themes\next\source\js\src\custom.js

修改 custom.js为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//此函数用于创建复制按钮
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();
});
配置
  1. 新建文件 custom.swig ，目录：.\themes\next\layout_custom\custom.swig（相对目录为工程目录）
1
2
<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（相对目录为工程目录）

添加如下代码：

1
2
3
4
5
6
7
8
<!doctype html>

    {% include '_third-party/math/mathjax.swig' %}
    

    {% include '_custom/custom.swig' %}
</body>
</html>

向文件中 </body> 前一行插入文件引用，如第 15 行效果。

1
{% include '_custom/custom.swig' %}

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

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

1
2
3
4
5
6
7
8
9
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撰写文章

一、创建文章

  1. 在站点文件夹中打开git bash，输入如下命令创建文章，其中title为文章的标题：
1
hexo new "title"
  • 此时就会在source/_post文件夹中创建了一个文件，命名为：title.md，而这个文件就是将要发布到网站上的原始文件，记录文章内容，以下我们将要在这个文件中写下我们的第一篇博客

二、编写文章（基于Markdown）

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

  2. Markdown语法及在线编辑

1.模板设置

  • 当我们使用命令 hexo new “title” 去创建我们的文章时，Hexo会根据/scaffolds/post.md文件对新建文件进行初始化，换言之，/scaffolds/post.md文件就是创建新文章的模板，所以我们可以修改它来适应自己的写作习惯，一个简单的示例如下：
1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
---

2.头部设置

  • 在博客文章的开头会有对文章的说明文字，叫做文章头部，文章的头部除了可以设置文章标题、书写日期等基础信息外，还可以对文章添加标签、分类等，一个简单的示例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
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，代码如下：

    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommend.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: true
      length: 150 #长度可自由调节

三，顶部统计每篇文章阅读次数

在主题配置文件中查找busuanzi_count,将其按照如下方式修改：

1
2
3
4
5
6
7
8
9
10
# 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.先确认博客是否被收录

  • 在百度或者谷歌上面输入下面格式来判断，如果能搜索到就说明被收录，否则就没有。

    1
    site:写你要搜索的域名 # site:wudiufo.github.io

2.创建站点地图文件

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

  • 先安装一下，打开你的hexo博客根目录，分别用下面两个命令来安装针对谷歌和百度的插件:
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

  • 在博客根目录的_config.yml中添加如下代码:

    1
    2
    3
    4
    5

    baidusitemap:
      path: baidusitemap.xml
    sitemap:
      path: sitemap.xml

    • 执行以下命令，编译你的博客

      1
      $ hexo g

    • 在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了

    • 执行 hexo s 看站点地图是否生成

3.让百度,360和谷歌收录我们的博客

验证网站

在百度和360，谷歌上分别搜索：

1
site:写你要搜索的域名 # site:wudiufo.github.io
  • 其中的域名换成你的博客域名，如果此前没有进行过操作，应该是搜不到的，并且搜索出来的结果含有搜索引擎提交入口

  • 分别进入搜索引擎提交入口，添加域名，选择验证网站，有3种验证方式，本文推荐采用HTML标签验证

  • 这里演示百度站长平台

打开Hexo主题配置文件，添加以下两行:

1
2
google_site_verification: #索引擎提供给你的HTML标签的content后的字符串
baidu_site_verification: #索引擎提供给你的HTML标签content后的字符串

还有其他搜索引擎，自行添加

然后运行：

1
2
hexo clean && hexo generate
hexo deploy

然后点击验证，就可以通过验证了

4，百度自动推送

  • 将主题配置文件中的baidu_push设置为true，然后将/next/layout/_scripts文件夹下面的baidu-push.swig文件中的 `

    ` 替换为百度提供的自动推送代码,如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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账号，添加了站点验证通过后，选择站点，之后在抓取——站点地图——添加/测试站点地图

如果觉得文本对您有帮助，欢迎打赏