In hexo, the images inserted by markdown syntax are often not points to the right place, due to relative path. We can use absolute path to work around this issue. But inserting the post permalink or asset folder every time is very annoying. Also, sometimes we don't like to store that much data on github, we like to move all the images to another CDN. It could be really painful, if you need to update every posts you wrote!
This plugin is written to deal with all these issues. It is trying to make inserting assets to post and integrating with CDN a lot more easier.
$ npm install hexo-asset-path --save
Setting up the configuration in _config.ymal
asset_path: enable: true # Asset folder, used when post asset folder is not enabled. # For example, the following asset folder configuration will make hexo to use "/r12f-assets/post-assets/2017-01-16-Hello-World" as the base URL in one of my post. asset_folder: /r12f-assets/post_assets/<% print(post_created.format('YYYY-MM-DD')) %>-<%= post_slug %> # CDN settings, and CDN folder will always be considered to have its own domain and start from the root. enable_cdn: true cdn_folder: r12f-cdn.azureedge.net/r12f-assets/post_assets/<% print(post_created.format('YYYY-MM-DD')) %>-<%= post_slug %> cdn_use_https: false # Selectors and attribute names for getting the elements to update. selectors: img[src]: 'src'
Variables you can use in the asset folder and cdn folder:
Just use the markdown syntax to insert your images, with the relative path (to the post asset folder if enabled, otherwise to your asset folder specified in hexo-asset-path configuration).
Asset path in different modes
As we know, we can enable post asset folder in hexo, and hexo can create a local server to preview your blog, and you might like to enable CDN when you generate the real site. The asset path for showing your assets properly in these different modes are actually different. And the following table shows how we generate the asset path:
|Local server||Real site|
|Post asset folder enabled||/PostPermalinkPathName/AssetPath||(CDN enabled ? //CDNFolder : )/PostPermalinkPathName/AssetPath|
|Post asset folder disabled||/AssetFolder/AssetPath||(CDN enabled ? //CDNFolder : /AssetFolder)/AssetPath|
The posts and links we updated is outputted to the hexo log. Just simply enable debug mode and logging in hexo, then you can see it.
hexo s --debug --log