Skip to content

timnew/hexo-tag-asset-res

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 Dependency StatusStories in Ready

Hexo tags that enable you to reference files in post asset with relative path

Install

Install using npm.

$ 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

  <img src="/2014/08/15/a-simple-self-introduction/my_portrait.jpg">
  <a href="/2014/08/15/a-simple-self-introduction/my_resume.pdf">My Resume</a>

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 <a>
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:

post_asset_folder: true

Roadmap

  • Custom classes
  • Width, height for Asset Image
  • Title and alt for Asset Image
  • AssetImage cascaded in Asset Link

License

MIT

NPM downloads

Releases

No releases published

Packages

No packages published