所有文章 on FloatSheep's Blog

探索 | 我只是想保存一个 Key！

Fri, 03 May 2024 14:14:21 +0800

最近在写 BlogOnNpm 自动更新版本号功能的时候在储存数据方面遇到了个问题，就有了这篇文章

正文 #

如题，如何在 Service Worker 中储存数据？

当我们在写普通的 JavaScript 时，我们肯定会这样储存和读取数据：

localStorage.setItem("Information", "Token BBB-BBB-BBB");
localStorage.getItem("Information");

这种方法是使用 localStorage 进行的数据储存和读取，这里是 MDN 对于 localStorage 的文档：

Window.localStorage - Web API | MDN

但如果我想要在 Service Worker 中进行数据的储存和读取，使用 localStorage，就会发生这样的事情

对，你没看错，sw.js 中会报 localStorage is not defined

根据 StackOverflow 上的帖子，为了安全，浏览器禁止从 Web Worker 进程（也就是 Service Worker 运行的进程）访问 localStorage 和 sessionStorage

但是我们还需要储存数据，要怎么办呢？

这就可以使用替代方案了

使用 Message Channel API & Broadcast Channel API 储存数据 #

这种方法本质上也是使用了 localStorage，但是和直接使用 localStorage 不同的是，这种方法是 Service Worker 将需要储存的数据发送到 Window 线程，在 Window 线程中进行数据的存储

这是 Message Channel API 和 Broadcast Channel API 的伪代码，可供参考（代码来自 StackOverflow）：

// Message Channel API
 // include your worker
 var myWorker = new Worker('YourWorker.js'),
   data,
   changeData = function() {
     // save data to local storage
     localStorage.setItem('data', (new Date).getTime().toString());
     // get data from local storage
     data = localStorage.getItem('data');
     sendToWorker();
   },
   sendToWorker = function() {
     // send data to your worker
     myWorker.postMessage({
       data: data
     });
   };
 setInterval(changeData, 1000)

// Broadcast Channel API

// sw.js
const channel4Broadcast = new BroadcastChannel('channel4');
channel4Broadcast.postMessage({key: value});

// Window
channel4Broadcast.onmessage = (event) => {
    value = event.data.key;
}

使用 IndexedDB 储存数据 #

IndexedDB 类似于 RDBMS，是一个基于 JavaScript 的面向对象数据库，用于在客户端存储大量的结构化数据

但是，直接使用 IndexedDB 会很复杂，所以我推荐使用 localForage 这个库简化操作

localForage 具有两种方法，回调 API 和 Promise，你可以根据需求自行选择

这里是一个简单的示例：

// sw.js
self.importScripts("https://registry.npmmirror.com/localforage/1.10.0/files/dist/localforage.js");

self.addEventListener("fetch", (event) => {
  localforage.setItem("Information", "Token BBB-BBB-BBB").then(() => {
    localforage.getItem("Information").then((e) => {
      console.log(e);
    });
  });
});

输出结果如下：

当然，localforage 还提供了无 Promise 版（同步函数），但是由于 Service Worker 基于 Promise 实现，所以 localforage 无法使用 localStorage 这类同步函数，因此，你获得的返回结果仍然为 Promise（因为 Cache API 和 IndexedDB 也是异步执行）

使用 Cache 储存数据 #

Service Worker 中的 Cache API 也可以用来储存数据，常规的 Cache 是用来缓存一些资源（比如 html），因此，如果你要直接使用 Cache API，你需要把网络请求放入 Cache

这是 MDN 的一段演示代码

