前言

需要用到的工具和技能有：

NS1.com使用教程

Filter Chain的使用

NS1.COM官方文档|Filter Chain使用示例

https://help.ns1.com/hc/en-us/articles/360020683013

顾名思义就是不断地过滤不符合条件的answer，直到链（Chain）的结尾就是要返回给用户的解析结果。

一般而言，以Up开头，Select First N结尾。前者代表是否开启该answer，我们使用监控包如果发现网站速度过慢则可以设置为Up: False；后者表示假如链（Chain）的结尾有多个answer，则返回前N个answer，默认N为1。可以通过调整Priority调整优先级。

这是我的设置

Filter Chain

之后我们要根据不同的运营商或者国家地区来返回DNS解析结果。因为NS1没有提供国内运营商的分类，但是提供了ASN来分类，因此我们使用以下这个项目获取不同运营商的ASN，然后填入到对应区域。

中国大陆ASN

https://github.com/xingpingcn/china-mainland-asn

我是创建了answer group来分类不同的运营商的。

answer设置

之后可以选择country为CN的answer作为未命中规则的备选。之后再填写一个只有Up的answer作为除中国之外全球的DNS解析结果。

NS1 API的使用

设置DNS

NS1.COM官方文档|NS1 data feed创建

https://help.ns1.com/hc/en-us/articles/360020474154-Create-a-data-feed

根据图的指引创建data source和data feed。详细看官方文档。

NS1 API的使用

可以看到上面的图，在answer里已经设置好了关联的data feed了（绿色箭头表示开启，红色表示关闭）；先关联，之后我们会通过AWS Lambda来控制的。关联的data feed详细操作看官方文档。

NS1.COM官方文档|answer关联data feed

https://help.ns1.com/hc/en-us/articles/360020471154-Automatic-failover

answer关联data feed

编写feed更改请求-python

NS1 API官方文档|修改data feed

https://ns1.com/api?docId=2188

我们可以编写python以请求API来更改UP的状态。之后我们会把代码放到AWS Lambda来控制的。

注意填写必要的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import requests

status = True

source_id = ''
label=''
ns1_api_key = ''
url = f'https://api.nsone.net/v1/feed/{source_id}'
headers = {
    "X-NSONE-Key":f"{ns1_api_key}"
}
data = {
    f"{label}":{"up":status}
}
res = requests.post(url,headers=headers,json=data)

使用AWS Lambda

AWS Lambda支持python且可以通过各种条件来触发，现在我们用监控平台（本教程用的监控宝）的webhook来触发，发送POST请求到NS1来更新answer状态。

创建函数

点击创建函数——填写信息——点击高级设置

监控宝官方文档|回调url实例

https://help.cloudwise.com/help/38/39/520

如果里选择使用监控宝，那么填入以下代码 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import requests
import base64
import hashlib
import json

source_id = ''
label=''
status = True
ns1_api_key = ''

url_token = '' #回调token

def g_md5(content):
    md5hash = hashlib.md5(content)
    md5 = md5hash.hexdigest()
    return md5

def lambda_handler(event, context):
    json_data = json.loads(event['body'])
    verify = str(json_data['msg_id'])+str(json_data['task_id'])+str(json_data['fault_time'])+url_token
    md5 = g_md5(verify.encode('utf-8'))
    if md5==json_data['token']:
        if json_data['message_status'] == 1 or json_data['message_status'] == '1':
            status = False
        elif json_data['message_status'] == 2 or json_data['message_status'] == '2':
            status = True
        url = f'https://api.nsone.net/v1/feed/{source_id}'
        headers = {
            "X-NSONE-Key":f"{ns1_api_key}"
        }
        data = {
        f"{label}":{"up":status}
        }
        res = requests.post(url,headers=headers,json=data)
        print(res.text,f'[status] \'up\': {status}')

设置层（layers）

因为AWS Lambda默认不能使用第三方库，因为用到了requests库，所以要自己上传requests库。或者你也可以自己用python原生库重写。

AWS官方文档|为依赖项创建Python层

https://docs.aws.amazon.com/zh_cn/lambda/latest/dg/python-package.html#python-package-dependencies-layers

