hexo部落格如何插入圖片
Hexo是一個靜態的部落格網站生成器,生成一個部落格只需要分分鐘的時間就能搞定。
Hexo的博文是支援Markdown格式的,發表一篇文章只需要簡簡單單的幾個命令。
hexo new '文章'
就會生成一個名為'文章'的md檔案。
在圖中位置新增描述,分類以及標籤,有利於搜尋分類。
如何向hexo部落格中插入圖片
眾所周知,在md檔案中插入圖片的語法為![]()
。
其中方括號是圖片描述,圓括號是圖片路徑。
一般來說有三種圖片路徑,分別是相對路徑,絕對路徑和網路路徑。
所謂的網路路徑就是直接引用網上的圖片,直接複製圖片地址,放在圓括號中就完事了。
這種方式十分的方便,但是也存在一定的問題:
- 圖片失效導致無法載入;
- 開啟網頁後要再請求載入圖片;
- 原網站限制,如微信公眾號的圖片會變得不可見等。
這種方式算是有利有弊。
絕對路徑是圖片在計算機中的絕對位置,相對路徑是相對於當前檔案的路徑。
由於我們的部落格是要部署在網站上,部署後會生成新的檔案目錄,所以我們選擇使用相對路徑的方式。
在hexo中使用文章資原始檔夾需要在config.yaml
檔案中更改一下配置:
post_asset_folder: true
當該配置被應用後,使用hexo new
命令建立新文章時,會生成相同名字的資料夾,也就是文章資原始檔夾。
由於專案會生成新的檔案目錄,同時會解析Markdown中的圖片路徑,會導致一個問題。
如在一個檔案目錄下,部落格名為
1.md
,相應的存在一個1
資料夾存放圖片image.jpg
。在Typora編輯器中,普通的md檔案使用
![](1/image.jpg)
能在編輯器中正常顯示圖片。在hexo中,按理說應該是使用
![](image.jpg)
,但網頁中卻無法正常顯示。此時應該使用這樣的方式來引入圖片:
{% asset_img image.jpg 這是一張圖片 %}
雖然可以正常引用圖片了,但是這種引用圖片的方式只有一句話能形容,wtf。
圖片外掛
外掛hexo-renderer-marked解決了這個問題。可以只用npm install hexo-renderer-marked
命令直接安裝,之後在config.yaml
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
之後就可以在使用![](image.jpg)
的方式愉快的插入圖片了。
我們做了這麼多都是為了方便,那麼為什麼不再方便一點呢。
hexo與Typora的完美結合
上述是從文章資原始檔夾中引用圖片,前提是先將圖片放入到文章資原始檔夾,如果圖片數量眾多的話,一張一張的放很影響效率。但是不用怕,我們有很方便的解決方法。
Typora是我非常喜歡的Markdown文字編輯器,在之前的文章中也介紹過一點。
Typora對於插入圖片的支援做得非常好,在檔案->偏好設定
或者直接<C-,>
進入設定。
使用該配置後,可以直接複製網頁中的圖片地址,貼上到Typora中後,會直接複製該圖片到文章資原始檔夾,同時自動更改路徑。
如複製網路路徑的圖片https://...../image.jpg
貼上到Typora中叫文章名
的文章後,圖片會自動變為![](文章名/image.jpg)
。
但我們知道部署後,檔案路徑是不同的,所以當我們插入完所有的圖片後,我們還需要刪除每個圖片路徑中的檔名/
。不慌,也很簡單。
在Typora編輯器中,使用<C-f>
快捷鍵,將所有的文章名/
替換為空即可刪除。
然後再將部落格上傳,圖片就會隨著文章一起打包。在網頁中就可以看到正常顯示的圖片,大功告成。