Typora’s MarkDown is simple and elegant, making it easy to write notes. Unfortunately, there is no built-in cloud synchronization function, which is really a big pain point for users with cross-platform multi-device requirements.

For cloud synchronization of Markdown files, Typora needs to be used with other cloud synchronization software, such as Nutcloud. The usage is also very simple, setting typora’s MD storage directory as nutcloud synchronization directory is enough. Typora+ Nut Cloud to achieve multi-platform synchronization markdown

The file problem is solved, but the image problem is not solved. When we insert images into Typora, Typora will save them locally by default. When we wanted to copy markdown documents to other sites for distribution, there was no way to copy local images without the hassle of uploading one by one to the site. So today I’m going to share how to use Aliyun’s OSS as typora’s map bed.

How to upload

In Typora, pictures can be uploaded and inserted into MD documents through third-party plug-ins. Picgo is the official recommended image uploading plug-in.

Set the typora

With Typora Settings on, we upload images in the Image menu when inserting images, so we can upload local images to our image bed when pasting screenshots or directly inserting local images.

Picgo can be called through the GUI graphical interface or command line, like the GUI interface can switch the upload service to picgo. app, download picgo. app for installation and use, installation method is also very simple and easy to use.

But as a professional programmer, GUI stuff is very unnecessary and resource consuming, so we choose to upload images by calling picgo-core, a lower-level library, from the command line.

Picgo installation

The picgo command line calls rely on node’s Picgo library, so we need to deploy the Node environment locally.

#Install Picgo globally
cnpm install picgo -g
Copy the code

Uploaded to which

Choice of drawing bed

Picgo currently supports SMMS, Qiuniuyun, Tencent Cloud, Youbiyun, Github, Ali Cloud OSS, Imgur seven map bed, through the plug-in can also support Gitee map bed. Originally thought can also use Gitee white whoring, the results found very troublesome, GITee mainly has several problems

1. Free warehouse file single 500M size limit, used for drawing bed space is too small 2. 3. The previous problem can be solved through Gitee Pages, but each time a new picture is uploaded, it needs to be redeployed to access, extremely troublesomeCopy the code

Ali Cloud OSS storage package for one year is only 8.4 pieces, both in terms of speed and stability, is a better choice, so I chose Ali Cloud OSS in the end.

Ali Cloud OSS package opened

Skip over here…

Picgo configuration

The default picgo configuration file is ~/.picgo/config.json. Where ~ is the user directory. User directories vary from system to system.

For Linux and macOS, it is ~/. Picgo /config.json.

For Windows, C:\Users\ your username \.picgo\config.json.

Step one

#Automatic build configuration
#If you need to manually modify the configuration later, you can manually modify the. Picgo /config.json file
#Choose the aliyun
$ picgo set uploader
? Choose a(n) uploader (Use arrow keys)
  smms
  tcyun
  github
  qiniu
  imgur
❯ aliyun
  upyun
(Move up and down to reveal more choices)

#Next comes the interactive command line
Copy the code

For details on how to view the configurations that need to be filled in the interactive command line, see 👉 Ali OSS Configuration

"AccessKeyId ": "" accessKeySecret": "" "bucket": "" // Storage space name "area": "" // Storage area code" PATH ": "CustomUrl ": "" // customUrl: "" // customUrl: "" // customUrl:" "//" PicGo 2.2.0+ picgo-core 1.4.0+ "//" PicGo 2.2.0+ picgo-core 1.4.0+Copy the code

Step 2

### Set what upload bed to use
picgo use uploader? 
Use an uploader (Use arrow keys)
  smms
  tcyun
  github
  qiniu
  imgur
❯ aliyun
  upyun
Copy the code

After the above configuration, Picgo will write the newly filled configuration to the.picgo/config file. If there is any problem with the configuration, you can directly modify this file.

Points to be aware of

  1. If picgo-core (command-line) is selected in the upload service setting, the upload fails even if there is no problem with the configuration check. It may be that TyPro cannot read the environment variable of the picGo NPM extension when executing the upload command. We can select Custom Command to invoke picgo uploads.

  1. Enter the value in the command {node path} {picgo path} u, u is picgo’s upload command
#throughwhichCommand to obtain the absolute path of the node command
which node

#throughwhichCommand to get the absolute path to picgo
which picgo
Copy the code

The picgo has been configured at this point. When configured correctly, images are inserted in a Uploading pattern indicating that they are being uploaded. After uploading, the local address of the image will be replaced with the online address of oss.

We can also use the command line to test whether the upload is normal. If there is an exception, Picgo will give an exception prompt

pcigo ~/test.jpg ~/.test.jpg
Copy the code

Image management optimization

If we upload the OSS file directly from the original image file, then our OSS file becomes very difficult to manage, all files are piled in the root directory. We can use plug-ins to rename file names and add {y}/{m}/{d} directories to file names. Oss will automatically categorize files according to the file path hierarchy, so that we can easily categorize files according to the date of the image for easy search and migration.

#Install the rename-file plug-in
picgo install rename-file

#Configure rename-file plug-in to enter interactive configuration
picgo config plugin rename-file

#The default configuration is as follows
fix-dir/{localFolder:2}/{y}/{m}/{d}/{h}-{i}-{s}-{hash}-{origin}-{rand:6}: ()

#We only pay by year/month/day /hashIn the manner of
{y}/{m}/{d}/{hash}
Copy the code

After the configuration is successful, files uploaded to OSS will be stored in {y}/{m}/{d}/{hash}.js directory level

Image compression

Taking screenshots on a MAC, because of the high resolution of the MAC screen, the screenshots we generate will also become very large, which will consume a lot of our OSS traffic. So we need to use plug-ins to compress image files to a certain extent when uploading OSS.

#Installing the COMPRESS plug-in
picgo install compress

#Select COMPRESS to use as a converter
picgo use transformer
Copy the code

If the current plug-in is stuck in the installed state, it may be because PICgo called the NPM installation by default. Go to the. Picgo directory, delete the node_modules directory, and reinstall using CNPM. More questions can be found in the plugin issues👉 github.com/JuZiSang/pi…

conclusion

All the way down, pit is still very much, mainly in the familiar with picgo plug-in system, plug-in installation (NPM pit dad goods) need to spend time. After configuration, online images can be used in Typora without feeling, which is very convenient.

At the same time, I also feel that NodeJS has brought a broader application space for front-end developers, allowing front-end developers to jump out of the browser framework and implement systematic plug-ins around a certain application point in toolchain development. This software development mode allows more people to participate in and constantly improve the functions of the software. People’s needs can also be met through open source plug-ins, and they can even develop plug-ins that meet their own use scenarios and share them with those in need through open source. Code, make life better, hope this sentence is closer and closer to us.

References:

  • PicGo App official documentation
  • Picgo-core official documentation
  • picgo-plugin-compress
  • picgo-plugin-rename-file