Hexo之Next主题优化整理

发表于 | 更新于 | 分类于

搭建hexo的教程实在太多了，折腾了几天，总算搞定了，现在去看参考文章也是能看懂，不过，官方文档也写的相当详细：

  • Hexo
  • Next
  • Yml语法验证

hexo主题

  • hexo-theme
  • hexo-github-theme-list
  • 有那些好看的hexo主题？

Next主题添加多说

新建站点时会创建多说域名：
创建站点完成后在 站点配置文件（不是主题配置文件）中新增 duoshuo_shortname 字段，值设置成上一步中的值。
duoshuo_shortname: michael-xox
其他主题主题添加多说，参考：

  1. http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9
  2. http://dev.duoshuo.com/docs/5016427f77cf5fa30500000e

hexo命令

更新hexo：

npm update -g hexo

更新主题：

cd 到主题文件夹，执行命令：
git pull

更新插件：

npm update

因为重装系统的缘故，重新要配置一下环境。简要做个笔记。

Windows下npm安装Hexo失败的解放方案

因为国外源网速不好的原因，安装hexo失败，可以采用如下方案：
命令搞定HEXO!!!

1
2
3
4
5
6
7
8
# 添加淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
# nrm类似包管理器
cnpm install nrm -g
nrm ls
# 使用淘宝
nrm use taobao
npm install -g hexo-cli

大功告成！

http://www.codes51.com/itwd/1327882.html
http://www.thinksaas.cn/ask/question/21934/

安装NEXT

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

参考：Next配置

优化

头像设置

编辑 站点配置文件，新增字段 avatar， 值设置成头像的链接地址。
avatar: http://i5.tietuku.com/0d972d2b106fc7ea.jpg

网站logo设置

  1. 通过网站favicon在线制作制作favicon图片，logo最好设置32*32。
  2. next主题：将图片放在next主题source/images目录下
  3. 在next主题配置文件中添加：favicon: images/favicon.ico

添加关于页面

hexo new page "about"
在source文件夹下就会有about文件夹，编辑index.md，然后进入主题的_config.yml中，menu下的#about注释去掉

添加目录云、标签云页面

1
2
hexo new page "tags"
hexo new page "categories"

然后设置同上，去掉主题配置文件中的注释，调整菜单顺序

设置侧边栏头像

在站点配置文件，不是主题配置文件中，添加：

1
2
avatar: url
#avatar: /uploads/avatar.jpg

  1. 通过网站favicon在线制作制作favicon图片，logo最好设置32*32。
  2. next主题：将图片放在next主题source/images目录下
  3. 在next主题配置文件中添加：favicon: images/favicon.ico
    或者把favicon.ico放到主题文件夹source文件夹下就可以了-》favicon: /favicon.ico
    1
    2
    # Put your favicon.ico into `hexo-site/source/` directory.
    favicon: /images/favicon.ico

增加打赏功能

  • hexo博客Next主题添加打赏功能
  • hexo next 主题添加打赏功能
  • 实现网站的打赏功能
  • 为Hexo博客添加版权说明和打赏功能

设置阅读次数

  • 为NexT主题添加文章阅读量统计功能
  • 为博客文章添加阅读量统计功能-LeanCloud

添加最近访客和多说

  • 动动手指，NexT主题与Hexo更搭哦（基础篇）
  • 动动手指，给你的Hexo站点添加最近访客（多说篇）

SEO

  • Hexo NexT 主题SEO优化指南
  • 个人博客SEO实践
  • Hexo教程(四)-hexo博客被搜索引擎收录

  • Hexo+nexT主题搭建个人博客

  • 安装sitemap扩展：

    1
    2
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save

  • 在你的hexo站点的_config.yml添加下面的代码:

    1
    2
    3
    4
    5
    # hexo sitemap网站地图
    sitemap:
      path: sitemap.xml
    baidusitemap:
      path: baidusitemap.xml

注意：这个地方的空格要符合语法规范！

  • 提交sitemap
    参考next主题官方解答：添加 Google Webmaster tools 验证

  • 配置成功后，hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
    其中sitemap.xml适合提交给谷歌搜素引擎，baidusitemap.xml适合提交百度搜索引擎。
    其次，在robots.txt中添加下面的一段代码：

    1
    2
    Sitemap: http://www.arao.me/sitemap.xml
    Sitemap: http://www.arao.me/baidusitemap.xml

  • 参考这篇文章hexo干货系列：（六）hexo提交搜索引擎（百度+谷歌） 提交sitemap.xml

添加友链

在主题配置文件 _config.yml中Sidebar Settings部分添加字段：

1
2
3
4
5
6
# Blogrolls
links_title: 友情链接
links_layout: inline
links_icon: link  # 设置图标
links:
  Michael翔: http://michaelxiang.me

添加搜索

  • 安装npm install generarot-search
  • 在站点配置文件，不是主题配置文件中，添加：
    1
    2
    3
    4
    # 添加搜索
    search:
      path: search.xml
      field: all

