How to inject scripts in Hexo?

I wrote this in 2023 for the old version of this site, which ran on Hexo. It runs on Astro now, so these steps may no longer apply.

Hexo reads scripts that are stored under a scripts folder in your root folder.

The Reason why I adding this tutorial:

Note: I am not sure, but seems like njk files from source/_data/ only support first <script> tag. Ofcourse you can have only one <script> tag in the njk file, and from the just use one script to run multiple scripts. But for me it is not an elegant way.

Prerequisite:

hexo-theme-next installed.

Steps

0. Next allows additional injects beside those preset in custom_file_path from next config file. Read how custom_file_path works.

1. Create a scripts folder in your root folder.

2. Add a any_name.js script file. In this example I will named it inject.js.

3. Add following codes into inject.js.

"use strict";

hexo.extend.filter.register('theme_inject', function(injects) {
    // Name path etc. can be modified at will, in order to facilitate the following are based on the definition here
    injects.head.file('click_effect', 'source/_data/click_effect.njk', {}, {cache: true});
    // the `head` from `injects.head` == the <head> tag in html
  });

• Do note that I am using hexo-theme-next in my project. So the following code only works for next theme. If you are working with other theme, you should be able to directly inject script into hexo.

4. Add a new .njk file under source/_data/ folder. If you don’t have _data folder, just create one.

<script type="text/javascript" src="any_script.js"></script>