Login
Language
English
繁體中文
简体中文
日本語
한국어
فارسی
السعودية
Knock网盘
knock网盘
上载中心
阿里云盘
Home
/
knock网盘
/
Public
/
github
/
blog
/
knockblog
/
node_modules
/
hexo-renderer-stylus
File
OriginalPic
Thumbnails
CopyAllDownloadUrl
EditTime
Size
lib
2023-06-30 15:55:08
1.51 KB
index.js
2023-06-30 15:53:36
192 B
LICENSE
2023-06-30 15:53:36
1.03 KB
package.json
2023-06-30 15:53:36
904 B
# hexo-renderer-stylus [![Build Status](https://github.com/hexojs/hexo-renderer-stylus/workflows/Tester/badge.svg)](https://github.com/hexojs/hexo-renderer-stylus/actions/workflows/tester.yml) [![NPM version](https://badge.fury.io/js/hexo-renderer-stylus.svg)](https://www.npmjs.com/package/hexo-renderer-stylus) [![Coverage Status](https://img.shields.io/coveralls/hexojs/hexo-renderer-stylus.svg)](https://coveralls.io/r/hexojs/hexo-renderer-stylus?branch=master) Add support for [Stylus] with [nib] and other plugins. ## Install Prerequisites: - Hexo 3: >= 0.2 - Hexo 2: 0.1.x ``` bash $ npm install hexo-renderer-stylus --save ``` ## Options You can configure this plugin in `_config.yml`. ``` yaml stylus: compress: false sourcemaps: comment: true inline: true sourceRoot: '' 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: `.`) - **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 Stylus code, and thus to make themes more generic For example, instead of hardcoding: ```stylus div color #FFCC44 ``` You can refer to a variable: ```stylus div color convert(hexo-config("moody_red")) ``` And in your **theme's** configuration, you can define this variable: ```yml 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`: ```yml theme_config: moody_red: "#8B0001" ``` [Stylus]: https://stylus-lang.com/ [nib]: https://stylus.github.io/nib/ ## 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: ```js hexo.extend.filter.register('stylus:renderer', function(style) { style // we may define a global variable by passing a `Node` .define('has-canvas', require('stylus').nodes.false); // stylus also casts JavaScript values to their Stylus equivalents when possible .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif']) // also allows you to provide a JavaScript-defined function to Stylus .define('get-list', function(){ return ['foo', 'bar', 'baz']; }); }) ``` Save the file in "scripts/" folder and run Hexo as usual. Notice: for more JavaScript api, refer to stylus's [documentation](https://stylus-lang.com/docs/js.html).
Close
2024-09-20 06:01:05 Friday 172.68.245.158 Runningtime:0.006s Mem:1.52 MB