超实用技巧✨| 提高写文的质量 和 速率必学技能:❤️ Typora 图床配置 详细说明 ❤️ Windows版

Posted 呆呆敲代码的小Y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了超实用技巧✨| 提高写文的质量 和 速率必学技能:❤️ Typora 图床配置 详细说明 ❤️ Windows版相关的知识,希望对你有一定的参考价值。

❤️提高写文的质量 和 速率必学技能:Typora图床配置 【Windows版】

📢前言

  • 之前写文章的时候,就听人说可以用图床 来写博客,但是一直不知道图床到底是个啥东西
  • 最近正好因为某种原因(xxx) ,让我重新想到了这个图床~
  • 所以正好自己简单配置了一个,顺手写一篇教程来记录下自己是怎样配置图床的!

🌲图床简介

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

简单来说,就是一个可以上传图片的一个网上空间

因为我们在本地写一些东西的时候,比如使用World文档,当你从本地拖进去几张照片的时候
在当前这个World文档是能看见的,但是假设当你因为某个需求想要把它放到CSDN的话,那这个图片就不会显示出来了。

所以我们需要用这个图床配置,来将图片上传到一个网上空间,这样的话就可以到处复制都没有关系啦!


🌲Typora简介

说到图床,那我们肯定需要一个markdown编辑器~
说到markdown编辑器自然就是我们的Typora登场了!

Typora是一个跨平台的markdown编辑器,使用markdown编辑器写文章优点是排版简洁
痛点则是无法像Word那样直接嵌入图片,插入的图片实际上插入的是图片的路径(可以是本地路径也可以是网络路径)。

使用网络路径的优点是文档可以跨平台跨设备浏览,在使用前需要进行些许配置

所以我这里使用了两种方案来配置图床,下面一起来看看吧!


🌟方法一:PicGo-Core(command line) + gitee仓库

这个方法使用的方案是PicGo-Core(command line)+gitee仓库的方案

这里的PicGo-CoreTypora内置的一个插件,和picgo软件不同。

分为下面几个步骤,一起来看一下!

  1. 🏳️‍🌈安装Typora软件(官网);

  2. 🏳️‍🌈在Typora里下载PicGo-Core(command line)插件;

  3. 🏳️‍🌈安装Node.js

  4. 🏳️‍🌈借助picgo安装gitee图床插件;

  5. 🏳️‍🌈修改picgo配置文件


🏳️‍🌈1. 安装Typora软件

Typora在各个平台下的安装都很简单,直接去官网下载即可

官网下载地址

很简单的下载,下载完后直接点击安装,选择一个文件夹就好啦!


🏳️‍🌈2. 在Typora里下载PicGo-Core(command line)插件

打开Typora,依次点击文件-偏好设置-图像

按下图所示勾选插入图片时的选项,并在上传服务设定选择PicGo-Core(command line),点击下载或更新按钮下载插件;


🏳️‍🌈3.安装Node.js

安装插件首先需要确保电脑已经有Node.js,可以先在CMD中输入node -v来查询,如果已安装会显示下图所示。

若无请先去Node.js官网下载并安装。下载完之后,找个平时安装软件的地方安装上就好了,不用啥配置!

我是因为没有配置这一步,所以下一步的安装gitee图床插件一直失败!!


🏳️‍🌈4. 借助picgo安装gitee图床插件

这一步需要找到第2步中下载的picgo二进制文件,不同系统文件名略有不同:

windows系统一般在C:\\Users\\用户名\\AppData\\Roaming\\Typora\\picgo\\win64\\文件夹,文件名为picgo.exe

windows系统可以在包含picgo.exe文件的路径下执行:.\\picgo.exe install gitee-uploader

效果如下,就代表插件安装成功了!


🏳️‍🌈5.创建一个仓库,gitee私人令牌获取

私人令牌Gitee的设置自己配置一个就好

没有gitee的要先去注册一个,也很简单。

然后新建一个仓库,简单改个名字,最好是全英文小写!

权限要设置为开源即所有人可见

然后直接创建就好了,这里要记住这个仓库名和路径,在下一步配置文件会用到

仓库创建好了,接下来就是获取私人令牌了!

简单过程如下:




🏳️‍🌈6.修改picgo配置文件

重新打开偏好设置-打开配置文件,此时自动打开picgo的配置文件,配置正确时会自动上传图片到gitee


文件可以参考如下修改:

{
  "picBed": {
    "current": "gitee",
    "uploader": "gitee",
    "gitee": {
      "branch": "master",
      "customPath": "yearMonth",
      "customUrl": "",
      "path": "仓库下的文件夹",
      "repo": "用户id/仓库名",
      "token": "gitee上申请的私人令牌"
    }
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  }
}

