Hexo

本文主要介绍如何使用 Hexo+NexT 搭建自己的博客之后,和在建站期间遇到的一些问题以及优化方式。

推荐阅读

Hexo+Next主题优化

弄懂 NexT

post.mdbool 属性默认值是 false

BugFix

错误 Cannot set property 'lastIndex' of undefined,修改 hexo/config.yml 设置 auto_detect: false

1
2
3
4
5
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

异常 Cannot find module './build/Release/DTraceProviderBindings' 不影响使用,但是看着难受,尝试

1
2
3
4
npm install hexo --no-optional
// 如果上面的命令有效,可以不执行以下两条
npm uninstall hexo-cli -g
npm install hexo-cli -g

SEO优化

Hexo NexT主题SEO优化

SEO优化,Google收录

加快访问速度

因为是放在 GitHub 上面的,所以访问难免会慢。

可以发布以后检查一下网页加载的瓶颈在哪里,然后做相应的优化。

需要注意的是,放在本地的图片访问会变的很慢,因为资源在 GitHub 上面,所以尽量用七牛等的云存储,文章中使用 url。

fontawsome 访问慢,替换 _config.yml 中的源,效果会好很多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors
# Internal version: 2.1.3
jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
# Internal version: 2.1.5
# Fancybox: http://fancyapps.com/fancybox/
fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
# Internal version: 1.0.6
fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
# Internal version: 1.9.7
lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
# Internal version: 1.2.1
velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
# Internal version: 1.2.1
velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
# Internal version: 0.7.9
ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js
# Internal version: 4.4.0
# http://fontawesome.io/
fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

页面简单加密访问

找到文件themes->next->layout->_partials->head.swig<meta>标签之后添加如下js代码

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

在文章的Front-matter定义password

1
2
3
4
5
6
7
8
9
---
layout: post
title: Hexo加密文章示例
date: 2017-03-02
category:
tags:
keywords:
password: 123456
---

添加留言界面

添加page,在博客根目录下执行如下命令,会在source目录下面创建msg/index.md文件。

1
hexo new page msg

配置文字和图标,打开themes/next/_config.yml文件,进行如下配置,才能使留言的界面显示

1
2
3
4
5
6
7
menu:
home: /
#about: /about
archives: /archives
tags: /tags
categories: /categories
guestbook: /guestbook

配置图标,打开themes/next/_config.yml文件,进行如下配置,可以自定义显示在侧边栏的留言的图标,图标的配置使用key-value的形式,下面代码中home``calendar等都是key,使用这个key可以从这个网站-FontAwesome获取图标,如果想更换图标,只需要去那个网站获取图标的名字去掉头部的icon作为key添加到下面代码中即可。

1
2
3
4
5
6
7
8
9
10
menu_icons:
enable: true
home: home
about: user
categories: th
schedule: calendar
tags: tags
guestbook : comments
archives: archive
commonweal: heartbeat

打开themes/next/language/zh-CN.yml文件,进行如下配置,才能显示为 留言 字样

1
2
3
4
5
6
7
8
9
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
guestbook: 留言

过滤文件不进行渲染

在给站点添加 README.md 和 Google,百度相关的验证文件时,我们希望这个文件不要被主题渲染,而是源文件直接拷贝到 public 文件夹中,只需要在 hexo/_config.yml 中进行如下配置。

1
2
3
4
skip_render:
- 'README.*'
- 'google26933bad87c2b3ba.*'
- 'baidu_verify_HnYctWkkrH.*'

category 分级

在头部如下写入 categories 标签

1
2
3
categories:
- Extensions
- Hexo

链接唯一化

安装 hexo-abbrlink 插件

1
npm install hexo-abbrlink --save

配置 hexo/_config.yml,添加如下,完成后打开文件,保存几次,会自动添加 abbrlink 属性,如果已经有值了则不会更改。

1
2
3
4
5
6
permalink: article/:abbrlink/ # article/ 可自行更换
# abbrlink config
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

文章压缩

安装插件 hexo-all-minifier

1
npm install hexo-all-minifier

配置 hexo/_config.yml,添加如下

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
# 文章压缩
html_minifier:
enable: true
ignore_error: false
exclude:
css_minifier:
enable: true
exclude:
- '*.min.css'
js_minifier:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false

添加 fork me on github

修改 hexoBlog/themes/next/layout/_layout.swig 文件,在 header
标签之前添加图片,图片样式可以到丝带状的Fork 或者是 三角形的的Fork选择颜色和位置等。href 中需要修改你为的 github 地址

1
2
3
4
5
6
7
8
9
10
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>
<!--- add Fork me on Github -->
<div class="forkme">
<a target="_blank" href="https://github.com/chendongMarch"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
</div>
<!--- add Fork me on Github -->
<header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">

head 标签内添加 style 使小屏幕访问时不显示这个图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
<style>
.forkme{
display: none;
}
@media (min-width: 768px) {
.forkme{
display: inline;
}
}
</style>
{% include '_third-party/analytics/index.swig' %}
</head>

代码风格处理

查看 hexoBlog/themes/next/source/css/_common/components/highlight/highlight.styl 文件,是对高亮代码的相关配置。找到标签修改既可。

