如何在hexo博客内插入图片

发表于 更新于

对于在Hexo博客内插入图片，我在网上看了一些别人的方法，总结下我如何利用Typora实现在Hexo中插入图片的

Hexo博客搭建完毕之后，需要选择一款支持Markdown语法的工具来编辑博客文章（总不能在命令窗口里面写吧）。我选择的是Typora。

首先在\source_posts里创建一篇文章，Git Bash输入命令

1
hexo -n “如何在hexo博客内插入图片”

生成1

注意：图片的路径应该为../images开头(所有路径必须用///这种斜杠，\\不行)，因为github仓库里，如果想要引用图片，则需要../前往上一级目录，然后在此目录下寻找images目录，然后在images里面寻找同名目录，然后引用图片

然后用Typora打开这个.md后缀的文件

  1. Typora设置

    打开右上角文件选择偏好设置(preference)，选择图像，选择复制到指定路径，输入../../source/images/${filename}，然后右上角X掉就行。

    解释下操作的含义：Typora是可以通过很多方式将图片插入到文本里的，当将图片拖动进来是的时候，会自动在source/images目录下生成一个与文章同名的文件夹，并将插入的图片复制一份到该文件夹里（我不知道为什么我把图拖进typora，图片会一直显示copying），${filename}表示文章名字

2

  1. Hexo设置-安装插件

    1
    npm install hexo-renderer-marked --save

    然后打开_config.yml文件（之前为了推送博客到github，在里面设置过git和repo）

    把下面的复制进去（可能postAsset不用加，加上试试吧）

    1
    2
    3
    marked:
      prependRoot: true
      postAsset: true

    3

下面是两个参数的含义（postAsset可能真的不用加）

  • prependRoot

    - Prepend root value to (internal) image path.

    • Example _config.yml:
    1
    root: /blog/
    • ![text](/path/to/image.jpg) becomes <img src="/blog/path/to/image.jpg" alt="text">

  • postAsset

    - Resolve post asset’s image path to relative path and prepend root value when

    post_asset_folder

    is enabled.

    • “image.jpg” is located at “/2020/01/02/foo/image.jpg”, which is a post asset of “/2020/01/02/foo/“.
    • ![](image.jpg) becomes <img src="/2020/01/02/foo/image.jpg">
    • Requires prependRoot to be enabled.

  1. 最后一步

    因为我的typora不知道为什么，拖动进来图片后，虽然，source/images目录下自动创建了同名文件夹，但是图片死活copy不进去（一直显示copying）。

    所以我就自己把图片到source/images//${filename}下面了，然后从里面把图片拖进typora编辑的文章里

    到这里图片是拖进来，但是typora不显示（实际直接hexo g -d推送github，是可以在博客内显示的），因为typora有地方没设置

4

​ 解决方法：点开typora上面的格式，然后选图像，点击设置图片根目录，选择source目录，然后图片就 能在typora内显示了

到这里，基本typora和hexo两个部分的设置就完成了，然后hexo g -d生成推送

github博客效果如下

5