搭建个人博客系列：Markdown教学（Typroa + picgo图床设置）（一）

前言

学生时代在学习知识点的时候，会有记笔记的好习惯。忘性是人的一种属性，我们无法避免他们，每当我们最一个东西的理解很深刻的时候我们都应该把他们记录下来。作为刚入行半个月的程序员来说，写博客，文档是非常重要的习惯。作为一名前端开发，每天都在使用不同的框架写着不同的BUG，当我们很长一段时间后，再回来出现了同样的Bug，我们有需要去思考钻研。那么我们干嘛不把他记下来呢？

给大家分析一下我平时学习和记录的工具组合。

本文结构导图

一、Markdown

• 什么是Markdown

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

二、Markdown语法

1.标题

• 使用 # 号（#与内容中间有一个空格）

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

2.字体

• 加粗：要加粗的文字左右使用两个 * 号包裹

**内容**

• 斜体：要斜体的文字左右使用一个 * 号包裹

*内容*

• 斜体加粗要斜体加粗的文字左右使用三个 * 号包裹

***内容***

• 删除线：要删除线的文字左右分别用两个~~号包起来

~~内容~~

三.引用

在引用的文字前加>就可以了（> 与内容中间有一个空格）

> 这是应用内容

四.分隔符

三个及其以上的 - 与 * 即可

---
----
***
*****

5.图片

提示若图片不是线上图片，那么在为自己电脑上是看不到自己的图片的。

![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可省略

6.超链接

[超链接名](超链接地址 "超链接title")
title可省略

7.列表

• 无需列表

- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格

• 有序列表

- 数字 + 列表内容
+ 数字 + 列表内容
* 数字 + 列表内容

注意：- + * 跟数字之间都要有一个空格，内容与数字不用加。

8.表格

表头|表头|表头
-|:-:|-:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行

文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右

9.代码

• 单行代码
  使用一个 ` 包裹代码内容

`单行代码`

• 多行代码
  使用3个`即可。

```多行代码```

注意：````前可以写代码的类型

```jsx 多行代码 ```

三、推荐的Markdown工具

这里我推荐一款非常火的markdown编辑工具。typora点击这里下载即可，使用起来非常的舒服。

---

四、图片上传工具

为什么需要图片上传工具（图床），经常使用Markdown的人都知道的一大烦恼，就是把图片上传的线上。操作及其繁琐，并且还不一定能上传成功。

1.picgo简介

所谓图床工具，就是自动把本地图片转换成链接的一款工具，网络上有很多图床工具，就目前使用种类而言，PicGo 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用.且跨平台支持 Windows、macOS 和 Linux 系统，它的使用非常简单，只需先设置好图床网站 / 云存储服务的账号之后，用鼠标将图片拖放到 PicGo 主窗口的图片上传框，即可完成图片的上传并返回一个url链接到剪切板。

2.picgo下载

• window系统
  gitHub下载地址：picgo
  国内网站下载地址：picgo

会用git可以使用第一种下载方式，普遍推荐第二种下载方式。（毕竟gitHub是国外的，拉取或下载速度会比较慢。）

3.picgo配置

安装完成后打开picgo，点击插件

在输入框中搜索gitee

二选一，随便下载安装一个，我安装的是右边的。

4.gitee + picgo 实现图片上传

这是使用gitee而不用gitHub，主要是应为速度的关系，gitee的速度会快很多。

• 1 登录gitee官网
  登录完成后创建一个image仓库
• 2 创建完成后选中个人设置
• 
  选中私人令牌
  
  然后做如下配置
  
  完成上述操作后，就会得到你的token令牌，复制。打开picgo。

把内容粘贴到token上，复制你仓库的地址去掉gitee的地址，只要后面的内容（如图）。

配置完成后你就可以上传图片到你的gitee上了。

5.这里picgo在和typora组合起来。

打开typora找到设置偏好，配置picgo

搞定！！打完收工

总结

上面是我自己平时记录知识的组合拳，这一套下来输出绝对拉满。希望大家喜欢，谢谢大家😊！！！！