解决导入markdown时本地图片无法显示问题——图床

解决导入markdown时本地图片无法显示问题——图床

图床工具: PicGo

图片服务器:Gitee

辅助工具:Node.js 14.17.6

图床:

一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定了访问速度很慢,影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。

图片服务器可选七牛云, 阿里云 OSS , gitee ,其中 gitee 给了 5 个 G 的空间,而且网络也快。


1、安装 PicGo

先下载 PicoGo ,下载地址:https://github.com/Molunerfinn/PicGo/releases

借此机会了解一下下载软件的各版本的区别:

image-20210902153833489

  • .yml:YAML (YAML Ain’t a Markup Language 即 YAML不是一种标记语言)

    YAML 是一个可读性高,用来表达资料序列的编程语言,专门用来写配置文件,文件通常以 .yml 为后缀。

    在开发这种语言时,YAML 的意思其实是:“Yet Another Markup Language”(仍是一种置标语言),但为了强调这种语言以数据做为中心,而不是以置标语言为重点,而用返璞词重新命名。

  • .AppImage:AppImage 是一个压缩的镜像文件,它包含所有运行所需要的依赖和库文件。

    可以直接执行 AppImage 文件不需要安装。当你把 AppImage 文件删除,整个软件也被删除了。你可以把它当成 windows 系统中的那些免安装的 exe 文件,在 linux 系统中使用 AppImage 软件是极好的。

  • .dmg:苹果电脑的镜像安装文件。

  • .blockmap:基于分配块的位图索引,每个文件的分配块都有一个索引与之对应,是一对一的索引关系。

    是文件系统的文件索引模式。(隐隐感觉这个解释有点不对劲,但实在找不到什么资料)

  • -ia32:Intel Architecture 32bit 简称,即英特尔32位体系架构。

  • -x86:X86-64 就是 IA32 的 64 位拓展。

  • .snap:Snap 的安装包扩展名是 .snap。

    snap 是一种全新的软件包管理方式,它类似一个容器拥有一个应用程序所有的文件和库,各个应用程序之间完全独立。所以使用 snap 包的好处就是它解决了应用程序之间的依赖问题,使应用程序之间更容易管理。但是由此带来的问题就是它会占用更多的磁盘空间。

总之,下载 PicGo-Setup-2.3.0-beta.8-x64.exe 就对了,下载好直接安装即可,安装好打开如下:

image-20210902154029513

2、安装 Gitee 插件

首先安装 Node.js

脚本语言需要一个解析器才能运行,JavaScript 是脚本语言,在不同的位置有不一样的解析器,如写入 html 的 js 语言,浏览器是它的解析器角色。而对于需要独立运行的 JS,node.js 就是一个解析器。

Node.js是一个免费的,开源的,跨平台的JavaScript运行时环境,使开发人员可以在浏览器外部编写命令行工具和服务器端脚本。

下载地址:https://nodejs.org/en/

下载好后一路 next 即可安装,需要注意在这一步时添加环境变量。

image-20210902154159939

检测是否安装成功,输入“node --version” 检查 Node.js 版本,输入“npm --version” 检查 npm 版本

image-20210902154228978

新版的 node.js 已经集成了 npm,所以可以看到 npm 也一并安装好了。

npm 是一个包管理工具,就像 pip 是 python 的包管理工具,npm 则是 javascript 的一个包管理工具。

在插件设置中搜素gitee, 注: gitee-uploader插件,必须先安装node.js

image-20210902144230482

3. 创建图片服务器

在 gitee 创建一个公共仓库

image-20210902145843002

然后生成一个私钥(token,下文配置用到),在 gitee 的个人设置里,找到左面安全设置的私人令牌,只勾 projects 这一项然后确认即可,生成后复制密钥留着。

image-20210902150256150

4、配置PicGo

选择图床设置,第一步中安装 gitee 插件后,若是在图床设置找不到 gitee 图床,重启一下.

image-20210902151308103

repo:用户名/仓库名称,也可以直接复制仓库的url;

branch:分支,默认master即可;

token:填入上文所生成的私人令牌即可;

path:路径,一般写上img;

customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间。

5、配置Typora 与 PicGo的关联

image-20210902151951790

注意 PicGo 路径要到 PicGo.exe 才行。

最后点击验证图片上传选项,报错了。

image-20210902152731915

image-20210902152647154

解决方法:项目名不对,以gitee项目里面“管理”页签的为准,不以前台大标题为准。

image-20210902153059778

修改后就成功了!

image-20210902153348215

至此,直接复制图片于Typora里,会自动上传到自己配置的gitee图床的。

此外注意:

Typora 使用下面这个 url 跟 PicGo 连接的,所以 PicGo 的设置也要对应,默认一般就是。

using http://127.0.0.1:36677/upload

image-20210902152338885

但 PicGo 的 Server 监听端口会经常变动(比如电脑重启后),就需要修改,不然 Typora 图片也会上传失败,因为 Typora 默认端口为 36677, 所以上传失败的时候可以检查一下 PicGo 的 Server 的监听端口是否变动, 一定得是 36677 。


今日份typora使用心得:

无序列表缩进时【Tab】+【Shift】,删除前方序号时直接删除键。


学习中用到的博客:

图床搭建:https://blog.csdn.net/weixin_41272626/article/details/109017685

安装及介绍 Node.js:https://blog.csdn.net/muzidigbig/article/details/80493880

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值