var cachedResponse = caches
  .match(event.request)
  .catch(function () {
    return fetch(event.request);
  })
  .then(function (response) {
    caches.open("v1").then(function (cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(function () {
    return caches.match("/sw-test/gallery/myLittleVader.jpg");
  });

如果你需要用 Cache 储存键值，就需要一些特殊的方法，这里我们使用 ChenYFan 大佬的 Cache-DB 库来实现

这个库返回的仍然是 Promise，因此用法和 localForage 类似

这里是一段演示代码：

// sw.js
self.importScripts('https://registry.npmmirror.com/@chenyfan/cache-db/1.1.3/files')

const mainCache = new CacheDB("mainCache", "mainPrefix", { auto: 1})

self.addEventListener("fetch", (event) => {{
  mainCache.write("information", "Token BBB-BBB-BBB").then(() => {
      mainCache.read("information").then((e) => {
          console.log(e);
      })
  });
)}

或者使用 await 替代 then

// sw.js
self.importScripts('https://registry.npmmirror.com/@chenyfan/cache-db/1.1.3/files')

const mainCache = new CacheDB("mainCache", "mainPrefix", { auto: 1 })

await mainCache.write("information", "Token BBB-BBB-BBB");
await mainCache.read("information");

输出内容如下：

~~在 ChenYFan 的墙裂推荐下~~ BlogOnNpm 采用的是 Cache-DB 进行数据储存

这些是 Service Worker 进行数据储存的可行方法，可能还有更多

年度总结 & 展望未来 | 我的 2023

Wed, 07 Feb 2024 19:49:31 +0800

第一次写年度总结，时间已经快逼近农历春节了呢

与其说是总结？不如说是总结 + 吐槽

关于博客 #

这年倒是没发生什么大事，不过从上学时期的咕咕咕变到放假时期的经常更新，还是挺难见的

关于…我？ #

2023 年是很神奇的一年呢，上半年的研学活动，作为代表学生发言~~但是忘词了啊！！！！！！~~，下半年刚开学就被来了个下马威，开学典礼要上去演讲 ~~我当时都快疯了啊！！！！！谁能懂我（悲）~~ :tired_face_color:，真是祸不单行呢

除了日常，好像还有学习？

2023 下半年英、政、史的任课老师都换了（悲）:loudly_crying_face_color: 不仅如此，还多了门物理

来说说我对这些老师的看法吧~~顺便吐槽吐槽~~

对老师的看法 #

语文老师：我们“亲切”的称呼她为“XX奶奶”，代替的内容就不方便说出来了。同时，语文老师也是班主任~~u1s1，能当上班主任的老师果然很多招数~~
数学老师：他人其实挺好，但是我们班的杂种（杂合体）实在是太智慧了，在他的课上聊天、扔东西、画画······~~原来这就是别的老师口中的好班级么~~
英语老师：两个英语老师都一样，很凶。但是，我们这些好学生群体就不这么认为了，我个人是觉得两个都差不多~~反正又不是我挨骂（笑）~~
地理老师：作为课代表，我就不多做评价了，这是我们班某些人对她的评价：“某些老师啊，当上了班主任就飞了”
生物老师：温柔（确信）~~就是对我的要求能不能别这么高（ 46 分都要被说一顿~~

其他的就没有评价的意义了，~~反正都一个死样~~

对『Classmates』的看法 #

男生中的一大部分，都不是什么好东西（虽然还没有抽烟、喝酒的程度）
- 这个学期举报了一些人，然后被这些人叫做“告人精”，这就是“急了，急了！”的典型表现，纯乐子
女生中的一小部分，喜欢勾心斗角（另一部分，喜欢磕 CP，恰好我也在他们的 CP 里面。对于这种人，我已经没办法评价了，强制把你别人绑在一起（不管你是男或女，甚至磕双男）
男生中一大部分的一小部分（以XXX为中心），继承了女生的优良传统，顺便融入了男同、小丑行为、孤立等构成了一个杂合圈，在这个杂合圈内生存着许多杂合体

在这以外的其他人？

至少从表现上来看，是好种

希望 2024 年能对『Classmates』有所改观

对自己的看法 #

~~有点犯贱~~，比较内向，其余还好

希望 2024 年能外向起来吧

对于学习的看法 #

怎么说？反正学习很重要，毕竟普高和职高的差距在那儿，就算国家扶持职业教育，目前也改变不了什么:woozy_face_color:

对于未来的看法 #

路就在自己脚下，车马就在自己手中，现在不拼搏，何时才努力？

希望 2024 年是学业上的进步，是生活上的改变，是精神上的焕发
希望自己能甩掉拖拉的习惯，~~23年的 Todo 到现在都还没完成~~
希望自己能有宽广的交际圈，毕竟那种遭遇，放谁身上都不好受吧

家庭服务器指南

Wed, 07 Feb 2024 15:05:18 +0800

为什么需要一个家庭服务器 #

这是一个很根本的问题，为什么我们需要家庭服务器？

集中存储：家庭服务器提供一个集中的位置来储存媒体、文件和其他数据，便于管理和访问。

可靠的备份解决方案：家庭服务器可以用来备份重要文档和媒体，防止数据丢失。

随时可用：服务器通常会一直开机运行，这意味着您可以随时访问存储在上面的数据。

家庭自动化和安全平台：家庭服务器可以用来控制智能家居设备，增强家庭安全。

减轻主 PC 负担：将文件存储和管理任务迁移到服务器上，可以减轻您主要使用的电脑的压力。

节约费用：与长期依赖云服务相比，自己搭建和运行家庭服务器可能是一个更经济的选项。

测试、修补和游戏的机会：家庭服务器给予用户自由地测试和学习服务器管理和网络配置的机会，对于有兴趣的人来说，这是一个理想的学习平台

以上由 GPT-4 Turbo 回答

安装系统 #

服务器，首当其冲就要稳，所以我用了 Ubuntu 作为服务器系统，安装过程不在概述，推荐使用 Ventoy 安装，这样不需要额外的操作

为什么放弃 Windows？ #

资源占用：Windows 本身就很臃肿，一个非精简版 Windows 10 开机内存都有 1G 上 2G 的能力了
Docker 不完整：截至本文书写时（2024/2/7），Docker Desktop（MacOS / Windows）依然不支持 host 网络模式，这就导致了 IPv6 配置麻烦等。当然，你可以在 WSL2 中安装原生 Docker，然后在 WSL2 外部使用 WSLPP 进行映射。或者，你也可以将 WSL2 的网络模式修改为镜像网络
WSL 子系统体验蛋疼：子系统固然方便，但是内存占用不是一般的大，使用时还需要配置分页文件

配置环境 #

设置合盖操作（笔记本） #

如果你是笔记本(GNOME 桌面)，如下：

sudo apt install gnome-tweaks

安装完成后打开优化工具，选择 General（通用） -> Suspend when laptop lid is closed（笔记本电脑盖合上时挂起） 右侧按钮设置为关闭

打开 SSH #

sudo apt update
sudo apt install openssh-server

设置开机自启动

sudo systemctl enable ssh

安装 Docker #

使用 Docker 容器可以帮助我们更方便的搭建项目

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

如果以上安装后无法使用 Docker Compose，你可以手动安装

sudo apt-get install docker-compose

添加用户到 Docker 组 #

这个过程应该一些文章没有，可以让你执行 Docker 系列命令时无需 root 权限

sudo usermod -aG docker ${USER}
sudo systemctl restart docker
sudo newgrp docker
sudo chmod o+rw /var/run/docker.sock

重开终端后即可

安装 Nginx Proxy Manager #

安装 Nginx Proxy Manager 后可以帮我们更好的配置项目反向代理

新建一个文件夹，进入后创建 docker-compose.yml

使用如下 docker-compose.yml

version: '3'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    network_mode: "host"
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

启动服务

docker-compose up -d

对于使用 Cloudflare 的人，你可能遇到 400 错误，你可以参考如下配置

进入你的 Proxy Hosts 配置界面，选择 Advanced，添加如下内容

client_header_buffer_size 32k;
large_client_header_buffers 4 32k;

保存即可

配置映射 #

此处有两种方案

Cloudflare Argo Tunnel（无需公网）
IPv6 DDNS + Cloudflare CDN（需要 IPv6 公网可用）

本文演示第二种方案

docker run -d --name ddns-go --restart=always --net=host -v /opt/ddns-go:/root jeessy/ddns-go

如上，然后进入 IP:9876

此处可以取消 IPv4 设置，然后我们配置 DNS 服务商

此处以 Cloudflare 举例，点击 DDNS-GO 提供的地址

创建令牌 -> 编辑区域 DNS（使用模板）

更改区域资源为 | 包括 | 账户的所有区域 | 你的区域 |

点击 “继续以显示摘要”，复制，粘贴到 DDNS-GO 的 Token 框，选择保存就好

翻到 IPv6 配置，选择通过网卡获取，在 Domains 填入一个子域名（根域名可以注册或者白嫖，此处不详细展开）

这里我们用 egcn.xxx.xx 举例子，填入进去后保存，转到 DNS 解析

假如我已经配置了一个项目，在 Nginx Proxy Manager 后台指定的域名为 lp.xx.xx

我们新建一个 CNAME 解析，像这样

lp.xx.xx 是 egcn.xxx.xx 的别名并通过 Cloudflare 代理其流量

保存即可

这样，一个家庭服务器就搭建且暴露在了公共互联网上

为 Hugo 添加文章摘要

Sat, 03 Feb 2024 12:29:19 +0800

这篇文章适用于所有 Hugo 主题，对于不同的主题，你需要按需更改前端代码

对于 Hexo，你可以用 Tianli 的文章摘要

写这篇文章的原因？ #

看到木木的博客上更新了篇利用 Gemini Pro 添加摘要的文章，所以就折腾了一下

准备 #

需要这些东西

API 密钥（Gemini）
一个合适的网络，因为会用到 GitHub、Google、Vercel、Cloudflare
脑子

获取 Gemini Pro 的 API 密钥 #

Google AI Studio

访问之后选中左边的 Get API Key 选项卡，选择 Create API Key in new project

复制下来即可

部署 API Proxy #

这里有两个选择，Netlify 和 Vercel

目前 Netlify 注册（似乎只针对 +86 区号）需要拍身份证上传，毕竟是个境外平台

本文以 Vercel 演示

antergone/palm-proxy

访问，复制仓库，Import 仓库为自己的，改个名字，完美

https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fantergone%2Fpalm-proxy

把这串链接的 antergone 和 palm-proxy 改为你自己的用户名和仓库名，然后访问

部署 API 转换 #

我们需要把 Google 的 API 转换成 OpenAI 的 API 格式

zuisong/gemini-openai-proxy

进入 dist 目录，复制 main_cloudflare-workers.mjs 的内容，粘贴到新创建的 Cloudflare Worker 里面就行

然后修改一下内容，全局搜索 BASE_URL 把值改成你部署的 API Proxy

全局搜索 apiKey 把代码改成字符串，值写为你的 Gemini Pro API Key

自用设置（防盗链），全局搜索 origin 修改值为你的博客地址（可选）

前端代码 #

本节仅适用于 Hugo

进入博客根目录，进入文件夹 layouts/partials

新建 gemini.html

内容如下

<div class="post-ai" onclick="geminiAI()">
  <img alt="Static Badge" src="/gemini.svg" />
</div>
<style>
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .post-summary-result svg {
    animation: spin 1s infinite linear;
  }
  .post-summary-result {
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
    background-color: var(--light-header);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    min-height: 3rem;
    max-width: 41rem;
  }
  .post-ai {
    margin-bottom: 1rem;
  }
</style>
<script>
  let postAI = document.querySelector(".post-ai");
  let postTile = document.getElementById("title").innerHTML; // 此处修改为你的博客 Title id
  let element-posts = `<div class="post-summary-result">加载中...</div>`;

  async function geminiAI() {
    // 尝试获取现有的摘要或错误信息元素并移除
    const existingResult = document.querySelector(".post-summary-result");
    if (existingResult) {
      existingResult.remove();
    } else {
      postAI.insertAdjacentHTML(
        "afterend",
        element-ai
      );
    }
    let GeminiFetch = "你部署的地址";

    try {
      let postAIResult = document.querySelector(".post-summary-result");
      let input = document.getElementById("posts-content").innerHTML; // 此处修改为你的博客内容 ID
      let inputHanzi = input
        .replace(/\n/g, "")
        .replace(/[ ]+/g, " ")
        .replace(/<pre>[\s\S]*?<\/pre>/g, "")
        .substring(0, 30000);
      let toAI = `"文章标题：${postTile}，具体内容：${inputHanzi}"`;
      const res = await fetch(GeminiFetch, {
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
        body: JSON.stringify({
          model: "gemini-pro",
          messages: [
            {
              role: "system",
              content: `You are a highly skilled AI trained in language comprehension and summarization. I want you to read the text separated by triple quotes and summarize it into a concise abstract paragraph. The aim is to retain the most important points and provide a coherent and readable summary that can help one understand the main points of discussion without having to read the entire text. Avoid unnecessary details or tangent points.
Just give me output and nothing else. Do not enclose responses in quotation marks. Answer in Chinese. You must read the whole article and make the most concise summary possible, which summarizes the content well.You should output the content in its entirety, not leave some behind, and when you are complete, you should issue the DONE command. `,
            },
            { role: "user", content: toAI },
          ],
          temperature: 0.7,
          stream: true,
        }),
      });
      const reader = res.body.getReader();
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          break;
        }
        const text = new TextDecoder().decode(value);
        const match = text.match(/DONE/);
        if (!match) {
          const textJson = JSON.parse(text.substring(5));
          const resData = textJson.choices[0].delta.content;
          if (resData.length > 0) {
            postAIResult.textContent += resData;
          }
        }
      }
    } catch (error) {
      // 在 post-summary-result 元素内部显示错误信息
      let postAIResult = document.querySelector(".post-summary-result");
      postAIResult.innerHTML =
        '<div class="post-ai-error">生成摘要时出错，请重试。</div>';
      console.log(error);
    }
  }
</script>

参照注释修改即可

对于 Hugo 中文章 id 和标题 id 的获取方法，可以打开 F12，用鼠标指针定位文章内容元素和标题元素，记录下类，进入 layouts/_default/single.html 中修改这些地方，加入 id="title" 和 id="posts-content" 就好

然后添加 svg 徽章，这里是一个可以用的示例

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="121" height="20" role="img" aria-label="Gemini: 文章摘要"><title>Gemini: 文章摘要</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="121" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="66" height="20" fill="#555"/><rect x="66" width="55" height="20" fill="#007ec6"/><rect width="121" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0yMS42NCAzLjY0bC0xLjI4LTEuMjhhMS4yMSAxLjIxIDAgMCAwLTEuNzIgMEwyLjM2IDE4LjY0YTEuMjEgMS4yMSAwIDAgMCAwIDEuNzJsMS4yOCAxLjI4YTEuMiAxLjIgMCAwIDAgMS43MiAwTDIxLjY0IDUuMzZhMS4yIDEuMiAwIDAgMCAwLTEuNzJNMTQgN2wzIDNNNSA2djRtMTQgNHY0TTEwIDJ2Mk03IDhIM20xOCA4aC00TTExIDNIOSIvPjwvc3ZnPg=="/><text aria-hidden="true" x="425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="390">Gemini</text><text x="425" y="140" transform="scale(.1)" fill="#fff" textLength="390">Gemini</text><text aria-hidden="true" x="925" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">文章摘要</text><text x="925" y="140" transform="scale(.1)" fill="#fff" textLength="450">文章摘要</text></g></svg>

部署完成！

技巧 ++ | 巧妙绕过 Referer 限制

Tue, 30 Jan 2024 18:56:27 +0800

本文代码实现以图片为例

Referer 限制，老生常谈了，也就是防盗链

对于如何绕过这个东西，目前最好的方式估计是写一个 API 代替请求，毕竟 Service Worker 不能修改 Referer，浏览器也限制了 JavaScript 对 Referer 进行修改，所以我们可以用一个 API 代替请求

确定实现目标 #

接受请求参数
提取请求参数中的 url 和所需要的 referer
对 url 进行请求
将请求后的内容返回前端

实现 #

我们首先造出一个简单的事件处理程序

import https from 'https';

export default async function handler(request, response) {
  const { fetch: fetchUrl } = request.query;

    response.setHeader('Content-Type', 'text/plain');
    response.send(fetchUrl);
    response.statusCode = 200;
}

我们将 fetchUrl 传入 b，请求查看，已经给我们返回了我们所请求的值（b），那么接下来请求这个值，然后返回请求的结果

将代码稍作更改

  try {
    https.get(fetchUrl);

    response.setHeader("Content-Type", "application/json");
    response.json({ status: "ojbk" });
  } catch (error) {
    response.setHeader("Content-Type", "application/json");
    response.json({ error: error.message });
    response.statusCode = 500;
  }

查看请求，返回了 { status: "ojbk"}

接着我们让它返回请求的数据

  try {
    const responseData = await new Promise((resolve, reject) => {
      https
        .get(fetchUrl, (res) => {
          let data = "";

          res.on("data", (chunk) => {
            data += chunk;
          });

          res.on("end", () => {
            resolve(data);
          });
        })
        .on("error", (error) => {
          reject(error);
        });
    });

    response.setHeader("Content-Type", "application/json");
    response.send(responseData);
  } catch (error) {
    response.setHeader("Content-Type", "application/json");
    response.json({ error: error.message });
    response.statusCode = 500;
  }

请求一个网页，可以发现已经返回了网页的文本内容，然后我们加上 referer 设定

把请求改成这样就行

const options = {
    headers: {
        "Referer": "https://blog.hesiy.cn/"
    }
}

https.get(fetchUrl, options, (res) => {
    ...
})

然后我们请求一张图片看看吧

返回了一堆乱码就算成功了

接着我们针对图片进行一下优化

import https from 'https';

export default async function handler(request, response) {
  const { fetch: imageUrl } = request.query;

  if (!imageUrl) {
    return response.status(400).json({ error: 'No image URL provided' });
  }

  const options = {
    headers: {
      'Referer': 'https://blog.hesiy.cn'
    }
  };

  try {
    https.get(imageUrl, options, (res) => {
      if (!res.statusCode || res.statusCode < 200 || res.statusCode >= 300) {
        return response.status(res.statusCode).json({ msg: '你请求个屁' });
      }

      response.setHeader('Content-Type', res.headers['content-type']);

      res.pipe(response);
    }).on('error', (error) => {
      response.status(500).json({ error: error.message });
    });
  } catch (error) {
    response.status(500).json({ error: error.message });
  }
}

请求一张图片，可以发现图片被渐进式载入了

好了，收工~ :smiling_face_color:

雷池 WAF 社区版安装 + Nginx 配置修改指南

Sat, 27 Jan 2024 18:23:11 +0800

2024 年第一篇文章的说，这篇文章写长亭雷池 WAF 的安装和更改 Nginx 配置

截至 2024/01/27 18:26 雷池 WAF 社区版只支持 Linux，所以本文所写的一切命令适用于 Linux

安装 #

根据雷池 WAF 社区版文档

我们使用如下的命令就可以安装：

bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release/latest/setup.sh)"

另外两种命令参见社区版文档 - 上手指南 - 安装雷池

修改 Nginx 配置 #

对于部分应用，可能需要修改 Nginx.conf 配置

以 Waline 为例，使用 Nginx 反向代理时需要加入配置

proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header REMOTE-HOST $remote_addr;

我们连接上服务器

输入命令

cd /data/<雷池路径>(可以在安装的时候设置)/resources/nginx/custom_params

发现这里有很多 Backend 文件

这里我们叫做 backend_x

我们打开 backend_x

在其中增加你所需要的配置，保存关闭

然后我们检查一下配置文件

docker exec safeline-tengine nginx -t

确保没有任何输出

最后应用

docker exec safeline-tengine nginx -s reload

小米路由器 Docker 折腾指北

Sat, 30 Sep 2023 12:04:28 +0800

本文是对旧文的重写

准备工作 #

需要的工具（文件、硬件）如下：

路由 ROM（开发版 + 稳定版）
路由救砖工具
在 1GB=1024MB 换算下，剩余空间 ≥ 32GB 的 U盘（或移动硬盘）¹

以上工具（文件、硬件）除硬盘外均可在小米路由器官方网站下载

文章使用版本：

AX9000 开发版固件（Ver. 1.0.140）
AX9000 稳定版固件（Ver. 1.0.168）
MIWIFIRepairTool（Dat. 19/01/24）

正文 #

进入路由器后台，在常用设置 -> 系统状态中进行新建备份

然后使用手动上传功能更新开发版固件

等待 5~8 分钟，当路由器 System 指示灯亮为蓝灯闪烁或橙灯常亮时将路由器断电重启（Power 按键即可）

这时候访问路由器后台，进入高级设置 -> DOCKER，你也许会看见如下页面

这样即代表你安装成功了

接下来格式化设备

使用你所喜爱的磁盘格式化工具将存储设备格式化为 EXT4（Linux）就好²

接着将储存设备插入至路由器 Mesh 组网面，然后对设备进行重启

重启完成后你可以在路由器管理页面的存储状态中查看到你的设备信息

我们首先创建虚拟内存³，然后转到高级设置 -> DOCKER 对 Docker 进行安装，等待安装完成后点击安装第三方管理（此处由于天朝网络特性，可能会失败）

安装完成后点击 管理Docker

And then, enjoy it!

拓展玩法 #

开启路由器 SSH 权限 #

此处有两种方法（第一种也许被修复了

第一种：

登录路由器后台，记下地址，类似于这样

http://[IP]/cgi-bin/luci/;stok=<STOK>/web/home#router

然后我们获取 STOK 和 IP 对下面的地址进行替换

http://[IP]/cgi-bin/luci/;stok=<STOK>/api/misystem/set_config_iotdev?bssid=Xiaomi&user_id=longdike&ssid=-h%3B%20nvram%20set%20ssh_en%3D1%3B%20nvram%20commit%3B%20sed%20-i%20's%2Fchannel%3D.*%2Fchannel%3D%5C%22debug%5C%22%2Fg'%20%2Fetc%2Finit.d%2Fdropbear%3B%20%2Fetc%2Finit.d%2Fdropbear%20start%3B

访问后显示 {"code": 0} 就成功了，然后修改密码

http://[IP]/cgi-bin/luci/;stok=<STOK>/api/misystem/set_config_iotdev?bssid=Xiaomi&user_id=longdike&ssid=-h%3B%20echo%20-e%20'admin%5Cnadmin'%20%7C%20passwd%20root%3B

第二种：

进入容器管理页面，创建一个容器，在 Image 中填写 busybox

接着转到高级容器设置，将 Console 更改为 Interactive & TTY (-i -t)

然后转到 Volumes 部分，新建 mapping 将 container 填写 /mnt 并将模式改为 Bind ，将 host 填写为 / 并将权限改为 Writable

部署之后在容器列表的快速操作中选择 Attach Console

然后执行如下命令：

chroot /mnt
vi /etc/init.d/dropbear

根据下面（Diff）进行更改:

...

start_service()
{
        + #flg_ssh=`nvram get ssh_en`
        + #channel=`/sbin/uci get /usr/share/xiaoqiang/xiaoqiang_version.version.CHANNEL`
        + #if [ "$flg_ssh" != "1" -o "$channel" = "release" ]; then
        + #       return 0
        + #fi
...
}

省略号部分代表内容相同，只用更改省略号以上（下）的内容

然后启动服务

/etc/init.d/dropbear start

修改 root 密码

passwd root

固化可参考《小米路由器 AX9000 开发版固件直接获取 SSH》的固化部分或《 [ax9000] 小米ax3600/ax6000/ax9000/ax5/ax6获取root权限》的固化部分

搭建 Memos #

在 Memos 的官方文档获取 compose 文件

如下：

version: "3.0"
services:
  memos:
    image: neosmemo/memos:latest
    container_name: memos
    volumes:
      - ~/.memos/:/var/opt/memos
    ports:
      - 5230:5230

对文件进行修改

version: "3.0"
services:
  memos:
    image: neosmemo/memos:latest
    container_name: memos
    volumes:
      - /mnt/docker_disk/docker_data/memos:/var/opt/memos
    ports:
      - 5230:5230

然后将文件内容粘贴到容器管理的 Stacks 部分部署即可

当然，你也可以手动部署

创建容器时 Image 改为 neosmemo/memos

高级设置部分的 Volumes 添加 mapping /mnt/docker_disk/docker_data/memos 模式改为 Bing 然后 host 改为 /var/opt/memos 并将权限改为 Writable

再转到 Network 新建一个 port mapping 双项都设置为 5230，网络选 host 就行，这样可以通过 路由器后台管理地址:5230 访问 Memos 了

创建小型服务器 #

转到 App Templates, 选择 Ubuntu 并部署

然后转到容器管理页面，Attach 或 Console 进入容器

输入如下命令：

apt-get update
apt-get install ca-certificates

然后安装一些工具

apt-get install vim
apt-get install systemctl

换源（可选）：

vim /etc/apt/sources.list

gg 然后 dG 然后所有内容

粘贴清华镜像源

deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-security main restricted universe multiverse

# 预发布软件源，不建议启用
# deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-proposed main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu-ports/ jammy-proposed main restricted universe multiverse

更新并去除最小化：

apt-get update
unminimize

配置 SSH:

apt-get update
apt-get install openssh-server

设置 root 密码：

passwd

修改配置文件：

vim /etc/ssh/sshd_config

在文件中找到 PermitRootLogin prohibit-password 并注释掉

然后添加 PermitRootLogin yes

重启一下服务

/etc/init.d/ssh restart

然后小型服务器就创建好了

当然，你也可以使用消费级硬盘，但是这样未免有点大材小用了，除非有人想用路由器做简易 NAS ↩︎
如果你的存储设备还需要存储文件，你可以将它分为两个分区，你只需要保证第一个分区为 EXT4（Linux）格式 ↩︎
如果你的存储设备容量 ≤ 32GB，创建分页文件后就无法安装 DOCKER ↩︎

将字体进行缓存，优化网站速度

Tue, 29 Aug 2023 11:51:43 +0800

看着现在动辄几兆的字体，在网页上使用会严重拖慢加载速度，有没有什么方法能够改善这种情况？

这时候我们就需要对字体进行优化了

对字体进行优化的方式有很多，比如：

分组加载字体
限制字体加载时间
队列加载
自定义字体显示

本文主要介绍如何通过缓存的方式优化字体加载

注：本文字体应用针对全站生效

0. 浏览器兼容性 #

1. 使用 Service Worker 进行缓存 #

此方法的前提是你已经注册好了 Service Worker

// Service Worker 文件

// 此处将文件路径修改为实际路径 
const fontFiles = [
  '/path/to/font.woff2',
  '/path/to/font.woff',
  '/path/to/font.ttf',
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('font-cache')
      .then(cache => cache.addAll(fontFiles))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }

        return fetch(event.request)
          .then(response => {
            const clonedResponse = response.clone();

            caches.open('font-cache')
              .then(cache => cache.put(event.request, clonedResponse));

            return response;
          });
      })
  );
});

