Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

hexo-inject

Package Overview
Dependencies
5
Maintainers
1
Versions
1
Issues
File Explorer

Advanced tools

hexo-inject

Dynamic script & style (and more) injection for Hexo

    1.0.0latest

Version published
Maintainers
1
Yearly downloads
7,303
decreased by-55.9%

Weekly downloads

Readme

Source

hexo-inject Build Status

Dynamic script & style (and more) injection for Hexo

Usage

This plugin is for plugin/theme developers to inject custom code into rendered HTML.

0. Overview

Injection is called once per complete HTML page (ones that have both <head> and <body> section).

There are 4 injection points:

NameAPI
head_begininject.headBegin
head_endinject.headEnd
body_begininject.bodyBegin
body_endinject.bodyEnd
<!DOCTYPE html> <html> <head> <!-- head_begin --> <!-- ... --> <!-- head_end --> </head> <body> <!-- body_begin --> <!-- ... --> <!-- body_end --> </body> </html>

1. Install

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" } }

2. Register to inject_ready filter

hexo-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') })

3. Simple injection helpers

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)
  • All values in attrs and content can be a string, a Promise that returns a string, or a function that returns a string or a Promise
  • opts.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.

4. Inject files

hexo-inject also provides require (injectionPoint, module, opts) helper for file injection.

The workflow is:

  • File path is specified by module and is resolved relative to the callsite script's folder
  • Once resolved, the file will be renderer by hexo's renderer (determined by file's extension). The extension will be changed to output format's. (i.e. .swig -> .html)
  • The rendered content will be processed by loader (again, determined by file's extension) and the result will be injected
  • If 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 value
  • src - custom path for serving the file. Default to /injected/${module.fileName}${module.ext}
  • data - passed to renderer
  • shouldInject

Custom loader

hexo-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.

Keywords

FAQs

What is hexo-inject?

Dynamic script &amp; style (and more) injection for Hexo

Is hexo-inject popular?

The npm package hexo-inject receives a total of 92 weekly downloads. As such, hexo-inject popularity was classified as not popular.

Is hexo-inject well maintained?

We found that hexo-inject demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 18 Mar 2016
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc