Markdown书写软件Typora的使用--图片上传(PicGo与Github/Gitee)及排版

目录

一、引用本地图片

(1)拷贝图片

(2)相对路径

 (3)特殊情况

<1>  文件与图片都在当前文件夹

 <2>图片在文件的上一个文件夹

(4)弊端

二、引用网络图片

(1)选择一张网络图片

(2)粘贴路径 

(3)好处

三、使用图床插入图片

(1)引入

(2)APP推荐

(3)PicGo

(4)PicGo + Github图床

<1> 首先你要有一个Github账号

<2> 将Github设置为默认图床

<3> 在Github上新建一个仓库

 <4> 返回PicGo进行Github设置

<5> 图片上传及查看

<6> 返回Github查看

(5)PicGo + Gitee图床

<1> 我们打开PicGo的“插件中心”

<2>操作和Github里面很像 

<3> 404错误原因

<4>测试

 (6)进阶

 (7)提醒

(8)Typora+PicGo

<1> 打开Typora的偏好设置

<2> 修改Typora权限

 <3> 上传图片

四、图片排版

给图片加图注

<1> 打开Typora

<2> 输入代码

 <3> 上传图片到图床

<4> 上传图片至Typora

 <5> 对图片进行比例缩放

 <6> 图注


一、引用本地图片

(1)拷贝图片

如果你对Markdown不熟悉的话,可以直接拷贝一张图像,然后直接粘贴在Typora里面。

比如

我们可以看到,这里是把文件的绝对路径给引用过来了:

(2)相对路径

在Typora里面使用插入图片的快捷键“ Ctrl+Shift+I ”。

然后点击选择路径。

 找到想插入的图片目录。

比如我这里的:

还可进行缩放图片:

 (3)特殊情况

<1>  文件与图片都在当前文件夹

若此时你写的Typora文件和你所需要插入的图片在同一个目录下。

就可以直接使用“ ./ ”的快捷方式来找到当前文件所在的目录。

比如,此时我们创建一个文件夹,将Typora文件和要插入的图片放入。

打开Typora文件,我们需要将“水晶”这张图片引入。

方法:

先按快捷键“ Ctrl+Shift+I ”,然后在路径位置写上“ ./ ”,然后将图片名称(包括后缀名)写在里边。

: “ ./ ”代表“图片.md”所在的文件夹。

可以看到结果插入成功: 

 <2>图片在文件的上一个文件夹

若此时你所需要插入的图片在你写的Typora文件上一个目录中。

就可以直接使用“ ../ ”的快捷方式来找到当前文件的上一级目录。

比如,现在这个图片在我们Typora文件的上一级目录。

这是图片所在路径:

 这是文件所在路径:

方法: 

那我们打开这个文件,先按快捷键“ Ctrl+Shift+I ”,然后写入“ ../ ”,然后写入图片名称(包括后缀名)。

: “../ ”代表“图片.md”所在的上一级文件夹。

 可以看到结果插入成功: 

(4)弊端

无论是绝对路径还是相对路径,实际上都是引用图片的路径

引用的都是路径本身,而不是图片。

我们可以看到,Typora写的文件比图片本身的内存占用还要低(所以Markdown非常节省存储空间)。

文件并不包含图片本身。

如果我们把本地图片删掉或者该张图片的名称路径改动了,在文件中就无法显示图片了。

二、引用网络图片

(1)选择一张网络图片

选择一张网络图片,复制它的链接:

(2)粘贴路径 

然后再Typora里面按快捷键“ Ctrl+shift+I ”,然后在小括号里面粘贴刚才拷贝的路径。 

(3)好处

网络图片在这里基本不会失效。

但如果这个图片所在的网址被停止访问了,这张图片自然也不能正常被访问了。

三、使用图床插入图片

(1)引入

那如果我们把图片上传到一个网站上,比如说上传到自己的微博里面,那么这张图片基本不会被删除,除非你违规了哈哈。那么这张图片就基本上稳定地在Typora里面进行显示了。

这就是我们接下来要讲到的图床(Image Hosting Service)基本思想。

(2)APP推荐

图床不需要你自己上传到微博或者其他平台。它会通过一个APP或者某个服务器,自动帮你进行上传。这样用起来就会非常方便。

这里推荐两款APP。

 iPic下载:可在 Mac App Store下载


PicGo下载:PicGo (molunerfinn.com)https://molunerfinn.com/PicGo/ PicGo相关介绍及下载:

Molunerfinn/PicGo: A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder (github.com)https://github.com/Molunerfinn/PicGo

(3)PicGo

本人用的是Windows系统,在这里就用PicGo来介绍啦。
打开PicGo的界面:

注意:请确保你安装了Node.js,并且版本>=8。

提示:默认上传图床为SM.MS。PigGo上传之后,会自动将上传成功的URL复制到你的剪贴板,支持5种复制格式。

分享一篇文章,里面的内容极为详细;

快速上手 | PicGohttps://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B

(4)PicGo + Github图床

<1> 首先你要有一个Github账号

<2> 将Github设置为默认图床

 会出现提示的哦:

