寫在前面
在hexo插入圖檔這方面花了不少時間，原本使用了大佬的插件，一直沒成功，然後找到了使用“
{%%}
”插入圖檔的解決方法，下文描述了四種插入圖檔的方法和大佬插件使用上的一點問題（可能大佬已經修複這個問題了，那就當我沒說[小聲逼逼]）。文章可能還有很多不足，請大家諒解，歡迎大佬提意見。
本文使用到的東西
-
- win10電腦
- hexo 3.1.0
文章目錄
-
- 寫在前面
- 本文使用到的東西
- 1.img路徑方法插入圖檔
-
- 1.1優缺點
- 1.2适用環境
- 1.3使用方法
- 2.`！[]()`方式插入圖檔
-
- 2.1優缺點
- 2.2适用環境
- 2.3使用方法
- 3.通過{%%}插入本地圖檔
-
- 3.1優缺點
- 3.2适用環境
- 3.3使用方法
- 4.建議使用方式
- 5.關于使用hexo-asset-image插件插入圖檔
-
- 5.1插件的問題
- 5.2插件的使用
- 6.關于hexo-admin插件
- 7.總結
hexo文章是markdown格式的，文章檔案字尾是“.md”，徒手進行文章寫作較為困難，建議找一個markdown編輯器，不想下載下傳可以找一個線上的編輯器。
1.img路徑方法插入圖檔
markdown是支援html語句的，直接插入就可以使用了。是以該方法用到了HTML的标簽，采用img标簽相對連結的方式引入圖檔。
1.1優缺點
優點：靈活，可以進行樣式控制。
缺點：稍微麻煩了點。
1.2适用環境
- 用于頂部導航選項的頁面（如：關于、标簽、分類）中引入圖檔。
因為在HEXO生成靜态界面時，同一篇文章會在多處頁面生成，例如首頁、文章詳情頁等，而不同頁面與圖檔的相對位置是不一樣的，而該方式hexo不會自動處理圖檔引用，是以使用該方式引用本地圖檔時必須以“
/
”開頭，表示位址都是基于主目錄定位的，不會出現有的界面圖檔顯示錯誤的情況。
不是“
/
”開頭表相對目前文檔位置進行定位。
而頂部導航頁隻會在一處地方生成，是以不帶“
/
”開頭不會出現失效，建議也統一使用“
/
”，開頭。
1.3使用方法
在source中建立一個“images”目錄用于存放圖檔，然後再使用“
/images/圖檔名
”引用圖檔。也可以分文章存放圖檔，會稍微麻煩點。
2. ！[]()
！[]()
！[]()
是markdown的插入圖檔語句，文法為：
 2.1優缺點
優點：插入圖檔簡便。
缺點：不能控制圖檔樣式。
2.2适用環境
-
- 給普通文章插入圖檔，且無須樣式控制；
- 給頂部導航選項的頁面（如：關于、标簽、分類）中插入圖檔，且無須樣式控制。
使用該方法引入本地圖檔同樣需要以“
/
”，開頭定位，否則有的界面将會無法正常顯示圖檔，也可以将引圖檔轉換為Base64字元串，然後再引用Base64字元串，Base64字元串太長，寫文章時很影響閱讀。
2.3使用方法
1.連結插入圖檔
插入網絡圖檔比較簡單，直接在“圖檔連結中寫入圖檔的網絡連結就好”
示例：
 效果如下，已經顯示了我們插入的圖檔。
在source中建立一個“images”目錄用于存放圖檔，将圖檔放在該目錄下，使用“
/images/圖檔名
”引用，示例：
 2.Base64方法插入本地圖檔
使用markdown圖檔插入語句插入本地圖檔時可以使用Base64方法，base64方法隻需要将圖檔轉換為base64格式，将Base64字元串輸入圖檔路徑位置即可。網上可以找到線上圖檔轉Base64的工具。
 示例：
 效果如下，但是強烈不建議使用該方法，因為圖檔轉換成的Base64字元串特别長，影響寫作。
