Hexo博客中如何插入图片

Posted 2023-04-23

参考技术A

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> 快捷键，将所有的 文章名/ 替换为空即可删除。

然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。

Hexo 文章图片添加水印，不用云处理

由于网上找到的都是借用第三方云处理添加水印，但是我不太想用，所以自己开发了一个插件

Hexo 图片添加水印Github地址

目前插件可以直接在 hexo 官网上搜索到

下面内容都是在 Github 上复制过来的，我的正式版博客目前挂载在我的 Github 仓库 blog

一款用于 Hexo 静态博客网站生成时对图片添加水印。

不对原图产生任何影响，在网站静态页构建过程中将原图读取，输出添加了水印的图片。

在构建的静态网站中不会存在原图，只存在水印图片。

一定要阅读最后的提示事项，包含现有版本的支持情况和即将添加的功能

使用 npm 安装插件

npm install hexo-images-watermark

在站点配置文件 _config.yml 中进行如下配置：

watermark:
    enable: true
    textEnable: true
    rotate: -45
    gravity: centre

在 hexo generate 运行时会自动为你的 _post 目录下的图片添加水印，新的图片将会放到 public 目录中对应的位置。

必备配置参数

enable

默认值：无
说明：true 将会执行图片添加水印，false 将会不执行添加

textEnable

默认值：false
说明：是否使用文本来添加水印（?警告：目前不支持文本和图片同时添加水印）

imageEnable

默认值：false
说明：是否使用图片来添加水印（?警告：目前不支持文本和图片同时添加水印）

其他参数

text

默认值：使用配置文件中的url，一旦url不存在直接显示作者名字（SpiritLing）
说明：当你使用的文字过长时，一旦转为图片后大于待加水印的图片尺寸，则会出现错误。

color

默认值：rgb(169,169,167)
说明：颜色可以使用 rgb,rgba,#xxxxxx以及red名字式的。??只对text有效

gravity

默认值：southeast
说明：放置水印位置为什么方向，以上北下南左西右东来确定

参数可用值：

类型	说明
centre	中央
north	北
north	东
north	南
north	西
north	东北
north	东南
north	西南
north	西北

fontSize

默认值：18
说明：文本字体大小，??只对text有效

watermarkImage

默认值：watermark.png
说明：水印图片，放置在source文件根路径的图片名称；??大小不要超过任何一张文章中的图片，否则会出错，可以搭配缩放进行使用

width

默认值：50
说明：对图片进行缩放。??只对image有效

height

默认值：50
说明：对图片进行缩放。??只对image有效

rotate

默认值：0
说明：旋转角度，如45代表逆时针45度，-45代表顺时针45度

background

默认值：transparent
说明：配合text和rotate使用，指的是文字转成的图片一旦旋转会出现多余空白，设置这些地方的颜色，一般透明色即可

使用注意事项??????

1. 文字不要过长过大，水印图片不要过大（太大可以使用缩放，??但是缩放是全局性的），否则都会出现错误，终止生成静态页面
2. 暂不支持图片和文字共同添加
3. 目前只支持 *.jpg,*.png 两种格式图片，并且只支持source/_posts文件夹下的图片，也就是文章本地图片；同时也不支持远程图片
4. 水印图片也不支持远程和非soucre根路径下的文件，也是只支持 *.jpg,*.png 两种格式图片
5. 不支持循环满图添加水印
6. 请使用 1.1.x 以上版本， 1.0.x 是进行Hexo api相关测试时使用的，版本杂乱无章，使用 1.0.x 版本出现任何问题，概不理会

TODO LIST

• [x] 文字水印
  • [x] 自定义文字，颜色，大小
  • [ ] 自定义字体
  • [ ] 支持循环添加
  • [ ] 超限处理
• [x] 图片水印
  • [X] 自定义水印图片
  • [ ] 远程水印图片
  • [ ] 支持循环添加
  • [ ] 超限处理
• [x] 位置
  • [x] 固定位置：九个方位
  • [ ] 自定义 top，left
• [x] 旋转
• [x] 缩放（仅限图片）
• [ ] 其他格式支持

本文作者： SpiritLing
版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 4.0 许可协议。转载请注明出处！
博客网站
首发地址