03-向hexo中添加图片

<center>03-向hexo中添加图片 </center>

向hexo中添加图片：typora+插件方法

参考链接

2021最全hexo搭建博客+matery美化+使用（保姆级教程），7.如何向hexo博客中插入图片

使用相对路径的方式

由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。

在hexo中使用文章资源文件夹需要在hexo的config.yaml文件中更改一下配置：

post_asset_folder: true

当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

在Typora编辑器中，普通的md文件使用 ![](1/image.jpg)能在编辑器中正常显示图片。

在hexo中，按理说应该是使用 ![](image.jpg)，但网页中却无法正常显示。

此时应该使用这样的方式来引入图片：{% asset_img image.jpg 这是一张图片 %}

虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。

hexo-renderer-marked插件的安装与配置

插件hexo-renderer-marked解决了这个问题

安装： npm install hexo-renderer-marked --save ，之后在hexo的config.yaml中添加配置即可

marked:

　　prependRoot: true

　　postAsset: true

之后就可以在使用 ![](image.jpg) 的方式愉快的插入图片了。

我们做了这么多都是为了方便，那么为什么不再方便一点呢。 <!---->

hexo-renderer-marked插件与Typora的完美结合

如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。

Typora对于插入图片的支持做得非常好，在 文件->偏好设置或者直接<C-,>进入设置。

使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径（ps：typora导入hexo图片的优点所在）。如复制网络路径的图片https://…../image.jpg粘贴到Typora中叫文章名的文章后，图片会自动变为 ![](文章名/image.jpg)。

但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的文件名/。不慌，也很简单。在Typora编辑器中，使用 <C-f>快捷键，将所有的 文章名/替换为空即可删除（ps：这种替换必须要求，<文章名/>，在整个markdown文本中具有唯一指定性，所以命名加上自己的名字拼音是个不错的选择）。然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。

缺点：使用这种方法的时候，切换文件的时候，必须进行一次[文件->偏好设置]路径的设置；如果不小心忘记了，图片导入错文件夹了，网页肯定不显示图片，这时候设置路径，重新拉进取即可

最佳方法：图床上传图片

见 https://liu-jincan.github.io/2021/12/21/hexo-jincan/ 中的 向hexo中添加图片：图床。

这样貌似typora的优势就不大了，其他的markdown都可以实现图床在hexo上传图片。

————————————-

参考资料

…

…

…

…

向hexo中添加图片：piggo+github图床（最佳方法?）

PicGo官网

应用概述

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具

PicGo 本体支持如下图床：

• 七牛图床 v1.0
• 腾讯云 COS v4\v5 版本 v1.1 & v1.5.0
• 又拍云 v1.2.0
• GitHub v1.5.0
• SM.MS V2 v2.3.0-beta.0
• 阿里云 OSS v1.6.0
• Imgur v1.6.0

**本体不再增加默认的图床支持。你可以自行开发第三方图床插件。详见 PicGo-Core**。

特色功能（含使用文档）

支持修改快捷键，默认快速上传快捷键：command+shift+p（macOS）| control+shift+p（Windows\Linux)

官方讨论区

如果第一次使用，请参考应用 使用文档。遇到问题了还可以看看 FAQ 以及被关闭的 issues。

PigGo下载（linux）

Linux 用户请下载 AppImage 文件。

Linux中如何运行.AppImage文件

