hexo NexT custom js

 

想要把自己的 js 檔嵌入自己的 hexo blog 使用，其方法有二

 

一、利用 custom_file_path 項目

你去看 \themes\hexo-theme-next\scripts\events\lib\injects-point.js 裡的內容如下，

'use strict';

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

會發現有好幾個注入點，其對應到 \themes\hexo-theme-next\_config.yml，裡的 custom_file_path 項目

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

其各個注入點預設是被註解起來。

 

假設我有一個名為 hello.swig 檔，其內容如下

<script>
    (function () {
        console.log("Hello world!!!");
        }
    )();
</script>

我想將該 hello.swig 檔放在網站內被執行，要如何做呢？

 

1、將 hello.swig 檔放在 root site directory 裡的 \source\_data 路徑。

2、然後再到 \themes\hexo-theme-next\_config.yml，裡的 custom_file_path 項目，

例如我想要將 hello.swig 檔注入 bodyEnd 區段，則修改如下

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  bodyEnd: source/_data/hello.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

3、接下來就是重編譯、部署即可。

 

二、

你去看 \themes\hexo-theme-next\scripts\filters\default-injects.js 裡的內容如下，

/* global hexo */

'use strict';

const points = require('../events/lib/injects-point');

hexo.extend.filter.register('theme_inject', injects => {
  let filePath = hexo.theme.config.custom_file_path;

  if (!filePath) return;

  points.views.forEach(key => {
    if (filePath[key]) {
      injects[key].file('custom', filePath[key]);
    }
  });

  points.styles.forEach(key => {
    if (filePath[key]) {
      injects[key].push(filePath[key]);
    }
  });

}, 99);

這是實作把 \themes\hexo-theme-next\_config.yml，裡的 custom_file_path 路徑的內容，

將其注入到 injects-point.js 裡所列的注入點裡面。

 

那我們要做的是去改動 default-injects.js 裡的內容，

插入一段用來「注入某區段，我們客制的 script」的程式，有兩種方式可做到：

1、injects.bodyEnd.raw()

/* global hexo */

'use strict';

const points = require('../events/lib/injects-point');

hexo.extend.filter.register('theme_inject', injects => {
  injects.bodyEnd.raw('hello.swig','<script>(function () {console.log("Hello world!!!");})();</script>');
  
  let filePath = hexo.theme.config.custom_file_path;

  if (!filePath) return;

  points.views.forEach(key => {
    if (filePath[key]) {
      injects[key].file('custom', filePath[key]);
    }
  });

  points.styles.forEach(key => {
    if (filePath[key]) {
      injects[key].push(filePath[key]);
    }
  });

}, 99);

接下來就是重編譯、部署即可。

 

2、injects.bodyEnd.file()

我們之前有做了一個 hello.swig 檔，

也是一樣將 hello.swig 檔放在 root site directory 裡的 \source\_data 路徑，

然後在 default-injects.js 裡改動的內容如下

/* global hexo */

'use strict';

const points = require('../events/lib/injects-point');

hexo.extend.filter.register('theme_inject', injects => {
  injects.bodyEnd.file('hello.swig', 'source/_data/hello.swig');

  let filePath = hexo.theme.config.custom_file_path;

  if (!filePath) return;

  points.views.forEach(key => {
    if (filePath[key]) {
      injects[key].file('custom', filePath[key]);
    }
  });

  points.styles.forEach(key => {
    if (filePath[key]) {
      injects[key].push(filePath[key]);
    }
  });

}, 99);

接下來就是重編譯、部署即可。

 

參考資料：

Advanced Settings - Injects