requests.zip可以根据官方文档自己生成，也可以上传我制作的requests.zip

之后设置函数的层（layers），选择我们上传的requests.zip包。

使用监控宝作为监控平台

类似的平台还有观测云，免费版最高30分钟的检测频率，20万次访问每天好像是，节点11个，3网都有。

或者可以破解一些免费测速网站的js。

监控宝可以使用回调url（webhook）来传递信息，设置如下图。

回调url就填写AWS Lambda提供的url

AWS Lambda

回调url

之后创建监控任务，记得在Webhook通知那里选择你的回调url。

监控宝官方文档|回调url实例

https://help.cloudwise.com/help/38/39/520

前言

本篇为picture-bed-using-freecdn脚本的教程之一。脚本意在提高静态博客的cdn稳定性。

picture-bed-using-freecdn

https://github.com/xingpingcn/picture-bed-use-freecdn

脚本的另一篇使用教程在这里 [使用freecdn-js提高hexo博客的cdn稳定性]

建立用于储存图片等静态资源的npm图床

可以放置js、css、图片（最好带上hash）等不经常变动的资源。

准备工作

需要：

• npm账号，创建一个token；
• GitHub账号：创建一个repo，并在repo的setting创建一个名为NPM_TOKEN的secrets，值为上面的token。

添加NPM_TOKEN

创建package.json

该文件指定了要上传的图床的名字和图床版本（不需要事先在npm空间创建一个空的package）；其中名字不能和现有的package重复，所以写的尽量长。

1
2
3
4
5
6

{
  "name": "",
  "version": "1.0.0",
  "description": "DO STUFF",
  "author": "XDF"
}

看好名称写就行，version尽量和我一样就行。

创建GitHub action

GitHub action可以在你把文件push或者release到repo时自动执行自定义命令，这里我们让他自动把我们push的图片发布到npm空间，使资源能通过npm cdn访问。

在reop的上方点击Action，然后点击new workflow，之后点击set up a workflow yourself ，名字随便（我这里是npm-publish.yml），之后填入以下信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

name: npm-publish

on:
  push:
    branches:
      - master
permissions:
  contents: write
  
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/
        
      # 发布 NPM 包
      - name: Publish Package
        run: |
          git config --global user.email "email@email.com"
          git config --global user.name "user_name"
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: $
      - name: Push
        run: |
          git push

其中的master要换成你branch（分支）的名字。NPM_TOKEN就是最开始在secrets填写的token，因此名字要对应上。email和user_name可以随便写。

上传图片

使用图床工具或者手动上传到GitHub repo就能自动发布到npm空间，可以看到npm包的版本version变化了（npm不支持覆盖发布，所以版本一定会变化），同时.json文件里面的版本也变化了，这得益于GitHub action。

这里推荐一个图床工具吧，只用于GitHub的，比较轻量，使用浏览器就行。

PicX图床工具官方文档

https://picx-docs.xpoet.cn

使用图片

提供几个国内能用的npm cdn

1
2
3
4

https://npm.onmicrosoft.cn/,
https://jsd.onmicrosoft.cn/npm/,
https://cdn.jsdelivr.net/npm/,
https://unpkg.com/

使用格式为：

1

https://{cdn}/{npm_name}@{version}/path/to/resource.ext

例如

1
2

https://unpkg.com/html-hosting-for-xp@1.0.1/%E5%9C%A8python%E4%B8%AD%E8%BF%90%E8%A1%8Cbash%EF%BC%88windows%EF%BC%89.html
https://jsd.onmicrosoft.cn/npm/p-hosting-for-xp@1.0.15/20230525/logo%20(2).ln5ua8psy9s.webp

建立用于储存html静态资源的npm图床

同样图床可以储存html文件。我是在本地编译好博客然后发布到GitHub repo的，因而在push之后依然可以在action中把html发布到npm空间。

1
2
3
4
5
6
7
8
9

{
  "name": "",
  "version": "1.0.0",
  "description": "DO STUFF",
  "author": "XDF"
  "files": [
        "*.html"
    ]
}

这里的package.json多了一个files的key，表示只发布html文件到npm空间。files是一个列表（array），和.gitignore文件的写作规则一样。

