hexo-intuitive-image v1.0.1
hexo-intuitive-image
A better and intuitive way to store and use images alongside your post:
- place image anywhere you want, use it with normal markdown image syntax
- provide cdn for your images(Powered by jsDelivr) if your blog is served from github pages
Why
Why not use hexo builtin Asset Folders ?
My original request: I customize new_post_name
to :year/:title/index.md
, I want to store any related images inside the folder :title
, and use images in an intuitive way, so that I can change my post title with no cost.
Asset Folders
won't work out for two reasons:
1. It's not friendly for none English users: I'm speaking Chinese but I don't like encoded codes in any uri path
2. It won't working if you customize new_post_name
instead of the default value.
How to use
Install
with yarn
yarn add hexo-intuitive-image -D
with npm
npm install hexo-intuitive-image -D
Writing post
use local images by intuitive way:
you can refer any image from your post, the image path should be relative to your post. there is no folder naming or structure requirements, refer an image at your will
for example:
1. you got a post in path source/_posts/2021/tips-for-google-search/index.md
2. and you have an image in source/_posts/2021/vue-vs-react/vue.png
3. you can use image vue.png
from the post in following syntax:
![vue logo](../vue-vs-react/vue.png)
Config
you may add following config to hexo's config _config.yml
to enable more features:
intuitive_image:
# set to true to rename image name with its hash instead of its original name
# to avoid naming conflicts(different images with same names) and file duplications(same images with different names)
hash: true
# enable cdn powered by jsdelivr.com
cdn:
# github repo path: <github-username>/<github-repo-name>
repo: oe/blog.evecalm.com
# branch that served github pages
# leave it empty will use the default branch(normally `master` or `main`)
branch: gh-pages
FAQ
- What's the final path of the images?
images will be under the same folder with the post's published path. e.g.:
- post path is
/2021/archived/tips-for-google-search.html
, images of it will be in path/2021/image-assets/
- post path is
/tips-for-google-search.html
, images of it will be in path/image-assets/
- post path is
- Are all links will be handled?
only relative links will be processed, https/http images or images' paths start with
/
will be ignored.
If you got any questions or feature requests, feel free to create an issue.