前言

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

一. 准备

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

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

二. 创建网站

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

autoPicCDN

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

三. 修改参数

在 up.php 中修改参数：

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

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

四. 配置 PicList

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

PicList

PicGo

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

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

五. 配置 Typora

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

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

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

  1. 新建 themeable-light.user.css 文件，添加下面代码：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

:root {
    /* 代码块主题 */
    /* 顶部 */
    .md-fences {
        color: #c5c8c6;
        background-color: #F5F5F5;
        border-radius: 5px;
        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
        padding-top: 30px;
        font-family: monospace, 'PingFang SC', 'Microsoft YaHei';
    }
    
    .md-fences::before {
        background: #fc625d;
        border-radius: 50%;
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        content: ' ';
        height: 12px;
        left: 12px;
        margin-top: -20px;
        position: absolute;
        width: 12px;
    }

  }

}

/* Dark Mode (OS-level) */
@media screen and (prefers-color-scheme: dark) {
  :root {
}
  1. 新建 themeable-dark.user.css 文件，添加下面代码：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

:root {
    /* 代码块主题 */
    /* 顶部 */
    .md-fences {  
      margin:2rem 0;
      color: #c5c8c6;
      background-color: #262626;
      border-radius: 5px;
      box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
      padding-top: 30px;
      font-family: monospace, 'PingFang SC', 'Microsoft YaHei';
    }
    
    .md-fences::before {
      background: #fc625d;
      border-radius: 50%;
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
      content: ' ';
      height: 12px;
      left: 12px;
      margin-top: -20px;
      position: absolute;
      width: 12px;
    }

  }

}

/* Dark Mode (OS-level) */
@media screen and (prefers-color-scheme: dark) {
  :root {
}