https://github.com/timnew/hexo-tag-asset-res
Hexo Tag that consumes asset files
https://github.com/timnew/hexo-tag-asset-res
Last synced: about 1 year ago
JSON representation
Hexo Tag that consumes asset files
- Host: GitHub
- URL: https://github.com/timnew/hexo-tag-asset-res
- Owner: timnew
- License: mit
- Created: 2014-08-15T09:58:30.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-10-20T10:13:12.000Z (over 10 years ago)
- Last Synced: 2025-04-22T07:16:23.417Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://github.com/timnew/hexo-tag-asset-res
- Size: 267 KB
- Stars: 17
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**
OBSOLETE WARNING
**
**This Plug-in is designed to be used with Hexo 2. And it is considered to be obsoleted after Hexo 3 released, which already has the `asset-folder` feature built-in.**
hexo-tag-asset-res [![NPM version][npm-image]][npm-url] [![Dependency Status][depstat-image]][depstat-url][](https://waffle.io/timnew/hexo-tag-asset-res)
==================
> [Hexo][hexo-url] tags that enable you to reference files in [post asset] with relative path
## Install
Install using [npm][npm-url].
$ npm install hexo-tag-asset-res --save
## Usage
Suppose you have the following folder structure:
```
source\
_posts\
2014-08-15-a-simple-self-introduction.md
2014-08-15-a-simple-self-introduction\
my_portrait.jpg
my_resume.pdf
```
In the markdown file `2014-08-15-a-simple-self-introduction.md`, you can reference files as
```
{% asset_img my_portrait.jpg %}
{% asset_link my_resume.pdf My Resume %}
```
It generates
```html
My Resume
```
### Syntax Detail
```
{% asset_img [.class1.class2] file_name.png [width [height]] ["caption" ["hint"]] %}
{% asset_link [.class1.class2] file_name.png "text" ["hint"] %}
```
**class** (optional): Custom css classes in CSS falvor
*hint*: `.class1.class2` generates `class="class1 class2"`
**filename** (mandantory): The file name of the image
**width** (optional): width, both `px` or `%` are accepted
**height** (optional): height, both `px` or `%` are accepted
*hint*: `height` is only acceptable when `width` is avaiable
**caption** (optional): The caption of the image.
*hint*: To avoid ambiguous value, always quote the text with space, `'` or `"` are both accepted
**text** (mandantory): The text of the ``
*hint*: To avoid ambiguous value, always quote the text with space, `'` or `"` are both accepted
**hint** (optional): The text displayed when mouse hover
*hint*: To avoid ambiguous value, always quote the text with space, `'` or `"` are both accepted
## Asset Folder
Asset folder can be created manually, it should have the same name as the post
Or
Asset folder can be created automatically when post is created.
Adjust the config in `_config.yml`:
```yaml
post_asset_folder: true
```
## Roadmap
* [x] Custom classes
* [x] Width, height for `Asset Image`
* [x] Title and alt for `Asset Image`
* [ ] `AssetImage` cascaded in `Asset Link`
## License
MIT
[![NPM downloads][npm-downloads]][npm-url]
[homepage]: https://github.com/timnew/hexo-tag-asset-res
[npm-url]: https://npmjs.org/package/hexo-tag-asset-res
[npm-image]: http://img.shields.io/npm/v/hexo-tag-asset-res.svg?style=flat
[npm-downloads]: http://img.shields.io/npm/dm/hexo-tag-asset-res.svg?style=flat
[depstat-url]: https://gemnasium.com/timnew/hexo-tag-asset-res
[depstat-image]: http://img.shields.io/gemnasium/timnew/hexo-tag-asset-res.svg?style=flat
[hexo-url]: http://hexo.io/
[post asset]: http://hexo.io/docs/writing.html#Asset_Folder