这里的action中的.yml文件和储存图片的repo的.yml一样，但是要删去npm version patch这行。

npm version patch的作用是更新version，在本地发布html之前（hexo d），在命令行输入npm version patch就能更新本地的package.json中的version（换而言之，在更新version之前，本地的package.json和.yml内容和目录要和GitHub repo的一致，然后push更新了version之后的.json之后，让action自动部署，发布html到npm空间）

脚本的使用

脚本链接见前言。如果你要使用npm空间，要在config.py中写上你的npm包名，用于查询最新的version。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

f:
cd f:/blog #博客根目录
hexo clean && hexo g
cd f:/blog/package_json #储存package.json和.yml的文件夹（注意.yml路径！！）
npm version patch
cd f:/blog
gulp
# 上传之前确保./public存在package.json和.yml（注意.yml路径！！）
xcopy .\package_json .\public /e/h
hexo d
cd f:/blog/.deploy_git
python ../import_to_db_with_hexo_blog.py
python ../import_to_db_with_urls_txt.py
freecdn find --save
freecdn manifest --merge ../pic.conf
freecdn manifest --merge ../custom.conf -o manifest-full.txt #用于生成外置的freecdn-manifest.txt
freecdn js --make --cdn "https://jsd.cdn.zzko.cn/gh/user/repo@main/freecdn-internal/ver/freecdn-main.min.js unpkg jsdelivr elemecdn " #此命令为配置cdn链接用于加速.min.js文件，详细请查看freecdn项目的GitHub
git add --all
git commit -m "update"
git push origin main #如果需要添加origin地址，请自行添加。
python ../generate_external_manifest_file.py
git add --all
git commit -m "update"
git push origin main  #如果“is_refresh_tag”为 “True”需要上传多次
python ../refresh_cdn_cache.py #可能没用

批量输入并且最后输出所有结果

bash_path用于定位你的git工具的bash，参数cwd=用于定位你的工作目录，和在文件夹中右键git bash here是一样的效果。

输入的命令可以带有空格，但是必须在最后加上\n

1
2
3
4
5
6
7
8
9
10
11
12
13

import subprocess
bash_path = r'F:\Program Files\Git\bin\bash.exe'
subp = subprocess.Popen(bash_path,stdin=subprocess.PIPE,stdout=subprocess.PIPE,stderr=subprocess.PIPE,encoding='utf8',cwd='$your_path')
#输入的命令可以带有空格，但是必须在最后加上`\n`
subp.stdin.write('nvm -v\n')
subp.stdin.flush()
subp.stdin.write('nvm -v\n')
subp.stdin.flush()
subp.stdin.write('nvm -v\n')
subp.stdin.flush()
#不要忘记了关闭subp，否则会阻塞
subp.stdin.close()
print(subp.stdout.read())

1
2
3

1.1.11
1.1.11
1.1.11

实时输入并输出结果

需要用到多线程threading和队列queue来实时获取输出结果。最后也不要忘记调用子进程的close()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import subprocess
import queue
import threading,time

bash_path = r'F:\Program Files\Git\bin\bash.exe'
def thread_for_listen(subp,q):
   for line in iter(subp.stdout.readline,''):
      q.put(line)
subp = subprocess.Popen(bash_path,stdin=subprocess.PIPE,stdout=subprocess.PIPE,stderr=subprocess.PIPE,encoding='utf8',cwd='./public')
q = queue.Queue()
p1 = threading.Thread(target =thread_for_listen,args=(subp,q))

p1.start()
for i in range(5):
   subp.stdin.write('nvm -v\n')
   subp.stdin.flush()
   print(q.get(),end='')
   time.sleep(0.3)
   print('wake up after 0.3s')
subp.stdin.close()
q.task_done()

1
2
3
4
5
6
7
8
9
10

1.1.11
wake up after 0.3s
1.1.11
wake up after 0.3s
1.1.11
wake up after 0.3s
1.1.11
wake up after 0.3s
1.1.11
wake up after 0.3s

脚本使用方法

cdn链接处理脚本