注意：需要在站点配置文件中设置：url: http://michaelxiang.me/，否则搜索的结果点击链接，会跳转到错误页面。

添加背景

  • 参考hexo引用自定义js文件和css样式，在github资源中找到particle.js，将其下载到本地主题文件夹D:\03TBP\TBP\BLOG\themes\next\source\js\src类似这样的文件夹下。
  • 然后在主题layout/_layout.swig中的最后body标签上添加<script type="text/javascript" src="/js/src/particle.js"></script>

参考

  • Hexo博客优化 - Next主题个性化定制-推荐！！！
  • hexo下新建页面下如何放多个文章？
  • 玩转Hexo博客之Next
  • 动动手指，不限于NexT主题的Hexo优化（SEO篇）
  • 博客推广——提交搜索引擎SEO
  • Next主题常见问题
  • 主题配置

2017-05-25更新：

Hexo搭建个人博客-资料整理

标签（空格分隔）： 软件

安装准备

Git配置SSH

  • git下载

安装完成之后，配置git环境[^1] [^2]：

1
2
git config --global user.name "username"
git config --global user.email "username@example.com"

[^1]:Hexo 3.1.1 静态博客搭建指南

[^2]:GitHub Pages + Hexo搭建博客

生成公钥：

1
2
# C:\Users\xiang\.ssh
ssh-keygen -t rsa -C "username@example.com"

然后在C:\Users\michael\.ssh文件夹下查看id_rsa.pub,复制全部内容，添加到github账户中：

验证成功

1
ssh -T git@github.com

设置，下次部属时不用密码：

1
2
git init
git remote set-url origin SSH对应的url（去github对应博客的download查看）

在github创建博客项目：
创建Github Repository：Repository名字必须是你的Github名.github.io，比如我是michaelxoxo.github.io

Node下载安装

  • Node官方地址

部署Hexo

  • Hexo官方文档

新建一个文件夹，比如，Blog，然后进入该文件夹下：

1
2
npm install hexo-cli -g
hexo version

安装依赖包

1
npm install

配置站点文件

为了能够使Hexo部署到GitHub上，需要安装一个插件：

1
npm install hexo-deployer-git --save

部署博客的配置：

1
2
3
4
5
6
7
8
9
10
# Deployment
## Docs: http://hexo.io/docs/deployment.html
# deploy:
#   type: git
#   repo: git@github.com:michaelxoxo/michaelxoxo.github.io.git
  # branch: master
deploy:
  type: git
  repo: git@github.com:michaelxoxo/michaelxoxo.github.io.git  #从github博客项目复制，切换为ssh地址
  branch: master

Front-matter

Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
title: Hello World
date: 2013/7/13 20:46:25
---

比如，在material主题中，在这儿可以通过关键字thumbnail:，填上图片的url地址，设置每篇文章的缩略图

Next主题

首先区分两个概念：

  1. 主题配置文件
  2. 站点配置文件

Next主题下的_config.yml就是主题配置文件，而站点目录下的_config.yml则是站点配置文件

安装：

  • Next-github
  • Next文档
  • Next作者blog
  • 动动手指，NexT主题与Hexo更搭哦（基础篇）

进入theme文件夹下,执行：

1
git clone https://github.com/iissnan/hexo-theme-next.git

执行完成之后，在theme文件夹下则会出现next文件夹。

启用Next主题，在站点配置文件中，设置：

1
theme: next

评论：

  • disqus

主题配置文件中，设置了：

1
disqus_shortname: michaelxiang

注意：如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false

搜索

http://theme-next.iissnan.com/third-party-services.html#search-system
添加百度/谷歌/本地 自定义站点内容搜索

1.安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

2.编辑 站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3.编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

新建页面

举例，新建一个“工具”页面。
先执行命令：

1
hexo new page "tools"

然后在主题配置文件中的menu添加相应的内容：

1
2
3
4
5
6
7
8
9
10
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags
  books: /categories/books  #hexo new page "books"要修改三个地方，去language下面，修改zh-hans中才菜单，添加中文
  diary: /diary  #如果是上面这种结构，则显示该文件夹下所有文章，这后面的英文，要是new page "xx"保持一致
  nav: /nav #导航 别忘了添加图标和中文
  tools: /tools
  about: /about

接着，添加对应的中文名字，在next-languages-zh-Hans文件中：

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  books: 书单
  diary: 札记
  nav: 书签
  tools: 工具
  commonweal: 公益404

最后，还要设置相应的图标，主题配置文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  books: book  #参考fontawsomehttp://fontawesome.io/icons/网站图标，还要去修改language中zh-Hans.yml,添加中文说明
  diary: leaf
  nav: bookmark  #别忘了去添加相应中文
  tools: paper-plane
  commonweal: heartbeat

图标链接：

不蒜子统计

http://theme-next.iissnan.com/third-party-services.html#analytics-busuanzi

编辑 主题配置文件 中的busuanzi_count的配置项。

当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。