// 注册文件

...

// 此处请根据需要添加要在网页中使用的字体名称
document.body.style.fontFamily = 'CustomFont';

2. 使用 Web Storage API 进行字体缓存 #

function isFontCached() {
    return localStorage.getItem('cachedFont') === 'true';
  }
  function cacheFont() {
    localStorage.setItem('cachedFont', 'true');
  }
  function loadFont() {

      // 此处请根据需要添加要在网页中使用的字体名称
    document.body.style.fontFamily = 'CustomFont';
  }
if (isFontCached()) {
  console.log('%c字体缓存: Existence', 'color: green; font-weight: bold;');
  loadFont();
} else {
  console.log('%c字体缓存: Missing', 'color: red; font-weight: bold;');
  console.log('%c字体缓存机制: Caching', 'color: blue; font-weight: bold;');
  cacheFont();
  loadFont();
  console.log('%c字体缓存机制: Success', 'color: green; font-weight: bold;');
}

@font-face {
  font-family: CustomFont;
  font-display: optional;
    /* 此处将文件路径修改为实际路径 */
  src: url("/path/to/font.ttf");
}

注：使用 localStorage 进行字体缓存仅适用于较小的字体文件，因为 localStorage 和 IndexedDB 的存储容量有限

如果字体文件较大，可能会导致存储空间不足或性能问题。