https://github.com/xingpingcn/picture-bed-use-freecdn

我写的脚本发布在GitHub上，匹配了![img](url)、{%link%}、{%image%}、headimg四个tag。脚本请到GitHub下载。

可以屏蔽相关cdn（更改host或用v2rayN路由屏蔽）测试freecdn-js是否能切换备用cdn。

扩展教程在这里：使用npm空间存放图片和html并利用cdn加速

需要的包版本

1
2
3

urllib3   1.25.11
nodejs    16.10.0
freecdn   0.3.1

README.md|打不开请到源站查看

https://github.com/xingpingcn/picture-bed-use-freecdn

Windows的大坑！

如果利用Windows来写博客，那么提交git的时候会出现LF will be replaced by CRLF the next time Git touches it的提示，CR（回车）就是\r，LF（换行）就是\n，Windows平台默认换行符就是CRLF(\r\n)，此变换会导致本地文件的hash和存放在npm或者git空间的文件的hash不一致；需要运行以下命令行:

1
2

#提交检出均不转换
git config --global core.autocrlf false

接入透明模式【可选】

配置透明模式

freecdn透明模式的优势和配置文件看下面的链接

freecdn透明模式

https://github.com/EtherDream/freecdn/tree/master/docs/transparent-mode

博客使用render.com托管静态资源；因为freecdn的透明模式仅仅提供了nginx配置，而且render刚刚好也支持docker，那就直接用nginx-docker吧。

首先在你的博客根目录下的source创建Dockerfile文件。（生成博客的时候会把source内的文件移动到将要被上传到repo的文件夹内）

1
2
3
4
5

FROM nginx
COPY ./ /usr/share/nginx/html
COPY ./freecdn-boot.conf /etc/nginx
COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 443

然后下载freecdn的两个配置文件，freecdn-boot.conf和nginx.conf，同样放在博客根目录，只需要改动nginx.conf。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

events {
  worker_connections      1024;
}

http {
  server {
    # freecdn nginx conf
    include freecdn-boot.conf;

    root                  /usr/share/nginx/html;

    expires               1h;
    default_type          text/plain;
    include               mime.types;

    # HTTPS conf
    listen                443;

    location /works {
      return              200  "it works";
    }

    gzip                  on;
    gzip_static           on;
    gzip_types
      text/plain
      text/xml
      text/javascript
      text/css
      application/x-javascript
      application/json
      application/xml
      application/xml+rss
    ;
  }
}

br和gzip压缩在render平台自动开启，见官网docs。

上传到GitHub reop（hexo d）后，在render.com创建一个web service，然后选择你的repo部署就可以了。

render.com

白嫖到底！

由于免费的render web service会在15分钟之内没有连接访问的情况下断开，并在下一次访问之后重启启动，而重新启动需要较长时间；因此用cf worker去定时访问网站。

需要一个cf账号，没有的先去注册

点击左侧的worker and page，创建一个worker，这个时候不能改动代码，先确认创建。之后点击触发器标签，并找到Cron 触发器，填入3/13 * * * *，这行代码表示在每个小时过3分钟之后触发一次定时器，然后每过13分钟再触发一次（如果和每个小时过3分钟这一条件冲突，则重置触发器，即在每个小时过3分钟之后再次触发，如此反复）。设置效果如下图所示

之后编辑worker。点击快速编辑，写入以下代码

1
2
3
4
5
6
7

export default {
  async scheduled(event, env, ctx) {
    var res = await fetch('https://xxx.com/favicon.ico');
    var data = res.json();
    console.log(data);
  },
};

async scheduled表时当触发器触发时运行代码（题外话：这是不是可以当作一个免费的攻击服务器？？），fetch代表访问你的网站的资源，await似乎是必需的，因为没有await的话在render的log里面看不到worker的访问记录。

前言

推荐使用hysteria（区别于ws+tls+cdn，这个协议不能添加也不需要添加cdn）。

hysteria一键搭建

https://github.com/emptysuns/Hi_Hysteria

