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與hexo的完美結合

使用該配置后,可以直接復制網頁中的圖片地址,粘貼到Typora中后,會直接復制該圖片到文章資源文件夾,同時自動更改路徑。

如復制網絡路徑的圖片https://...../image.jpg粘貼到Typora中叫文章名的文章后,圖片會自動變為![](文章名/image.jpg)

但我們知道部署后,文件路徑是不同的,所以當我們插入完所有的圖片后,我們還需要刪除每個圖片路徑中的文件名/。不慌,也很簡單。

在Typora編輯器中,使用<C-f>快捷鍵,將所有的文章名/替換為空即可刪除。

image-20201012140945525

然后再將博客上傳,圖片就會隨着文章一起打包。在網頁中就可以看到正常顯示的圖片,大功告成。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM