Injector

An injector is used to add static code snippet to the <head> or/and <body> of generated HTML files. Hexo run injector before after_render:html filter is executed.

Synopsis

hexo.extend.injector.register(entry, value, to);

entry `<string>`

Where the code will be injected inside the HTML.

Support those values:

head_begin: Inject code snippet right after <head> (Default).
head_end: Inject code snippet right before </head>.
body_begin: Inject code snippet right after <body>.
body_end: Inject code snippet right before </body>.

value `<string> | <Function>`

A function that returns string is supported.

The code snippet to be injected.

to `<string>`

Which page will code snippets being injected.

default: Inject to every page (Default).
home: Only inject to home page (which has is_home() helper being true)
post: Only inject to post pages (which has is_post() helper being true)
page: Only inject to pages (which has is_page() helper being true)
archive: Only inject to archive pages (which has is_archive() helper being true)
category: Only inject to category pages (which has is_category() helper being true)
tag: Only inject to tag pages (which has is_tag() helper being true)
Custom layout name could be used as well, see Writing - Layout.

There are other internal functions, see hexojs/hexo#4049 for more details.

Example

const css = hexo.extend.helper.get("css").bind(hexo);
const js = hexo.extend.helper.get("js").bind(hexo);

hexo.extend.injector.register(
  "head_end",
  () => {
    return css(
      "https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css",
    );
  },
  "music",
);

hexo.extend.injector.register(
  "body_end",
  '<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js">',
  "music",
);

hexo.extend.injector.register("body_end", () => {
  return js("/js/jquery.js");
});

Above setup will inject APlayer.min.css (<link> tag) to the </head> of any page which layout is music, and APlayer.min.js (<script> tag) to the </body> of those pages. Also, jquery.js (<script> tag) will be injected to </body> of every page generated.

Accessing user configuration

Use any of the following options:

const css = hexo.extend.helper.get("css").bind(hexo);

hexo.extend.injector.register("head_end", () => {
  const { cssPath } = hexo.config.fooPlugin;
  return css(cssPath);
});

index.js
/* global hexo */

hexo.extend.injector.register("head_end", require("./lib/inject").bind(hexo));

lib/inject.js
module.exports = function () {
  const css = this.extend.helper.get("css");
  const { cssPath } = this.config.fooPlugin;
  return css(cssPath);
};

lib/inject.js
function injectFn() {
  const css = this.extend.helper.get("css");
  const { cssPath } = this.config.fooPlugin;
  return css(cssPath);
}

module.exports = injectFn;

index.js
/* global hexo */

hexo.extend.injector.register("head_end", require("./lib/inject")(hexo));

lib/inject.js
module.exports = (hexo) => () => {
  const css = hexo.extend.helper.get("css").bind(hexo);
  const { cssPath } = hexo.config.fooPlugin;
  return css(cssPath);
};

lib/inject.js
const injectFn = (hexo) => {
  const css = hexo.extend.helper.get("css").bind(hexo);
  const { cssPath } = hexo.config.fooPlugin;
  return css(cssPath);
};

module.exports = (hexo) => injectFn(hexo);