Hexo 貼圖教學

Hexo 版本

1
2
3
4
5
6
7
8
9
10
11
12
hexo: 3.2.0
hexo-cli: 1.0.1
os: Linux 3.13.0-32-generic linux x64
http_parser: 2.5.2
node: 4.4.3
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g

貼圖方法

這是 Hexo 3.0 新增的貼圖方法，稱為”資產資料夾(asset_folder)”

傳統貼圖方法是你需要將圖片上傳到某個免費空間，之後再用 Markdown 語法輸入圖片 URL 做連結

而 asset_folder 方法是直接將圖片和文章放在一起，這樣管理起來也比較方便

步驟

在網站根目錄下開啟 “_config.yml”，並將 post_asset_folder 改為 true

開啟之後，當你新增一篇文章時同時會產生對應的資料夾

1
post_asset_folder: true

接著就可以把圖片放到對應的資料夾，而在文章中輸入下面 Tag 指令來使用圖片

1
{% asset_img imageName.png %}

舉例

新增叫做 Hello 的文章

1
hexo n Hello

此時 \source_posts 下的情況為

1
2
3
4
source\
  | _posts\
      | Hello.md
      | Hello\

放入某圖片到 Hello 資料夾(假設圖片叫做 hexo.jpg)
並修改 Hello.md 如下

1
2
3
4
5
6
7
---
title: Hello
date: 2016-05-09 21:34:09
tags:
---

{% asset_img hexo.jpg %}

完成結果如下

2016-05-09_133842.png

如果你不想要顯示圖片下面的 Title，把下面程式碼註解

不同 themes 可能在不同的 js 檔案

1
2
3
4
5
6
7
8
9
10
11
# landscape 主題
# \themes\landscape\source\js\script.js
//if (alt) $(this).after('<span class="caption4">' + alt + '</span>');

# light 主題
# \themes\light\source\js\gallery.js
/*
if (alt){
  $(this).after('<span class="caption">' + alt + '</span>');
}
*/