當前位置:編程學習大全網 - 行動軟體 - Hexo博客中如何插入圖片

Hexo博客中如何插入圖片

Hexo是壹個靜態的博客網站生成器,生成壹個博客只需要分分鐘的時間就能搞定。

Hexo的博文是支持Markdown格式的,發表壹篇文章只需要簡簡單單的幾個命令。

hexo new '文章' 就會生成壹個名為'文章'的md文件。

在圖中位置添加描述,分類以及標簽,有利於搜索分類。

眾所周知,在md文件中插入圖片的語法為 ![]() 。

其中 方括號 是圖片描述, 圓括號 是圖片路徑。

壹般來說有三種圖片路徑,分別是 相對路徑,絕對路徑和網絡路徑

所謂的網絡路徑就是直接引用網上的圖片,直接復制圖片地址,放在圓括號中就完事了。

這種方式十分的方便,但是也存在壹定的問題:

這種方式算是有利有弊。

絕對路徑是圖片在計算機中的絕對位置,相對路徑是相對於當前文件的路徑。

由於我們的博客是要部署在網站上,部署後會生成新的文件目錄,所以我們選擇使用相對路徑的方式。

在hexo中使用 文章資源文件夾 需要在 config.yaml 文件中更改壹下配置:

當該配置被應用後,使用 hexo new 命令創建新文章時,會生成相同名字的文件夾,也就是文章資源文件夾。

雖然可以正常引用圖片了,但是這種引用圖片的方式只有壹句話能形容,wtf。

插件 hexo-renderer-marked 解決了這個問題。可以只用 npm install hexo-renderer-marked 命令直接安裝,之後在 config.yaml 中更改配置如下:

之後就可以在使用 [圖片上傳失敗...(image-5f3c69-1603081095188)] 的方式愉快的插入圖片了。

我們做了這麽多都是為了方便,那麽為什麽不再方便壹點呢。

上述是從文章資源文件夾中引用圖片,前提是 先將圖片放入到文章資源文件夾 ,如果圖片數量眾多的話,壹張壹張的放很影響效率。但是不用怕,我們有很方便的解決方法。

Typora 是我非常喜歡的Markdown文本編輯器,在之前的文章中也介紹過壹點。

Typora對於插入圖片的支持做得非常好,在 文件->偏好設置 或者直接 <C-,> 進入設置。

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

如復制網絡路徑的圖片 https://...../image.jpg 粘貼到Typora中叫 文章名 的文章後,圖片會自動變為 [圖片上傳失敗...(image-bd41f4-1603081095188)] 。

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

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

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

  • 上一篇:求 好看的 電影 適合 學生看的
  • 下一篇:浴火鳳凰電視劇大結局電視劇火鳳凰劇情介紹
  • copyright 2024編程學習大全網