hexo-inject
Advanced tools
Dynamic script & style (and more) injection for Hexo
This plugin is for plugin/theme developers to inject custom code into rendered HTML.
Injection is called once per complete HTML page (ones that have both <head> and <body> section).
There are 4 injection points:
| Name | API |
|---|---|
head_begin | inject.headBegin |
head_end | inject.headEnd |
body_begin | inject.bodyBegin |
body_end | inject.bodyEnd |
<!DOCTYPE html>
<html>
<head>
<!-- head_begin -->
<!-- ... -->
<!-- head_end -->
</head>
<body>
<!-- body_begin -->
<!-- ... -->
<!-- body_end -->
</body>
</html>
Ask your user to run npm install --save hexo-inject.
Or add postinstall script to your plugin's package.json:
{
"scripts": {
"postinstall": "npm install --save hexo-inject"
}
}
inject_ready filterhexo-inject will execute inject_ready filter to pool all installed plugins for injection configuration once hexo's after_init is fired.
In your plugin:
hexo.extend.filter.register('inject_ready', (inject) => {
// Configure injections here
// Inject raw html at head_begin
inject.raw('head_begin', 'injected content')
// Or short hand
inject.headBegin.raw('injected content')
})
hexo-inject provides a few helpers for simple HTML content injection:
tag (injectionPoint, name, attrs, content, endTag, opts)script (injectionPoint, attrs, content, opts)style (injectionPoint, attrs, content, opts)link (injectionPoint, attrs, opts)Examples:
inject.link('head_begin', { href: '/foo/bar.css', rel: 'stylesheet' })
inject.headBegin.script({}, 'var foo = 1;', { shouldInject: (src) => determinedBy(src) })
Notes:
injectionPoint is omitted if the helper is called from short-hand form (e.g inject.headBegin)attrs and content can be a string, a Promise that returns a string, or a function that returns a string or a Promiseopts.shouldInject can be a boolean value or a function that takes current page's HTML source and returns a boolean value. If shouldInject returns false, the content will not be injected to that page.hexo-inject also provides require (injectionPoint, module, opts) helper for file injection.
The workflow is:
module and is resolved relative to the callsite script's folder.swig -> .html)opts.inline == false, hexo-inject will serve the file and reference it accordingly (i.e. via <script src="/path/to/served.js"></script>). Otherwise the content will be injected directly.Valid opts fileds are:
inline - a boolean valuesrc - custom path for serving the file. Default to /injected/${module.fileName}${module.ext}data - passed to renderershouldInjecthexo-inject provides loader for .js and .css by default. If you need to handle other formats, you should implement your own loader:
inject.loader.register('.foo', (content, opts) => {
return opts.inline
? `<Foo src=${opts.src}></Foo>`
: `<Foo>${content}</Foo>`
})
Note that you might need to handle opts.inline accordingly and know that content will be an empty string if inline == false.
FAQs
Dynamic script & style (and more) injection for Hexo
We found that hexo-inject demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.