前言
细数过去,总共使用了如下三种方式:
-
使用
Hero-admin
插件在线编写博客,配合插件上传图片。 -
使用
Typora
等工具本地编写博客,用相对路径引用,配合PicGo
搭配第三方图床或者自建图床使用。 -
使用第三方平台(CSDN)编写博客并发布。
图片插入是一个很重要的问题,而我会用这一篇文章来向你介绍我的推荐方案,兼整理我的失败经历。
这里会涉及到远程部署,第三方云图床等名词,可能初看不太懂,但是无妨的,下一篇就会帮你部署到远程仓库的。
时隔四年,重启Hexo历险计划!
Hexo历险记之七展示图片
首先,你要确定你的编写风格,使用的工具是本地的还是在线的;要求展示效果是本地文档有图片,或者是要远程部署,甚至是多平台发布;以及你愿意为保存图片这个功能所花费的心理预期。
以我为例,我现在的风格是本地用Typora
编辑文档和保存图片,只是在部署的时候,才会将图片上传到我的远程服务器。对应的博客结构就是如下图。
截屏2022-07-27
所有待编写的博客都放在hexo/source/_drafts/
文件夹内,等编写好以后,将文件手动剪切到hexo/source/_posts/
文件夹下,部署远程服务器。再将编写完成的文档复制一份到hexo/source/_url/
文件夹内,用Typora
自带的图片上传功能一键将所有图片都上传到第三方图床,将图片相对链接更新为第三方图床链接,再去其他的平台上面进行发布。
我解释一下原因,之所以不用在线插件Hero-admin
进行云端编辑,是因为有遇到过编写了内容且点击了保存,但是刷新页面后两千多字不翼而飞的情况。当时的Hero-admin
插件版本太低了,我那时候能力也弱小,没法子去优化他,所以放弃了在线编辑的方案。现在看他也更新了很多版本,但是毕竟有阴影存在,所以不做推荐。
不使用第三方平台的在线编辑,原因有两个。第一是因为他们的在线编辑功能不够强大,编写的时候会遇到缺少功能的情况。当然,现在都2022年了,几个大平台的在线编辑已经很可靠了。但另一点是在我写完一段内容后下意识按Ctrl+S
保存,会弹出保存网页的提示框,这是很打断思路的。毕竟最一开始我做团支书的时候习惯了Word文档随时保存,这个问题让我很难接受这个解决方案。
看展示效果的话,就要问你是什么时候才会翻出来老的博客内容进行查阅。比如我就是在本地编写,所以必须要有实时解析图片链接为图片内容的功能。再有,我部署后的博客是我分享给同学的内容,也必须要有图片内容。至于多平台发布,那么选择图床和如何快捷上传就是要解决的问题。
为保存图片所愿意花费的心理预期,这并不夸张,因为多的是有博主购买阿里云的对象存储服务,价格从前半年每月5.5到以后每月11块。如果是跟博主相似的白嫖党,可以选择自建图床。
推荐方案
本地编辑Typora
首先,下载并安装Typora
,在偏好设置中选择将图片复制到指定路径。
../../source/images/${filename}
image-20220727205517273
其次,在编辑的文档Front-matter
里加上一条配置。
typora-root-url: ../
![](https://i-blog.csdnimg.cn/blog_migrate/cb0183bed1739304b61272cc3e3ef269.png)
image-20220727205950080
如果你是喜好使用命令新建博客的话,那么直接修改模板文件hexo\scaffolds\draft.md
或许更方便。
title: {{ title }}
date: {{date}}
typora-root-url: ../
最后,在这个文档中,直接拖拽、从剪贴板复制图片、或者从菜单栏选择格式->图像->插入图片,就会自动保存到同名文件夹里面,而且引用链接也会变成相对链接。
![](https://i-blog.csdnimg.cn/blog_migrate/d5839fbad38d8086d6d5aa4c67a1b2c9.jpeg)
君匡
注意:一定要先设置了图片根目录后,再插入图片,否则图片路径无法显示。
注意:强烈建议勾选上优先使用相对路径,否则部署到远程服务器后无法找到文件目录的。当然如果你的服务器路径和本地路径是完全一致的,那么也会生效。
注意:路径里面不要用双引号,否则会导致图片不能显示!
Typora
其他配置和相关快捷键设置请移步我的另一篇博客,环境配置之Typora。
远程部署hexo
下一篇内容我就会演示如何部署服务器,完全不用担心和疑惑。
远程部署Hexo到服务器,其实是完全使用原生的部署方式,没有任何需要的改动。
hexo d
生成的public
文件夹内,网页和图片的链接关系正是相对引用,所以可以完美显示图片。
Typora集成picgo上传图床
将编写完成的文档复制一份到hexo/source/_url/
文件夹内,打开该文件,用Typora
自带的图片上传功能,一键将所有本地图片都上传到第三方图床,并将图片相对链接更新为第三方图床链接,然后再去其他的平台上面进行发布。
至于为什么还要保留本地图片,则是因为第三方图床毕竟不是自己的,看图就明白了(图片来自程序员鱼皮)。
gitee图床
Typora
本身是可以集成PicGo的,既可以集成客户端,也可以只集成命令行。客户端启动一次后就会一直在后台运行;PicGo-Core的命令行只有在需要上传图片时才会启用一个进程,上传成功就自动关闭。
第三方图床,我个人比较推荐使用自建图床,免费且完全自行管理。上传方式建议使用PicG-Core的命令行,只有在需要上传图片时才会启用一个进程。
资源文件夹方案
缺点就是需要手动管理图片,即使用工具完成自动复制,生成的相对路径也需手动修改一次才可以解析。所搭配的插件还需要单独修改,对新手不友好。
修改配置
修改博客根目录下的_config.yml
文件,以打开文章资源文件夹功能。
post_asset_folder: true
致敬hexo的中文官方文档。
需要搭配有hexo-asset-image
插件,将会在你每一次创建新文章时自动创建一个同名文件夹。我们只需要把一个example.jpg
图片放在了你的资源文件夹中。可以使用标准语法![](/example.jpg)
或者Hexo标签来显示在文章中,但它将不会出现在首页上。
安装插件
进入博客根目录,用命令下载插件。
cd F://myblog
npm install hexo-asset-image --save
正确的引用图片方式是使用下列的标签插件而不是Markdown语法。
{% asset_img example.jpg This is an example image %}
或者是
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
但是,博主这里两个方式没有成功……气!文字代表我的心!(╯‵□′)╯︵┻━┻
参考周冰烽的博客,才知道原来是插件版本有问题。直接去hexo-asset-image的GitHub官网,看看人家是怎么使用这个插件的。
还是1.0.0
的版本,找到了\node_modules\hexo-asset-image\index.js
文件,把里面的内容进行替换成为Issue的解决方案文件即可正常使用了。
![test2](example.jpg)
2
使用图床方案
使用图床的话,其实核心就是两点,选择合适的云图床与选择合适的上传方案。
接下来我就会细数自己使用过的几个云图床,依次介绍他们的优缺点,和操作步骤。
先说最优解,我认为是阿里云OSS,不论是技术支持还是访问速度,都很棒!但是昂贵的价格让我望而却步,尤其是在刚开始写博客的时候,三个月写不出来二十篇博客,但是每个月都在花钱。
其次是使用Gitee或者是Github这种开源仓库,好处就是相信域名不会轻易改变,缺点就是一个仓库容量只有500M。再有,GitHub常常在我们不知情的情况下将代码私有化并重新包装,详细查看相关八卦内容的可以度娘搜索Gitee没有任何通知就加上了防盗链,现在已经没有办法再用Gitee做图床了。SFC和Github
。所以现在除了极少的代码还在Github上面,其他的都迁移到Gitee了。
接着是购买服务器之后,在上面自建图床。Chevereto
是一个开源的图床工具,使用Docker
配置可以很方便的部署下来,该趟的坑我也走过一遍了,大家可以参考我的另一篇文章:Docker系列八自建图床。但是缺点有两个。其一就是会被自己服务器的硬件配置所限制,比如我的服务器就是最差的丐版,硬盘总共才只有40G。当然,以个人为例,写了两百多篇文章总共也不到1G,使用三四年是没有问题的。猛一看是在杞人忧天,但与阿里云OSS的百G容量相比,的确是缺点。其二就是迁移服务器了,最难过的就是改换域名,由于域名与访问链接是直接绑定的,当我改换域名的时候,所有文档都要重新修正才可以。
最后才是七牛云图床,因为会需要许多的敏感信息来实名认证,而怀疑论总是围绕着他们。明显的,我那时候注册后好多垃圾短信和电话轰炸我,生气的脸都黑了,就完全放弃这个产品了。
上传工具最出名的就是PicGo
。PicGo
是用 Electron-vue
开发的软件,可以支持微博,七牛云,腾讯云COS,又拍云,GitHub,阿里云OSS,SM.MS,imgur 等多种常用图床,功能强大,简单易用。而且它也有命令行级别的Api可以调用,搭配本地文档编辑工具很是快捷方便。附上picgo下载链接。
再或者不要工具,直接使用大佬的Python脚本上传图片也可以,但是博主尝试后失败了,还是博主能力弱小了些。
阿里云OSS(贵,放弃)
未来如果有机会的话我会尝试使用阿里云的oss
image-20220727205209146
好好像要掏钱的样子....怂!
仔细看还是要掏很多钱的样子……逃!
自建图床Chevereto
详细的安装和部署步骤我写在了另一篇文章里,大家可以参考我的另一篇文章:Docker系列八自建图床。这里只是记录了使用PicGo工具本地上传图片获得链接。
picgo-命令行
PicGo-Core的命令行只有在需要上传图片时才会启用一个进程。
首先运行命令下载插件picgo
,安装成功后,查看安装的位置和版本,继续使用picgo
安装插件chevereto
。
# 下载picgo
npm install picgo -g
# 查看安装的位置
which picgo
# 查看版本
picgo --version
# 安装插件
picgo install chevereto
![](https://i-blog.csdnimg.cn/blog_migrate/ca566b6c71b439ada08532595180ef0a.png)
image-20210808223533673
image-20210808224504369
注意:PicGo
命令行的配置文件在指定路径中。
C:\Users\Administrator\.picgo\config.json
将配置文件修改成为如下内容,即可完成Chevereto
的配置。
{
"picBed": {
"current": "chevereto",
"uploader": "chevereto",
"chevereto": {
"key": "上面从api里面获得的密钥",
"source_param": "source",
"url": "https://www.images.clzly.xyz/api/1/upload",
"url_param": null
}
},
"picgoPlugins": {
"picgo-plugin-chevereto": true
}
}
Typora集成PicGo-Core命令行
修改Typora
上传服务为自定义命令模式,内容如下。
: node picgo upload
/Users/keen/.nvm/versions/node/v10.16.2/bin/node /Users/keen/.nvm/versions/node/v10.16.2/bin/picgo upload
![](https://i-blog.csdnimg.cn/blog_migrate/b8e285863372675eb25955772e5e4e30.png)
image-20210808225909410
他的使用方式有两种。第一种是针对单个图片的,在编辑的过程中,右键某个图片,会有一个上传图片的选项,点击之后,就是会自动上传,并且修改图片的Url
。
![](https://i-blog.csdnimg.cn/blog_migrate/57b82b66fbe3d7f37eca3f6f701d22ca.png)
image-20210808230731735
第二种是针对本文档的所有图片,在编辑完整个文档之后,点击格式->图像->上传所有本地图片
来一次性的将整个文档的图片都转成第三方链接。
image-20220728005007770
![](https://i-blog.csdnimg.cn/blog_migrate/0193ff2ac069b955b706531c613630b5.png)
image-20210808231229885
picgo-客户端
首先需要下载picgo。
![](https://i-blog.csdnimg.cn/blog_migrate/3d019af831c8c3d50e48878afc401a09.png)
image-20220728121024749
其次,打开后,手动安装插件chevereto
。
![](https://i-blog.csdnimg.cn/blog_migrate/dde889d83a8ca382764ad8ffc572d00d.png)
image-20210808212601546
接着,从图床的控制台,拿到Api的密钥信息,在图床设置中配置插件的Url
和Key
。
注意:Url的格式必须是 域名地址+/api/1/upload
image-20210808173829503
image-20210808215134627
最后,编写文章的时候,就可以先将图片用PicGo
的客户端,上传到自建图床上面,之后将图片成功上传后的Url
黏贴在文章的指定位置即可。
注意:PicGo
客户端的配置文件在指定路径中。
C:\Users\Administrator\AppData\Roaming\PicGo\data.json
Typora集成pico
需要 PicGo ≥ 2.2.0
并启用PicGo-Server,使用默认值 (36677) 的端口。
当Typora
使用PicGo
客户端上传图片时,PicGo 将被启动并保持运行。
在Typora
的偏好设置->图片服务->上传服务
中选择PicGo(app)
,填入客户端在本地的路径,点击验证。
![](https://i-blog.csdnimg.cn/blog_migrate/a622c0c7707807d43a2a176b8648560a.png)
image-20210808231714394
相较于使用脚本的区别,就是会在右下角有一个上传成功的提醒。
![](https://i-blog.csdnimg.cn/blog_migrate/77eee9c25abe01e743a076ef3d478ac0.png)
image-20210808231618156
Python脚本(失败)
这个方式完全舍弃了PicGo
的工具,只是一个脚本就完成了想要做的事情,让我很是心动,但是在尝试的时候,一直失败,很是无奈。
在这里简单记录一下,以后有机会再继续深入研究好了。
创建配置文件D:\blog\blog-keen\bat\config.json
内容如下。
{
"APIKEY": "上面从api里面获得的密钥",
"url": "https://www.images.clzly.xyz/api/1/upload",
}
创建上传文件D:\blog\blog-keen\bat\upload.py
内容如下。
#!/usr/bin/env python3
# -*- encoding: utf-8 -*-
# author: guiu
# data: 2020.2.28
import requests
import json
import mimetypes
import argparse
import sys
APP_DESC = """
一个上传图片到chevereto图床的命令行工具
"""
# print(APP_DESC)
if len(sys.argv) == 1:
sys.argv.append('--help')
parser = argparse.ArgumentParser()
parser.add_argument('-s', '--source', type=str, nargs='+', help="", required=True)
parser.add_argument('-c', '--config', default="./config.json", help="读取配置文件", required=True)
args = parser.parse_args()
# 从参数中获取要上传的文件列表
img_list = args.source
# print(img_list)
def read_conf(path):
with open(path,"r",encoding="utf-8") as f:
confstr = f.read()
conf = json.loads(confstr)
return conf
def up_to_chevereto(img_list):
# 获得本地图片路径后,上传至图床并记录返回的json字段
for img in img_list:
# 先判断传过来的是本地路径还是远程图片地址
if "http" == img[:4]:
# 非本地图片的话可以考虑下载到本地再上传,但是没这个必要
print(img)
continue
else:
try:
res_json = upload(formatSource(img))
# print(res_json)
parse_response_url(res_json,img)
except:
print(img+"\t上传失败")
def upload(files):
# 图床api
# APIKey = "THERE PUT YOUR APIKEY"
conf = read_conf(args.config)
url = conf['url'] + "?key=" + conf['APIKEY']
# print(url)
r = requests.post(url, files=files)
return json.loads(r.text)
def formatSource(filename):
imageList = []
mime_type = mimetypes.guess_type(filename)[0]
imageList.append(
('source', (filename, open(filename, 'rb'), mime_type))
)
# print (imageList)
return imageList
def parse_response_url(json, img_path):
# 从返回的json中解析字段
if json['status_code'] != 200:
print("{}\tweb端返回失败. status_code {} ,mesage为\n\r{}.".format(
img_path, json['status_code'],json['error'])
)
else:
print("keen2")
img_url = json["image"]["url"]
print(img_url)
up_to_chevereto(img_list)
修改Typora的自定义命令为如下内容。
: 格式python upload.py -c config.json -s
"D:\all_sdk\python\python.exe" "D:\blog\blog-keen\bat\upload.py" -c "D:\blog\blog-keen\bat\config.json" -s
我在尝试的时候,发现request模块,在发送post请求的时候,一直会报错误,说我的上传文件为空。奈何自己对request模块学艺不精,一直没办法实现,只好以后再继续尝试了。
{'message': 'Empty upload source.', 'code': 130, 'context': 'Exception'}.
七牛图床
需要注册一个七牛云的账号并进行实名认证。会要求,需要使用邮箱验证,身份证号,身份证正反面照片,支付宝授权等敏感信息!而且实名认证需要一定的审核时间。
再有,必须要有域名,也就是折腾备案。图片链接也有有效期。
注册和配置
附上注册地址。
完成注册之后创建存储服务。
image-20201028134814542
我创建了名为keen1
的服务,选择公开存储之后配置一个融合CDN域名。控制台中点击创建域名,域名类型选择普通域名,其他配置默认或根据需求优化配置。由于当时博主使用的阿里云域名注册,所以把这个域名的cname
绑定到自己的域名管理。
image-20201028135312794
![](https://i-blog.csdnimg.cn/blog_migrate/887554074266d5b3e35af685c86f8fce.png)
image-20201028135850905
校验操作
在本地命令行使用命令,尝试该域名能否访问。出现下图即为成功。
nslookup www.image.clzly.xyz
image-20201028140435778
密钥对
AccessKey
和SecretKey
是访问和操作对象存储的密钥对。其中AccessKey
会在传输中包含,而用户必须保管好SecretKey
,它如果被窃取就会被坏人利用。
在控制台依次点击个人中心,密钥管理,即可查看到密钥对。
命令行
需要下载七牛云的命令行工具文件,附上下载官网链接qshell。
你可以将文件qshell-windows-x64-v2.4.2
重命名后保存到路径C:\Windows\System32
中,做为系统变量来使用。当然,你也可以是在本地CMD
环境任意路径下打开该文件。例如我的AK
: 格式
: .\qshell-windows-x64-v2.4.2 account -- ak sk name
: 以AK为Vks3OW2ud-TSBBif9AOoXI7w_JL8rGrRKnOustxu,SK为Sk****************为例
.\qshell-windows-x64-v2.4.2 account -- Vks3OW2ud-TSBBif9AOoXI7w_JL8rGrRKnOustxu Sk**************** junkuang
上传工具
需要下载picgo。打开后,如下图配置使用即可。
![](https://i-blog.csdnimg.cn/blog_migrate/269c9021d97e5d502806c56c150b2cf7.png)
image-20201028150047309
![](https://i-blog.csdnimg.cn/blog_migrate/6e4e5482d80dfe66533d400aeda604c9.png)
image-20201028150259037
Gitee仓库图床
由于2002年三月底,Gitee突然加上了防盗链的功能,必须要有refer
字段才能直接访问资源,所以这个方法几乎也被废弃了。
新建仓库
新建一个仓库,初始化readme.md
文件,将仓库设置为开源。因为私有库只有自己能够访问,图片上传是没有公开链接的。博主就以仓库https://gitee.com/JunKuangKuang/keen-blog-images
为例。
获得Token
,在网站上依次点击,个人设置->私人令牌->创建令牌
,获得令牌,比如我的内容为23bf**************
。
PicGo-Core的命令行只有在需要上传图片时才会启用一个进程,完成后自动关闭。而客户端PicGo虽然有图形化的界面,但是上传一次就会后台挂着服务。
pico-core命令行
首先运行命令下载插件picgo
,安装成功后,继续使用picgo
安装插件gitee-uploader
。
# 下载picgo
npm install picgo -g
# 安装插件
picgo install gitee-uploader
注意:PicGo
命令行的配置文件在指定路径中。
C:\Users\Administrator\.picgo\config.json
将配置文件修改成为如下内容,即可完成gitee
的配置。
{
"picBed": {
"current": "gitee",
"uploader": "gitee",
"gitee": {
"branch": "master",
"customPath": "year",
"customUrl": "",
"path": "img/$customPath",
"repo": "JunKuangKuang/keen-blog-images",
"token": "23bf************"
}
},
"picgoPlugins": {
"picgo-plugin-gitee-uploader": true,
}
}
解释一下gitee
中的字段含义。
-
branch
: 选择仓库分支,必须是已经创建好的分支,这就是要在新建仓库的时候创建readme文件的原因。 -
path
:对应的仓库路径,比如今年的图片链接地址就是img/$customPath
customPath
:搭配path
属性,可以不指定,默认为空字符串。-
customPath
选择年,则实际的path
值为img/2022
-
customPath
选择年季,则实际的path
值为img/2022/summer
-
customPath
选择年月,则实际的path
值为img/202/01
-
customURL
: 仓库提交链接,可以不指定,默认为空字符串。-
默认空,生成的链接为
https://gitee.com/:owner/:repo/raw/:path/:filename
-
填入后可以更新为自定义链接。但是你要确保你新生成的链接可以正常访问资源!
-
-
repo
: 一般是用户名/仓库名称,比如我的就是JunKuangKuang/keen-blog-images
-
token
:私人令牌,内容为23bf**************
在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间
。
picgo客户端
如果此时你是Win系统,那么可以参考下文如何安装,这里以Mac系统为例。
首先使用Homebrew
安装客户端,如果网络访问过慢可以直接登陆Github后科学上网完成下载。
brew install picgo --cask
安装插件gitee-uploader
,对应的github链接。
![](https://i-blog.csdnimg.cn/blog_migrate/f59809b86dbba5a301f4f3225ea839f2.png)
image-20220728180701779
Hexo插件方案(放弃)
Hexo-admin
是一个在线编辑、管理博客的插件,可以快捷新建、发布博客,使用其他的图片插件辅助展示图片。具体的安装和配置过程可以参考后一篇文章,这里只是介绍了该插件于三年前在Windows
操作系统中图片插入方案。
缺点有四个。
-
只要页面刷新一次,原本解析成功的图片,就会变成解析失效的裂图标志。
-
不同的博客,插图都要放在同一个文件夹里,命名和管理就会很麻烦了。例如,在我早期编辑文档的时候,会用不同的图片来做首图,命名时就变成了
shoutu1.jpg
、shoutu2.jpg
等等。管理命名防止重复和冲突很耗费心力 -
只对网络上的图片生效,本地图片必须手动复制和命名。
-
必须开启Hexo服务才可以使用。
使用hexo-admin
首先打开了hexo-admin
的settings
,图片选项两个都打勾,其他默认。
Hexo-Admin
只有网上照片会直接复制图片到source/images
目录并重命名。
图片从剪贴板复制到hexo-admin
的编辑页面进行黏贴,格式如下,但是会无法解析。需要手动把括号中的前后两个斜杠去掉,就能正常显示。
# 无法解析
![upload fail](\\images\image-0.png\)
# 解析成功
![upload successful](images\image-0.png)
本地图片不会复制且名称不会改变。需要手动把图片1.jpg
放入source/images
目录下,再引入链接方可解析成功。
![upload successful](\images\1.jpg)
扩展插件hexo-admin-ehc
在网上找到一个hexo-admin的插件hexo-admin-ehc,看示例介绍有图片选择器功能,但是不知道为什么,我安装后还是没看到。
1
![](https://i-blog.csdnimg.cn/blog_migrate/d8776c4c74f0526fdcb9a49a76e04afa.jpeg)
没有选择器图
所以我用命令卸载了该插件,再删除文件/source/hexo-admin-ehc-images.json
。
npm uninstall hexo-admin-ehc
开启opcache
参考文章hexo admin图片不显示怎么办,说是我浏览器配置的原因。
但是哪怕我翻了所有的设置选项也没在那里找到如何配置呀。
更新和感谢
更新记录
2022.7.27更新整体结构
2020.10.28更新使用图床
2020.7.17更新使用Typora
2020.4.24更新,该方案已弃用
2020.1.4更新,该方案已弃用
感谢
感谢过去努力的自己,感谢现在的好奇,为了能成为更好的自己。