分享服务

http://theme-next.iissnan.com/third-party-services.html#share-system

主题配置文件中：JiaThis 分享服务

1
jiathis: true

给next主题添加打赏

http://theme-next.iissnan.com/theme-settings.html#reward

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

添加文章阅读统计

  • 为NexT主题添加文章阅读量统计功能

设置RSS

https://github.com/hexojs/hexo-generator-feed
安装扩展：

1
npm install hexo-generator-feed --save

然后在站点配置文件中设置：

1
2
3
4
5
6
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

设置侧边栏头像旋转

http://leeyom.top/2016/09/29/hexo%E5%8D%9A%E5%AE%A2%E8%BF%9B%E9%98%B6%E6%95%99%E7%A8%8B/

主要是修改 Hexo 目录下 \themes\next\source\css\_common\components\sidebar\sidebar-author.styl文件

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
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

站点建立时间

个时间将在站点的底部显示，例如© 2013 - 2015。 编辑 主题配置文件，新增字段 since。

1
since: 2015

SEO优化

给你的hexo站点添加sitemap网站地图
安装hexo的sitemap网站地图生成插件

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
在你的hexo站点的_config.yml添加下面的代码

hexo sitemap网站地图

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功后，hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
其中sitemap.xml适合提交给谷歌搜素引擎，baidusitemap.xml适合提交百度搜索引擎。
其次，在robots.txt中添加下面的一段代码：

1
2
Sitemap: http://www.arao.me/sitemap.xml
Sitemap: http://www.arao.me/baidusitemap.xml

参考： http://www.arao.me/2015/hexo-next-theme-optimize-seo/

给next主题添加背景图片

  • 给hexo个人博客 next主题添加背景图片

Materail主题

安装

  • hexo-theme-material-github
  • material文档
  • material作者个人blog

进入theme文件夹下,执行：

1
git clone https://github.com/viosey/hexo-theme-material.git

下载完成之后，修改文件夹名为：material，同时将主题配置文件_config.template.yml修改为：_config.yml
设置站点配置文件中的语言：language: zh-CN，这个和Next主题的zh-Hans是有区别的。

然后测试：

1
2
3
hexo clean
hexo g
hexo s

访问地址：http://localhost:4000/

按照material文档文档，可以设置主题的背景等，按照说明文档一步一步设置即可。

https://material.viosey.com/intro/#dropdown
下拉菜单这里，如果不去language设置dropdown对应的中文，那么，就会显示undefined。

设置独立页面

  • Material icons

  • 主题文档-Pages

    1
    2
    3
    4
    5
    6
    hexo new page "about"  #新建关于我的页面，其实这条命令就是在根目录source文件夹下新建了一个about文件夹
    pages:
        About: #这里可以把它改为关于我
            link: "#about"
            icon: person
            divider: false

作为一个单位。
Name 是该独立页面的名称，请自行修改。
link 的参数为相对路径，对应 hexo 目录下的 source 文件夹内的相应文件夹。
icon 的参数为自定义的 Material 图标，可用图标可在 Material icons 查询。
divider 设置成 true 后会在该条目底部增加一条分割线

PS:菜单显示中文,只需要将“About”设置为“关于我”，因为它的链接link设置对应的文件夹了，比Next主题添加稍微简单点，那个还需要去主题的language中添加对应的中文

  • 创建友链

设置RSS

  • 说明
  • 插件github地址
1
2
3
4
5
6
7
8
9
$ npm install hexo-generator-feed --save
#You can configure this plugin in _config.yml.

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

Qrcode-设置二维码，手机扫描阅读

1
npm install hexo-helper-qrcode --save

用于在文章页中显示二维码，扫描二维码即可直接打开文章。
qrcode: true

topPost置顶文章

使用该插件可以将指定文章置顶。
如果您需要这个功能，请使用 npm install hexo-helper-post-top --save安装支持插件。
之后在您需要置顶文章的 front-matter中，添加 top: true 即可置顶。

Hexo插入音乐/视频

  • 通过 Hexo 插件插入音乐/视频

Maupassant主题-大道至简

  • Maupassant-github
  • Maupassant-中文文档

命令

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面，其实作用就是在根目录source目录下，添加一个about的文件夹
hexo generate #生成网页, 可以在 public 目录查看整个网站的文件
hexo server #本地预览, 'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,

多台机器同步

每次上传之前，删除同步文件夹下的.deploy_git文件夹。

参考文章

  • hexo的next主题个性化配置教程-推荐
  • SF-自己-Hexo+Github Page部署个人博客资源整理
  • 解决用Hexo和GitHub搭建博客时hexo d命令报错问题
  • Hexo搭建静态博客
  • Hexo+nexT主题搭建个人博客
  • hexo博客进阶教程
相关文章
Michael翔 wechat
ヾﾉ≧∀≦)o 欢迎订阅公众号「Coder魔法院」☑工具控 ☑编程 ☑读书☑电影
「🤓 码字不易，来杯Coffee👇」