3.通過{%%}插入本地圖檔
3.1優缺點
優點：插入較為便捷，圖檔按文章存儲
缺點：不能控制樣式，不能在頂部導航選項的頁面（如：關于、标簽、分類）中插入圖檔。
3.2适用環境
- 普通文章中插入本地圖檔
在頂部導航選項的頁面中使用該方法，什麼都不會顯示（不知道是不是我使用的主題的原因），總之是失敗了，什麼都沒顯示，在普通文章中可以正常顯示。不能用于插入網絡圖檔。
3.3使用方法
要使用該方法首先要修改部落格的配置檔案“
_config.yml
”,把配置檔案裡的
post_asset_folder:
設定為
true
，表示啟動Asset資源檔案夾。這時候建立文章就會自動添加一個同名的檔案夾，用于存放資源檔案。
這時候我們把圖檔放入對應的檔案夾即可，但是我們使用“
！[玖涯](tupian/logo.png)
”插入圖檔卻不能成功，因為隻是将圖檔放入檔案夾，hexo生成靜态界面時并沒有處理該圖檔，是以運作後就找不到圖檔了。
是以我們需要使用{%%}方法，使用該方法必須将圖檔放在建立檔案時生成的與該檔案同名的目錄下，然後使用以下指令格式即可。
{% asset_img 圖檔檔案名 圖檔加載失敗的描述 %} 示例
我文章檔案為
--tupian.md
圖檔目錄為
--tupian/logo.png
插入語句為
{% asset_img logo.png 玖涯 %} 效果圖如下，插入成功
4.建議使用方式
| 文章 | 本地圖檔 | 按文章分目錄管理圖檔 | |
| 文章 | 本地/網絡圖檔 | 不要求樣式 | |
| 文章 | 本地/網絡圖檔 | 要求樣式 | |
| 頂部導航選項的頁面 | 本地/網絡圖檔 | 不要求樣式 | |
| 頂部導航選項的頁面 | 本地/網絡圖檔 | 要求樣式 | |
5.關于使用hexo-asset-image插件插入圖檔
在我寫這篇文章之前就有大佬做了一個插入圖檔的開源架構，隻需要使用
![]()
方法引用圖檔，無論是網絡圖檔還是本地圖檔，插件都會自動幫助我們将圖檔下載下傳到
source/image
目錄，然後自動更新圖檔引用，可以說非常友善。
5.1插件的問題
但是該插件目前有一個問題，貌似和不同的作業系統有關，我使用時沒有成功插入圖檔。
解決方法：出現這種問題，删除插件引用，然後換一個版本重新添加插件，不行就多換幾個，基本上就可以解決問題了。
該問題大佬可能也已經在最新版本解決了，附上大佬Git項目位址hexo-easy-images，可以去圍觀。
5.2插件的使用
首先我們添加插件，添加指令如下。
npm install hexo-asset-image --save 如果你配置了淘寶的資料源，可以使用以下指令，添加插件時網絡會稍微穩定一點：
cnpm install hexo-asset-image --save 添加插件之後使用
!()[]
正常引用圖檔就好了，插件會自動處理。
添加插件後運作可以發現hexo自動處理了我們添加的圖檔。但是可以看到，插件把我圖檔的引用連結轉換成了“
.com//logo.png
”，然後我檢視目錄并沒有自動下載下傳圖檔，這可能和我這個版本有關，多換幾個版本就好，或者去圍觀大佬GitHub，可能會有解決。
6.關于hexo-admin插件
這是一個可視化寫作文章的插件，同時也可以進行圖檔上傳，但是使用上可能會出現一些問題，是以在這裡不詳細介紹，具體内容可以見我另外兩篇文章：
7.總結
總體hexo插入圖檔有多種方式，插入網絡圖檔用“
![]()
”，插入本地圖檔用“
{%%}
”就可以解決基本問題。大佬的插件方式插入圖檔很簡潔，要是有時間大家可以去研究研究。有不清楚的地方歡迎評論留言，看到的我都會回複的。本文到此結束，有什麼不足的地方請大家不吝指正。