背景
上个月研究Hexo如何引用原生的html+css，而且也写了一篇文章发表。但是如果想把自己的博客做的更加突出、像模像样，没有js代码去实现功能是不行的，正好想做一个主题切换功能，借着这个功能介绍一下Hexo是如何引用js代码的。
正文
先讲述怎么引用js代码的，完了在通过实战验证。
引用方式
Hexo+Next通过渲染模板（.swig）以及md文件生成对应的html页面，那么问题就来了，既然是模板，肯定会有一个base文件，这里就不做详述了，直接说：blog/themes/next/layout/_layout.swig。
打开这个文件，会发现里面整个页面渲染的框架以及对第三方文件的引用，看下引用js文件代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{% include '_scripts/next-boot.swig' %}
{% include '_scripts/scroll-cookie.swig' %}
{% include '_scripts/exturl.swig' %}
{% include '_third-party/quicklink.swig' %}
{% include '_third-party/comments/index.swig' %}
{% include '_third-party/search/index.swig' %}
{% include '_third-party/analytics/lean-analytics.swig' %}
{% include '_third-party/analytics/firestore.swig' %}
{% include '_third-party/math/index.swig' %}
{% include '_third-party/pdf.swig' %}
{% include '_third-party/mermaid.swig' %}
{% include '_third-party/baidu-push.swig' %}
{% include '_third-party/schedule.swig' %}
{% include '_third-party/needsharebutton.swig' %}
{% include '_third-party/rating.swig' %}
{% include '_third-party/pangu.swig' %}
{% include '_third-party/bookmark.swig' %}
{% include '_third-party/copy-code.swig' %}
{% include '_third-party/chatra.swig' %}
{% include '_third-party/tidio.swig' %}
<script type="text/javascript" src="/js/src/click_magic.js"></script>
<script type="text/javascript" src="/js/src/theme_change.js"></script>
还是通过传统的方式引用js代码，相对应的script直接引用的是js文件，而include引用的是swig文件，来点代码看下swig文件里面写的是啥，例子我取的是blog/themes/next/layout/post.swig：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}
{% block title %}{{ page.title }} | {{ title }}{% endblock %}
{% block page_class %}page-post-detail{% endblock %}
{% block content %}
<div id="posts" class="posts-expand">
{{ post_template.render(page) }}
</div>
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(true) }}
{% endblock %}
{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}
里面存放的是html（标签+css）+一些next主题带的语法。
说了这么多，到底咋搞。。。。只需要2步：
- 在blog/themes/next/source/js/src目录下建立一个js文件，名称自取。
- 在blog/themes/next/layout/_layout.swig文件中通过script引用自定义的js文件。
实战
通过一个切换主题的功能来实现上述。
首先，在自定义的header文件：blog/themes/next/layout/_custom/header.swig，加入一个button，代码如下：
1
2
3
4
5
6
7<button id="theme_change"
class="theme_change"
type="button"
onclick="theme_change()"
>
暗黑系
</button>接下来定义button按钮的样式，打开自定义样式文件：blog/themes/next/source/css/_custom/custom.styl，加入一下代码：
1
2
3
4
5
6
7
8
9
10
11
12// 功能按钮样式
.theme_change {
width: 160px;
height: 37px;
border-radius: 50px 50px 50px 50px;
color: white;
font-size: 16px;
background-color: #333333;
margin-left: 40px;
margin-bottom: 20px;
border: 3px solid red;
}在刚才说的自定义js代码目录下新建一个theme_change.js文件，加入一下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13// 主题切换功能
function theme_change() {
// 切换字内容
var button = document.getElementById('theme_change');
var pattern = new RegExp('暗黑系', 'i');
if (pattern.test(button.innerHTML)){
button.innerHTML = "光明系";
} else{
button.innerHTML = "暗黑系";
}
// 切换主题
document.body.classList.toggle('dark-theme');
};编写暗黑主题的样式，还是自定义样式文件，加入一下代码：
1
2
3
4// 自制主题切换功能样式
body.dark-theme {
background: #282c34
}最后一步，自定义js文件的引用。打开blog/themes/next/layout/_layout.swig文件，在底部结束body标签上面引用，代码：
1
<script type="text/javascript" src="/js/src/theme_change.js"></script>
hexo g && hexo s
不出意外，会有一个简单的主题切换功能，样式我也是简单改变了一下背景色，有兴趣的同学可以编写2套Next主题自定义样式。
