Hexo 升级及Next主题升级

升级Hexo

下载

1
2
$ npm install hexo-cli -g
$ hexo init blog

npm

package.json npm安装包移动到新目录

安装所需要的包

1
$ npm install

_config.yml

站点配置平移过去

Next theme 升级

Next主题 已经升级到6.0,Hexo也进行了同步升级,下面是升级过程中遇到的一些问题:

下载源码

不管直接download,还是git pull,获取到主题源码即可。

_config.xml

将旧_config.xml文件配置,导入到新_config.xml配置。

!!!语言

中文语言设置,已经从zh-Hans更换为zh-CN,在站点_config.xml更新。

扩展页面内容宽度

根据官网,摘要如下:

Mist/Muse

NexT 对于内容的宽度的设定如下:

  • 700px,当屏幕宽度 < 1600px
  • 900px,当屏幕宽度 >= 1600px
  • 移动设备下,宽度自适应

如果你需要修改内容的宽度,同样需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件,新增变量:

1
2
3
4
5
// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme,关于如何修改 Pisces Scheme 的宽度请参看 这个 Issue

Pisces Scheme

针对Pisces Scheme,在路径source/css/_schemes/Picses/\_layout.styl中,修改以下:

1
2
3
.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }

Gemini

针对Gemini Scheme,以上两种均不好用。

直接找到source/css/_schemes/_variables/Gemini.styl,修改:

1
$main-desktop                     = 85%

代码高亮

Hexo theme本身支持代码高亮,其采用的方案是:highlight。但是对于Objective-C一直不能显示,很是疑惑。

正常来说,语言支持,

identifier,其中语言标识可以在[这里](http://tinker.kotaweaver.com/blog/?p
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

另外,找了一个新插件,支持更丰富的代码高亮:[Prism](https://github.com/ele828/hexo-prism-plugin),以及该插件对应的[语言标识](http://prismjs.com/#languages-list)。



最后,Objective-C采用了语言代码: objectivec



## CDN加速

国内:

* [BootCDN](http://www.bootcdn.cn/)
* 七牛云存储 [开放静态文件 CDN](http://www.staticfile.org/)

国外:

* [JSDELIVR](https://www.jsdelivr.com)

下面是我配置的CDN,注意版本的对应:

```js
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 2.1.3
jquery: https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
fancybox_css: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick: https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity: https://cdn.bootcss.com/velocity/1.2.1/velocity.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui: https://cdn.bootcss.com/velocity/1.2.1/velocity.ui.min.js

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser: https://cdn.bootcss.com/UAParser.js/0.7.9/ua-parser.min.js

# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
# pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
# pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
pace: https://cdn.bootcss.com/pace/1.0.2/pace.js
pace_css: https://cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

# Internal version: 1.0.0
# https://github.com/hustcc/canvas-nest.js
canvas_nest:

# three
three:

# three_waves
# https://github.com/jjandxa/three_waves
three_waves:

# three_waves
# https://github.com/jjandxa/canvas_lines
canvas_lines:

# three_waves
# https://github.com/jjandxa/canvas_sphere
canvas_sphere:

# Internal version: 1.0.0
# https://github.com/zproo/canvas-ribbon
canvas_ribbon:

# Internal version: 3.3.0
# https://github.com/ethantw/Han
han:

# Internal version: 3.3.0
# https://github.com/vinta/pangu.js
pangu:

# needMoreShare2
# https://github.com/revir/need-more-share2
needmoreshare2_js:
needmoreshare2_css:

# bookmark
# Internal version: 1.0.0
# https://github.com/theme-next/theme-next-bookmark
bookmark: https://cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1.0.2/bookmark.min.js

# reading_progress
# Internal version: 1.0
# https://github.com/theme-next/theme-next-reading-progress
# Example: https://cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js
reading_progress: https://cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.0/reading_progress.min.js

# valine comment
# Example: https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js
valine: https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js

Hexo 插件

hexo pdf

hexo-filter-optimize

该插件启用之后,needsharemore就失效,所以并不建议使用。

更多

主要就这些,还有其他的修改,请移步官网或者GitHub