配置文件内容介绍:

  1. current为当前的图床,uploader表示上传用的图床,这里两个都设置为gitee;
  2. master表示主分支,一般用做图床的仓库是个单独的仓库,此处保持master就好;
  3. path为仓库下的文件夹;
  4. token为私人令牌,需要在gitee网站申请,申请的token只出现一次,点击复制按钮将其粘贴到配置文件中即可,一个用户可以有多个token,可以在gitee网站管理自己的token。
  5. 使用的插件都要在picgoPlugins里包含并设置为true,这里只使用了gitee插件

这里要注意,我们需要改的地方只有三个:path、repo和token

path是gitee仓库的一个文件夹,我们自己新建的!

repo为仓库名,假如如有一个仓库名为a,图片存在这个仓库下的b文件夹,你的用户id是c(浏览器地址栏仓库名前的字符串),则path为b、repo为c/a

然后token改成自己的私人令牌(在上一步获取)


🏳️‍🌈7.上传图片测试

配置完上面步,直接在Typora中上传一个图片测试

发现图片的链接变成http://gitee.com...就算配置成功啦

然后把这个 图片+链接 直接复制到CSDN测试一下

效果如下,就说明配置成功啦!


🌟方法二:picgo(app) + gitee仓库

这种方法其实和第一种差别不是很大,就是在偏好设置中改为了picgo(app),而不是PicGo-Core(command line)

下面一起来看一下配置步骤吧!

  1. 🏳️‍🌈安装Typora软件(与第一种一样,不在赘述)
  2. 🏳️‍🌈下载Picgo软件
  3. 🏳️‍🌈安装Node.js
  4. 🏳️‍🌈创建Gitee仓库,获取token(与第一种一样,不在赘述)
  5. 🏳️‍🌈配置gitee插件
  6. 🏳️‍🌈配置typora

🏳️‍🌈1.安装Typora软件

与第一种方法一样,直接去官网下载安装即可


🏳️‍🌈2.下载Picgo软件

PicGo下载地址

直接点击网址,进去找到这个下载Windows版本的即可

下载完了直接找个文件夹,一路默认安装就好啦!


🏳️‍🌈3.安装Node.js

和第一种方法中的一样,不在赘述,直接去看就好!


🏳️‍🌈4.创建Gitee仓库,获取token

和第一种方法中的一样,不在赘述,直接去看就好!


🏳️‍🌈5. 配置gitee插件

安装完PicGo之后,打开这个软件

然后点击插件设置,搜索:gitee,然后安装就好了!如下

然后就会发现已经有Gitee图床了,然后配置一下!

配置三个地方就好了,直接添加上去,分别是你的gitee 的ID仓库名Gitee私人令牌

如下:

最好是再配置一下Server,设置一下端口,跟下面一样即可!


🏳️‍🌈6.配置typora

打开文件-偏好设置,选择PicGo(app),路径就是安装PicGo的文件夹,选中这个PicGo.exe即可!

大功告成!

上传图片测试一下!
如下所示,就是配置成功啦!

然后在Gitee仓库中也会显示你所有上传成功的图片,如下所示!


💬总结

好啦,本篇文章总结了两种通过Typora + Gitee的方式配置图床

其实方法差别不大,但是区别是 第一种可以不用下载PicGo这个软件,但是也需要下载插件!

配置方法也都很简单,自我感觉说的还是挺详细了!

配置完了之后就可以在本地写博客啦~ 而且很多平台都支持Markdown编辑器格式,写完后多平台都可以上传!

也拥有了自己的图床网上空间,这个功能对于经常写文的小伙伴是极力推荐的!

写完一篇之后也可以多平台发文章,非常的Nice!还不赶紧三连收藏一波!


但是我使用的时候也是遇到了一个问题

已经上传过的图片,当我再一次拖进来的时候,居然显示上传失败,不知道是咋回事呢!

如果有解决方法的小伙伴也可以在评论区留言,让大家学习一下!

那本篇文章就到这里啦,下次再见啦!

以上是关于超实用技巧✨| 提高写文的质量 和 速率必学技能:❤️ Typora 图床配置 详细说明 ❤️ Windows版的主要内容,如果未能解决你的问题,请参考以下文章

一款超实用的网页开发框架推荐

超实用git技能大全

web前端必学8个网页优化技巧

优化PHP程序Laravel 5框架的10个技巧

打造超完美主页?20个主页设计技能你不容错过

提高代码质量的12个技巧