Injector

An injector is used to add static code snippet to the <head> or/and <body> of generated HTML files. 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. 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);