Typora 图片排版 & 个人图床 Github + PicGo

Typora 图片排版 & 个人图床 Github + PicGo

1. 插入 1 张图片

语法一

![]()

() 表示 路径，绝对路径和相对路径都可以，可以用网络 url；后面还可以跟一个 文本，用于鼠标悬停在图片上显示

[] 也可以输入文本，作用为：

1）当图片因为某种原因不能被显示时而出现的替代文字；

2）用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片（不知道是个啥）。

示例

!["用于无法显示的文字"](./imgs/Cat-01.jpg"鼠标悬停：小猫")

效果如下

用于Markdown中图片插入的【图床设置】

语法二 html 标签格式

<img src ="xxx/xxx/a.jpg" width="50%" title="猫HTML">

src 表示 路径，绝对路径和相对路径都可以；

width 表示宽度比例

title 表示 鼠标悬停时候显示的标题

示例

<img src ="./imgs/Cat-02.jpg" width="50%" title="猫HTML">

效果如下

推荐使用语法2，HTML标签的格式

• 建议使用 HTML 标签的格式，花样多，居中，设置标题什么都可以；
• 语法一的图片调整很受限制，光是大小就调不了；
• 最重要的是语法一在用网络图片时，比如引用 github 上的图片，会有点问题。在本地引用的时候基本没什么问题，有时候我们把 MD 文件上传到CSDN 的时候，语法一引用的图片在 CSDN 上无法识别，会报错误----------->【外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传】；但是语法2 可以正常读取网络图片，所以推荐语法2

以下图片都是采用 HTML 标签的形式

MarkDown里显示图片的方式可以引入HTML方法

2. 插入多张图片

语法

# 居中显示
<center class="half">
    <img src="http://xxx.jpg" width="300" title="Cat-01.jpg"/>
    <img src="http://yyy.jpg" width="300" title="Cat-02.jpg"/>
    <img src="http://zzz.jpg" width="300" title="Cat-03.jpg"/>
</center>

src：图片路径，width：宽度，title：鼠标悬停时候的标题

class：可以不要，里面的值也可以自己定，写成 “nihao” 都行

示例

<center class="half">
    <img src="./imgs/Cat-01.jpg" width="200" title="Cat-01.jpg"/>
    <img src="./imgs/Cat-02.jpg" width="200" title="Cat-02.jpg"/>
    <img src="./imgs/Cat-03.jpg" width="200" title="Cat-03.jpg"/>
</center>

效果如下

3.使用自己的图床

在CSDN上分享自己的 markdown 文件时，图片的路径都是本地的，肯定不行，因此还需要把本地的图片也上传，这样太过麻烦；一开始的时候，就把图片放在网络上，这样 markdown 文件上传的时候，图片路径就不用改了

GitHub + PicGo

本来想用 Gitee 的，但是好像 Gitee 不行了

---

更新一下，20240526发现gitee又可以使用了

---

3.1 Gitee 创建仓库，生成私人令牌

新建仓库

设置配置

创建私人令牌

找到 私人令牌

点击 生成新令牌

配置令牌权限，比如描述为 “BlogsImg”，权限选择 projects 即可，user_info 默认勾选，然后 提交

输入 密码 进行验证

得到 私人令牌 的明文私钥，复制后保存

注意：私钥明文只会显示一次，一定要先保存

3.2 Github 创建仓库，生成私人令牌

新建仓库

设置配置，仓库取名为 ImageBed，注意一定要 设为 public ，可以添加一个 README file

创建私人令牌

右上角点击头像，找到 Settings

进入后找到 Developer settings

选择 Personal access tokens → Tokens(classic) → Generate new token → Generate new token(classic)

点击 生成新令牌

Note 随便定义，比如 imgs

Expiration 不确定，就先默认 30 天 吧

权限选择第一个 repo 就够了，然后 Generate token

得到 私人令牌 的明文私钥，复制后保存

注意：私钥明文只会显示一次，一定要先保存

3.3 安装PicGo

PicGo下载地址

PicGo说明文档

找到 带有 latest 的版本，是最新的稳定版，beta 可能不稳定，这里 找到的是 2.3.1 版本

在 这个版本 下面 找到 Assets ，下载 x64 版本

这里附一个我下载的版本

PicGo-Setup-2.3.1-x64.exe

下载好就是 exe 文件，一步一步安装即可，这里给出我的安装过程，仅供参考；

双击 exe 文件，打开安装程序

最好自己重新设定 安装路径

然后就是等待 安装完成

安装完成后，我一般去掉 自动运行，完成

3.4 配置 PicGo

打开 安装好 的 PicGo

3.5 在 PicGo 中安装 gitee 插件

首次使用 PicGo 左侧一般没有 gitee 选项，需要自己安装