这种方法也无法享受到 Service Worker 提供的离线缓存和自动更新的功能，如果你的环境支持 Service Worker，推荐使用 Service Worker 缓存方案

3. 两种方法的不同 #

	Service Worker 缓存字体	IndexedDB/LocalStorage 缓存字体
功能和用途	提供高级缓存控制和离线支持	简单的数据存储和访问
存储位置	浏览器的缓存存储	浏览器的客户端存储
控制灵活性	高	低
离线支持	是	否
数据类型	二进制数据	字符串数据
功能复杂性	高	低
适用场景	高级缓存需求、离线访问	简单的数据缓存需求
字体大小	可缓存较大字体	仅缓存较小字体

引用 #

Hugo Shortcodes

Sat, 26 Aug 2023 10:10:04 +0800

什么是 Shortcodes #

Shortcodes（简码或短代码） 是 Hugo 为了避免内容作者因为 Markdown 语法的不足而插入 HTML 到内容中所创建的

简单地说，Shortcodes 就好比 Hexo 中的 外挂标签（Tag Plugins）

我们可以随意的编写属于自己的 Shortcodes

如何使用 Shortcodes #

你使用的 Hugo Theme 可能自带了一些 Shortcodes

通过翻阅主题文档，我们可以通过简短的语法在 Markdown 中使用这些 Shortcodes

