其实，去年的此时，我已经开始开发 CKY.IM 这个博客，新的博客不再使用 Hexo 作为内容生成器，而是转而使用 Nuxt。选择 Nuxt 的原因不仅是因为部署方便，也是因为开发简单，功能强大。

我写了两篇文章：*重新开始：新博客的设计* 和 继续：对博客设计的再优化 说明我基本重构和迁移的思路。

此外，原内容依然可用，你可以点击导航栏中的 归档 来访问他们。

未来，域名 yfun.top 将在 2024 年 11 月底到期，我也将尽快将所有 yfun.top 服务和端点迁移至新的域名。

感谢过去三年的陪伴，现在我们一起书写新的篇章：）

那好，那就从源拉起。

域名

目前，JSEW 的域名已经开启中国大陆境内和境外双 CDN 加速，为用户提供快速的服务。

使用 s.cky.qystu.cc 替换 fastly.jsdelivr.net, cdn.jsdelivr.net 作为加速域名，遵循中国大陆相关地区的法律法规。

端点

目前仅支持使用 /gh 和 npm，并且自动开启 HTTPS 访问与 Gzip 压缩。

GitHub

GitHub 文件来源于 raw.githubusercontent.com，将自动转换路径，API 如下：

/gh/[USER_NAME]/[REPO_NAME]@[BRANCH_NAME]/[FILE]

请求链接：

https://s.cky.qystu.cc/gh/detalkjs/client@master/dist/detalk.js

需要注意的是，部分 CDN 的缓存时间会比较长，如果是仓库 master 等变动较快的分支不建议使用。如果你需要实时获取最新的 Commit，那么请在请求 URL 后追加 !latest，这样 JSEW 会自动 307 跳转至最新的 Commit Tag.

同时，如果没有指定分支名，则会自动默认为 master。

NPM

NPM 文件来源于 www.npmjs.com，将自动转换路径并获取文件 Hex，API 如下：

/npm/[PACKAGE_NAME]@[VERSION]/[FILE]

请求链接例如：

https://s.cky.qystu.cc/npm/@detalk/static@1.3.2/dist/detalk.js

如果当版本号为 @latest 时，为了避免缓存问题，将会自动 307 跳转至最新的版本号。

如果版本号为 @1 等只包含 major 或 minor 的形式时，将会自动 307 跳转至最新的以指定版本号为限制条件的完整版本号。

例如：

https://s.cky.qystu.cc/npm/@detalk/static@1/dist/detalk.js
Redirect to =>
https://s.cky.qystu.cc/npm/@detalk/static@1.3.2/dist/detalk.js

https://s.cky.qystu.cc/npm/@detalk/static@1.2/dist/detalk.js
Redirect to =>
https://s.cky.qystu.cc/npm/@detalk/static@1.2.1/dist/detalk.js

为了避免潜在问题，即使不指定版本号，也必须指定 @latest，否则无法访问。

自动压缩

除 Gzip 压缩外，目前 CKY#JSEW 还兼容部分文件的自动压缩功能。

例如，请求 main.min.js 文件，而目录下无对应文件，只有 main.js，那么则会自动获取 main.js 并进行压缩返回。

此功能目前适用于 CSS 与 JavaScript，只有在请求文件为 .min.js 或 .min.css 且对应文件不存在时可用。

感谢您对公益服务的支持！

我一直在寻找开源、可以免费部署的评论系统，在 Valine 发现隐私问题和 XSS 漏洞后，我就放弃了 Valine 和「无后端」解决方案。

Waline 是「有后端的 Valine」，保留了 Valine 的很多特性，但还是没有让我满意。

后来，我转到了 Twikoo，这也是我使用最久的评论系统。它有非常丰富的特性，但我最后还是弃用了它。

Detalk.js 的部署平台从名字就可以看出，基于 Deta Bases 和 Deta Micros. 这些平台对个人开发者免费使用，非常的友好。

服务端开发

Detalk.js 一开始就选择优先开发服务端，而前端则可以随意构建，有完整的服务端文档。

所以，我将主代码放到了 detalkjs/server 中，得益于 Deta 平台，现在可以一键部署，稍等片刻就可以直接使用。

服务端我直接从官方的 Demo 开始写，使用官方推荐的 Express 框架，代码语言选择 JavaScript.

在开发过程中，我发现 Detalk.js 的响应时长至少在 1s+，我推测是与 Deta 平台的运行方案和冷启动有关，但对于评论系统来说，这无伤大雅。

数据库

Deta 平台上，最方便的数据库就是 Deta Bases. 这又是一款 Key-Value 数据库，有着简单易于理解的 SDK 文档。

导入方法也很简单：

const { Deta } = require('deta');
const deta = Deta();
// 为了方便用户部署多个 Detalk，用户可自定义 Base Name.
const db = deta.Base(process.env.BASE_NAME || 'detalk');

使用方法整体类似于 yfun-lab/gh-worker-kv，对于部分代码的上手也是很简单的。

前往 Web 面板截图，可以看到，Detalk 所创建的数据库基本格式如下：

以 CMT_ 开头的存放评论，FUNCTION_ 开头的存放事件函数，还有一些关于站点的配置。

API

目前，所有后端的 API 都在 API | Detalk.js 可以查看。

部分 API 需要鉴权登录操作，部分为公共 API，只需要后端地址即可调用。

前端开发

我对前端 detalkjs/client 的简介是：

⚡ The fastest way to add Detalk (Based on Deta) to your website. | 将 Detalk (Based on Deta) 加入你的网站。

（这再次说明官方提供的前端只是一种方案，完全可以自己开发

也正因如此，前端的 NPM 包名是 @detalk/static （逃

打包

前端打包是 Webpack 5 方案，我多加了一个配置文件，可以打包出 JS, CSS 分离的版本。这样或许可以方便部分用户的引入需要。

但是从各方面来看，还是建议引入单 JS 的版本，大小约为 43kb，Gzip 压缩后约 12kb.

前端配置？

设计前端时有两种读取配置文件的方案，一种是类似于 Twikoo，从服务端读取，另一种是直接在 detalk.init 时配置。

明显，前者需要多发送 1 - 2 次 HTTP 请求，加载速度也会变慢，所以我选择了后者。

控制面板

控制面板也可以使用完全 API 自构建，但是，我们提供了「依托答辩」的官方后端：https://detalk-dash.netlify.app/

除可维护角度以外，都挺好的（

一些问题

Markdown 解析

如果你没有额外的配置，那么点击「预览」的时候。你肯定会发现需要等待一段时间。

我之前想把 Marked.js（号称轻量）的 Markdown 解析器加入 Detalk.js，结果发现包体积直接翻了一倍，于是放弃。

如果你需要更换解析器，不用担心，这里给出了方法。

URL 载入配置

前文说到，Detalk 并没有采取后端配置的方法，但是，我们还是支持了从 URL 载入配置。

关于这一特性，可见此处。

多语言的实现

Detalk.js 并没有默认提供多语言功能，这主要是因为不同站点的使用者受众不同，于是我决定这项功能可以由用户实现。

这依赖 window.DETALK_I18N 参数，如果没有此项，则会在 detalk.init 时由程序默认提供简体中文项。

实现代码可以见如下：

