资源文件
本地资源主要是图像,源文件等,就用默认使用方式吧,其他的太麻烦了
默认使用
将图像放置在source
目录下,比如放置在images
文件夹下,引用如下
![](/images/test.png)
编译成静态文件后会test.png
在public
文件夹下的路径为
/images/test.png
生成的html
文件中的引用路径为
<img src="/image-asset/test.png" alt="">
插件使用
生成配套资源文件夹
为了理清每个文章需要引用的资源,可以为每个文章新建一个资源文件夹,修改_config.yml
post_asset_folder: false
设置属性为true
,那么每次使用hexo new
创建新文章时都会在同一路径下生成一个同名的资源文件夹
比如生成新文章
$ hexo new post-asset
INFO Created: ~/Documents/zjzstu.github.com/blogs/source/_posts/post-asset.md
同时在_posts
文件夹内生成了资源文件夹post-asset
,编译成静态文件后test.png
和html
文件在同一路径下
插件一
npm install hexo-tag-asset-res --save
用法
# 引用图像
{% asset_img my_portrait.jpg %}
# 引用文件
{% asset_link my_resume.pdf My Resume %}
将图像放置在其中,使用相对路径进行引用
<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>
详细语法:
{% asset_img [.class1.class2] file_name.png [width [height]] ["caption" ["hint"]] %}
{% asset_link [.class1.class2] file_name.png "text" ["hint"] %}
插件二
使用插件CodeFalling/hexo-asset-image
npm install hexo-asset-image --save
使用方法
![logo](logo.jpg)
插件三
使用插件hexo-assets
npm install hexo-assets --save
其使用方式和传统md
方式一致
# Test Assets
[archive](./markdown-post/archive.zip)
![image](./markdown-post/image.png)
清理空资源文件夹
参考:Use Hexo Asset Folder to manage resource used by post
并不是每篇文章都要引用资源文件,可以安装插件timnew/hexo-console-clean-asset-folder
$ npm install hexo-console-clean-asset-folder --save
清理命令如下
$ hexo clean_asset_folder 或 $ hexo caf