Shortcodes 的调用方式 #

我们可以通过

{{< shortcodename parameters >}}

直接调用短代码

Shortcodes 目录 #

编写 Shortcodes 就像编写 Tag Plugins 一样简单

我们首先需要了解 Shortcodes 目录

Shortcodes 目录位于 ~/layouts/ 下,我们可以通过创建 HTML 文件编写自己的 Shortcodes

了解完目录，我们就可以尝试编写自己的 Shortcodes 了

编写 Shortcodes #

在 ~/layouts/shortcodes 下新建一个 HTML 文件

HTML 文件的名称就是短代码的名称

譬如:

myShortcodes
codeDemo

我们在 Markdown 中写作时就可以通过 {{< myShortcodes parameters >}} 的方式调用

现在我们将它命名为 colorfont

我们在里面写一段简单的 HTML

让我们可以通过 color=colorname 的方式传参给 Shortcodes，所以我们使用 {{ with .Get "color" }}

接着，我们使用 Shortcodes 让文字变红，这时候，我们就需要使用 {{ .Inner }} 来获取我们传给 Shortcodes 的文字

这样我们就完成了一个简单的 Shortcodes

来试试效果吧！

在 Markdown 中使用 {{< colorfont color="red" >}} Content {{</ colorfont >}} 来调用

