table of Contents
Supporting information, free download
Link: https://pan.baidu.com/s/1ZpqUYISWViBWb4z0_SPu9A
Extraction code: l43x
Copy this content and open the Baidu Netdisk mobile app, which is more convenient for operation
Chapter One Current Status
-
Pain point 1: After you finish writing an article, it is sometimes difficult to write it once and publish it everywhere on the Internet.
-
Pain point 2: In the process of editing articles, the introduction of pictures often brings great trouble to the author, and it is very inconvenient to carry
-
Pain point 3: Some blog platforms do not support video, or sometimes we only need a simple animation to describe what we mean, how to generate this animation
-
Pain point 4: The traditional Word editing mode is not suitable for the rapid iteration of Internet technology today, and complex typesetting always makes people helpless
Chapter 2 How to Choose
So, what is my solution after seeing the above pain points?
Typora+PicGo+Gitee+Snipaste+ScreenToGif's fast editing mode is worth it!
- Typora: It is a lightweight and concise Markdown editor that supports real-time rendering technology, that is, you can see what you write immediately, without time for typesetting, and focus on editing the content of the article.
- PicGo: It is a tool for quickly uploading pictures and obtaining picture URL links. It supports a variety of galleries, but its functions are much more than that.
- Gitee: Currently China's largest code hosting tool, in fact, in addition to code, it also supports image storage.
- Snipaste: If you usually use QQ screenshots, I can only tell you that you are out of date. Snipaste is your best choice. The pictures captured with it are not only of high quality, but the file size is much smaller than that of QQ screenshots. Only high-quality images with low file size can ensure that when you upload articles on major platforms, you can ensure that the images will not fail to transfer because they are too large.
- ScreenToGif: Are you still worrying about how to describe CSS animation to fans? Today, it is here, a very simple and easy-to-use powerful GIF recording tool is here.
The above tools can all exist separately, but when they are combined together, they can exert their greatest power. Really realize, write once, publish across blog sites, and no longer have to worry about the storage of pictures and the upload process. For the problem of unsuccessful image transfer in, you only need to save one .md
file in the end for all your articles . So, what are you waiting for in front of the screen, see how these tools work together!
Chapter 3 How to install
Typora installation:
Official address: https://typora.io/
How to install: Download the version corresponding to the number of bits in accordance with their own computer, and then all the way to default the next installation.
homescreen icon:
PicGo installation:
Official address: https://github.com/Molunerfinn/PicGo
How to install: Download the version corresponding to the number of bits in accordance with their own computer, and then all the way to default the next installation. Note: You must install a node.js before installation (12 and above is best), otherwise, you will fail when installing the plug-in later and cannot run.
homescreen icon:
Gitee installation:
Official address: https://gitee.com/
How to install: This does not need to be installed, you have to register an account.
Installation of Snipaste:
Official address: https://www.snipaste.com/
How to install: Download the version corresponding to the number of bits in accordance with their own computer, and then all the way to default the next installation. Note: If it is a green version, just unzip it and use it.
homescreen icon:
Installation of ScreenToGif:
Official address: https://www.screentogif.com/
How to install: Download the version corresponding to the number of bits in accordance with their own computer, select the lower left corner at the time of installation cn
, and then all the way to default the next installation.
homescreen icon:
Reminder: I will pack all the above software into the supporting materials, because the official website of some software is on the external network, the download speed of the machine is slow, and the download fails easily! When you choose the software I provide, some of the software may prompt you to update. Here I just want to say, if you don’t update, the update will probably fail, because the update is also connected to the Internet, so just ignore it. , The versions I provide are basically the latest ones, and I am using them myself.
Chapter 4 Picture Bed Configuration
Open PicGo to find "Plugin Settings" , search for the plugin "gitee-uploader" , after finding it, click Install in the lower right corner
Then find "Picture Bed Settings" , find the "gitee" item inside , turn on the standby first, and configure it later.
Next, open the Gitee website and create a warehouse in it to store the pictures used in the article. The three parameters that gitee picture bed must set are as shown above:
-
repo: It represents the address of your warehouse. If you don’t know about it, look at the picture below
-
branch: Just write master for this parameter
-
token: This parameter first needs to be found in the personal settings and generated by finding the private token. The specific steps are as follows:
Copy the token above into the token text box just now, so that PicGo can submit pictures to Gitee through the image bed.
Then, we set up the image bed itself, open the image bed settings, and set as follows:
Next, let's check what is the current service port of TuBed, which is convenient for the following configuration:
This address and port are very important, so you should write it down now for easy operation later!
Chapter 5 Picture bed docking
Open Typora preferences, found inside the image , then like me, for him to be set.
Then check whether the image-to-bed connection is successful, click "Verify image upload option" , and if it succeeds, the acquisition will be displayed as successful.
Chapter 6 Writing Skills
-
Tip 1: After starting Snipaste, press F1 to quickly take a screenshot. It is recommended to set the application to start automatically after booting.
-
Tip 2: Don’t use shortcut keys to insert a picture, just use the screenshot of Tip 1, then paste it in Typora, and then click upload, so that the picture will be automatically uploaded to the cloud, and the absolute address of the cloud will be automatically replaced in the article, gif demonstration as follows:
The demo animation is too big, please open it manually: https://gitee.com/caochenlei/BlogImages/raw/master/20201117195730.gif
-
Tip 3: After you finish using ScreenToGif, you can export the gif to the desktop, then use the mouse to directly drag into the article, and then click on the picture to upload, so that the picture will be automatically uploaded to the cloud, and the absolute address of the cloud will be automatically replaced In the article, the gif demonstrates as follows:
The demo animation is too big, please open it manually: https://gitee.com/caochenlei/BlogImages/raw/master/20201117195743.gif
-
Tip 4: You must copy and upload one of the pictures. Do not upload to the last one, otherwise there may be problems. In this way, because the pictures in your article are quoted by network addresses, local pictures are optional. It becomes easier when you publish blog posts on multiple platforms.
-
Five Tips: Questions about Typora bold, must be in
** 需要加粗的文本 **
before and after they left a blank space, or sometimes failed to render. -
Tip 6: About Typora, try to use shortcut keys instead of looking in the format of the navigation bar. Common shortcut keys are as follows:
- First level heading: CTRL + 1, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Secondary title: CTRL + 2, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Three-level heading: CTRL + 3, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Four-level heading: CTRL + 4, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Five-level heading: CTRL + 5, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Sixth level heading: CTRL + 6, note: this number is the row of small numbers on the left, not the number from the numeric keypad on the right
- Bold text: CTRL + B
- Insert picture: CTRL + SHIFT +
I
- Insert link: CTRL + K
- Insert table: CTRL + T
- Insert underscore: CTRL + U
- Full text search: CTRL + F
- Full text replacement: CTRL + H
- Ordered list: CTRL + SHIFT +
[
- Unordered list: CTRL + SHIFT +
]
- Open or close source code mode: CTRL +
/
-
Tip 7: If you want your text to have color, please use html code to achieve it, as follows:
<font color='red'>我想要变成红色</font>
-
Tip 8: If you want to insert a code snippet, please enter the key under ESC three times in English, followed by lowercase of your code language, as follows:
```html 回车,这就是插入html代码片段 ```css 回车,这就是插入css代码片段 ```javascript 回车,这就是插入javascript代码片段 ```c 回车,这就是插入c代码片段 ```java 回车,这就是插入java代码片段 ```bash 回车,这就是插入bash代码片段
-
Tip 9: When uploading an article, do not directly copy the current text, you have to open it in source mode, copy the source code to the article editing area of CSDN, the source code is as follows:
-
Tip 10: If you encounter a problem, you will not ask Baidu, you can also leave a message at the end of this article, I will reply in time when I see it, la la la, finished!