如要添加cdn则需要：
1、vps，我用的是免费的亚马逊云香港服务器ec2（2c1g）
2、一个域名，可以到namesilo(点击购买域名)，.xyz域名只需要0.99刀一年，第二年重新换一个就可以。支持支付宝付费，还不用实名，送邮箱域名和隐私保护。
3、cloudflare账号（没有的账号的，去谷歌搜索然后注册）
4、cf ip自选工具点击查看
5、 Easy install latest or LTS linux kernel and enable BBR or BBR plus
BBR vs BBRplus vs BBR2 一般网络速度对比

默认已经搭建v2ray，没有搭建的可以查看这里

域名添加a记录到vps的ip

因为我们要用到cloudflare的cdn，所以买到域名之后直接把nameserver（NS）改成cloudflare提供的NS。

需要在cloudflare账号中添加你的域名，cf会给你NS，然后到域名供应商的设置页面更换域名的NS。

cloudflare提供的NS

如果是在namesilo买的，更换NS的入口还比较隐蔽，点击看下图可以查看入口。

namesilo NS更换入口

之后自定义一个二级域名，例如forv2ray.example.com，添加A记录到你的vps ip。并且开启cdn（如出现下图代理状态的图标，则开启成功。或需要等一段时间才能生效）

cloudflare添加A记录

之后把证书加密模式改成完全（full）

把证书加密模式改成完全（full）

这个时候可以ping一下你的二级域名，或者测一下v2ray的速度了，不过应该很慢。

证书的话我是脚本自动生成的，当然也可以到cf设置 -> SSL/TLS -> 源服务器生成。

筛选适合的cloudflare ip

ip筛选工具

https://github.com/XIU2/CloudflareSpeedTest

下载后打开运行，记得关掉你的梯子，然后将最快的ip填写到你的v2ray客户端的地址（addres）位置。

更改v2ray设置

其中的伪装域名填写你在cf添加A记录到vps IP的二级域名。

这个时候你就可以去测速了（或需要等待一段时间生效）

为图片添加占位图的基本结构

以全宽图片为例：

1
2
3
4
5
6
7
8
9

<div style='position: relative; width: 100%;'>
    <!-- padding-bottom设置占位图大小 -->
    <a style="position: relative; height: 0; padding-bottom: ${h_divide_w_str};color:gray;background-color: rgb(204, 204, 204);">
        <!-- 占位图中的文字  -->
        <div style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);">loading picture...</div>
        <!-- 图片 -->
        <img>
    </a>
</div>

其中position、width、height、padding为必要属性，${h_divide_w_str}为占位图的宽高比。因为需要解决布局抖动问题，所以占位图的宽高比要与图片一致，如何动态获取宽高比呢？这需要在生成hexo博客之前获取，然后代入到${h_divide_w_str}中。

volantis主题动态获取远程图片的宽高比

在编写博客的时候用到了gallery标签插件，这个插件可以在点击图片的时候放大（这是由fancybox.js和fancybox.css驱动。注意：这里的fancybox.js是JavaScript文件，而生成hexo博客用到的同名文件是Nodejs文件）

我们需要修改的，就是生成html对应的文件，而生成gallery的文件位于blog\node_modules\hexo-theme-volantis\scripts\tags\fancybox.js（nodejs文件）。

点击链接可以下载我修改好的fancybox.js

fancybox.js

https://github.com/xingpingcn/picx-images-hosting/blob/master/fancybox.js

以下是使用image-size库访问远程图片得到宽高比的代码示例。

image-size

https://www.npmjs.com/package/image-size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const url = require('url')
const http = require('http')

const sizeOf = require('image-size')

const imgUrl = 'http://my-amazing-website.com/image.jpeg'
const options = url.parse(imgUrl)

http.get(options, function (response) {
  const chunks = []
  response.on('data', function (chunk) {
    chunks.push(chunk)
  }).on('end', function() {
    const buffer = Buffer.concat(chunks)
    const dimensions = sizeOf(buffer);
    const h_divide_w = 100 * dimensions.height / dimensions.width;
    const h_divide_w_str = h_divide_w.toString() + '%'; //宽高比
  })
})

修改宽高比

得到宽高比后自定义css样式，以下以volantis主题为例

1
2
3
4
5

