【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床

目录

【博客写作】保姆级教程:Typora+PicGo+Bilibili简单搭建图床

一、背景

二、其他解决方案

三、Typora+PicGo+Bilibili简单搭建图床

3.1、Typora和PicGo的下载安装

3.2、图床搭建

四、总结与缺点


一、背景

最近开始写博客,目前CSDN只支持导入Markdown类型的文章,但是当文章中有本地图片时不能通过简单的复制粘贴来完成导入,否则会提示图片不可查看,只能重新导入一次。

两者有什么区别呢?

  • 当我们在Typora中插入本地图片时,使用的实际上是绝对路径,如图所示:

    409e1f92b0ecbde824072b0595f03bd3.png

  • 当我们在CSDN上重新操作插入图片时,使用的则是网络路径,如图所示:

    8834383117e3b2b69c572680ec3087df.png

绝对路径是自己本机的路径,每个用户基本上都会对应不同的结果;网络路径则引导每一个用户指向了一个相同的结果。对于网络上公开的博客而言,每个人要看到图片结果自然是要相同的,这就要求我们先将博客中的图片上传到网络服务器上,之后便可以通过URL访问对应的图片。

二、其他解决方案

作为一名合格的CV工程师(Ctrl C + Ctrl V)我喜欢一步到位,不用再次修改,在经过搜索之后我查到了很多资料,但是归根结底根本方法就是搭建图床,搭建图床的服务器有两类,一类是如阿里云、腾讯云等付费的服务器;另一类是如GitHub、SMMS等免费的服务器。

1、方案一(付费):Typora+PicGo+阿里云

阿里云对于个人使用的对象存储服务收费较低,如果你有长期且大量写博客需求,我建议使用阿里云作为你的图床工具人。

这里我推荐一篇参考文章:Typora+PicGo+阿里云OSS搭建博客图床(超详细)_慕雪华年的博客-CSDN博客_typora+阿里云,作者在文章中详细介绍了如何配置阿里云服务。

由于我写博客的需求不是很大,而且配置的步骤还是比较麻烦的,所以我并没有采用这种方式。

2、方案二(免费):Typora+PicGo+GitHub

更多的人则是使用了GitHub作为图床服务器,GitHub并不收费且本身并没有规定上传文件的大小也没有限制用户上传的速度,在理想情况下本应是最好的选择。

但是受限于国内网络,虽然部分人可以正常访问GitHub,但是上传速度和稳定性也未必理想,所以我也没有选择这种方案。

这里我推荐一篇参考文章:使用Github+picGo搭建图床,保姆级教程来了 - 知乎

PS(慎用):可以利用CDN加速的方式,但是CDN每改变一次就要重新配置一次,之前的图片也可能会无法查看。

3、方案三(免费):Typora+PicGo+SMMS

SMMS是PicGo的默认图床,几乎无需任何设置只需要在SMMS网站(Image Upload - SM.MS - Simple Free Image Hosting)中注册一个账号并获取Token即可。

那么我为什么没有使用SMMS作为我的图床呢?

1、SMMS免费版本限制了每张图片大小为5M,每次最多上传10张照片,对于部分用户来说可能不太友好;

2、PicGo目前没有支持SMMS v2上传,需要通过smms user插件上传,但我在安装插件之后仍无法成功上传。

这里我推荐一篇参考文章:Typora关于本地图片复制失效的解决方法,SM.MS+PicGo图床配置_Gen Direction的博客-CSDN博客

三、Typora+PicGo+Bilibili简单搭建图床

3.1、Typora和PicGo的下载安装

Typora作为一款优秀的跨平台MarkDown编辑器是我一直使用的软件,自v1.0版本开始Typroa宣布开始收费,价格是89元买断制,我个人认为这是一款不错的软件,于是便为知识付费,下面就简单介绍一下Typroa和PicGo的安装过程。

Typora下载网址:Typora 官方中文站,进入Typora中文官方站之后下拉点击立即下载,下载完成之后进入安装向导,安装过程较为简单,一路Next即可(可以自行修改安装位置)。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第1张图片

安装完成之后会提示输入序列码激活软件,可以选择先试用15天如果满意再为知识付费,富哥也可以选择直接购买(Doge),成功激活后如下图所示:

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第2张图片

PicGo下载网址:Index of /github-release/Molunerfinn_PicGo/v2.3.1/,这是山东大学所提供的镜像网站,下载速度不受限制,进入网站之后选择【PicGo-Setup-2.3.1.exe】下载。

PS:下载过程中建议关闭杀毒软件和防火墙,否则可能会误删;若浏览器提示下载文件不安全,需要选择仍然保留。

下载完成之后进入安装向导,自行选择安装位置,之后一路下一步即可,安装完成之后如下图:

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第3张图片

3.2、图床搭建

Typora设置

安装完成之后,进入Typroa,点击菜单栏中的【文件】→【偏好设置】,在偏好设置中选择图像,进行下列设置:

1、【插入图片时】在下拉框中选择为【上传图片】,同时勾选对本地位置的图片应用上述规则、对网络位置的图片应用上述规则;

2、【上传服务设定】在上传服务的下拉框中选择PicGo(app),将PicGo路径选择为安装路径下的PicGo.exe。

设置完成之后不要离开该界面。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第4张图片


PicGo设置

随后打开PicGo,选择【插件设置】,搜索并安装bilibili插件。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第5张图片

之后进入【图床设置】在下拉菜单中选择【Bilibili图床】,提示要求输入SESSDATA,如下图所示:

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第6张图片


Bilibili设置

若要获得SESSDATA则需要在网页浏览器中登录自己的B站账号,点击F12(笔电Fn+F12)打开开发人员选项,我使用的浏览器是Edge浏览器,其界面如下,其他浏览器的界面也相似。

首先选择【应用程序(Application)】,其次点击存储下【Cookie】中的任意一条均可,第三在搜索框中搜索SESSDATA即可查询到SESSDATA的值,将其复制至PicGo中即可完成设置。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第7张图片

开发者操作文档:Bilibili获取SESSDATA · 语雀


最终测试

最后回到Typora中,点击【验证图片上传选项】,若能够图片成功上传,则会有验证成功的弹窗出现。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第8张图片

在PicGo中选择【相册】,也能够看到成功上传的测试图片,测试图片为两个Typora的图标图片。

【博客写作-Typora】保姆级教程:Typora+PicGo+Bilibili简单搭建图床_第9张图片

至此便配置完毕,可以正常使用。

四、总结与缺点

相较于其他的图床服务器,缺点在于我们不能进入Bilibili的服务器对我们上传的图片进行操作与管理,只能在PicGo的GUI界面中对图片进行操作,实测即使在PicGo中将图片删除后图片仍然可以正常显示,所以不会再Bilibili服务器中将我们的图片文件删除。

最后由于本人精力和能力有限,文中难免有错误之处,欢迎大家交流指正!

你可能感兴趣的:(博客写作技巧,github,经验分享,学习)