<3> 在Github上新建一个仓库

①New一个

②输入相关信息 

③创建完成

 <4> 返回PicGo进行Github设置

①仓库名填写“Github用户名/刚建立的仓库名

②分支填写“main”或者master

 ③Token填写秘钥

找到“设置”:

找到“开发者设置”:

 

选择个人秘钥:

新建一个:

设置秘钥名称:

我们只勾选它的仓库权限:

在这里可以设置你想要的期限:

设置完成之后,我们点击新建:

复制这里的一串代码:

粘贴到PicGo的Github设置的Token里面:

 ④“指定存储路径”可以不填

⑤自定义域名

由于Github的服务器在美国,所以非常慢。

我们可以用cdn来加速。

https://cdn.jsdelivr.net/gh/UserName/RepoName

UserName:你的用户名

RepoName:你的仓库名

我这里填写的是:

然后我们点击“确定”就设置成功啦! 

<5> 图片上传及查看

①点击上传

②选择图片进行上传(选择的还是上面那个水晶图片哦)

我们可以在电脑屏幕左下角收到“上传成功”的消息通知:

 ③链接格式选择URL

④“相册”-->“查看图片网址”

 

 可以看到网址信息:

⑤复制网址

⑥查看网址

打开一个浏览器,粘贴刚才我们复制的网址:

我们可以看到,图片被成功地传到该网址上了。

<6> 返回Github查看

 找到我们刚才建立的仓库:

可以看到,“水晶”图片已经上传到这儿了:

(5)PicGo + Gitee图床

因为Github是国外的,上传可能会出现缓慢等问题,我们还可以用国内的Gitee,就会快很多。

在这里介绍一下。

具体怎么操作呢?

<1> 我们打开PicGo的“插件中心”

安装插件“gitee-uploader”

 

 安装完成之后,我们退出重启PicGo,可以看到这儿会出现一个“gitee”: 

<2>操作和Github里面很像 

①新建一个仓库

②填写相关信息后创建 

开源!!!初始化仓库!!!

 

可以看到界面: 

③ 填写仓库和分支

 ④设置密钥

进入 Gitee 设置:

点击“私人令牌”:

生成新令牌:

 只勾选一个“projects”就可以了:

复制链接:

粘贴进PicGo里面的“token”即可:

 

 ⑤后面的可填写可不填写

设置完点击“确定”即可。

<3> 404错误原因

这时候你上传图片可能会出现的错误:

这是因为Gitee设置的用户名错误,因此上传时404找不到该文件!

出现这个错误的原因是,PicGo里面的配置配错了,用户名以个人主页域名后的用户名为准!!! 

<4>测试

我们将其设置成“默认图床”,再来试一试。

我们可以看到上传成功了,在Gitee创建的仓库里面也有相应的文件哦。

如果出现相关问题,可以参考一下这个博客:

 10.picgo+gitee创建图床及常见报错_a2274001782的博客-CSDN博客https://blog.csdn.net/a2274001782/article/details/121230526?share_token=c3a800d7-2fb7-49e7-9aeb-968aad07fe0d

 (6)进阶

推荐一个截图后直接上传的插件:

 可以自定义快速截图并上传的快捷键:

 这些设置我也喜欢把打开:

 (7)提醒

因为插件是基于npm的,所以要先安装nodejs,可直接去官网下载,提供一个下载链接:

node-v14.11.0-x64.zip - 蓝奏云 (lanzoui.com)https://oier.lanzoui.com/ie1Q6h9z5ab

(8)Typora+PicGo

<1> 打开Typora的偏好设置

更改如下设置:

 验证图片上传选项:

可以看到是成功的。 

 它会自动在PicGo上传俩个不知道啥,删掉就是了。

<2> 修改Typora权限

修改Typora的权限,打开时用管理员的身份打开,这样在上传图片的时候,就可以创建upload文件夹。

找到Typora的安装目录,打开属性。

打开“兼容性”--->“以管理员身份运行此程序”。

 <3> 上传图片

随便截了一张图,然后粘贴到Typora里面,点击“上传图片”。

等待上传。 

 

 上传成功:

四、图片排版

这里需要一点点HTML的知识。

给图片加图注

<1> 打开Typora

输入“<center>”,然后回车。

<2> 输入代码

 <3> 上传图片到图床

任意截图然后按刚才我们设置的快捷键“Ctrl+Shift+0”快速上传至图床。

或者任意复制图片按快捷键“Ctrl+Shift+P”上传至图床。

<4> 上传图片至Typora

我们可以设置一下“上传后自动复制链接 ”:

这样我们在上传图片至图床之后,就会拥有这张图片的链接了。

然后我们就可以直接在Typora里面粘贴即可。

就会出现图片啦! 

 <5> 对图片进行比例缩放

再次输入代码

展示效果,图片缩为原来的25%了。

 <6> 图注

我们可以看到,这样写的话是并排的。

语法:

<br>

(blank  row ,空白行) 

 如果我们加一个空白行,汉字就会到图片下边去了。

就像这样:

看一下效果:

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨翼轻尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值