Content

看，成功了！

它还有更多用法，比如插入一个 Emoji

我们还可以将它们融合在一起

泰库拉！

它还有许多的用法，就等各位去一一发掘了

警告! 如果你想要自定义 Shortcodes 的样式，你应该在另外的 CSS 文件中书写样式，你不应该在 Shortcodes 文件中直接使用 <style /> 语法，也不应该在 Shortcodes 中引入样式，那将会浪费不必要的流量

追溯 | Blog 回忆录

Fri, 25 Aug 2023 20:33:10 +0800

博客的开始 #

2019 年，我跟着互联网上的教程，使用 Hexo 搭建起了我的博客

当时的域名选用的还是 Freenom 的 slblog.ga

主题是 hexo-theme-miho

主题 Demo

后来博客文章慢慢变多，需求也随着扩大，基本的博客功能已经满足不了我了,于是开始了我的第一次换主题之旅

第一次更换主题 #

当时为了兼顾好看和功能多样,我在 Hexo Themes 上挑选了很久，最后看上了一款名为 Butterfly 的主题

OS: 当时 Butterfly 的版本还是 2.3.0，现在 Butterfly 的版本已经迭代到 4.9.0 了，时间过的真快啊

主题 Demo

使用 Butterfly 的这段时间，我学会了一点 HTML、CSS、JavaScript

也知道怎么修改主题达到自己满意的效果了

记得当时看的第一篇修改主题的文章是小康的《Hexo 魔改日记》

之后，我也学着修改主题，当时我做的弱智操作包括但不限于:

给全站的所有卡片添加毛玻璃样式（结果：导致风扇呼呼抱怨）
修改暗黑模式背景（结果：配色十分有一百分的不协调~~看起来和老年人表情包的配色没什么两样~~）

第二次更换主题 #

这次更换主题主要是别的主题实在是太炫酷了

更换的主题叫 Aurora

主题 Demo

不过由于一些不可抗力因素~~其实就是懒~~，这次换主题没有成功

交叉路口 #

看到苏卡卡和宝硕都是 Next.js

我也不能闲着，于是找了个模板套了进去，顺便给它添加了友链的功能

主页

友链页面

后来因为维护太麻烦了~~主要是 React 让我头疼，加上我的技术栈不是 React~~于是果断抛弃

安稳之路 #

最后我选择了 Hugo 作为 Hexo 的替代品

为什么选择 Hugo 作为 Hexo 的替代品:

Fast - 快,推送之后秒部署
Diverse - Go 模板语法
Simple - 主题源码可以通过新建 HTML 进行修改
Convenient - Hugo Module 让我们需要修改主题某处只需本地新建对应的文件即可,无需克隆整个仓库,也无需担心无法 Pull

~~编不下去了＞︿＜~~

在选择了 Hugo 之后,我用了 Congo 作为博客主题

主题 Demo

也许之后还会换上其他的构建工具,

也许会一直保持这样

Electron + Vue + Mdui

Fri, 22 Jul 2022 16:23:03 +0000

文章迁移计划，样式可能出错

开始前注意,这是将 Electron 集成到 Vue 项目中的演示,如果你没有基础,建议使用样板代码

Part 0.1: 什么是 Electron #

**Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。**你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

Part 0.5: 先决条件 #

良好的网络

Part 1: 安装 Node.js #

Electron 是基于 Node.js 构建的 / 并且使用 Node.js 还能完成平时 Web 程序所做不到的事情: 与系统打交道

Node.js

进入上述地址下载并安装 Node.js

Part 2: 安装 Vue-cli #

由于我更喜欢 Vue,所以我选择用 Vue 创建项目

$ npm install @vue/cli --global

安装 vue-cli

Part 3: 创建项目 #

$ vue create electron-vue-mdui

创建自己的项目

这里选择最后一项(Manually select features)

这里依照自己的需要,我选择了 Babel(语法编译器) | Router(Vue 路由) | CSS Pre-processors(CSS预处理器) Linter / Formatter(代码风格、格式校验)

这一步选择 3.x(或更高版本)

History 模式选择 Y

CSS 预处理器我更喜欢 Stlyus, 这里依照自己的喜好选择

这里墙裂建议使用 ESLint

我选择的是 ESLint + Prettier

在这一步建议两个都选择

这一步我们选择单独放置在文件夹下

然后这里是最后一步,让你选择下一次是否要用同样的配置, 我选择的是 N

等待安装完成就创建好了一个 Vue 项目

Part4: 集成 Electron 至 Vue 项目中 #

进入项目文件夹,打开终端

安装 electron 插件

$ vue add vue-cli-plugin-electron-builder

版本选择 ^13.0.0 就可

等待它安装完成,在安装的过程中它会重构项目架构

等到安装完成你就拥有了一个 Electron + Vue 的 App

运行 Electron 试试看吧!

$ yarn electron:serve

如果弹出一个程序就成功了

Part 5: 用 MDUI 写前端 #

MDUI - Material Design 样式的前端框架

MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用

首先安装它

$ yarn add mdui

然后我们需要引用它

编辑入口文件

加入一些代码

import mdui from 'mdui';
import '../vendor/mdui/css/mdui.css'; // 注意修改 css 文件的路径

在其他需要使用 MDUI 提供的 api 的 JS 文件头部导入 mdui 的 JS 文件 (来自 MDUI 作者)

然后 MDUI 就已经添加进你的项目了,接下来只需要简单写一下,就可以让你的项目使用上 MDUI

比如添加一个按钮

<button @onclick="javascript;;" class="mdui-btn mdui-color-teal mdui-ripple">button</button>

或者一个导航栏

    <div class="mdui-toolbar mdui-color-teal">
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">menu</i>
      </a>
      <span class="mdui-typo-title">Test App</span>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">search</i>
      </a>
      <a href="window.onload();" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">refresh</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">more_vert</i>
      </a>
    </div>

(代码从 VSCODE 编辑)

Part 6: 打包 #

在终端内输入打包命令进行打包

$ yarn electron:build

请注意,在打包过程中需要下载一些文件,但由于天朝网络特性,可能会 timeout,请自行替换源或使用科学上网

适用于 Android™ 的 Windows 子系统 Magisk + LSPosed 指南

Sat, 25 Jun 2022 19:10:05 +0000

