高级设置

除了正常的主题设置以及第三方服务,NexT还支持一些高级设置,这些设置使NexT更个性化。注意:如果这些设置错误,可能导致异常行为,所以最好在明白这些设置后再去更改它们。

第三方JS库

此功能位于主题配置文件中的vendors部分下。用于告诉NexT内部库位于何处,在大多数情况下,您不应更改此设置。

接下来的部分是每个库的配置,如果保留为空白,则NexT将使用内部版本,配置格式为libname: CDN URL。例如:

1
anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js

CDN可以使静态资源(JavaScript第三方库)的加载速度更快。现在NexT包含以下第三方库:

Name Original Link Internal Version
Anime.js animejs.com 3.1.0
FontAwesome fontawesome.io 4.7.0
VelocityJS velocityjs.org 1.2.1
VelocityJS UI Pack velocityjs.org/#uiPack 1.2.1

NexT使用jsDelivr作为默认的CDN服务提供商。因为它在世界各地都比较快,并且jsDelivr拥有中国政府颁发的有效ICP许可证,因此在国内可以很好地访问它。

我们还提供其他可选CDN,包括著名的CDNJS。注意:CDNJS在中国的某些地区已被屏蔽,请勿将其用作CDN。

如果您想尝试未包含在可选列表中的其他CDN,最好使用相应的版本。内部版本是NexT测试和使用的版本。如果需要其他版本,则需要先对其进行测试。

next/_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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 3.1.0
# Example:
# anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
anime:

# Internal version: 4.7.0
# Example:
# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
fontawesome:

# MathJax
# Example:
# mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
# mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
# mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
mathjax:
mhchem:

# KaTeX
# Example:
# katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
# katex: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css
# copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
# copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
katex:
copy_tex_js:
copy_tex_css:

# Internal version: 0.2.8
# Example:
# pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
pjax:

# FancyBox
# Example:
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
jquery:
fancybox:
fancybox_css:

# Medium-zoom
# Example:
# mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
mediumzoom:

# Lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
lazyload:

# Pangu
# Example:
# pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
# pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
pangu:

# Quicklink
# Example:
# quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
quicklink:

# DisqusJS
# Example:
# disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
# disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
disqusjs_js:
disqusjs_css:

# Valine
# Example:
# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.4/Valine.min.js
valine:

# Gitalk
# Example:
# gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
# gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
gitalk_js:
gitalk_css:

# Algolia Search
# Example:
# algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js
# algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css
algolia_instant_js:
algolia_instant_css:

# PDF
# Example:
# pdfobject: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
# pdfobject: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
pdfobject:

# Mermaid
# Example:
# mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
# mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
mermaid:

# Internal version: 1.2.1
# Example:
# velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
# velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
# velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
# velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
velocity:
velocity_ui:

# Internal version: 1.0.2
# Example:
# pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
# pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
# pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
# pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
pace:
pace_css:

# Internal version: 1.0.0
# Example:
# three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
# three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
three:
three_waves:
canvas_lines:
canvas_sphere:

# Internal version: 1.0.0
# Example:
# canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
# canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
canvas_nest:
canvas_nest_nomobile:

# Internal version: 1.0.0
# Example:
# canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
canvas_ribbon:

注入

我们扩展了hexo过滤器并添加了theme_inject,因此用户可以将所需的自定义内容添加到任何注入点injectpoint

概要

1
2
3
hexo.extend.filter.register('theme_inject', function(injects) {
// ...
});

一个注入参数将被传递到函数中,因此我们可以用它在injectPoint后面添加自定义代码。

  • 注入视图:
1
2
3
4
5
6
7
8
9
// The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.
// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.
// `order` defines the order of injection, which by default depends on the priority of injection.
hexo.extend.filter.register('theme_inject', function(injects) {
// it will put code from this filePath into injectPoint.
injects.[injectPoint].file(name, filePath, [locals, options, order]);
// it will put raw string as code into injectPoint.
injects.[injectPoint].raw(name, raw, [locals, options, order]);
});
  • 注入样式:
1
2
3
4
hexo.extend.filter.register('theme_inject', function(injects) {
// it will put styleFile into injectPoint.
injects.[injectPoint].push(styleFile);
});

NexT提供了很多injectPoint,我们可以在injects-point.js查看:

1
2
3
4
module.exports = {
views: ['head', 'header', 'sidebar', 'postMeta', 'postBodyEnd', ..., 'footer', 'bodyEnd'],
styles: ['variable', 'mixin', 'style']
};

custom_file_path也使用此API,详细见default-injects.js

注意路径,必须是绝对路径或相对路径hexo_dir

例子

1、加载自定义脚本。我们可以把它们下载bodyEnd文件中

1
2
3
hexo.extend.filter.register('theme_inject', function(injects) {
injects.bodyEnd.raw('load-custom-js', '<script src="js-path-or-cdn.js"></script>', {}, {cache: true});
});

2、向侧边栏sidebar添加自定义文件my-favourite-food.swig

  • 步骤1:在某个路径(比如source/_data/)中创建my-favourite-food.swig。您可以从hexolocal在过滤器中定义的变量:
1
2
3
{% for food in foods %}
<div>{{food}}</div>
{% endfor %}
  • 步骤2:添加过滤器以加载它:
1
2
3
4
5
hexo.extend.filter.register('theme_inject', function(injects) {
injects.sidebar.file('my-favourite-food', 'source/_data/my-favourite-food.swig', {
foods: ['apple', 'orange']
});
});

3、我们可将big-header.styl注入到NexT

首先创建文件source/_data/big-header.styl

1
2
3
h1 {
font-size: 2rem;
}

然后将其添加到过滤器中:

1
2
3
hexo.extend.filter.register('theme_inject', function(injects) {
injects.style.push('source/_data/big-header.styl');
});

插件

NexT还支持hexo的插件系统,这样我们可以轻松扩展功能而无需修改核心模块的源代码。我们可以从 https://hexo.io/docs/plugins.html#Plugin 了解如何创建插件。