通过引入js文件的方式使Hexo设置更多的动态背景图

发表于 更新于 分类于 阅读次数： 本文字数： 298 阅读时长 ≈ 1 分钟

前言

在这篇文章中，我们发现了如何通过修改utils.js实现背景图轮播与更新，现在我们再用一个引入js文件的方式，实现NexT_config可以控制的背景图轮播与更新。

查看官方示例

你可能会怀疑哪里来的官方示例，那当然是源码中给的提示。比如NexT可以在themes/next/layout/_scripts/index.njk下看到这些内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{%- include 'vendors.njk' -%}

{{- next_js('comments.js') }}

{{- next_js('utils.js') }}
{%- if theme.motion.enable %}
  {{- next_js('motion.js') }}
{%- endif %}

{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' %}
  {{- next_js('schemes/muse.js') }}
{%- endif %}

{{- next_js('next-boot.js') }}
{%- if theme.bookmark.enable %}
  {{- next_js('bookmark.js') }}
{%- endif %}
{%- if theme.pjax %}
  {{- next_js('pjax.js') }}
{%- endif %}

然后去看themes/next/source/js文件夹下，还果然就是这些文件。

那么就是说，我只需要将代码放在这个文件夹下，然后再去themes/next/layout/_scripts/index.njk中引用不就好了？

于是，把这篇文章中提到的完整代码单独拉出来放入独立的javascript文件中，命名为add-background.js。同时，为了方便管理，把add-background.js文件放入自行创建的themes/next/source/js/custom文件夹中，然后引入：

1
2
3
{%- if theme.transparent.enable %}
  {{- next_js('custom/add-background.js') }}
{%- endif %}

于是，现在背景图片的轮播就能够随意开关了。