资源文件

本地资源主要是图像,源文件等,就用默认使用方式吧,其他的太麻烦了

默认使用

将图像放置在source目录下,比如放置在images文件夹下,引用如下

![](/images/test.png)

编译成静态文件后会test.pngpublic文件夹下的路径为

/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.pnghtml文件在同一路径下

插件一

使用插件timnew/hexo-tag-asset-res

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