(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Liu-Jincan.github.io$ cd /home/jincanliu/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ ls -a
.  ..  PicGo-2.3.0.AppImage
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ ls -l
总用量 67708
-rw-rw-r-- 1 jincanliu jincanliu 69324801 12月 25 10:04 PicGo-2.3.0.AppImage
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ chmod 777 PicGo-2.3.0.AppImage 
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ ls -l
总用量 67708
-rwxrwxrwx 1 jincanliu jincanliu 69324801 12月 25 10:04 PicGo-2.3.0.AppImage
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ ./PicGo-2.3.0.AppImage 
on ready
startup true
[PicGo INFO]: [PicGo Server] is listening at 36677
^?^C[PicGo INFO]: [PicGo Server] shutdown



(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ #        创建快捷方式
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ touch PicGo.desktop
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ nano PicGo.desktop 
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ cat PicGo.desktop 
[Desktop Entry]
Name=PicGo
Exec=/home/jincanliu/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo/PicGo-2.3.0.AppImage
Type=Application
Icon=/home/jincanliu/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo/icon-PicGo.png
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ sudo cp PicGo.desktop /usr/share/applications/
[sudo] jincanliu 的密码： 
(base) jincanliu@jincanliu-Z390-UD:~/BaiduNetdiskWorkspace/Program_SetupPosition/PicGo$ #        成功

PigGo下载（Windows）

https://github.com/Molunerfinn/PicGo/releases/tag/v2.3.0 发行版地址

PicGo在GitHub上传

配置github图床

PicGo + GitHub 搭建免费图床：https://www.bilibili.com/video/BV1TE411w758/

1. 新建仓库

   New repository ➡ 填写 repository name ，选择 public， create repository。

2. 创建Token

   github Settings ➡ Developer settings ➡ Personal acess token ➡ create new token ➡ 随便填写 Note，选择token持续的时间段，选择repo，Generate token，将token保存在excel。

3. 打开Piggo，设置Github

截图上传&复制上传

linux 需要安装 xclip

sudo apt-get install xclip

安装完成之后，PicGo上传区选择快捷上传的 剪切板图片。

URL上传（我直接复制图片的链接上传失败了）

…

导入图片至hexo

gif能否上传？可以

问题：A JavaScript error occurred in the main process（解决）

我遇到的问题，版本 2.3.0：

解决方法：进入 C:\Users\Liujincan2\AppData\Roaming，删除配置piggo的文件夹；

issue：主进程发生 Javascript error A Javascript error occurred in the main process：

…

…

向hexo中添加图片：VScode+piggo+github图床（最佳方法?）

…

…

参考 10分钟配置 VScode插件picgo + github免费图床，实现Markdown写作高效插图 。

参考 Github vs-picgo issue，建议优化体验。

参考 个人博客 03-向hexo中添加图片 。

参考 官方github网站 。

…

VScode扩展，添加PicGo

…

…

VScode 工作区，对PicGo扩展进行配置，（PS：原先的 img/ 文件夹包含的图片过多，很可能会影响加载 Github 服务器，故新建了 img2024/ 文件夹用于上传）

…
…

创建Token：

github Settings ➡ Developer settings ➡ Personal acess token ➡ create new token ➡ 随便填写 Note，选择token持续的时间段，选择repo，Generate token，将token保存在excel。

…

…




…
…
可以在工作区的 setting.json 查看 PicGo 的详细配置，

…
…
原先的 img/ 文件夹包含的图片过多，很可能会影响加载 Github 服务器，故新建了 img2024/ 文件夹用于上传,

…
…

VScode 打开一个 md 文档，（typora 目前和 PicGo 还无法兼容），（PicGo 只能在 Edit in VScode 中上传），

…

…

默认是 typora 打开 （因为之前安装了 typora 软件），但 typora 目前和 PicGo 还无法兼容，需选择 Edit in VScode （下图的红色箭头），

选择 Edit in VScode 后，该 md 文件可同时在 typora 和 vscode 中修改，但 PicGo 只能在 Edit in VScode 中上传，

…

…

VScode命令面板, Crtl+P，输入 > upload，可以发现 PicGo 的 3 种上传图片方式，（实际工作中，主要是通过剪切板方式进行上传），（三种上传方式的可视化 GIF 动图），

…

…

…

…

clipboard 是剪切板。使用该上传方式极其方便，但是需要安装 xclip。

…

…

explorer 是通过打开外部资源管理导入图片。

…

…

这三种上传方式的可视化 GIF 动图，详见 Github PicGo 的 Feature 部分。

…

…

通过，尝试上传成功，

…

…

…

…

…

…