1
2
3
4
5
6
7
// 行内代码
code{
// 分行时是不是根据单词划分
word-wrap: break-all/break-word;
// 代码颜色
color:#fff;
}

添加本地搜索

安装插件 hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

配置 hexo/_config.yml

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

配置 next/_config.yml

1
2
3
# Local search
local_search:
enable: true

添加加载进度

Next 主题下打开 /next/layout/_partials/head.swig 文件,在最后追加进度条

下面的代码只在浏览器显示,手机上不显示进度条

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
{# 添加进度条 #}
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #0000; /*进度条颜色*/
height: 0px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 0px #0000, 0 0 0px #0000; /*阴影颜色*/
}
.pace .pace-activity {
display: none;
border-top-color: #00d9cf; /*上边框颜色*/
border-left-color: #00d9cf; /*左边框颜色*/
}
@media screen and (min-width: 800px) {
.pace .pace-progress {
background: #00d9cf; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #00d9cf, 0 0 5px #00d9cf; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #00d9cf; /*上边框颜色*/
border-left-color: #00d9cf; /*左边框颜色*/
}
}
</style>

解决表格被等分

文件 themes/next/source/css/_common/scaffolding/tables.styl

1
table-layout: auto;

添加 Leancloud 统计

今天发现网页访问很慢,查了之后发现不蒜子统计访问太慢,换成leancloud,但是只有pv统计。

参考文章

指定文章不在首页显示

文件 /Users/march/Documents/hexoBlog/themes/next/layout/index.swig 修改。

1
2
3
4
5
6
7
8
9
10
11
12
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{%if !post.hide %}
{{ post_template.render(post, true) }}
{% endif %}
{% endfor %}
</section>
// render 之前判断
{%if !post.hide %}
{{ post_template.render(post, true) }}
{% endif %}

然后在文章文件头部,增加

1
2
3
4
---
...
hide: true
---

网站背景

/Users/march/Documents/hexoBlog/themes/next/source/css/_custom/custom.styl

1
2
3
body{
background-image: url(/images/background.png);
}

头部显示

/Users/march/Documents/hexoBlog/themes/next/source/css/_schemes/Mist/_header.styl

1
.header { background: $whitesmoke; }

更改全局字体

/Users/march/Documents/hexoBlog/themes/next/source/css/_variables/custom.styl

1
2
3
4
$font-size-base = 15.5px; // 默认是 16px 大小
$font-family-headings = Georgia, sans // 标题,修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 修改成你期望的字体族

文章中加图片,首页不显示图片

/Users/march/Documents/hexoBlog/themes/next/layout/_macro/post.swig

上面有个 gallery support,加上 not is_index 就可以不再首页显示,然后 md 文件顶部使用 photos 声明图片链接 photos: ‘./img.png’,可以多张

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if not is_index and post.photos and post.photos.length %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{% set COLUMN_NUMBER = 3 %}
{% for photo in post.photos %}
{% if loop.index0 % COLUMN_NUMBER === 0 %}<div class="post-gallery-row">{% endif %}
<a class="post-gallery-img fancybox" href="{{ url_for(photo) }}" rel="gallery_{{ post._id }}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url">
<img src="{{ url_for(photo) }}" itemprop="contentUrl"/>
</a>
{% if loop.index0 % COLUMN_NUMBER === 2 %}</div>{% endif %}
{% endfor %}
{# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #}
{% if post.photos.length % COLUMN_NUMBER > 0 %}</div>{% endif %}
</div>
{% endif %}

头像为圆形,可移动

themes/next/source/css/_common/components/sidebar/sidebar-author.syl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
// 设置旋转
transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}

主页文章添加卡片背景

themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post{
margin-top: 0px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(180, 180, 180, .5);
-moz-box-shadow: 0 0 5px rgba(180, 180, 180, .5);
}

themes/next/layout/_macro/post-copyright.swig

1
2
3
{{
__('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license)
}}

文章内链接

themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
padding-left:5px;
padding-right:5px;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
text-decoration: none;
border-radius:0;
}
}

统一添加“本文结束”标记

在路径 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #aaa;font-size:14px;margin-top:2rem;">------ 本文结束 🎉🎉 谢谢观看  ------</div>
{% endif %}
</div>

打开 themes/next/layout/_macro/post.swig 文件,添加:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后打开主题配置文件 _config.yml,在末尾添加:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

键盘触发侧栏

/Users/march/Documents/hexoBlog/themes/next/source/js/src/motion.js

1
2
3
4
5
6
7
8
9
$(document).ready(function () {
NexT.motion = {};
window.onkeydown=function(){
    if(13 == event.keyCode){
      NexT.utils.displaySidebar();
    }
};
}

添加 live2d 看板娘

添加一个小姐姐

https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

1
npm install --save hexo-helper-live2d

hexo/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
use: live2d-widget-model-z16
scale: 1
hHeadPos: 1
vHeadPos: 1
display:
superSample: 3
width: 60
height: 120
position: right
hOffset: 120
vOffset: -40
mobile:
show: false
react:
opacityDefault: 1
opacityOnHover: 1
------ 本文结束 🎉🎉 谢谢观看  ------