const result = `<div class='fancybox' style='position: relative; width: 100%;'>
            <a class='fancybox' pjax-fancybox itemscope itemtype="http://schema.org/ImageObject" itemprop="url" href='${url}' data-fancybox='${group}' data-caption='${alt}' style="position: relative;background-color: rgb(204, 204, 204);border-radius: 4px; padding-bottom: ${h_divide_w_str};color:gray;">
            <div style="position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);">loading picture...</div>
            ${newItem}
            </a>${buidAlt(imageTags || alt)}</div>`;

因为是获取图片宽高比异步进行的，所以要在hexo.extend.tag.register()方法中添加async: true以堵塞博客的生成，这样才能在得到宽高比后生成博客。此方法点击以下链接查看更多。

hexo标签插件（Tag）

https://hexo.io/zh-cn/api/tag.html

1

hexo.extend.tag.register('gallery', postFancybox, { ends: true ,async: true});

其中postFancybox是返回值是promise类型。（点击以上的hexo标签插件（Tag）查看更多）

如果在一个gallery内有多个图片，或许需要用到for循环，那么需要promise.all()确保所有占位图生成完成后再生成网页。

修改fancybox.css

hexo的css是用styl编写的，而volantis主题的fancybox.css位于blog\node_modules\hexo-theme-volantis\source\css\_style\_tag-plugins\fancybox.styl。

点击链接查看更多

fancybox.styl

https://github.com/xingpingcn/picx-images-hosting/blob/master/fancybox.styl

主要就是把影响自定义css的height属性删去（我大概也忘了修改过什么了，，，）。

添加动画

将html代码添加到fancybox.js对应位置就能得到以上效果

1

<svg class="spinner0" viewBox="0 0 50 50"> <circle class="path0" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle></svg>

