NEXT 加载您自定以的静态文件

摘要

本文介绍如何实现加载自定义的静态文件，如和css,js等。通过本篇，您应该会了解关于HEXO next主题静态文件加载原理。
HEXO-建站系列
 HEXO-优化系列
 HEXO-进阶系列

前言

在操作前你需要知道，当您的文件编译成功后，网站的根目录为主题下的Source文件，所以在做任何的静态文件加载时，您需要以此目录作为根目录参考点。
如果你只是希望创建自定义的静态文件目录，我建议还是按照主题目录架构标准，将你的静态文件放到对应得目录下，如举例js文件，在vendors目录下。
当然这不是必须的。本文的介绍是在vendors目录下创建个人的静态脚本文件，和实现脚本的加载。

实现过程

创建你的静态脚本目录

在你的主题目录下的Source下的vendors下建立你的静态目录，本例为：Souce/vendors/custom/custom.js

修改主题模板文件vendors.swig

vendors.swig文件在主题目录下的layout\_scripts\下，修改对应的代码。代码如下：
你需要添加的代码：

1
2
3

{% if theme.customjs %}
  {% set js_vendors.customjs  = 'custom/custom.js' %}
{% endif %}

完成代码：

{# Reset `window.Promise` when it was not a function. #}
{# IE refers the element whose id is `Promise` as `window.Promise`, this causes Velocity throwing an exception #}
<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>

{% set js_vendors = {} %}
{% set js_vendors.jquery      = 'jquery/index.js?v=2.1.3' %}
{% set js_vendors.fastclick   = 'fastclick/lib/fastclick.min.js?v=1.0.6' %}
{% set js_vendors.lazyload    = 'jquery_lazyload/jquery.lazyload.js?v=1.9.7' %}
{% set js_vendors.velocity    = 'velocity/velocity.min.js?v=1.2.1' %}
{% set js_vendors.velocity_ui = 'velocity/velocity.ui.min.js?v=1.2.1' %}

{% if theme.fancybox %}
  {% set js_vendors.fancybox  = 'fancybox/source/jquery.fancybox.pack.js?v=2.1.5' %}
{% endif %}

{% if theme.customjs %}
  {% set js_vendors.customjs  = 'custom/custom.js' %}
{% endif %}

{% for name, internal in js_vendors %}
  {% set internal_script = url_for(theme.vendors._internal) + '/' + internal %}
  <script type="text/javascript" src="{{ theme.vendors[name] | default(internal_script) }}"></script>
{% endfor %}

如果您有基本的编程基础，你不难发现最后面的代码是一个For循环，上面的被放到For循环里面的
数组声明。而且数组声明就是一个对静态文件的如JS文件路径的变量赋值，将所有静态变量成为数
组并放到For循环里面，循环输出加载的脚本路径。其次如果你留意vendors.swig文件名和FOR循环
代码，你可以发现，其实这个文件就是针对vendors的目录而生效的。所以我们可以得到一个信息，
你可以在For循环代码前声明任意多的数组声明，这样你可以添加任意多的个人静态文件加载。

最后你要修改主题配置文件`_config.yml`

通过代码，我们分析出，vendors.swig文件在对变量进行路径赋值的时候是需要进行判断。经过我的检查发现，判断的方式是
对_config.yml的变量判断。举个例子，即if theme.customjs，即你需要在_config.yum声明此变量且赋值为true
所以_config.yml的修改：
添加相关代码

1	你的变量: true

例子：

1 2	#customjs customjs: true

贴出对应的vendors.swig的代码：

1
2
3

{% if theme.customjs %}
  {% set js_vendors.customjs  = 'custom/custom.js' %}
{% endif %}

通过以上的修改你就实现的个人的静态文件的加载。

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客
Jory's Blog Share For you!Welcome to JORY'S BLOG

摘要

前言

实现过程

创建你的静态脚本目录

修改主题模板文件vendors.swig

最后你要修改主题配置文件_config.yml

结语

最后你要修改主题配置文件`_config.yml`