有时候打开 PicGo 可能会看到 新版本升级 的窗口，我这里显示的是 beta 测试版，就不升级了

在 插件设置 中 输入 gitee 进行搜索

搜索的时候发现 搜不到，一直在转圈圈，建议 多重启 PicGo 几次…

这里 我安装的 是 gitee 2.0.5

报错，提示没有 Node.js

点击 是 直接跳转到 nodejs 官网主页 > nodejs

3.6 安装 Node.js

这里选择 官网 推荐的版本 18.17.1

附上我下载的版本 node-v18.17.1-x64.msi

下载好后双击打开

同意，next

建议修改一下安装路径，这里选择 D:\ProgramFiles\nodejs\

默认即可，然后 next

这里我是不勾选，直接 next

点击 install 安装

等待安装完成

安装完成

我安装完成后，系统的 Path 环境变量自动配置了 Node，就是刚刚安装 Nodejs 的路径

win+R 输入 cmd 进入 命令行提示符，输入 node --version ，出现版本号，说明 Nodejs 安装成功

参考 Node.js 安装配置|菜鸟教程
Node.js下载安装及环境配置教程【超详细】

3.7 在 PicGo 中配置 Gitee

注意，这里我下载的时候还是报错， 重启 PicGo 也不行，一直弹这个错

重启电脑才行，然后回到 gitee 插件的安装界面，点击安装

安装完成后，点击 图床设置

选择 gitee 图床 ，并配置相关信息

• owner： gitee 账号名
• repo：仓库名称
• path：不填就是选择 根目录，这里我在 仓库里 新建了 MarkDown/01图片排版 目录，随便建的
• token：步骤 3.2 里保存的 令牌密钥 > [3.2 创建私人令牌](#3.2 创建私人令牌)
• message：可以不填

是否 设为默认图床 看自己需要，这里我先 设为 默认，这样在上传区 中 可以直接上传到 gitee 仓库中

最后 点击 确定

在任务栏右下角 ，右键 PicGo → 选择默认图床，还可以修改

3.8 在 PicGo 中配置 Github

点击 图床设置

选择 github 图床 ，并配置相关信息

• 设定仓库名： RYW0203/ImageBed

• 设定分支名：main 注意 Github 上面显示的是 main

• 

• 设定Token：步骤 3.2 里保存的 令牌密钥 > [3.2 Github 创建仓库，生成私人令牌](#3.2 Github 创建仓库，生成私人令牌)

• 设定存储路径：可以不填，默认是仓库根目录，这里我自己 写了个路径/Markdown/01图片排版/（即使仓库里没有这个路径也没事，它自己会自动创建）

• 设置自定义域名：https://cdn.jsdelivr.net/gh/RYW0203/ImageBed@main 说是可以加速，好像没什么用

是否 设为默认图床 看自己需要，这里我先 设为 默认，这样在上传区 中 可以直接上传到 gitbub 仓库中

最后 点击 确定

在任务栏右下角 ，右键 PicGo → 选择默认图床，还可以修改

回到 PicGo 的上传区，注意使用的是 Github , 尝试上传一张图片

右下角显示 上传成功 提示

在 Github 上可以看到上传的图片

3.9 配置 Typora

进入 偏好设置

选择 图像→上传服务选择 PicGo(app)→PicGo路径 ，找到 PicGo 的安装路径 [见3.3 安装PicGo](#3.3 安装PicGo) → 最后 验证图片上传选项；

显示成功

在 Github 上可以查看到 Typora 上传的测试图片

Typora 和 PicGo 配置成功后，选择一张 Typora 中的图片，该图片的路径是本地路径，右键图片→上传图片

上传之后就会发现 图片的路径变成了 网络路径

进入 Github ，可以看到图片已经上传

注意同名文件只能上传依次，多次上传会报错，PicGo 日志会 显示 “Request failed with status code 422”，然后有时候 上传图片成功后，本地的图片路径变成 github 的网络路径，然后图片 加载不出来，显示 image load failed，不知道为啥，但是 github 上确实上传成功了，估计 github 服务器 在国外，访问太慢了，但是把 这个上传后的 图片网络路径 复制到 CSDN 上是可以显示的，多刷新几次试试？？？重新打开 Typora 文件好像就可以了。

3.10 遗留的问题

1.设置 自定义域名 到底有没有生效，加速效果？

2. expiration 30天后会怎么样，今天是 2023/08/22

3. 不设为 public, private 会怎么样？能改成 private 吗？怎么改？

3.11 参考链接

typora+picgo+github图床使用教程

PicGo + GitHub + Typora 搭建个人图床工具

PicGo一条龙：下载、安装、配置gitee、配置typora

Gitee(码云)实现免费 Markdown 图床

用于Markdown中图片插入的【图床设置】
Node.js下载安装及环境配置教程【超详细】