⚠ 更新于2022/12/28 19:28 注意,MagiskOnWSA 已经被 GitHub 封禁

如果有需要,可以尝试另一个项目 PeterNjeim/MagiskOnWSA

此 repo 已经禁止 fork 有需要可以使用 GitHub 的 import 导入

如题,这篇文章讲一讲 WSA 怎么样拥有 Magisk + LSPosed

构建并安装你自己的 WSA #

https://github.com/LSPosed/MagiskOnWSA

这是 LSPosed 官方发布的 MagiskOnWSA 的 Actions

进入后 Fork 仓库

Fork 完后进入 Actions

按钮点上

然后进入 Build WSA 这个 Workflow

运行 Workflow

要这样配置

如果你要更改也是可以的

Build arch 代表构建的 WSA 版本,一般都是 x64

WSA release type 是 WSA 发布的通道,我一般选择Slow

Magisk version 是面具的版本,一般 Stable 就够用了,要尝鲜的可以用 Beta 或者 Canary

Variants of gapps 要选择 Pico,选其他的也可以,不过工作流结束完后会有提示,OpenGapps 不支持 Android 12

Remove Amazon AppStore 这个选 remove 就好,把亚马逊商店删掉

Root solution 选 Magisk / None 就不会 Root

选好之后点击 Run Workflow

运行好后进入 Artifacts 下载构建产物

这里的 1.95 GB 是源文件大小,用我的配置下载下来差不多是 870 MB 左右

下载完后解压

运行 Install.ps1

等到部署完成

这里 WSA 就安装完成了

配置 WSA #

打开 WSA 设置

先配置图形

⚠ Tips: Android 子系统目前 GPU 利用还不是很好,不要想着玩游戏

转到开发人员

打开开发人员模式

安装 ADB #

Android Platform Tools

安装 ADB,解压到C盘

进入高级系统设置 -> 环境变量 -> Path

把 ADB 目录写进去

配置 Magisk #

打开 Magisk

点击小齿轮

把Systemless hosts和Zygisk打开

重启子系统

如果主页这样显示就 OK 了

安装 LSPosed #

LSPosed Repo

下载最新的 Release中的 Zygisk 版本

放到一个位置,右键复制文件位置

进入 Terminal

连接到 WSA

adb connect 127.0.0.1:58526

然后上传文件

adb push 文件位置 /sdcard/

“文件位置” 记得替换成你自己的

打开 Magisk 中的模块

从本地安装

选择 Pixel 5

点击刚上传的 LSPosed

等待安装完成即可

安装酷安 #

CoolAPK

下载酷安安装包

终端命令:

adb install <文件位置>

安装 MT管理器 #

打开酷安

搜索 MT管理器,下载并安装

安装 LSPosed Manager #

打开 MT管理器,先授权超级用户权限

然后找到之前上传的 LSPosed 压缩包

右键长按并解压

进入解压后的文件夹,找到 Daemon.apk

点击它,然后点击功能 - > 签名 -> V3

签名完成后安装 Daemon_sign.apk

接着找到 Manager.apk

安装它即可

这样就安装完成了

怎样安装 Magisk / LSPosed 模块 #

先下载模块,用 adb push <文件位置> /sdcard/ 上传,然后安装即可

LSPosed 模块安装方法 #

进入 MT管理器,找到上传的的模块(APK),安装他

然后进入 LSPosed Manager 启用即可

那些奇奇怪怪的图床

Sun, 15 May 2022 11:17:12 +0000

文章迁移计划，样式可能出错

最近想用 IPFS 做图床但是发现的一堆奇奇怪怪的图床

(PS: 不会介绍传统的 GitHub + JSdelivr / SM.MS / 路过图床)

Bilibili 图床 #

十分简单

PicGO 搜索 bilibili

接着配置 Bilibili 图床

SESSDATA 可以登录哔哩哔哩后查看

进入哔哩哔哩,按下 F12

定位到应用 -> COOKIE

选择 https://www.bilibili.com

在名称内找到 SESSDATA

点击它

然后在 Cookie Value 中复制值,粘贴进去

之后确定,设置默认图床即可

良心的处理参数 #

哔哩哔哩图床有十分良心的处理参数

Type	URL
原图	不做更改
原分辨率, 质量压缩	原链接 + @1e_1c.jpg
原分辨率, 质量压缩(WEBP)	原链接 + @1e_1c.webp
规定宽, 高度自适应, 质量压缩(可变 WEBP)	原链接 + @104w_1e_1c.jpg
规定高, 宽度自适应, 质量压缩(可变 WEBP)	原链接 + @104h_1e_1c.jpg
规定高宽, 质量压缩(可变 WEBP)	@104w_104h_1e_1c.jpg
原分辨率(WEBP)	@104w_104h_1e_1c.webp

这是哔哩哔哩的处理参数

哔哩哔哩还有许多节点可以选择

自定义 CDN #

金山 CDN 路线:

i0.hdslb.com
i2.hdslb.com

阿里 CDN 路线:

i1.hdslb.com
14.hdslb.com
s1.hdslb.com
s3.hdslb.com

未知 CDN 路线:

s2.hdslb.com

~~Bilibili 图床有防盗链,如果你要在你自己的网站中用 Bilibili 图床,得先配置头~~

<meta name="referrer" content="no-referrer">

~~如果你用的 Hexo - Butterfly 则可以在配置文件中这样配置~~

inject:
  head:
      - <meta name="referrer" content="no-referrer">

2024 年 1 月 30 日更新：叔叔已经设置了禁止空头，目前哔哩哔哩图床使用有一些门槛了，如果你和我一样部分文章用了叔叔做图床，可以写一个跨域脚本

import https from 'https';

export default async function handler(request, response) {
  const { fetch: imageUrl } = request.query;

  if (!imageUrl) {
    return response.status(400).json({ error: 'No image URL provided' });
  }

  const options = {
    headers: {
      'Referer': 'https://www.bilibili.com'
    }
  };

  try {
    https.get(imageUrl, options, (res) => {
      if (!res.statusCode || res.statusCode < 200 || res.statusCode >= 300) {
        return response.status(res.statusCode).json({ error: 'Failed to fetch image' });
      }

      response.setHeader('Content-Type', res.headers['content-type']);

      res.pipe(response);
    }).on('error', (error) => {
      response.status(500).json({ error: error.message });
    });
  } catch (error) {
    response.status(500).json({ error: error.message });
  }
}

接着你可以写一个 Powershell 脚本进行替换

$rootPath = "./"  # 替换成你想要搜索的目录
$matchPattern = 'https://i0\.hdslb\.com/'  # 来匹配的URL
$replaceWith = 'https://api.hesiy.cn/api/cross?fetch=https://i0.hdslb.com/'  # 替换为新的URL

$markdownFiles = Get-ChildItem -Path $rootPath -Recurse -Filter *.md

