hexo-renderer-stylus
Add support for Stylus with nib and other plugins.
Install
Prerequisites:
- Hexo 3: >= 0.2
- Hexo 2: 0.1.x
$ npm install hexo-renderer-stylus --save
Options
You can configure this plugin in _config.yml
.
stylus:compress: falsesourcemaps:comment: trueinline: truesourceRoot: ''basePath: .plugins: 'nib'
- compress - Compress generated CSS (default:
false
) - sourcemaps
- comment - Adds a comment with the
sourceMappingURL
to the generated CSS (default:true
) - inline - Inlines the sourcemap with full source text in base64 format (default:
false
) - sourceRoot -
sourceRoot
property of the generated sourcemap - basePath - Base path from which sourcemap and all sources are relative (default:
.
)
- comment - Adds a comment with the
- plugins - Stylus plugin(s) (default:
nib
)
Setting Stylus variables
It is possible to set variables that can be used in Stylus. The purpose of setting variable is to avoid direct modification of the Sylus code, and thus to make themes more generic
For example, instead of hardcoding:
div color #FFCC44
You can refer to a variable:
div color "moody_red"))
And in your theme's configuration, you can define this variable:
moody_red: "#8B0001"
(The "convert" function above is here to convert the string into an actual stylus color)
You can also use the theme_config variable in the main _config.yml
:
theme_config: moody_red: "#8B0001"
Extensibility
This plugin provide a filter stylus:renderer
to allows you extend it. When there’s something you cannot do in Stylus, define it in JavaScript!
For example, to define some global variable:
hexoextendfilter
Save the file in "scripts/" folder and run Hexo as usual.
Notice: for more JavaScript api, refer to stylus's documentation.