然后修改css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.spinner0 {
  animation: rotate 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  
  & .path0 {
    stroke: var(--color-list-hl);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
  
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

// 加载图片后暂停动画
.spinner0:has(+ img.loaded){
  animation-play-state: paused;
  > circle {
    animation-play-state: paused;
    }
  }

前言

进阶的设置请以下文章：

• 使用freecdn-js提高hexo博客的cdn稳定性
• 免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移

寻找访问慢的根源

打开调试台-网络，查看原因

寻找访问慢的根源

可以看到，访问GitHub page、css文件和js文件都超过了1秒以上，加载图片更是慢的不得了，这几个问题都是要解决的。

使用netlify部署网页

netlify page访问速度

访问GitHub page很慢，使用使用netlify部署网页能加快访问速度【netlify示例】，netlify支持从GitHub抓取repo并部署，也就是说hexo生成并上传网页到GitHub，netlify就能同步部署，而且速度还很快。netlify每个月有100g免费流量，把图片、js等静态资源放在GitHub，然后用cdn加速（下面会讲到），会节省不少流量。

可以从上图看到，netlify托管的网页国内访问速度非常快，比cf page（平均2+秒，较为稳定）和vercel（【vercel示例】电信很慢，其他还行；容易被墙，访问跳转到反诈平台）好多了。看了一下，访问慢的似乎是因为刚刚换了netlify的dns，还有缓存所以域名解析到vercel了，所以慢的都是vercel()。

netlify可以免费给你分配一个二级域名，也可以换成自己买的域名（我没有备案速度也很快），真的很良心了。

域名我在namesilo(点击购买域名)买的，.top后缀续费4.8刀，和阿里云国际版价格差不多，国内版要便宜很多，不过要实名。当然namesilo这个价格比很多国外域名注册商便宜了。

.xyz只要0.99刀更加便宜。

使用jsd.cdn.zzko.cnjsd.cdn.zzko.cn替代cdn.jsdelivr.net进行cdn加速css和js

主题默认配置用的cdn.jsdelivr.net现在似乎不会突然抽筋了，但是依然很慢，jsd.cdn.zzko.cn是一个免费面向中国境内外的高速jsdelivr镜像站，访问速度很快，可以作为理想的替代方案。

1

@charset "UTF-8";

这时我们有了能正常访问的css文件（js不需要改）

之后需要cdn加速css和js文件，直接把css和js文件放在blog\source下，上传网页的时候hexo会把这些一起上传到根目录/。

或者在GitHub新开一个不同于个人GitHub page的repo，之后在根目录/上传这两个改了名字后的css和js文件。

使用

1

https://jsd.cdn.zzko.cn/gh/user/repo/style.css

就能访问style.css了，同理app.js。

要让volantis访问cdn加速链接，需要在配置中添加一下代码。

1
2
3
4
5
6
7
8
9
10
11
12

cdn:
  enable: true
  
  set:
    js:
      app: https://jsd.cdn.zzko.cn/gh/user/repo/app.js
    css:
      style: https://jsd.cdn.zzko.cn/gh/user/repo/style.css # (异步加载样式)

cdn_version: false

volantis_static_cdn: https://jsd.cdn.zzko.cn/npm/volantis-static@0.0.1654736714924/

user和repo都改为自己的。如果没有刷新没有变化记得设置cdn_version: false然后重启服务器。

volantis_static_cdn的值或许需要根据默认配置中的静态文件版本去更改，也就是@后面的一串数字。

使用PicX图床工具

使用方便管理的图床让你编辑文章更加得心应手，此图床可以自动压缩图片，添加md格式等，配置也十分简单，直接看官方文档就ok。

其图床还有多种cdn加速可选，十分方便。

PicX图床工具官方文档

https://picx-docs.xpoet.cn

结语

最后看看访问速度

访问速度快

shift+F5强制刷新，速度还挺满意，dom打开速度很快了，只是没更新图片（），，懒，可以直接试试测我的网站速度看看。

写在前面

404页面不生效

按照官方的文档配置404页面，在本地打开一个不存在的页面，并不显示404页面，重启服务器依然不行。干脆直接放到GitHub page上，结果404页面能生效

sidebar效果不生效

我的volantis版本是volantis5.7，主题文件设置中的sidebar的shadow, floatable, blur效果不生效

1
2

sidebar:
    effect: [shadow, floatable, blur]

我的方法是打开blog\node_modules\hexo-theme-volantis\layout\_widget，这里存放着sidebar的各个组件。

以下以修改blogger组件为例：

找到代码

1

<section class="widget <%- item.class %>  <%- page.widget_platform %> <%- page.widget_pjax %>">

可以看到class中是没有shadow, floatable, blur的，只需要我们手动添加关键词就能生效

1

<section class="widget blur floatable shadow <%- item.class %>  <%- page.widget_platform %> <%- page.widget_pjax %>">

刷新就可以看到效果生效，左边的blogger组件有高斯模糊并且有阴影效果了。

效果

其他组件也是同样的方法，关键是要找到这行代码

1

<section class="widget ...">

这行代码可以在浏览器打开元素查看器找到

效果

更改图片显示尺寸和圆角半径

图片显示尺寸

使用以下代码，则能显示如本post中的图片一样的效果

{% image https://cdn.jsdelivr.net/gh/xingpingcn/picx-images-hosting@master/20230420/image.2v43xxro3vs0.png::width=80%::alt=效果 %}

其中的url，width和alt可以自己修改。width的单位可以是px也可以是百分比%

图片圆角半径

打开\img.styl就可以修改圆角半径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.md
  img
    position: relative
    trans()
    @media screen and (max-width: $device-mobile)
      box-shadow: none
  div>img,p>img,a>img
    display: block
    margin: auto
    border-radius: 4px
    @media screen and (max-width: $device-mobile)
      border-radius: 4px
  span
    img
      display: inline
      margin: auto

其中的border-radius就是半径的key（默认的配置文件中应该有3个，我没有复制全），修改你想要的value。

如果在像我一样在第7行行尾添加a>img，则可以修改使用gallery标签插件的图片中border-radius的值。

解决手机模式下toc会被遮挡的问题

toc被遮挡

解决后

只需要在\navbar_first.styl中修改z-index值为一个较小的数字。

1
2
3
4
5

.l_header
  $iconW = 36px
  $iconMargin = 4px
  position: fixed
  z-index: 10

a cat

臭卷宝
hh

More info: bilibi

123
222

2311

info about a cat

视频

轮转（科学上网）