foreach ($file in $markdownFiles) {
    $content = Get-Content -Path $file.FullName -Raw
    $newContent = $content -replace $matchPattern, $replaceWith

    Set-Content -Path $file.FullName -Value $newContent
}

Write-Host "所有Markdown文件中的URL已经更新完成。"

注意：如果你使用了早期的哔哩哔哩图床或者自定义了 CDN，你也要跟着进行修改

配套食用 #

浏览器插件

Typora 插件

配合 typora 食用更佳

如果用了很久之后,在上传时出现了错误,那就是 SESSDATA 过期了,重新去生成一个就好

NPM + UNPKG 镜像 #

使用这个方法前记得切换回原来 NPM 的注册表.因为其他镜像没有发布这个功能

十分简单

本地先登录,接着创建包,然后初始化版本,最后发布

指令:

$ npm login
$ npm init -y
$ npm version patch
$ npm publish

这样一个 npm 包就发布完了

接下来是收集的一些镜像

https://npm.elemecdn.com/ 饿了么(阿里 CDN)
https://unpkg.zhimg.com/ 知乎(阿里 CDN)
https://shadow.elemecdn.com/ 饿了么(阿里)(这个停止维护了)
https://code.bdstatic.com/npm/ 百度(百度 CDN)
https://cdn.jsdelivr.net/npm/ Jsdelivr(备案没封前是网宿 CDN | 后来备案封后是 Cloudflare + Fastly + Gcore)(可以自定义节点)

Jsdelivr 自定义节点只需要:

gcore.jsdelivr.net

fastly.jsdleivr.net

即可

4EVERLAND BUCKET #

这应该是 IPFS 的另一个方案(但是最多 1G)

PicGo 插件安装 #

搜索 s3 并安装

然后就去 4EVERLAND 注册一个账户

https://4everland.org/

这个网站似乎只能用以太坊钱包登录,GitHub 登录会提示不支持了(

我用的 MetaMask

注册之后创建一个桶

生成 API TOKEN #

点击你账户, 选择设置

转到 Auth Token

选择 Bucket Auth Tokens

点击 Generate 即可

本文章的 Key 在发布之前就删掉了,不要想着搞坏事

之后进入 PicGo 配置下

转到 Amazon S3

ID 和密钥粘贴进去

桶写你创建桶的时候的名字

节点用 https://endpoint.4everland.co

自定义域名是桶名.4everland.store

最后记得把这两个选项打开

IPFSUPLOAD(真正意义上的 IPFS 图床) #

本地装一个 IPFS DESKTOP

等他启动后先看端口

图中圈着的就是端口,然后去浏览器访问一下看看正不正常

http://localhost:5001/api/v0/add?pin=true

如果正常应该会提示 405 - Method Not Allowed

接着就是上传了

PicGo 安装一个 web-uploader

然后配置如图

IPFS网关我是用的我自己的,所以打了马赛克,你们可以自己先用 workers 反代一次,然后再用 CDN 过墙

你也可以直接 CDN 我代理好的 worker (IPFS 官网)

PS :我没有反代 IPFS 网关

回源: dl2p.taiyu.workers.dev

回源 HOST: dl2p.taiyu.workers.dev

回源端口: 443

回源协议: HTTPS

速度测试:

不给滥用,我设置了防盗链

DogeDoge 图床 #

没有什么说的,速度炒鸡快,使用要申请,现在应该申请不到了

有的可以用

BACKBLAZE B2 + Cloudflare #

首先猜到有人要提问: 为什么要加 Cloudflare?

因为 BACKBLAZE 有流量计费,但是他加入了带宽联盟,再加上 Cloudflare 超长缓存,≈ 完全免费

但是有10G空间

这是超出10G的价格

注册方法 ChenYFan 大佬已经写过了,与其再写一篇问文章,不如直接用他的~~(其实就是懒)~~

直接贴:

https://blog.cyfan.top/p/ce240368.html

云存储做图床 #

用 OneDrive Google Drive 做图床真的是闲

OneDrive #

参考 Spencer Woo 去搭建一个 onedrive-vercel-index 就行

Google Drive #

参考 ChenYFan 搭建一个 GDIndex 即可

大厂的对象储存 #

阿里云 OSS #

有很多人写,自己谷歌,反正价格挺便宜的

腾讯云 COS #

🤢 这东西不推荐,计费十分离谱,而且配置头超长缓存后 COS 会在用户请求时悄悄篡改 max-cache

新用户有 6 个月免费额度,之后就要开始付费了(

⚠ 流量包和储存包都很贵

又拍云 UOS #

又拍云似乎是没有免费额度的,但是又拍云有开发者联盟,只需要把他的 Logo 挂在你的网站页脚就行,甚至还能用一个徽章

徽章这样配置就行了

<img src="https://img.shields.io/badge/CDN-%E5%8F%88%E6%8B%8D%E4%BA%91-00b6ff?style=flat&logo=data:image/png;base64,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">

但是这个网站似乎有点慢,你可以把他的 SVG 下载下来放在本地引用

<img src="本地位置.svg">

总结 #

好用的图床千千万,你要自己去发现

我总结了 7 个免费图床,其中 DogeDoge 图床需要申请

如果细数的话,共有 8 个免费图床(每个云存储单独算一个)

GitHub 的多种访问方式

Sat, 14 May 2022 07:53:12 +0000

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻： https://cloud.tencent.com/developer/support-plan?invite_code=3gll8aqhc2kgg

Dev-Sidecar #

请注意,由于开发者边车的 Gitee 仓库被封锁,所以这个项目不再更新了

在使用之前,请观看知乎的一个讨论 如何评价《网络数据安全管理条例（征求意见稿）》第四十一条和第六十六条：建立数据跨境安全网关？

进入开发者边车的 Release 找到符合自己系统的版本,点击下载下载完成后安装,打开

系统代理建议不要开启加速服务可以设置端口

其他的就没什么好设置的了,只需要把 NPM 加速和 Git 加速打开即可 But 因为这个软件已经停更了,所以我非常不建议各位用

SwitchHosts + GitHub520 #

这个项目是以 Hosts 来加速的首先去 SwitchHosts 的 Release 接着下载安装 SwitchHosts 这样配置即可

如果遇到没有写入权限,就进入 Hosts 文件的属性,配置一下权限和去掉只读,玩 Windows 的应该都知道提权这东西吧

Watt Toolkit #

⚠ 更新: 2022/12/28 19:53 新版的 Watt Toolkit 已经去掉了 Socks 设置

Watt Toolkit

下载安装没什么好说的

进入软件勾选上所有的加速选项,然后选择 Hosts 加速模式 即可如果怕加速不了的话就勾上加速选项里的 Socks5 代理然后配置一下

sudo git config --global http.proxy 'socks5://127.0.0.1:8868'
sudo git config --global https.proxy 'socks5://127.0.0.1:8868'

8868 记得替换成你自己的端口

题外话 #

加速 npm 还是 Dev-Sidecar 和 local-npm 好用一点