if (navigator.language == 'zh-CN') {
  window.DETALK_I18N = {
      loadMore: '加载更多',
      notAllowedInput: '输入内容不符合要求！',
      send: '发送',
      preview: '预览',
      reply: '回复',
      replyTo: '回复',
      cancel: '取消',
      loadingLoginFrame: '登录窗口加载中...',
      gotoLoginFrame: '请在登录窗口中继续',
      waitingInfo: '登录成功，正在获取用户信息...',
      loginSuccess: '登录成功',
      failedLoadingInfo: '获取用户信息失败',
      deleteConfirm: '即将删除 ID:[#ID] 评论，是否继续？',
      total: '共 [#TOTAL] 条评论',
      noComment: '暂无评论',
      up: '正序',
      down: '倒序',
      delete: '删除',
      top: '置顶',
      login: '登录',
      required: '必填',
      optional: '选填',
      nickname: '昵称',
      email: '邮箱',
      link: '网址',
      day: {
      justNow: '刚刚',
      minute: '[#TIME] 分钟前',
      hour: '[#TIME] 小时前',
      day: '[#TIME] 天前',
  }
} else if (navigator.language == 'zh-TW') {
    window.DETALK_I18N = {
      loadMore: '加載更多',
      notAllowedInput: '輸入內容不符合要求！',
      send: '發送',
      preview: '預覽',
      reply: '回复',
      replyTo: '回复',
      cancel: '取消',
      loadingLoginFrame: '登錄窗口加載中...',
      gotoLoginFrame: '請在登錄窗口中繼續',
      waitingInfo: '登錄成功，正在獲取用戶信息...',
      loginSuccess: '登錄成功',
      failedLoadingInfo: '獲取用戶信息失敗',
      deleteConfirm: '即將刪除 ID:[#ID] 評論，是否繼續？',
      total: '共 [#TOTAL] 條評論',
      noComment: '暫無評論',
      up: '正序',
      down: '倒序',
      delete: '刪除',
      top: '置頂',
      login: '登錄',
      required: '必填',
      optional: '選填',
      nickname: '暱稱',
      email: '郵箱',
      link: '網址',
      day: {
      justNow: '剛剛',
      minute: '[#TIME] 分鐘前',
      hour: '[#TIME] 小時前',
      day: '[#TIME] 天前',
  }
}

最后

Detalk.js 未来会与 ESHexoN 融合，在 ESHexoN 中提供管理面板。

同时，YFun's Blog 也会在后续更新有关 Detalk.js 的更多文章。

目前，此博客已经更换至 Detalk.js 评论系统，欢迎测试与使用！

友链

在这一年中，YFun's Blog 友链数量（不包括本站站点）为 9 个，其中很多都是大佬 (\=!!

其中，杜老师说 最活跃力！

文章

在 2022 年中，YFun's Blog 发布 6 篇文章。

其中，在 1 月 14 日到 8 月 4 日之间整整咕了七个月（

今年水了两篇文章，其余的自认为质量还行。

博客

与去年相同，YFun's Blog 依然在使用自己开发的 Theme Miracle.

今年 Miracle 已经迭代到 v2.2.1 版本，主要在修 Bug 和提升体验（比如高斯模糊又加回来了

目前，我正在使用 ESHexoN 编辑，如果想了解更多信息，可以看这篇文章：抛弃静态博客的缺点，用 ESHexoN 在线编辑！

此外，还有一个项目可能会在 2023 年初加入到 YFun's Blog 上，那就是 Detalk.js。我尝试用它实现自定义性更强的评论系统。

现在，Detalk 已具备基础功能，感兴趣的同学可以试用一下（（

统计

与去年一样，今年的数据是：N/A。

虽然 Cloudflare Web Analytics 在 2021 年 4 月份启用，但后来又将统计代码去除。所以关于本站的统计信息一直是个谜。

关于这一点，我有计划加入开源统计系统。

我希望是一款不会侵犯用户隐私、不收集用户指纹信息的统计系统，目前考虑 umami.

未来

我希望有时间可以重构这个 Blog，计划使用 Vue 3 + Nuxt.js + TypeScript。当然，这只是个计划。

更多

这个世界变化太快，我们生活中的每一秒都是在见证历史。

2022 已经过去，欢迎 2023 的到来，希望新的一年中，一切会变得更好。

Hexo 属于静态博客，很多同学给自己的博客加上 Pjax 是为了音乐播放器等功能不中断。

之前我也想过对博客和主题加入 Pjax 支持，但经过一番分析后觉得，这不仅引入了一个巨大的 jquery.pjax.js，反而优化效果不明显。

原理

其实，Pjax 的原理并不复杂。或许说，README 一开始就告诉你了：

pjax = pushState + ajax

其中 ajax 用于页面的新内容，pushState 改变浏览器状态。

很简单吧。

事实上，pjax 并不应该应用于整个页面当中。而应该只是局部更改。

这样，Blog 当中的导航栏、样式文件等就不需要重复下载与预览。

分析

以我使用 Miracle 为主题的博客为例，进入首页，按 F12 查看页面 Elements.

可以发现，页面主要更改的也就是 #page-main 部分，只需要实现动态刷新这部分的内容就可以了。

那怎么实现呢？

最小化的数据接口

现在生成的页面当中，有 <head> 部分声明大量样式与元信息，<body> 之下重复的页脚、导航栏，还有每个页面下方都有的一些 <script>。

很明显，我们不需要这些。我们只要 #page-main 中的主要内容。

最重要的是，Hexo 是静态博客，这一点只能在生成文件时进行。

载入 HTML

我是用 Cheerio 模块帮我完成这一工作。

const cheerio = require('cheerio');
const fs = require("fs");
const path = require("path");
const filePath = path.resolve('public/');

定义一个 parse function，打开文件并解析相关信息，顺便把不是 HTML 的文件排除掉。

const parse = (filename, fullpath) => {
    // 不是 .html 我不要
    if (!filename.endsWith(".html")) {
        return false;
    }
}

然后通过 Cheerio 解析 HTML:

{...
  // 组合新文件名
  let filepath = fullpath+".page.json";
  // 读取文件内容
  let pageContent = fs.readFileSync(fullpath).toString();
  // 解析页面内容
  let $pg = cheerio.load(pageContent);
  let rtData = {};
...}

然后获取页面的标题和 #page-main 下的 HTML.

{...
// 页面标题
    rtData.title = $pg("title").text();
    // OR $pg("#page-main").html()
    // 我这么写是因为主题 #page-main 下还有 script 无法执行
    rtData.page = `
    <div class="mg-top">
        ${$pg(".mg-top").html() || ""}
    </div>
    <footer class="text-center">
        ${$pg("footer").html() || ""}
    </footer>
    <div class="p-btn">
        ${$pg(".p-btn").html() || ""}
    </div>
    `;
    rtData.path = filename;
...}

页面中还有一些 script，比如阅读进度、懒加载等。所以需要一个 extraJS 放置额外的 Script.

{...
    rtData.extraJS = []
    // 只解析 #page-main 下的 script
    let $pageMain = cheerio.load($pg("#page-main").html());
    $pageMain('script').map(function(i, el) {
        // 尝试往 extraJS 中 push 相关代码
        try {rtData.extraJS.push($pageMain(this)[0].children[0].data);} catch(e) {}
        $pageMain(this).remove();
    });
...}

最后，将 JSON 写入文件中。

{...
    fs.writeFileSync(filepath, JSON.stringify(rtData));
}

文件递归

我们还需要一个函数递归 public 目录下的所有文件，这个不用多说。

function fileDisplay(filePath) {
    // 根据文件路径读取文件，返回文件列表
    fs.readdir(filePath, function(err, files) {
        if (err) {
            console.warn(err, "读取文件夹错误！")
        } else {
            // 遍历读取到的文件列表
            files.forEach(function(filename) {
                // 获取当前文件的绝对路径
                var filedir = path.join(filePath, filename);
                var fullname = filedir.split("public")[1];
                fs.stat(filedir, function(eror, stats) {
                    if (eror) {
                        console.warn('获取文件 Stats 失败!');
                    } else {
                        var isFile = stats.isFile(); // 是文件
                        var isDir = stats.isDirectory(); // 是文件夹
                        if (isFile) {
                            parse(fullname, filedir);
                        }
                        if (isDir) {
                            fileDisplay(filedir); // 递归，如果是文件夹，就继续遍历该文件夹下面的文件
                        }
                    }
                });
            });
        }
    });
}
fileDisplay(filePath);

最后运行这个 Node.js 文件，就可以看到 public/ 目录下多出很多 ***.page.json 文件。

基本结构

这些文件内容也很简单，基本如下：

{
    // 页面的标题
    "title": "Hello World",
    // 内容
    "page": "...",
    // 路径
    "path": "/foo/bar",
    // JS
    "extraJS": ['alert("Hello World");']
}

前端 pjax.js

新建一个 pjax.js。

替换链接

我们需要先将页面当中所有本站链接转为 Pjax 的 Jump 函数。

判断条件是：有链接，不带 hash，且为本站链接

// 转换页面中的链接为 Pjax 链接
const $pjax_convertAllLinks = () => {
// 所有的 a 标签
    const linkElements = document.querySelectorAll("a");
    for (let i of linkElements) {
        // 有链接，不带 hash，且为本站链接
        if (i.href && !i.href.includes("/#") && (i.href.startsWith("/") || i.href.match(new RegExp(window.location.hostname)))) {
            let thisLink = new URL(i.href).pathname+new URL(i.href).hash;
            i.href = `javascript:$pjax_jump('${thisLink}');`;
        }
    }
}

另外，要转化页面链接为全路径。

这里参考了下 ChenYFan 的 Service Worker 函数，需要根据实际情况做出调整。

// 转换路径为全路径
const $pjax_fullpath = (path) => {
    path = path.split('?')[0].split('#')[0]
    if (path.match(/\/$/)) {
        path += 'index.html';
    }
    if (!path.match(/\.[a-zA-Z]+$/)) {
        path += '/index.html';
    }
    return path;
}

// $pjax_fullpath('/') => /index.html

跳转

// 跳转页面
const $pjax_jump = async (path) => {
    try {
        // 是 # 就别跳转了
        if (path.startsWith("#")) {
            window.hash = path;
            return false;
        }
        // 加载动画
        let loading = document.createElement('div');
        loading.innerHTML = `<div style="position: fixed;top:0;left:0;z-index:99999;display: block;width: 100%;height: 4px;overflow: hidden;background-color: rgba(63,81,181,.2);border-radius: 2px;"><div class="progress-indeterminate" style="background-color: #3f51b5;"></div><style>#page-main{transition:0.2s;}.progress-indeterminate::before{position:absolute;top:0;bottom:0;left:0;background-color:inherit;-webkit-animation:mdui-progress-indeterminate 2s linear infinite;animation:mdui-progress-indeterminate 2s linear infinite;content:' ';will-change:left,width;}.progress-indeterminate::after{position:absolute;top:0;bottom:0;left:0;background-color:inherit;-webkit-animation:mdui-progress-indeterminate-short 2s linear infinite;animation:mdui-progress-indeterminate-short 2s linear infinite;content:' ';will-change:left,width;}@keyframes mdui-progress-indeterminate{0%{left:0;width:0;}50%{left:30%;width:70%;}75%{left:100%;width:0;}}@keyframes mdui-progress-indeterminate-short{0%{left:0;width:0;}50%{left:0;width:0;}75%{left:0;width:25%;}100%{left:100%;width:0;}}</style></div>`;
        // 在 body 后加入 <div>
        document.body.appendChild(loading);
        // 如果页面中没有 page.css 或 search.css，为防止样式错乱，需要在加载过程中隐藏页面内容
        if (!document.getElementById("page_css") || !document.getElementById("search_css")) document.getElementById("page-main").style.opacity = 0;
        // 获取页面数据
        let pageData;
        // 看看 SessionStorage 里有没有缓存
        // 依赖后文的 prefetch
        if (sessionStorage.getItem(`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${$pjax_fullpath(path)}`)) {
            console.log("FROM SESSIONSTORAGE");
            try {
                pageData = JSON.parse(sessionStorage.getItem(`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${$pjax_fullpath(path)}`));
            } catch(e) {
                // 还是出错就从服务器获取
                console.log("FROM SERVER");
                pageData = await fetch($pjax_fullpath(path) + ".page.json").then(res => res.json());
                // 写到 SessionStorage 中
                sessionStorage.setItem(`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${$pjax_fullpath(path)}`, JSON.stringify(pageData));
            }
        } else {
            console.log("FROM SERVER");
            // fetch JSON
            pageData = await fetch($pjax_fullpath(path) + ".page.json").then(res => res.json());
            sessionStorage.setItem(`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${$pjax_fullpath(path)}`, JSON.stringify(pageData));
        }
        // 补齐页面 CSS
        if (!document.getElementById("search_css")) {
            fetch("/css/search.css").then(res => res.text()).then(res => {
                let ele = document.createElement("style");
                ele.innerHTML = res;
                ele.id = "search_css";
                document.body.appendChild(ele);
            });
        }
        if (!document.getElementById("page_css")) {
            fetch("/css/page.css").then(res => res.text()).then(res => {
                let ele = document.createElement("style");
                ele.innerHTML = res;
                ele.id = "page_css";
                document.body.appendChild(ele);
            });
        }
        if (!pageData) return false;
        // 组合 state
        var state = { title: '', url: window.location.href.split("?")[0] };
        // 利用 history.pushState() 修改地址栏而不跳转
        history.pushState(state, '', path);
        // 修改页面标题
        document.title = pageData.title;
        setTimeout(() => {
            // 滚动到页面顶部
            window.scrollTo({top: 0, behavior: "smooth"});
            // 写入 HTML
            document.getElementById("page-main").innerHTML = pageData.page;
            window.onscroll = null;
            for (let i in pageData.extraJS) {
                try {
                    // eval() 执行 JS
                    eval(pageData.extraJS[i]);
                } catch(e) {}
            }
            try{$pjax_prefetch();}catch(e){}
            // 再次转换所有链接
            $pjax_convertAllLinks();
        }, 200);
        setTimeout(() => {
            // 重新显示页面
            document.getElementById("page-main").style.opacity = 1;
            loading.remove();
        }, 1000);
    } catch(e) {
        // 有报错 直接跳转
        console.warn(e);
        window.location.href = path;
    }
}

如果使用 window.location.href 修改，那么页面就会刷新。
为了实现无刷新跳转，必须要使用 pushState() 更改。

执行 JavaScript 方面使用 eval() 函数。

// 组合 state
var state = { title: '', url: window.location.href.split("?")[0] };
// 利用 history.pushState() 修改地址栏而不跳转
history.pushState(state, '', path);
// 修改页面标题
document.title = pageData.title;
// 滚动到页面顶部
window.scrollTo({top: 0, behavior: "smooth"});
// 写入 HTML
document.getElementById("page-main").innerHTML = pageData.page;
window.onscroll = null;
for (let i in pageData.extraJS) {
  try {
    // eval() 执行 JS
    eval(pageData.extraJS[i]);
  } catch(e) {}
}

Prefetch & Refetch

此处借鉴乐特关于 Prefetch Page 的源码，当用户打开节流模式或为低速网络时就不要 Prefetch.

Prefetch 可以提前缓存部分数据。

const $pjax_prefetch = () => {
    // 节流和低速网络不要 Prefetch
    const nav = navigator;
    const { saveData, effectiveType } = nav.connection || nav.mozConnection || nav.webkitConnection || {};
    if (saveData || /2g/.test(effectiveType)) return false;
  
    // 此处是 Blog 的一些常见链接
    let posts_list = document.querySelectorAll(".index-header a");
    for (let i in posts_list) {
        // 全路径
        let thisLink = $pjax_fullpath(posts_list[i].href);
        // Session Storage 没有才 Fetch
        if (!sessionStorage.getItem(thisLink)) {
            fetch(thisLink + ".page.json").then(res => res.text()).then(res => {
                sessionStorage.setItem(thisLink,res);
            });
        }
    }
}

Refetch 用于刷新已有的缓存（虽然 SessionStorage 关闭页面就没了）

其原理也很简单，SessionStorage 中所有的 Pjax 缓存重新获取就完事了。

const $pjax_refetch = () => {
    let sst = sessionStorage;
    for (let i in sst) {
        if (i.startsWith("http://") || i.startsWith("https://")) {
            fetch(i + ".page.json").then(res => res.text()).then(res => {
                sessionStorage.setItem(i, res);
            });
        }
    }
}

一些优化

Prefetch CSS 文件

既然 CSS 文件需要补齐，那么打开页面 5s 后自动 Prefetch 可以提升速度。

5s 后再获取是为了防止阻塞页面。

setTimeout(() => {
    // Prefetch CSS 文件
    if (!document.getElementById("search_css")) {
        fetch("/css/search.css").then(res => res.text()).then(res => {
            let ele = document.createElement("style")
            ele.innerHTML = res;
            ele.id = "search_css";
            document.body.appendChild(ele);
        });
    }
    if (!document.getElementById("page_css")) {
        fetch("/css/page.css").then(res => res.text()).then(res => {
            let ele = document.createElement("style")
            ele.innerHTML = res;
            ele.id = "page_css";
            document.body.appendChild(ele);
        });
    }    
}, 5000);

关于 Robots

当你运行 $pjax_convertAllLinks(); 后，你肯定会发现所有的链接都变成了 javascript:$pjax_jump('/xxx');。这对机器人来说很不友好。

所以，我们需要排除这些机器人。

var runningOnBrowser = typeof window !== "undefined";
var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);

if (runningOnBrowser && !isBot) {
    setTimeout(() => {
        try{$pjax_prefetch();}catch(e){}
        $pjax_convertAllLinks();
    }, 100);
}

最后

在启用 Pjax 后，YFun's Blog 传输大小理论上最高缩小 3/4，性能速度均有提升。

如果你也在使用 Pjax，不妨试试看。

还有一些错误

如果你定义了 onload 等事件，页面没有刷新即代表没有变化，你需要在 $pjax_jump() 中简单清除一下这些信息。

广告时间

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

ESHexoN 是一款简洁、强大的 Hexo 在线编辑器。

其灵感来自于 HexoPlusPlus/HexoPlusPlus (基于 Cloudflare Workers 的无服务器 Hexo 后端)

但是，遗憾的是 HPP 突然停止维护，只留下一个 Wexagonal。

However, 这更新速度也太慢了啊喂~

Qexo 也是一个很不错的项目，但是它基于 Python + MongoDB，不属于我擅长的技术栈，有点劝退。

于是，ESHexoN 诞生了。它致力于使用 JavaScript Edge Function 构建 Hexo「后端」，实现普通静态博客所不具备的功能，解决大部分静态博客的痛点。

如何使用 ESHexoN?

ESHexoN 的使用说明可以参见文档 --> 文档链接

ESHexoN 代码 & 原理

代码目录

dist 目录存放构建的文件，src 目录为源码，tools 是一些工具，index.js 则为入口文件。

后端的主要文件

src/res.js

res.js 主要负责 HTTP 响应输出，统一输出格式。

故 ESHexoN API 主要返回格式为:

{
  "statusCode": "...",
  "statusInfo": "..."
}

[Source Code]

src/check_token.js

check_token.js 主要负责 API 请求的鉴权，所有的鉴权 API 都需要携带 token 发送。

生成代码：

var token = md5(userdata[0].username + userdata[0].password + `${new Date(Date.now()).getFullYear()}${new Date(Date.now()).getMonth()+1}`);

故 ESHexoN Token 格式为：

md5(USERNAME+PASSWORD+YEAR+MONTH);

过期时间为一个月。

src/env.js

ESHexoN 除了依靠 yfun-lab/gh-worker-kv 存储主要数据库文件外，还使用环境变量存储基本的 Token、仓库等。

ESHexoN 自设计之初就预备支持 Cloudflare Workers, Deno 等平台。

事实上，这两个平台获取环境变量的方式根本不一样。为了在一个代码下同时支持两个平台，env.js 简单的写了个判断。

是不是目录？文件遍历

GitHub API 会返回当前目录下的文件和文件夹，但有人的 source/_posts 目录下还有文件夹。根据观察发现，文件夹的 type 为 dir，而普通文件为 file，那么只需要一个简单的判断，就可以返回单个目录下所有文件。

写文件

在写文件之前，我们需要先获取该文件的 sha 值。

这是因为 GitHub 规定修改文件必须在 body 中携带源文件 sha.

同时，文件还必须接受 Base64 编码。这个问题很好解决，ESHexoN 的仓库依赖中已经包含。当然，我更倾向于在前端编码文本，在后端直接 PUT。

那前端呢？

以上是后端的主要代码。因为 ESHexoN 是前后端分离项目，并且开放跨域，所以我们构建了一个官方前端。只需要输入你的用户名、密码和后端地址就可以开始使用。

前端的代码也是开源的，基于 Vue + Vuetify 构建，在 GitHub 上查看它

一些小细节

早在 HexoPlusPlus dev 阶段的时候，ChenYFan 就在群内讨论如何解决 Markdown 编辑器的问题。在当时，EditorMD 的兼容性很差。于是，HPP 上采取的解决方案是：textarea + marked.js。

然后，HPP 编辑器就是这样的：

这并不是一个很好的主意。

于是在 ESHexoN 上，我们为 Hexo 特性定制了一款简单的编辑器。

首先，它是由 https://yfun.top/lab/markdown/ 修改而来的，在部分特性上与其类似。

但是受限于页面尺寸和小屏幕优化，ESHexoN 的编辑器在大屏上是这样显示的：

双栏布局，实时预览。

为了保证在小屏幕的体验，在小屏幕上将自动收起预览，改为全屏模式。

如果需要预览，可以点击「预览」按键。

同时 ESHexoN 的编辑器有自动保存功能，即使写到一半刷新页面或是浏览器崩溃也不用怕，页面内容已经存储到 localStorage 内了。（我也不知道会不会撑炸

一些基本的搜索功能都得以保留（与 HPP 是十分甚至九分的类似

不仅仅局限于文章，配置文件、代码都可以修改：

在未来

目前 ESHexoN 还处于 Beta 阶段，部分功能还没有开发完成。

关于说说、评论等也都在等待开发（最近可能不会有）

如果在使用中出现了任何的问题，欢迎提 Issue 反馈。

很多博客中最常见的问题就是：文章很长，但是读者很忙。下次阅读的时候，可能要花一些时间才能恢复到先前的阅读位置。

如果可以设备间，识别二维码或是一个链接就可以让阅读无缝衔接，直接跳转到相应位置，那么阅读体验就会变得更加优秀。

那么，开始吧！

实践

要知道阅读位置，那么就要知道当前页面的坐标。

const getScrollPosition = (el = window) => ({
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
// getScollPosition().x => 页面横坐标; getScrollPosition().y => 页面纵坐标;

大部分情况下，我们只用关注纵坐标。横坐标大概率为 0。

我们还需要一个页面滚动的事件，用于记录当前坐标，并储存在临时存储中。

至于为什么是 sessionStorage 而不是 localStorage，则是因为 localStorage 除手动清除外，不会自动过期。

// 此处的 750 是「页面元素的最大宽度」
var wx = window.innerWidth >= 750 ? 750 : window.innerWidth;
var wy = window.innerHeight;
function windowScroll() {
    // 反复修改 确保页面尺寸不改变
    wx = window.innerWidth >= 750 ? 750 : window.innerWidth;
    wy = window.innerHeight;
    let y = Math.round(getScrollPosition().y);
    // 组合字符串，同时记录页面坐标，页面宽度和高度
    let p = `${y}:${wx}:${wy}`;
    // 写入到 sessionStorage 中
    sessionStorage.setItem("read_y", p);
}
window.onscroll = windowScroll;

你可能发现了，此处的变量 p，并不仅仅是「页面纵坐标」，而是「页面高度」与「纵坐标」的组合字符串。

事实上，如果单纯是纵坐标判断位置，那么在不同高度，不同宽度的设备上，就会出现错位的情况。而同时记录三个信息，就可以还原真实坐标。

// URL 中是否包含传递的坐标信息
if (location.hash.split("#read=").length > 1) {
    // 分离字符串
    let read_y = location.hash.split("#read=")[1];
    read_y = read_y.split(":");
    // 组合乘积，顺滑移动至坐标
    window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
} else {
    // 从 sessionStorage 中获取
    let read_y = sessionStorage.getItem("read_y") || "0:0:0";
    read_y = read_y.split(":");
    window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
}

到现在，我们已经完成了 URL 的解析和基本生成。

那么，URL 即为:

`${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${location.pathname}#read=${sessionStorage.getItem("read_y")}`;

最后

搭配生成二维码等插件效果更佳。

Miracle 主题将在下个版本中更新该功能。

ChenYFan 大佬的文章：SpeedUp!使用黑科技为你的网站提速 有提到过将 Hexo 博客的全部静态文件上传至 NPM 达到加速效果。

但是 NPM 版本号不能重复，而且为了精准命中缓存和防止边缘 @latest 缓存过长，就必须指定版本号。

本人在 我的图床解决方案 一文中使用的方法是 npm version patch。

但这个方法也有一些弊端，比如 patch 只会更新 z 位数的版本号，而且并不会上传至仓库，很可能会出现版本号冲突导致上传失败。这就是为什么最后还需要重新推送 Git 提交。

试试看

NPM 版本号遵循 semver 规范，格式为 major.minor.patch。

为了在获取最新版本号的时候不发生混乱，我选择先获取最新的版本号。

记得把 cky-blog-static 改成自己的项目名。

const getVersion = async() => {
    const latestVersion = await fetch("https://registry.npmjs.org/cky-blog-static/latest").then(res => res.json()).then(res => {
        return res.version;
    })
    return latestVersion;
}

获取到最新版本号后，就可以对版本号进行分析。

以 1.4.7-b541af2ea284a39da0bbf63b88fdb65c 为例，先按 major.minor.patch 分离。当然，也需要考虑版本号后还有 build metadata 的情况。

const version = await getVersion();
var verArray = version.split(".");
verArray[2] = verArray[2].split("-")[0];

为了版本号好看些，可以通过判断实现满十进一。

if (verArray[2] < 9) {
// z 位小于 9，直接 +1
verArray[2] = String(Number(verArray[2])+1);
} else if (verArray[1] < 9) {
// z 位大于等于 9，y 位小于 9，y+1, z=0
verArray[1] = String(Number(verArray[1])+1);
verArray[2] = 0;
} else {
// z 大于等于 9，y 大于等于 9，x+1,y=0,z=0
verArray[0] = String(Number(verArray[0])+1);
verArray[1] = 0;
verArray[2] = 0;
}

最后，重新拼接版本号。如果担心服务器缓存版本号导致冲突，还可以加上一些随机字符串。

var newVersion = `${verArray[0]}.${verArray[1]}.${verArray[2]}`
var newVersion = newVersion + "-" + md5(`${new Date().getTime()}${newVersion}`);

将最新的版本号信息重新写入 package.json 文件：

var packageJson = fs.readFileSync("./package.json");
var packageJson = JSON.parse(packageJson);
packageJson.version = newVersion;
var newPackage = JSON.stringify(packageJson);
fs.writeFileSync("./package.json", newPackage);

代码

直接 CV 代码！

/**
 * 更新 package.json 版本号
 */
const fetch = require("node-fetch");
const md5 = require("js-md5");
const fs = require("fs");

const getVersion = async() => {
    const latestVersion = await fetch("https://registry.npmjs.org/cky-blog-static/latest").then(res => res.json()).then(res => {
        return res.version;
    })
    return latestVersion;
}

const update = async() => {
    const version = await getVersion();
    var verArray = version.split(".");
    verArray[2] = verArray[2].split("-")[0];
    if (verArray[2] < 9) {
        verArray[2] = String(Number(verArray[2])+1);
    } else if (verArray[1] < 9) {
        verArray[1] = String(Number(verArray[1])+1);
        verArray[2] = 0;
    } else {
        verArray[0] = String(Number(verArray[0])+1);
        verArray[1] = 0;
        verArray[2] = 0;
    }
    var newVersion = `${verArray[0]}.${verArray[1]}.${verArray[2]}`
    var newVersion = newVersion + "-" + md5(`${new Date().getTime()}${newVersion}`);
    console.log(newVersion);
    var packageJson = fs.readFileSync("./package.json");
    var packageJson = JSON.parse(packageJson);
    packageJson.version = newVersion;
    var newPackage = JSON.stringify(packageJson);
    fs.writeFileSync("./package.json", newPackage);
    console.log("Complete!!");
}

update();

最后

如果是 Hexo 文件部署，就可以直接把文件直接丢在项目根目录，Action 集成部署加上：

node update.js

Blog 半年没更新，除除草 --(....

本文未经允许，禁止转载！

视频教程正在制作，等待更新。

文章目录

• 安装 Git
• 安装 Node.js

更多文章等待更新...

下载

前往 Node.js 官网 (https://node.js.org)

下载 Node.js 安装包（推荐下载 LTS 版本）

安装

双击运行安装文件。

点击 Next。

勾选同意协议，点击 Next。

修改文件安装位置，点击 Next。（也可以不用改）

点击 Next。

点击 Install 开始安装。

等待安装完成。

点击 Finish 完成安装。

测试

打开 Git Bash.

在文件夹处右击，点击 Git Bash Here 进入 Git Bash。
或是在开始菜单中找到 Git Bash.

输入 node -v 和 npm -v 查看版本，正确输出版本信息即代表安装成功。

博客

由于 Cloudflare Web Analytics 是在 2021 年 4 月份启用的，再加上后来又将统计代码去除，所以关于访问量的信息不可用。

截止至 2021 年 12 月 31 日，博客共发布 15 篇文章，其中 2021 年发布 11 篇文章，原创文章 10 篇。

目前采用 LeanCloud + Waline 的评论方式，自 7 月份被刷评论后将评论权限改为登录（支持 GitHub 登录），还有部分评论在迁移中丢失，实在抱歉。

主题

博客自 2021 年 1 月 13 日将主题改为 Miracle，这是一款简洁、轻量的单栏 Hexo 主题。

Miralce 目前的版本是 2.0.1，全新的版本去除 jQuery，进一步提升性能。

GitHub 仓库：https://github.com/hifun-team/hexo-theme-miracle

更多

=> ...

本文未经允许，禁止转载！

视频教程正在制作，等待更新。

文章目录

• 安装 Git

更多文章等待更新...

下载

前往 Git 官网 (https://git-scm.com).

点击页面中的 Download For Windows 下载 Windows 版本。

安装

双击运行安装文件。

点击 Next，同意协议。

修改程序安装位置，点击 Next（直接装在 C 盘也不是不行）。

组件选项，可选桌面快捷键、右键菜单、LFS 支持、自动检查更新等。

点击 Next 进入下一步。

开始菜单文件夹名，保持默认就可以，点击 Next。

默认编辑器，保持 Vim 就可以，点击 Next。

环境变量，选择第 2 个，点击 Next。

如果选择第 1 个，则只能在 Git Bash 中使用，可能会出现问题

剩下的都可以保持默认，一路 Next，然后点击 Install。

等待安装完毕。

测试

在文件夹处右击，点击 Git Bash Here 进入 Git Bash。

（或是在开始菜单中找到 Git Bash）

输入 git --version 查看版本，正确输出版本信息即代表安装成功。

大功告成！

于是，我就写了个简单的 Python 小程序自动爬取故宫壁纸。

代码

首先，我们通过简单的查看，知道故宫壁纸的页面并没有使用 JavaScript 载入。

但是故宫壁纸很多，所以还需要分类。

故宫壁纸大多都是以分类开头，如 爱上紫禁城 紫藤, 清 虚谷紫藤金鱼图轴（局部） 等等，所以一般只需要做个简单的 startswith() 判断就 OK 了。

很多壁纸的标题都是一样的，所以还可以使用 random 库在文件名末尾追加一个随机数。

import requests, bs4, time, random
path = "./wallpaper/爱上紫禁城"

catch = 0

for i in range(1, 119):
    # 组合请求 URL
    url = "https://www.dpm.org.cn/lights/royal/p/{}.html".format(i)
    # 发送请求
    response = requests.get(url)
    # 设定页面编码为 UTF-8
    response.encoding = "UTF-8"
    # 从 HTML 中解析数据
    soup = bs4.BeautifulSoup(response.text, "lxml")
    image = soup.find_all(name="div", class_="pic")
    # 循环输出图片
    for n in image:
        catch = catch + 1
        # 获得壁纸名称
        # 分类，不是以【爱上紫禁城】开头的壁纸都忽略
        img_name = n.a.img["title"]
        if img_name.startswith("明"):
            print("{}. {}".format(catch, n.a.img["title"]))
            # 组合获得壁纸页面
            url_1080 = "https://www.dpm.org.cn" + n.a["href"]
            # 请求高清版网页
            response_img = requests.get(url_1080)
            # 再次解析
            soup_img = bs4.BeautifulSoup(response_img.text, "lxml")
            # 获取页面中的图片
            data = soup_img.find_all(name="img")[0]
            # 获得壁纸图片的链接
            img_url = data["src"]
            # 保存图片
            pic = requests.get(img_url).content
            file_name = path + img_name + "-" + str(random.randint(100000, 999999)) + ".jpg"
            # 写入文件
            with open(file_name, "wb") as file:
                file.write(pic)
        
        else:
            print("!Ignore: " + img_name)

后

我把一些我下载下来的壁纸放在了 这里，可以直接预览并下载。

OK，又水了一篇文（

Prettier 支持：

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

安装

插件

你可以很方便的在 VSCode 等 IDE 上安装插件，插件名为 Prettier.

以 VSCode 为例：

如果安装了其他格式化插件，则需要点击 [格式化文档的方式]，选择 Prettier。

CLI

sudo npm i -g prettier

相关的文档可参见官网: https://prettier.io/docs/en/cli.html

prettier --write . # 格式化当前文件夹的所有文件

配置

参见官方文档：

• https://prettier.io/docs/en/configuration.html

• https://prettier.io/docs/en/options.html

Prettier 的配置文件有多种写法：

以使用 YAML 书写的 .prettierrc 为例：

# 单行最长字符数
printWidth: 80
# 制表符长度
tabWidth: 4
# 是否使用 Tab
useTabs: false
# 是否加入分号
semi: true
# 单引号
singleQuote: false

# ...

效果

格式化前：

fetch("https://blog.yfun.top/search.json").then(res=>res.json()).then((content) => {console.log(content);for (let i = 0; i < content.length; i++){console.log(content[i]['title'] + " --- https://blog.yfun.top" + content[i]['url'])}})

格式化后：

fetch("https://blog.yfun.top/search.json")
    .then((res) => res.json())
    .then((content) => {
        console.log(content);
        for (let i = 0; i < content.length; i++) {
            console.log(
                content[i]["title"] +
                    " --- https://blog.yfun.top" +
                    content[i]["url"]
            );
        }
    });

本文操作系统为 Ubuntu Server 20.04，其他操作系统可能有所不同。

开始

登录树莓派，进入 /boot/firmware/ 目录：

cd /boot/firmware/

# Please DO NOT modify this file; if you need to modify the boot config, the
# "usercfg.txt" file is the place to include user changes. Please refer to
# the README file for a description of the various configuration files on
# the boot partition.

我们修改 usercfg.txt 文件：

sudo vim usercfg.txt

在文件末尾追加配置信息，以下是我的，仅供参考：

force_turbo=0
arm_freq=1850
over_voltage=6
gpu_freq=650
core_freq=650
gpu_mem=620

重启

保存文件，使用命令重启：

sudo reboot

后

重启完毕后，再使用 lscpu 命令看看 CPU 状况。

✈️

不必多说。

例如 http://127.0.0.1:7890 为代理地址，你可以使用下方的命令更改：

git config --global http.proxy http://127.0.0.1:7890

如果有一天不需要了，输入下面代码取消：

git config --global --unset http.proxy

FastGit

使用 FastGit 提供的 GitHub 镜像。

镜像地址：https://hub.fastgit.org

支持 HTTPS 克隆，并且提供 raw.githubusercontent.com 的镜像，地址为 https://raw.fastgit.org

CNPM

使用 CNPM 提供的 GitHub 镜像。

镜像地址：https://github.com.cnpmjs.org

支持 HTTPS 克隆。

Hosts

通过更改 Hosts 文件的方式解决，但大有可能失效：

199.232.69.194  github.global.ssl.fastly.net
140.82.113.4    github.com

GitHub 上的 521xueweihan/GitHub520 项目提供了更多关于 GitHub Hosts 列表。

521xueweihan/GitHub520 #53

Gitee

网上挺多教程，使用 Gitee 的「从 GitHub 导入」功能。

不过 Gitee 限制仓库 500MB。。

Coding

进入 Coding 控制台，点击「创建项目」。

项目模版选择「代码托管」就好，仅做下载的话无需开启太多。

填写项目基本信息，如名称、标识等。

新建一个镜像仓库。

「Git 仓库 URL」填写 GitHub 公开仓库 HTTPS 克隆地址，如：https://github.com/twbs/bootstrap.git

创建完成后请稍等，系统就会自动导入。

导入完成后，点击「克隆」就能找到克隆地址。

克隆速度挺快的：

Cloning into 'bootstrap'...
remote: Enumerating objects: 169214, done.
remote: Counting objects: 100% (169214/169214), done.
remote: Compressing objects: 100% (51634/51634), done.
Receiving objects:  57% (96728/169214), 90.58 MiB | 6.83 MiB/s 

此外，Coding 还支持自动同步，可以设置每天的同步时间。

我会在京东上买些电子产品和文具，那么如何获得商品降价信息，使用更低的价格购买呢？

开始

新建一个 GitHub 仓库，创建 main.py , notify.py 和 .github/workflows/auto.yml 三个文件，内容如下：

# -*- coding: utf-8 -*-
# 导入模块
import urllib.request, random, json, notify


# 商品列表
check = [
    # 闪迪（SanDisk）64GB TF（MicroSD）存储卡
    '1887526',
    # 晨光(M&G)文具 0.5mm 黑色中性笔
    '277393'
# ...
]


# 价格列表，用于临时存储获取到的价格数据
price = {}

# 读取上次的价格文件
try:
    file = open('./price.json', mode='r')
    lastPrice = json.loads(file.readlines()[0])
except:
    print("读取文件时出现错误！")


# 遍历列表，比对价格
for itemId in check:
    # 组合请求 URL
    # http://p.3.cn/prices/mgets?skuIds=J_
    url = 'http://p.3.cn/prices/mgets?skuIds=J_{}'.format(itemId)
    # User-Agent 列表
    ua = ['Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36','Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60','Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50','Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50']
    # 随机获得一个 User-Agent，如不带 User-Agent 请求，就会被拒绝。
    headers = {
        'User-Agent': ua[random.randint(0,4)]
    }
    # 组合请求参数
    request = urllib.request.Request(url = url, headers = headers)
    # 向京东发起请求
    response = urllib.request.urlopen(request)
    # 将获得的数据转为 JSON
    page_text = json.loads(response.read().decode('utf-8'))
    thisPrice = float(page_text[0]['p'])
    # 将价格输入至价格变量
    price[itemId] = thisPrice

    # 尝试对比价格
    try:
        if thisPrice > lastPrice[itemId]:
            print("{0} 涨价".format(itemId))

            print(thisPrice - lastPrice[itemId])
            notify.notify(itemId, 0, thisPrice - lastPrice[itemId], thisPrice)

        elif thisPrice < lastPrice[itemId]:
            print("{0} 降价".format(itemId))
            print(lastPrice[itemId] - thisPrice)
            notify.notify(itemId, 2, lastPrice[itemId] - thisPrice, thisPrice)

        elif lastPrice[itemId] == thisPrice:
            print("{0} 价格不变".format(itemId))
        else:
            print("{0} 未知错误".format(itemId))
    except:
        print("无法进行比对")


# 将 JSON 转为 字符串
priceStr = json.dumps(price)

# 写入价格文件，便于下次查询
try:
    file = open('./price.json', mode = 'w')
    file.write(priceStr)
    file.close()
except:
    print("写入文件时出现错误")


print(price)

# -*- coding: utf-8 -*-
import urllib.request, json, urllib.parse, ssl
ssl._create_default_https_context = ssl._create_unverified_context

'''
提醒的服务，支持 `wechat` 与 `qmsg`。
需要在下方进行下一步的配置
'''
server = ['qmsg']

'''
WeChat 采用的是 Server 酱 (https://sc.ftqq.com/3.version) 提供的服务
key：Server 酱提供的 Token，必填。
'''
wechat = {
    "key": ""
}

'''
Qmsg 采用的是 Qmsg 酱 (https://qmsg.zendee.cn/) 提供的服务
key：Qmsg 酱提供的 KEY，必填。
qid：接收消息的 QQ 号（不支持 QQ 群），可以添加多个，以半角逗号分割，如：`10001,10002`（必须均在您的 Qmsg 酱 QQ 号列表中）。
'''
qmsg = {
    "key": "",
    "qid": ""
}

def wechat_send(key, title, text):
    url = 'http://sc.ftqq.com/{0}.send?text={1}&desp={2}'.format(key, urllib.parse.quote(title), urllib.parse.quote(text))
    headers = {
        'User-Agent': "Check Price Bot"
    }
    request = urllib.request.Request(url=url, headers=headers)
    response = urllib.request.urlopen(request)
    page_text = json.loads(response.read().decode('utf-8'))
    if page_text['errno'] == 0:
        return True
    else:
        return False

def qmsg_send(key, id, text):
    url = 'http://qmsg.zendee.cn/send/{0}?msg={1}&qq={2}'.format(key, urllib.parse.quote(text), id)
    headers = {
        'User-Agent': "Check Price Bot"
    }
    request = urllib.request.Request(url=url, headers=headers)
    response = urllib.request.urlopen(request)
    page_text = json.loads(response.read().decode('utf-8'))
    if page_text['code'] == 0:
        return True
    else:
        return False

def notify(id,type,price,nowPrice):
    '''
    type:
        0: 涨价
        1: 无变化
        2: 降价
    id: 商品 ID
    price: 差价
    nowPrice: 现价
    '''

    for svId in server:
        def send(title,content):
            if svId == 'wechat':
                wechat_send(wechat["key"],title,content)
            if svId == 'qmsg':
                qmsg_send(qmsg["key"],qmsg["qid"],title + "\n" + content)
            else:
                return False
        if type == 0:
            title = "商品 {0} 涨价!".format(id)
            content = "您关注的商品 {0} 涨价咯！价格相较于上次监测，高了 {1} 元，现价 {2} 元。商品详情：https://item.jd.com/{0}.html".format(id,price,nowPrice)
            send(title,content)
        elif type == 1:
            print("价格没有变化，不推送通知。")
        elif type == 2:
            title = "商品 {0} 降价!".format(id)
            content = "您关注的商品 {0} 降价咯！价格相较于上次监测，低了 {1} 元，现价 {2} 元。商品详情：https://item.jd.com/{0}.html".format(id, price,nowPrice)
            send(title, content)
        else:
            return False

name: Check Price

on:
  push:
    branches: 
      - master
  schedule:
    # 每 1 小时运行一次
    - cron: "0 * * * *"

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - name: Clone repository
        uses: actions/checkout@v2
      - name: 'Set up Python'
        uses: actions/setup-python@v2
        with:
          python-version: 3.7
      - name: Run
        run: |
          python main.py
      - name: Push
        run: |
          git config --local user.email "icolabot@e.yfun.top"
          git config --local user.name "iColaBot"
          date +"%Y-%m-%d %H:%M:%S.%N" > date.txt
          git add -A
          git commit -am "Update price.json"
          git push origin master

注意

计划任务语法有 5 个字段，中间用空格分隔，每个字段代表一个时间单位。

┌───────────── 分钟 (0 - 59)
│ ┌───────────── 小时 (0 - 23)
│ │ ┌───────────── 日 (1 - 31)
│ │ │ ┌───────────── 月 (1 - 12 或 JAN-DEC)
│ │ │ │ ┌───────────── 星期 (0 - 6 或 SUN-SAT)
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
* * * * *

每个时间字段的含义：

注：由于 GitHub Actions 的限制，如果设置为 * * * * * 实际的执行频率为每 5 分执行一次。

后

新建文件 并 配置 notify.py 后，GitHub Action 就会定时执行代码。如果有降价或涨价，就会按照 notify.py 的配置进行通知。

京东也有降价提醒的功能，但我实在是不想给 京东 开通知权限，经常推送商品广告。

本文部分内容参考：justjavac/auto-green#readme

图床的选择有很多，笔者之前写过一篇关于免费图床的汇总，本文就来介绍下我采用的方案：NPM。

本文假设您已有 NPM 账号、GitHub 账号。

准备工作

新建仓库

新建一个 GitHub 仓库，公开或是私人都可以，此处不再赘述。

在 Git 仓库中新建 rawimg/.gitkeep 与 webpimg/.gitkeep 两个文件。

获取令牌

登录 https://npmjs.com ，点击右上角的头像，进入 Access Token。

点击页面中的 Generate New Token 获取新的令牌。

选择 Automation，点击 Generate Token 生成令牌。

将生成的令牌复制下来。

进入 GitHub 仓库，点击 Settings。

点击菜单栏中的 Secrets。

点击 New repository secret 新建一个 Secret。

Secret Name 为 NPM_TOKEN，Value 是你的 NPM 令牌，点击 Add secret 添加。

在仓库中新建 package.json 文件，参考如下：

{
  "name": "ocoke-osg",
  "version": "0.0.0",
  "description": "Somewhere to save the file from @oCoke",
  "author": "YFun(@oCoke)"
}

图片转换与发布

为了方便多端写作，我使用 GitHub 临时存储所需的图片，GitHub Action 发布 NPM 包。

WebP 可以大大缩减图片的尺寸，我们还可以借助 GitHub Action 在发布前自动转换。

name: NPM & WebP

# 在 Release 发布时 或手动执行

on:
  release:
     types:
       - published

  workflow_dispatch:

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    # Clone 仓库
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          ref: master
      # 安装 Node.js    
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: "12.x"
          registry-url: https://registry.npmjs.org/
        
      # rawimg/ 作为原始图片存储，webpimg/ 作为压缩图片存储处，最后合并。
      # 安装相关插件，转换图片。
      - name: Install & Convert
        run: |
          npm install -g webp-batch-convert
          cwebp-batch --in rawimg --out webpimg -q 75 -quiet
          mv webpimg/*.webp rawimg/
          
      # 发布 NPM 包
      - name: Publish Package
        run: |
          git config --global user.email "icolabot@e.yfun.top"
          git config --global user.name "iColaBot"
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
          
      # 删除 rawimg/ 和 webpimg/ 下的所有文件
      - name: Delete Files
        run: |
          rm -rf webpimg/*
          rm -rf rawimg/*
          touch webpimg/.gitkeep
          touch rawimg/.gitkeep
          
      - name: Push
        run: |
          git add -A
          git commit -m "Publish"
          git push origin master

使用

上传

将图片文件上传至仓库的 rawimg/ 文件夹下即可。

当然也可以使用 PicGo / UPic / HexoPlusPlus 等工具上传。

发布

在 GitHub 中新建 Release，将自动修改版本号并发布 NPM 包，无需手动修改 package.json。

访问

推荐的镜像

https://cdn.jsdelivr.net/npm/  # jsDelivr
https://unpkg.zhimg.com/ # 知乎
https://code.bdstatic.com/npm/ # 百度 (不推荐)
https://shadow.elemecdn.com/npm/ # 饿了么
https://unpkg.com/ # Unpkg

镜像推荐选择访问速度快的，比较稳定的，拉取速度快的。

我选择的是 jsDelivr，国内外速度都很优秀。

链接

以 jsDelivr 为例，原图链接为：

https://cdn.jsdelivr.net/npm/[package-name]@[version]/rawimg/[filename].[suffix]

WebP 图片链接为：

https://cdn.jsdelivr.net/npm/[package-name]@[version]/rawimg/[filename].webp

而我们可以用 JavaScript 来实现这样的检测功能。

方法一

使用 JavaScript 创建一个图片，设置图片的链接为 检测网址 + favicon.ico。

onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。

代码：

// 新建一个图片
var img = new Image();
// 设置图片的链接
img.src = "https://google.com/favicon.ico";

// 设定超时事件，延迟 3000 毫秒
var timeout = setTimeout(function () {
    // 清除 onerror 和 onload 事件
img.onerror = img.onload = null;
console.log("time out.");
    // 执行无法加载的事件
    canNotLoad();
},3000);

// 设定错误事件
img.onerror = function () {
    // 先清除超时事件
clearTimeout(timeout);
console.log("load error.");
    // 执行无法加载的事件
    canNotLoad();
}

// 设定可以加载的事件
img.onload = function () {
    // 先清除超时事件
clearTimeout(timeout);
console.log("ok.");
    // 执行可以加载的事件
    canLoad();
}

function canNotLoad() {
    /* code here */
    console.log("无法加载");
}
function canLoad() {
    /* code here */
    console.log("可以加载");
}

缺点：不是每一个网站都存在 /favicon.ico 文件，但如果加载特定文件的话挺好的。

方法二

使用 JavaScript 创建一个 iframe 标签，设置标签的链接为 检测网址。

onerror 事件触发不能加载的事件，onload 事件触发可以加载的事件，并使用 setTimeout 设置超时时间。

代码：

// 新建 iframe 标签
var iframe = document.createElement("iframe");

// 设置 iframe 标签的网址
iframe.src="https://google.com";

// 设定超时事件，延迟 3000 毫秒
var timeout = setTimeout(function () {
    // 清除 onerror 和 onload 事件
    iframe.onerror = iframe.onload = null;
    console.log("time out.");
    // 执行无法加载的事件
    canNotLoad();
},3000);
// 设定错误事件
iframe.onerror = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("load error.");
    // 执行无法加载的事件
    canNotLoad();
}
// 设定可以加载的事件
iframe.onload = function () {
    // 先清除超时事件
    clearTimeout(timeout);
    console.log("ok.");
    // 执行可以加载的事件
    canLoad();
}

function canNotLoad() {
    /* code here */
}
function canLoad() {
    /* code here */
}
// 设定为不可见
iframe.style = "display: none!important;";
// 向 body 添加 iframe
document.body.appendChild(iframe);

缺点：页面上的其他外部链接也会被一并的加载过来，例如 JS 文件，CSS 文件，统计代码。

您也可以 点击此链接 前往 CodePen 体验。

在安装系统时我选择了 Ubuntu Server 系统，因为我并不打算使用图形化界面，而且 Raspbian 系统只有 32 位的 ╮(╯▽╰)╭。

而商家发的是中通快递，速度慢不说，外包装都给我压烂了。(ó﹏ò｡)

商家随主板还发货了一个闪迪 32GB TF 卡（读写速度还可以），一个电源，一个外壳还有一个小风扇。

目前先折腾折腾，玩一玩，后面继续写文章。

目前没有把网站迁移上去的想法，因为这样的话网站会变得很不稳定。

原文链接：https://blog.skk.moe/post/hello-darkmode-my-old-friend/
原文作者：Sukka

前几天为我的 Hexo 主题：Miracle 加入了深色模式，但我的技术还是太辣鸡，经常出现问题。

无意间看到 Sukka 大佬的文章：「你好黑暗，我的老朋友 —— 为网站添加用户友好的深色模式支持」，跟着文章重构了主题深色模式的代码，就转载过来方便学习。

什么是「深色模式」

很多操作系统在日落后会自动切换到「深色模式」、并不意味着「深色模式」就是「夜间模式」。「夜间模式」用于夜晚的弱光环境，主要目的是保护眼睛、减少强光刺激、避免影响睡眠，不难理解为什么 macOS 的 Night Shift 会自动调节屏幕色温、Android（AOSP）到了夜间可以选择启用系统级「琥珀色」滤镜。

「深色模式」更像是一个主题，即使在白天也可以使用。不论是为了在 OLED 屏幕上省电、亦或是减少白光刺激护眼、亦或是暗色模式对色盲用户更加友好，总之 macOS 率先提出了系统级的「暗色模式」、并在 WebKit 中增加了对应的 Media Query，而后 Chromium、Firefox 先后跟进，如今兼容 prefers-color-scheme 的浏览器占有率已经高达 81.82%。

利用 Media Query 简单实现深色模式

CSS 媒体查询 @media 是一个足够强大的特性，可以有条件地将样式应用于文档和各种上下文中。Media Queries Level 5 草案 中提出了深色模式的判断方式 prefers-color-scheme，包含 light、dark、no-preference 三种值。而不支持 Media Queries 5 的浏览器会直接无视 CSS 中的 prefers-color-scheme Media Query，无需额外的代码即可优雅降级。

还记得我刚刚说过「深色模式更像一个主题」么？为网站新增深色模式就如同换肤功能；搭配 prefers-color-scheme，编写深色模式的思路就如同编写响应式一般、无需赘述，结合几段 Code Snippet 一笔带过：

CSS Variable 的方法实现深色模式

:root {
  --text: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #fff;
  }
}

body {
  color: var(--color-text);
}

通过维护两套 CSS Variable，可以快速切换不同的配色方案。这种方法特点是所需代码较少，缺点是 CSS Variable 的兼容性较差，可能还需要引入额外的 Polyfill。

为深色模式单独编写样式

body {
  color: #333;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
  }
}

直接维护两套样式的方法清晰直观、任何网站都可以基于这种方法进行改造。但会造成冗余代码、较难实现统一的风格、后期不易维护。

条件性加载深色模式的 CSS 文件

/* main.css */
body {
  color: #333;
}

/* dark.css */
body {
  color: #fff;
}

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

利用 <link> 标签的 Media Query，甚至可以单独加载暗色模式的 CSS 文件。

需要注意 CSS 选择器的权重，因此作为可选的 dark.css 一定要放在 main.css 之后加载。

除了上述三种方式以外，使用 CSS filter 或 mix-blend-mode 还可以实现对网站整体色调的改变，可以确保配色风格的统一性。

「深色模式」的兼容性

虽然有了优雅的 prefers-color-scheme 可以识别操作系统的显示模式，但是对于用户来说，仅依赖 Media Query 的「深色模式」并不能带来很好的体验。
首先是浏览器兼容性。虽然支持该特性的浏览器的市场占有率非常喜人，但是从版本号上来看却并不乐观：

考虑到使用 Chormium 70 内核甚至 Tencent X5 内核的国产浏览器，大部分用户并没有机会体验到深色模式。除此以外，操作系统级别的「深色模式」实现也会受到 OEM 厂商的影响 —— 虽然 Android 10（AOSP）提供「深色模式」，但是一加的 OxygenOS 却将其深藏在系统主题设置里，没有自动切换、在 Quick Settings 里也没有快速的切换开关。

设计一个用户友好的「深色模式」

受限于兼容性和复杂的操作系统，大部分网站依然在使用更传统的「开关」切换 —— 通过 toggle <html> 或
<body> 的 class 属性实现在两套样式之间切换、并将开关的状态记忆在 localStorage 中的方法虽然有效，却是无奈之举，手动切换开关相比 prefers-color-scheme 也不够优雅。如果将「开关」和 prefers-color-scheme 结合起来，就可以带来更好的用户体验：

• 对于不兼容的浏览器或操作系统，访客依然可以通过开关手动切换显示模式
• 对于兼容的浏览器或操作系统，Media Query 能够实现在两种显示模式之间切换
• 在兼容的浏览器或操作系统上，用户还可以通过开关 override 当前的显示模式

在将两者组合在一起时，不能简单地用「开关」覆盖 prefers-color-scheme，否则用户触发开关、状态被永久记忆在 localStorage 之后，就变成了僵硬的手动模式。
举个例子。访客可能在操作系统还没有自动切换到「深色模式」时通过网站上的开关切换显示模式，经过一个夜晚后到了次日白天、访客再度访问网站时，自然希望不需要再切换开关、网站就能以常规的浅色模式显示。因此设计思路是当 prefers-color-scheme 的值发生改变（从 与用户需要的显示模式不同 变成 相同）时清空 localStorage 中储存的开关状态，此时显示模式切换回基于 Media Query 的「自动」模式。

Talk is cheap, here goes the code.

首先是 CSS：

:root {
  --color-mode: 'light';
  --text: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: 'dark';
  }

  :root:not([data-user-color-scheme]) {
    --text: #eff;
  }
}

[data-user-color-scheme='dark'] {
  --text: #eff;
}

body {
  color: var(--color-text);
}

真是令人看的头大，让我们逐行来看都是些什么：

• 在 :root 下定义了一个 CSS Variable --color-mode: light 和在浅色模式下用到的 CSS Variable（比如使用深色 #333 作为主要字体颜色）。
• 使用 prefers-color-scheme 的 Media Query 定义深色模式下的 CSS Variable： --color-mode: light 。深色模式的样式（如浅色 #eff 作为主要字体颜色）要定义在 :not([data-user-color-scheme]) 伪类下以避免「开关」的行为覆盖浏览器的样式。
• 为 [data-user-color-scheme='dark'] 再定义一遍深色模式下用到的样式。
  有了这段 CSS，不难理解深色模式何时会生效：当操作系统使用「深色模式」且 <html> 或 <body> 标签上没有 data-user-color-scheme 属性时、或者存在 data-user-color-scheme 属性且值为 dark 时。

然后是困难的部分了：编写 JavaScript 为「开关」添加行为。

先定义一些常量：

const rootElement = document.documentElement; // <html>
const darkModeStorageKey = 'user-color-scheme'; // 作为 localStorage 的 key
const darkModeMediaQueryKey = '--color-mode';
const rootElementDarkModeAttributeName = 'data-user-color-scheme';
const darkModeTogglebuttonElement = document.getElementById(/* element id */);

接下来，用 try {} catch (e) {} 封装一下 localStorage 的操作，以应对 HTML5 Storage 被禁用、localStorage 被写满、localStorage 实现不完整的情况：

const setLS = (k, v) => {
  try {
    localStorage.setItem(k, v);
  } catch (e) { }
}

const removeLS = (k) => {
  try {
    localStorage.removeItem(k);
  } catch (e) { }
}

const getLS = (k) => {
  try {
    return localStorage.getItem(k);
  } catch (e) {
    return null // 与 localStorage 中没有找到对应 key 的行为一致
  }
}

我们还需要一个函数读取当前 prefers-color-scheme 的方法。由于已经在 CSS 中定义了 --color-mode，所以在 JS 中直接读取就好了：

const getModeFromCSSMediaQuery = () => {
  const res = getComputedStyle(rootElement).getPropertyValue(darkModeMediaQueryKey);
  if (res.length) return res.replace(/\"/g, '').trim();
  return res === 'dark' ? 'dark' : 'light';
  
  // 使用 matchMedia API 的写法会优雅的多
  // return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

还记得我们需要自动取消手动模式回到 prefers-color-scheme 么？意味着我们需要一个函数清掉 LS、删掉 <html> 存在的 data-user-color-scheme 属性：

const resetRootDarkModeAttributeAndLS = () => {
  rootElement.removeAttribute(rootElementDarkModeAttributeName);
  removeLS(darkModeStorageKey);
}

接下来是起主要作用的函数了，负责为 <html> 标签修改 data-user-color-scheme 属性：

const validColorModeKeys = {
  'dark': true,
  'light': true
}

const applyCustomDarkModeSettings = (mode) => {
  // 接受从「开关」处传来的模式，或者从 localStorage 读取
  const currentSetting = mode || getLS(darkModeStorageKey);

  if (currentSetting === getModeFromCSSMediaQuery()) {
    // 当用户自定义的显示模式和 prefers-color-scheme 相同时重置、恢复到自动模式
    resetRootDarkModeAttributeAndLS();
  } else if (validColorModeKeys[currentSetting]) { // 相比 Array#indexOf，这种写法 Uglify 后字节数更少
    rootElement.setAttribute(rootElementDarkModeAttributeName, currentSetting);
  } else {
    // 首次访问或从未使用过开关、localStorage 中没有存储的值，currentSetting 是 null
    // 或者 localStorage 被篡改，currentSetting 不是合法值
    resetRootDarkModeAttributeAndLS();
  }
}

当然，「开关」还需要一个函数，这个函数负责获取相反的显示模式，同时还要将新的模式写入 localStorage 存储起来：

const invertDarkModeObj = {
  'dark': 'light',
  'light': 'dark'
}

const toggleCustomDarkMode = () => {
  let currentSetting = getLS(darkModeStorageKey);
  
  if (validColorModeKeys[currentSetting]) {
    // 从 localStorage 中读取模式，并取相反的模式
    currentSetting = invertDarkModeObj[currentSetting];
  } else if (currentSetting === null) {
    // localStorage 中没有相关值，或者 localStorage 抛了 Error
    // 从 CSS 中读取当前 prefers-color-scheme 并取相反的模式
    currentSetting = invertDarkModeObj[getModeFromCSSMediaQuery()];
  } else {
    // 不知道出了什么幺蛾子，比如 localStorage 被篡改成非法值
    return; // 直接 return;
  }
  // 将相反的模式写入 localStorage
  setLS(darkModeStorageKey, currentSetting);

  return currentSetting;
}

相关的函数都定义完了，是时候添加函数执行了：

// 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
applyCustomDarkModeSettings();

darkModeTogglebuttonElement.addEventListener('click', () => {
  // 当用户点击「开关」时，获得新的显示模式、写入 localStorage、并在页面上生效
  applyCustomDarkModeSettings(toggleCustomDarkMode());
})

我的博客也使用的这种实现，通过 Navbar 中的按钮体验一下吧！

经过近一个月的开发，Miracle 主题已经发布至 v1.2.0 版本，也正式可以开始使用。

主题仓库：hifun-team/hexo-theme-miracle

主题对输出的内容等进行优化，去除不必要的资源，速度非常之快。

PS: 主要原因是主题的首页没有图片，这主要是因为我不想找图，而且会拖慢页面速度，一举两等。[doge]

评论

评论更换为 Waline，这样我就有了评论后台、回复通知和关键词过滤，真不错！

已更换至 Twikoo

部署

部署换回了直接部署 ( hexo d )，因为主题在 Action 部署时一直无法解析 Tag 插件，而本地又可以...

而且实际上使用云部署的次数并不多，因为我每次写完文章以后都会自己看一遍，不太必要。

已重新切换回云部署，并且已经解决无法解析 Tag 插件 的问题。

本文部分内容已过时。

前言

CloudFlare 为我们提供了免费的 CDN 服务，并拥有全球各地的优秀节点，作为国外比较优秀的 CDN 服务商。

但是，来自国内的访问都会被 CloudFlare 绕到大洋彼岸的美国。再加上某神秘的阻碍，导致在国内的访问一直不是很好。Ping 出延迟基本大于 >= 200ms 。

在一次偶然的机会中，发现：

• CloudFlare 拥有很多节点。
• CloudFlare 的节点之间速度非常之快。
• CloudFlare 的节点之间几乎没有延迟。
• CloudFlare 所有节点均免费，基本可以随便接入。

实践

既然发现了这个好办法，那么就开始实践吧！

首先，前往「CloudFlare Partner」的站点登录。

这里要注意！CloudFlare 官方已经停止 CNAME 接入，只能前往「CloudFlare Partner」接入。

以 萌精灵 CDN 为例，打开其官网：https://cdn.moeelf.com/ 并登录你的 CloudFlare 账号。

然后点击页面右上角的「添加域名」并加你的域名接入 CloudFlare 。

输入域名并点击「添加」即可添加成功。

接下来点击主页列表里的「管理 DNS」进入管理界面。

接下来点击「添加新记录」添加一个新的记录。

然后进入你域名的 DNS 管理系统，注意是解析域名的地方。

找到「CNAME 接入」处的对应 CNAME 地址，将其设为相应的解析地址。

加速访问

虽然默认提供给我们的节点很慢，但我们可以从 CloudFlare 公开的节点中寻找访问速度快的节点。

我找到了几个国内速度不错的节点，可以参考参考：

然后再将原来的 CNAME 记录改为 A 记录到以上 IP，再配合智能运营商解析，达到提速。

如果你不想一个一个设置，可以直接将「默认」记录指向 cf.record.yfun.top ，节点基本都是上面的，但偶尔会改变。

可能会遇到的情况：无法正常签发 SSL 证书

常见问题

无法正常签发 SSL 证书？

CloudFlare 默认会提供免费 SSL 证书服务，但使用「加速节点」可能导致无法正确签发。

解决方法：使用智能 DNS，将「境外」的记录解析至控制面板提供给您的官方地址。

开启 SSL 后访问错误？

试着为源站配置 SSL 证书，然后前往官方控制台（https://dash.cloudflare.com）将域名的 SSL 设为「完全」。

注意：使用「完全」方式请务必确定源站已开启 SSL！

速度

PING cf.record.yfun.top (141.101.115.11): 56 data bytes
64 bytes from 141.101.115.11: icmp_seq=0 ttl=52 time=17.007 ms
64 bytes from 141.101.115.11: icmp_seq=1 ttl=52 time=16.363 ms
64 bytes from 141.101.115.11: icmp_seq=2 ttl=52 time=21.385 ms
64 bytes from 141.101.115.11: icmp_seq=3 ttl=52 time=19.305 ms
64 bytes from 141.101.115.11: icmp_seq=4 ttl=52 time=16.341 ms
64 bytes from 141.101.115.11: icmp_seq=5 ttl=52 time=23.181 ms
64 bytes from 141.101.115.11: icmp_seq=6 ttl=52 time=18.888 ms
64 bytes from 141.101.115.11: icmp_seq=7 ttl=52 time=18.087 ms
64 bytes from 141.101.115.11: icmp_seq=8 ttl=52 time=16.153 ms
64 bytes from 141.101.115.11: icmp_seq=9 ttl=52 time=19.363 ms

--- cf.record.yfun.top ping statistics ---
10 packets transmitted, 10 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 16.153/18.607/23.181/2.209 ms

使用 Hexo 写博客，每次写完都要生成静态文件，而且 Hexo 基于 Node.JS，不能再手机上更新。

所以每次提交过后发现自己码错字了，或是有同学来换友链，总是要麻烦的改文件，再上传。

那么，Hexo 如何进行在线更新呢？

如果使用服务器的话，就丧失了使用 Hexo 的最大的优点——节省开支，而且还不如用 Typecho/WordPress 呢。

后来突然想到 GitHub Action 可以实现在线打包等操作，就想试试在线生成 Hexo 博客。

行动

获取 GitHub 令牌

登录你的 GitHub 账号，点击右上角的头像，点击「Settings」进入设置。

点击菜单栏中的「Developer settings」进入开发者设置。

点击菜单栏中的「Personal access tokens」进入令牌设置。

点击「Generate new token」新建一个令牌。

勾选全部的权限，名称随意。

并点击「Generate token」完成生成。

记得保存好这个令牌，它不会再次出现。

新建仓库

使用 GitHub 新建一个存放 Hexo 文件的仓库，要选私有仓库！

不要勾选任何的初始化仓库选项！

在 Hexo 根目录中删除 .git 文件夹(隐藏文件夹)，删除主题目录下的 .git 文件夹。

然后在 Hexo 根目录下使用 cmd 或终端运行以下命令：

git init # 新建 Git 仓库
git add -A  # 暂存所有文件
git commit -m "Create" # 提交更新
git remote add origin https://github.com/用户名/新建的私有仓库名.git # 新增远程链接
git push -u origin master # 推送至远程仓库

配置 GitHub Action

进入仓库页面，点击「Action」，点击「 set up a workflow yourself 」。

在左侧代码编辑器中将下方提供的代码粘贴进入代码框。

请仔细阅读注释，修改最后几行的提交设置。

确认无误后点击右上角的「Start Commit」。

此处注意！「公开的仓库名」是生成后文件提交的公开仓库，供「GitHub Pages」「Vercel」等服务使用！

name: Deploy # 部署
 
on: # 触发条件
  push:
    branches:
      - master # 推送到 master 分支
 
  release:
    types:
      - published # 推送新版本号
 
  workflow_dispatch: # 手动触发
 
jobs:
  build:
    runs-on: ubuntu-latest
 
    steps:
    - name: Checkout # Checkout 仓库
      uses: actions/checkout@v2
      with:
        ref: master
 
    - name: Setup Node # 安装 Node.js
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"
 
    - name: Install Hexo # 安装 Hexo
      run: |
        npm install hexo-cli -g
        
    - name: Cache Modules # 缓存 Node 插件
      uses: actions/cache@v1
      id: cache-modules
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}
 
    - name: Install Dependencies # 如果没有缓存或 插件有更新，则安装插件
      if: steps.cache-modules.outputs.cache-hit != 'true'
      run: | # 如果仓库里没有 package-lock.json，上传一下，npm ci 必须要有 package-lock.json
        npm ci
    - name: Generate # 生成
      run: |
        hexo clean
        hexo generate
    - name: Deploy # 部署
      run: |
        git config --global user.name "HiFun"
        git config --global user.email "omycoke@outlook.com"
        export TZ='Asia/Shanghai'
        cd public/
        git init
        git add -A
        git commit -m "Create by workflows"
        git remote add origin [https://令牌@github.com/用户名/公开的仓库名]
        git push origin master -f

使用

每次更改完文件过后，在 Hexo 根目录运行以下命令：

git add -A
git commit -m "Update"
git push origin master

也可直接在仓库中 改文件/写博文 效果一样，GitHub 都会为你自动生成文件。

本文将介绍一些免费的图床，可以供博客/日常使用。

每个图床都会给出测试链接供测试，无法访问或图片丢失则代表图床失效。

公共图床

SM.MS

https://sm.ms

曾经图床的域名有备案并使用国内 CDN，但后来因为滥用被吊销。

现在使用的是 CloudFlare，国内访问效果不好甚至无法访问，不建议使用。

测试图片：

SM.MS 测试图片

Imgur

https://imgur.com

国外一家图片托管服务商，你可以选择注册或不注册，同样的，拖拽上传，永久保留，其SLA有着相当高的保证。

然而很可惜的是，Imgur 并不能在国内正常访问。你也可以尝试使用 #代理 解决

测试图片：

Imgur 测试图片

去不图床

https://7bu.top/

由 杜老师 提供的个人公益图床，存储于阿里和腾讯的对象存储。

官方保证 SLA>=99% ，目前来看是一个不错的选择。

当然，毕竟是个人维护的图床，能不能永久撑下去还是个问题。

如果您需要搭配 PicGo/uPic，请参考以下的配置：

接口地址：https://7bu.top/api/upload
POST 参数：image
回调 JSON：data.url

测试图片：去不图床

去不图床所使用的 CDN 面向的是中国大陆。

路过图床

https://imgchr.com

支持永久存储图片，全球CDN加速。官方宣称『图床从2011年至今都稳定运行』。

测试图片：

路过图床

Postimage

https://postimage.org/

Postimage 是一款来自国外的图床工具，支持按照一定大小缩放图片及设置图片自动删除。

在上传完成后，Postimage 会为你生成多种链接格式以满足不同需求。

Postimage 还会生成一个用于删除当前图片的链接，你只要访问那个链接即可将图片从服务器上删除。

测试图片：

Postimage

2021-03-01 更新：国内已无法正常访问。 2021-05-10 更新：时好时坏。

折腾

GitHub + jsDelivr

网上有许多的教程，此处不再演示。

jsDelivr 非常稳定，国外使用 CloudFlare，国内有网宿节点，速度非常之快。

测试图片：

jsDelivr

NPM + 镜像

我们可以使用 NPM 作为图床的储存。

再搭配上各种镜像调用，速度扛扛滴。

使用方法

您应该拥有基本的 npm 环境，如没有，请安装。

安装教程可以参阅互联网，有很多可供参考。

首先，新建一个文件夹存放文件。

然后打开 cmd 或 终端，进入目录并输入以下命令 登录 NPM ：

npm login

如果没有账号的，请前往 NPM 注册账号

紧接着输入以下命令：

npm init # 生成包文件
npm publish # 发布包

请注意，如果你之前用过淘宝镜像，那么请先手动切回官方源：

npm config set registry https://registry.npmjs.org

每次更新完包内存放的图片后，你应该修改 package.json 文件内的版本号（向上增加），然后再次运行 npm publish 发布包。

推荐的镜像

https://cdn.jsdelivr.net/npm/  # jsDelivr，网宿节点
https://unpkg.zhimg.com/ # 知乎，网宿节点
https://code.bdstatic.com/npm/ # 百度，网宿节点（不推荐）
https://shadow.elemecdn.com/npm/ # 饿了么，网宿节点

[镜像链接]/[包名]@[版本]/[文件名]

# https://cdn.jsdelivr.net/npm/mdt-for-typecho@0.4.2/screenshot.png
# https://unpkg.zhimg.com/mdt-for-typecho@0.4.2/screenshot.png
# https://code.bdstatic.com/npm/mdt-for-typecho@0.4.2/screenshot.png
# https://shadow.elemecdn.com/npm/mdt-for-typecho@0.4.2/screenshot.png

测试图片

图片太多，这里使用超链接，点击就可以看到。

jsDelivr：jsDelivr+NPM

知乎：知乎+NPM

百度：百度+NPM

饿了么：饿了么+NPM

LeanCloud

https://leancloud.cn / https://leancloud.app
注册一个 LeanCloud 账号，此处不再赘述。

创建一个 App，进入 存储 -> 文件，点击「上传」并上传图片。

上传成功后会在文件列表中显示，在列表中我们可以看到 URL 地址。

测试链接：

笔者使用国际版，为避免拖慢网站加载速度，使用超链接，点击即可看到。

LeanCloud 测试链接 (国际版)

UniCloud

https://unicloud.dcloud.net.cn/

注册一个 UniCloud 账号并登录，此处不再赘述。

创建一个服务空间，选择『阿里云』并起个名字。（选择阿里云不收费）

进入「云存储」，点击「上传文件」。

点击右侧的「详情」即可查看图片地址，预览等信息。

测试图片：

UniCloud

代理

Imgur 在国内已经无法访问了，但是，我们可以利用服务器代理啊！

https://search.pstatic.net/common/?src= # 国内网宿，只能加载特定图床图片如 Imgur [1]
https://imageproxy.pimg.tw/resize?url= # Akamai 节点，无限制 [2]
https://images.weserv.nl/?url= # CloudFlare 节点 [3]
https://pic1.xuehuaimg.com/proxy/ # CloudFlare 节点 [4]

我们就以代理 Imgur 的图片为例，原链接：https://i.imgur.com/NATHKc2.jpeg

https://search.pstatic.net/common/?src=https://i.imgur.com/NATHKc2.jpeg
https://imageproxy.pimg.tw/resize?url=https://i.imgur.com/NATHKc2.jpeg
https://images.weserv.nl/?url=https://i.imgur.com/NATHKc2.jpeg
https://pic1.xuehuaimg.com/proxy/https://i.imgur.com/NATHKc2.jpeg

测试图片：

图片太多，这里使用超链接，点击就可以看到。

此处的序号对应上方代理列表的序号

[1]

[2]

[3]

[4]

使用浏览器访问：https://vercel.com/signup

点击「Cotinue with GitHub」并使用 GitHub 账号注册。

创建代码仓库

新建 GitHub 代码仓库，并在代码仓库中新建 index.html 文件，这将作为首页。

在 index.html 文件中填写基本的代码内容，如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
</head>
<body>
<p>This page is for test.</p>
</body>
</html>

使用 Vercel 部署

点击控制台右上角的「Import Project」

点击「Import Git Repository」下方的「Continue」

输入 GitHub 仓库的地址并点击「Continue」

经过基本配置后，项目就会自动部署。

点击项目控制台的「View Domain」进入域名配置

默认会提供 *.vercel.app 免费域名，也可以免费添加自己的域名。

目前新项目已经更换为 *.vercel.app 域名，如仍需要 *.now.sh 域名，可以直接填写，实测可以使用。

例如我需要使用 test-page-123.now.sh 域名，那么我只需要在自定义域名处填写并点击「Add」即可。

2021-05-10 更新：已无法再添加 *.now.sh 域名，*.now.sh会自动跳转 *.vercel.app。