Typora配合PicList快速上传图片并加速

前言

在Typora写笔记时不免使用图片，这里使用GitHub作图床，配合PicList上传，并通过jsdelivr实现CDN加速。

一. 准备

首先在 GitHub 中创建一个新的公共仓库。接下来生成一个新的 Token，地址为https://github.com/settings/tokens， Token 权限需要勾选write:packages和read:packages

Token 只显示一次，忘记了需要重新生成，注意保存

二. 创建网站

在服务器上创建一个新的网站和数据库，将下面项目打包后放入网站根目录并解压。

autoPicCDN

将项目中的数据库文件pic.sql上传到数据库中并替换覆盖

三. 修改参数

在 up.php 中修改参数：

一般选择 GitHub
USER 填写用户名
REPO 填写仓库名
TOKEN 填写第一步的TOKEN
数据库信息只需修改 dbname user pass，与第二步中一致

https://pic.imgdb.cn/item/64cb9b6d1ddac507cc346d67.png

四. 配置 PicList

下载 PicList（PicGo基础上开发）或者 Picgo，地址如下：

PicList

PicGo

安装 web-uploader插件
配置上传参数，填好后确认
1. API 地址填写up.php路径，如www.pic.com/up.php
2. POST 参数名填写 pic
3. JSON 路径填写 data.url

https://pic.imgdb.cn/item/64cb9b641ddac507cc3450c6.png

五. 配置 Typora

依次打开文件->偏好设置->图像
插入图片时选择“上传图片”
在最下方上传服务设定选择对应的应用 PicList或者 PicGo

六. Themeable 主题添加 Mac 风格代码块

在主题文件夹下建立两个文件对应 light 和 dark 模式。

新建 themeable-light.user.css 文件，添加下面代码：

 1:root {
 2    /* 代码块主题 */
 3    /* 顶部 */
 4    .md-fences {
 5        color: #c5c8c6;
 6        background-color: #F5F5F5;
 7        border-radius: 5px;
 8        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
 9        padding-top: 30px;
10        font-family: monospace, 'PingFang SC', 'Microsoft YaHei';
11    }
12    
13    .md-fences::before {
14        background: #fc625d;
15        border-radius: 50%;
16        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
17        content: ' ';
18        height: 12px;
19        left: 12px;
20        margin-top: -20px;
21        position: absolute;
22        width: 12px;
23    }
24
25  }
26
27}
28
29/* Dark Mode (OS-level) */
30@media screen and (prefers-color-scheme: dark) {
31  :root {
32}

新建 themeable-dark.user.css 文件，添加下面代码：

 1:root {
 2    /* 代码块主题 */
 3    /* 顶部 */
 4    .md-fences {  
 5      margin:2rem 0;
 6      color: #c5c8c6;
 7      background-color: #262626;
 8      border-radius: 5px;
 9      box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
10      padding-top: 30px;
11      font-family: monospace, 'PingFang SC', 'Microsoft YaHei';
12    }
13    
14    .md-fences::before {
15      background: #fc625d;
16      border-radius: 50%;
17      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
18      content: ' ';
19      height: 12px;
20      left: 12px;
21      margin-top: -20px;
22      position: absolute;
23      width: 12px;
24    }
25
26  }
27
28}
29
30/* Dark Mode (OS-level) */
31@media screen and (prefers-color-scheme: dark) {
32  :root {
33}

最后修改于 2023-08-03