# 如何用github+picgo自建图床

这部分还未完工，等我梳理一下步骤写我自己能看懂的

# 写在前面大部分人更推荐使用凡凡大佬的方法

原文链接：https://fyfan.cn/2024/03/07/小凡de博客创建日记/Shoka及Shokax使用自己的图床/

凡凡大佬做的教程里面修改的内容很少，更适合绝大多数人。

他只修改了下面这部分代码里的第五行，把一个比较复杂的函数改为写死的链接。

这个方法最简单，主题里最后显示的链接就是下面设置的链接+图片名。

var parseImage = function(img, size) {
    if (img.startsWith('//') || img.startsWith('http')) {
      return img
    } else {
        return'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img
//修改为 return 'https://images.weserv.nl/?url=https://gitee.com/fufan1025/blog_img/raw/master/'+img
    }
  }

我下面改的更复杂一点的代码是给这个图片的链接加了个图片尺寸的后缀，如果你在图床里上传的图片太大，在图片链接后缀里定义一个图片尺寸，让这张大图以小一些的图片输出，图片会显示的更快一点。

比如这张图片：
https://wsrv.nl/?url=https://cdn.jsdelivr.net/gh/Onsaki/oimage/cover/bg-4.jpg
这张图我上传的原图尺寸是2560*1317

而通过在链接添加定义尺寸的后缀就可以加载任意更小尺寸的图片。

比如这样：
https://wsrv.nl/?url=https://cdn.jsdelivr.net/gh/Onsaki/oimage/cover/bg-4.jpg&w=1280&h=720

我不确定是不是能给整个网站的加载速度有优化，但图片加载的快一点会浏览体验更流畅。也会显得网站很高级（bushi）

两个方法各自有各自的使用场景，相对来说大部分人更推荐直接像凡凡大佬把链接写死的方法，更方便，更不容易出错。

OK，以上部分看明白了就可以选一个适用自己的方法修改主题的配置了，如果要按凡凡大佬的修改方式修改的话点击上面的原文链接，看他的原文，我这里知识很简单的概括了一下。

下面部分是我自己的修改方式，仅供参考

# 主题需要修改的代码

在<root>\themes\shoka\scripts\helpers\engine.js打开找到下面的代码部分修改：

var parseImage = function(img, size) {
    if (img.startsWith('//') || img.startsWith('http')) {
      return img
    } else {
        return'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img
    }
  }

修改为：

  var parseImage = function(img, size) {
    // 如果是完整URL，直接返回
    if (img.startsWith('//') || img.startsWith('http')) {
        return img;
    } else {
        // 解析尺寸参数（如果size格式是"宽x高"）
        let width = 1280;
        let height = 720;
        
        // 尝试从size参数中提取宽高（如"400x300"）
        if (size && /^\d+x\d+$/.test(size)) {
            const [w, h] = size.split('x').map(Number);
            width = w;
            height = h;
        }
        
        // 生成wsrv.nl格式的图片链接
        return `https://wsrv.nl/?url=https://cdn.jsdelivr.net/gh/"githubID"/"仓库名"/${encodeURIComponent(img)}&w=${width}&h=${height}`;
    }
};

# 修改部分代码详细说明

# parseImage 函数详细解读

# 函数定义与参数

var parseImage = function(img, size) { ... }

定义了一个名为 parseImage 的匿名函数
接收两个参数：
- img：图片的路径或 URL 字符串
- size：可选参数，用于指定图片尺寸，格式为 "宽 x 高"（如 "400x300"）

# 完整 URL 判断逻辑

if (img.startsWith('//') || img.startsWith('http')) {
    return img;
}

检查图片路径是否为完整 URL：
- 以//开头（协议相对 URL，可自动适配 HTTP/HTTPS）
- 以http开头（包括 HTTP 和 HTTPS 协议）
如果是完整 URL，直接返回该 URL，不做额外处理

# 相对路径图片处理（else 分支）

# 默认尺寸设置

let width = 300;
let height = 300;

为图片设置默认尺寸为 300x300 像素
当未指定 size 参数或 size 格式不正确时使用此默认值

# 尺寸参数解析

if (size && /^\d+x\d+$/.test(size)) {
    const [w, h] = size.split('x').map(Number);
    width = w;
    height = h;
}

正则表达式/^\d+x\d+$/用于验证 size 格式是否为 "数字 x 数字"
解析过程：
1. 使用split('x')将字符串按 "x" 分割为数组
2. 使用map(Number)将分割后的字符串转换为数字类型
3. 更新 width 和 height 变量为解析出的数值

# 生成图片链接

return `https://wsrv.nl/?url=https://cdn.jsdelivr.net/gh/"githubID"/"仓库名"/${encodeURIComponent(img)}&w=${width}&h=${height}`;

构建基于wsrv.nl图片处理服务的 URL：
- wsrv.nl：一个提供图片处理服务的第三方平台
- 原始图片源：https://cdn.jsdelivr.net/gh/Onsaki/oimage/shoka/
- `encodeURIComponent(img) ：对图片相对路径进行 URL 编码，处理特殊字符
- 尺寸参数：w（宽度）和h（高度）控制图片大小

# 函数作用总结

该函数主要用于统一处理图片路径，实现：

对完整 URL 图片直接返回，不做修改
对相对路径图片，自动拼接基础图片服务器地址，并通过第三方服务处理为指定尺寸
确保图片路径的安全性（通过 encodeURIComponent 处理特殊字符）

这种处理方式常见于需要标准化图片加载的系统中，如内容管理系统、博客平台等，可以统一控制图片尺寸和来源。