anheyu | 安知鱼修改

2023-08-27 19:22:54

嵌套的圆角

在遇到内外两层圆角时，可以通过 CSS 变量动态去计算内部的圆角，看起来会更加和谐

核心代码

1
2
3
4
5
6
7

.parent {
  --anzhiyu-nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
  border-radius: var(--anzhiyu-nested-radius);
}

《css嵌套的圆角》在线运行1024code

视图转换动画 View Transitions API

我们先从一个简单的例子来认识一下。

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

<div class="list" id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

我们实现一个简单交互，点击每个元素，元素就会被删除

1
2
3
4
5

list.addEventListener('click', function(ev){
  if (ev.target.className === 'item') {
    ev.target.remove()
  }
})

用 css修饰一下就变成了以下效果

功能正常，就是有点太过生硬了

现在轮到 View Transitions 出场了！我们只需要在改变状态的地方添加document.startViewTransition，如下

1
2
3
4
5
6
7

list.addEventListener('click', function(ev){
  if (ev.target.className === 'item') {
    document.startViewTransition(() => { // 开始视图变换
      ev.target.remove()
    });
  }
})

1
2
3
4
5
6
7
8
9

list.addEventListener('click', function(ev){
  if (document.startViewTransition) { // 如果支持就视图变换
    document.startViewTransition(() => { // 开始视图变换
      ev.target.remove()
    });
  } else { // 不支持就执行原来的逻辑
    ev.target.remove()
  }
})

现在效果如下

删除前后现在有一个淡入淡出的效果了，也就是默认的动画效果，我们可以把这个动画时长设置大一点，如下

1
2
3
4

::view-transition-old(root), /* 旧视图*/
::view-transition-new(root) { /* 新视图*/
  animation-duration: 2s;
}

这两个伪元素我们后面再做介绍，先看效果

是不是明显感觉过渡变慢了许多？

但是这种动画还是不够舒服，是一种整体的变化，看不出删除前后元素的位置变化。

接下来我们给每个元素指定一个标识，用来标记变化前后的状态，为了方便控制，可以借助 CSS 变量

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

<div class="list" id="list">
  <div class="item" style="--i: a1">1</div>
  <div class="item" style="--i: a2">2</div>
  <div class="item" style="--i: a3">3</div>
  <div class="item" style="--i: a4">4</div>
  <div class="item" style="--i: a5">5</div>
  <div class="item" style="--i: a6">6</div>
  <div class="item" style="--i: a7">7</div>
  <div class="item" style="--i: a8">8</div>
  <div class="item" style="--i: a9">9</div>
  <div class="item" style="--i: a10">10</div>
</div>

这里通过view-transition-name来设置名称

1
2
3

.item{
  view-transition-name: var(--i);
}

然后可以得到这样的效果，每个元素在变化前后会自动找到之前的位置，并且平滑的移动过去，如下

是不是非常丝滑？这就是 View Transitions 的魅力！

在动画执行的过程中，还会在页面根节点自动创建以下伪元素

1
2
3
4
5

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

其中，::view-transition-old表示「旧视图」的状态，也就是变化之前的截图，::view-transition-new表示「新视图」的状态，也就是变化之后的截图。

默认情况下，整个页面root都会作为一个状态，也就是上面的::view-transition-group(root)，在切换前后会执行淡入淡出动画，如下

1
2
3
4
5
6

:root::view-transition-new(root) {
  animation-name: -ua-view-transition-fade-in; /*淡入动画*/
}
:root::view-transition-old(root) {
  animation-name: -ua-view-transition-fade-out; /*淡出动画*/
}

这也是为什么在使用了document.startViewTransition后整个页面会有淡入淡出的效果了

详细的内容这里不再做过多赘述。

最佳实践:《View Transitions API》

另外还有几个有趣的案例

1. 《css动画拖拽排序》
   
2. 《数字过渡动画》
   
3. 类似于 APP 的转场动画（多页面跳转）
   

总的来说，原生的视图转换动画可以很轻松的实现两种状态的过渡，让 web 也能实现媲美原生 APP 的动画体验，下面再来回顾一下整个变化过程：

1. 调用document.startViewTransition，浏览器会捕捉当前页面的状态，类似于实时截图，或者“快照”

2. 执行实际的 dom 变化，再次记录变化后的页面状态（截图）

3. 触发两者的过渡动画，包括透明度、位移等变化，也可以自定义 CSS 动画

4. 默认情况下是整个页面的淡入淡出变化

5. ::view-transition-old表示「旧视图」的状态，也就是变化之前的截图，::view-transition-new表示「新视图」的状态，也就是变化之后的截图。

6. 如果需要指定具体元素的变化，可以给该元素指定view-transition-name

7. 前后变化不一定要同一元素，浏览器是根据view-transition-name寻找的

8. 同一时间页面上不能出现两个相同view-transition-name的元素，不然视图变化会失效

另外，视图转换动画应该作为一种「体验增强」的功能，而非必要功能，在使用动画时其实拖慢了页面打开或者更新的速度，并且在动画过程中，页面是完全“冻结”的，做不了任何事情，因此需要衡量好动画的时间，如果页面本身就很慢就更不要使用这些动画了。

参考链接
[1] View Transitions： https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

[2] view-transition sort (juejin.cn)： https://code.juejin.cn/pen/7268263402853072931

[3] view-transition sort (codepen.io)： https://codepen.io/xboxyan/pen/BavBevP

[4] view-transition-dialog (juejin.cn)： https://code.juejin.cn/pen/7268262983178911779

[5] view-transition-dialog (codepen.io)： https://codepen.io/xboxyan/pen/WNLeBgY

[6] view transition theme change - (juejin.cn)： https://code.juejin.cn/pen/7268257573277532219

[7] view transition theme change (codepen.io)： https://codepen.io/xboxyan/pen/poqzmLY

css属性占用

问题的原因，众所周知，CSS 中的transform是一个包含很多值的属性，例如

1
2
3

div{
  transform: translate(-50%, -50%) scale(1.5)
}

但是，这并不是简写，而是就该这么写，这一点和background不一样

1
2
3
4
5
6
7
8
9
10

div{
  background: url('1xxx') 10px 10px / 20px 20px no-repeat; 
}
/*等同于以下写法*/
div{
  background-image: url('1xxx'); 
  background-position: 10px 10px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

分开写的好处在于，如果只需要改变某一部分就很容易覆盖

1
2
3

div.div1{
  background-image: url('2xxx'); /*只改变图片，不改变其他*/
}

回到前面，如果希望改变transform中的某一部分，就不太行了，必须把没改变的部分也写一遍，而且更改的部分也无法抽离出来作为一个公共的样式

1
2
3
4
5
6
7

div.scale{
  transform: scale(2) /*这样不行，会丢失translate*/
}
/*必须写完整*/
div.scale{
  transform: translate(-50%, -50%) scale(2)
}

那如何巧妙的解决这个问题呢？

1. 用其他方式来代替 transform
   碰到这种情况，第一感觉可能就是放弃原有transform属性，用其他方式代替。

   比如translate(-50%, -50%)一般是为了实现元素居中效果，可以用flex等其他方式实现

   1 2 3 4 5 6

   .parent{ display: flex } div{ margin: auto; /*通过margin:auto实现居中*/ }

   再比如translate(10px, 10px)这样的偏移，可以用left或者margin-left等方式实现

   1 2 3 4 5

   div{ position: relative; left: 10px; top: 10px; }

   或者干脆再包裹一层父级，也能避免transform被占用的问题。

   1 2 3 4 5

   <div class="wrap"> <div class="box"> </div> </div>

   不过，这些方式都是规避方式，其实还有官方解决方案

2. transform 的单独赋值
   前面提到过transform并不是一个简写属性，所以没有办法像background那样对某一部分进行赋值。为了解决这个问题，从Chrome 104开始，浏览器终于正式支持单独赋值了

   有兴趣的可以参考这篇文章：解放生产力！transform 支持单独赋值改变

   就拿前面那个例子来说

   1 2 3

   div{ transform: translate(-50%, -50%) scale(1.5) }

   可以写成

   1 2 3 4

   div{ translate: -50% -50%; scale: 1.5 }

   这样如果需要改变某一部分，就只需要像普通属性一样覆盖就行了

   1 2 3

   div.scale{ scale: 2 }

   不过目前兼容性欠佳，谨慎使用！（适合内部项目尝鲜）

3. 借助 CSS 变量拆分属性

   前面的transform 的单独赋值虽然很好，但是太新了，无法立刻在项目中使用。下面介绍一个兼容性更好，使用更放心的解决方案。

   还是上面这个例子

   1 2 3

   div{ transform: translate(-50%, -50%) scale(1.5) }

   通过 CSS 变量，将transform拆分

   1 2 3 4 5

   div{ --translate: -50%, -50%; --scale: 1.5; transform: translate(var(--translate)) scale(var(--scale)) }

   经过这样拆分以后，CSS 变量就成了独立属性，如果需要覆盖，只需要修改其中一个就行了，而无需关注–translate是什么样的，这样变化的部分就可以单独作为一个公共的样式了，如下

   1 2 3 4 5 6 7 8 9

   .div1{ --translate: -50%, -50%; } .div1{ --translate: 10px, 10px; } div.scale{ --scale: 2; /*无需关注其他transform，可以作为公共的样式*/ }

   是不是非常清晰明了？下面是一个演示demo

   1 2 3

   [type="checkbox"]:checked+div{ --scale: 1.5 }

   效果如下
   

   完整代码可以查看以下任意链接：
   CSS transform (codepen.io)
   CSS transform - 码上掘金 (juejin.cn)
   CSS transform (runjs.work)

动是动了，但是没有过渡，太生硬了，那如何解决呢？

这就需要用到@property了，是干什么的呢？简单来讲，可以自定义属性，让自定义变量像颜色一样进行过渡和动画，换句话说，现在执行动画的是--scale这个属性，而不再是transform了

将这个自定义属性通过@property定义一下就行了，如下

1
2
3
4
5

@property --scale { 
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

关于@property的应用，可以参考以下文章

@property: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property

其实不至于transform，很多类似的都可以用到这个技巧，比如颜色

1
2
3
4
5
6

el{
  --r: 255;
  --g: 255;
  --b: 255;
  color: rgb(var(--r), var(--g), var(--b));
}

总结一下

1. 部分 CSS 属性比较复杂，比如transform，很容易被占用
2. 通常的解决方式是规避，比如换一种居中方式，或者用left、top等代替
3. 新出现的transform 的单独属性可以解决这个问题，目前还比较新，仅适合内部项目尝鲜
4. 借助 CSS 变量可以拆分复杂的属性
5. 借助 @property 让CSS自定义属性支持过渡动画
6. 不仅仅是 transform，思维放开，复杂的属性都可以采取这样的思路

CSS scroll-driven animations

CSS 滚动驱动动画，在Chrome 115中被支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

可以参考这篇文章学习CSS 滚动驱动动画终于正式支持了~

文章略长，建议收藏后反复查阅

2023-08-26 19:24:00

最近遇到了部分地区vercel即便绑定了自定义域名任然有部分用户无法访问被阻断的情况，于是就打算给vercel套一层国内CDN，既然用户无法访问vercel的ip，那么就让用户去访问国内 CDN的节点，然后再让节点去回源访问vercel即可。

该教程适用于无服务器的情况，如果有自己的服务器就没必要多此一举，而是可以直接使用国内CDN即可。注意大部分国内 CDN使用需要域名进行备案。

什么是CDN?

CDN英文全称Content Delivery Network，中文翻译即为内容分发网络。它是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。

简而言之就是，厂商在全国各地都有很多很多的服务器，每一个服务器我们称之为节点，很多的节点组成了CDN。

CDN工作原理

CDN的工作原理就是将源站的资源缓存到位于全国各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、分担源站压力，保证用户访问资源的速度和体验。

在用户与源站之间加了一层CDN，用户先访问 CDN的节点，CDN节点再去源站拿取内容，当用户第二次访问的时候就会直接返回节点上缓存的内容，由于节点离用户近，所以用户拿到资源的速度就会缩短，访问也就变快了。

访问优先级
通常情况下，中国内地的网络质量有以下特点：
用户访问同运营商的 IP 地址过程中的网络质量优于访问跨运营商的 IP 地址过程中的网络质量。
用户访问同省运营商的 IP 地址过程中的网络质量优于访问跨省运营商的 IP 地址过程中的网络质量。
用户访问跨省同运营商的 IP 地址过程中的网络质量优于访问同省跨运营商的 IP 地址过程中的网络质量。

自定义域名解析

在域名服务商进行域名解析

分两种情况，你要接入的国内CDN是否支持自定义host(目前测试腾讯云、多吉云都支持)

国内CDN支持自定义host

docs.anheyu.com 境内地区 通过cname解析 到对应的国内CDN提供的cname域名
docs.anheyu.com 境外地区 通过cname解析 到cname.vercel-dns.com，来通过vercel的校验

国内CDN不支持自定义host

docs.anheyu.com 境内地区 通过cname解析 到对应的国内CDN提供的cname域名
docs.anheyu.com 境外地区 通过cname解析 到cname.vercel-dns.com，来通过vercel的校验
vcl-docs.anheyu.com 通过cname解析 到cname-china.vercel-dns.com，来通过vercel的校验

vercel配置

我以文档域名 docs.anheyu.com 举例，将项目部署在vercel以后先绑定自定义域名

如果你的国内CDN支持自定义host的话，只需要绑定一个自定义域名即可，如果你的国内CDN不支持自定义host的话，需要绑定两个自定义域名，此处我绑定了两个作为演示。

国内大厂CDN一般都支持自定义回源host

目前测试过多吉云，腾讯云都是支持自定义回源host的

配置国内CDN

以多吉云为例(毕竟免费 20G，还能设置封顶策略)

进入域名管理添加域名

国内CDN支持自定义host
回源域名填写 cname-china.vercel.com
回源host选择 与加速域名一致 即为 docs.anheyu.com

改动回源host的目的是为了让vercel那边知道你需要回源到的域名。

国内CDN不支持自定义host
如果你的国内CDN不支持选择回源host的话，你就需要使用到刚刚绑定的第二个自定义域名：
回源域名填写 vcl-docs.anheyu.com
回源host就自动会和回源域名一致，就不用担心这个问题了，因为你直接回源到了一个国内能够被访问的域名vcl-docs.anheyu.com。

写在最后

为什么不直接回源vercel自带的.app域名？

因为vercel自带的.app域名目前被墙，国内CDN无法访问回源到vercel自带的.app域名，所以也就无法加速呈现出内容了。

如果还有其他问题欢迎一起探讨，目前主题文档使用的就是这种方式来解决的部分地区无法解决的问题。

为什么不直接使用多吉云放服务器上加速？

一开始就说了，因为文档压根就没有想过要放在自己服务器上，一来是为了防止被攻击，毕竟vercel免费，但是如果有自己的服务器的话，还是建议直接放服务器上面进行加速，速度会更加可观，钱也很可观。

2023-08-19 18:42:00

今天我要向大家推荐一款由腾讯出品的免费Logo制作神器——AI Logo。这次腾讯真的很良心！您可以访问AI Logo官方网站开始体验。

什么是AI Logo？

AI Logo是一款基于人工智能技术的Logo设计工具，旨在帮助用户快速创建独特、专业的Logo设计。它提供了丰富的设计元素、字体和图标，让您能够轻松制作出符合品牌形象的Logo，10秒创建您的LOGO！

如何使用AI Logo？

访问AI Logo官方网站

1. 输入你的logo名字
   

2. 选择行业分类，我这边选择一手元宇宙🤣
   

3. 选择联想关键词
   

4. 选择喜欢的主色
   

5. 生成成功，可以直接选择进行下载
   

在设计界面上，可以选择使用智能生成的设计方案，或者自行选择设计元素进行定制。

根据需求，对Logo进行调整、修改和优化，直到满意为止。

完成Logo设计后，可以选择下载Logo文件，保存到本地。

值得注意的是生成后的图片，左上角都有标注是商用许可或个人许可

主要特点

1. 免费使用
   AI Logo是一款完全免费的Logo制作工具，无需支付任何费用即可使用其中的所有功能。这对于初创企业、个人创作者或需要频繁设计Logo的用户来说，无疑是一个非常好的选择。

2. 简单易用
   AI Logo的用户界面简洁明了，操作简单易上手。即使没有设计经验，也可以通过简单的拖拽、调整和选择来创建出令人满意的Logo设计。

3. 丰富的设计元素
   AI Logo提供了大量的设计元素选择，包括不同风格的图标、字体、形状和背景等。可以根据自己的品牌定位和需求，自由组合这些元素，创造出独一无二的Logo设计。

4. 智能生成
   AI Logo利用人工智能技术，能够根据提供的关键词和品牌信息，智能生成一系列与之相关的Logo设计方案。这节省了大量的时间和精力，可以更快地找到满意的设计。

5. 定制化选项
   除了智能生成的设计方案，AI Logo还提供了丰富的定制化选项。可以对已有的设计进行调整、修改和优化，以满足个性化的需求。

缺点

1. 目前无法做去除文字的logo，不过可以用ps解决
2. 另外无法调节尺寸下载
3. 无法按照商用或者个人使用进行搜索

结语

AI Logo作为腾讯出品的免费Logo制作神器，为用户提供了简单、快速、免费的Logo设计体验。终于出现了一个类似Brandmark的竞品，希望越做越好，后面不要改成什么金币、积分制作(💦)

2023-08-18 19:24:00

在当今的数字时代，人工智能（AI）和图像处理软件如Adobe Photoshop（PS）已经成为创意设计和图像编辑的重要工具。当AI碰上PS，可以创造出令人惊叹的创意式生成作品。本教程将向您介绍如何在Mac上安装PS Beta 25.0，并展示一些创意式生成的示例。

步骤一：安装PS Beta 25.0

首先，访问Adobe官方网站并登录您的Adobe账号，如果没有账号就注册一个，注意一定要选择美国区注册。

下载 Creative Cloud

导航到PS Beta页面，下载适用于Mac的PS Beta 25.0安装程序。

完成下载后，运行安装程序并按照提示进行安装。

安装完成后，打开PS Beta 25.0并登录您的Adobe账号。

找到Beta 应用程序中的Photoshop (Beta)，点击右侧的试用，等待下载完成，完成安装后打开可以直接使用，试用7天

步骤二：了解AI与PS的结合

使用选区工具选中你的选区，然后直接输入你想生成的内容，即可得到一张从无到有的图片

生成完成以后，右侧一共提供了3种可以变换的选项，可以选择喜欢的或者继续生产新的内容

以下我会列出部分目前能够完成的功能,AI技术在PS中的应用为创意设计带来了全新的可能性。

1. AI辅助选择器
   PS中的智能选择工具结合AI技术，可以更准确地选择图像中的对象。通过使用智能选择工具，您可以快速选择并提取图像中的特定对象，从而为后续编辑操作节省时间。

2. AI图像修复
   AI技术可以帮助修复图像中的缺陷和损坏。PS中的内容感知填充工具结合AI算法，可以智能地填充图像中的缺失部分，使修复过程更加高效和准确。

3. AI图像生成
   AI技术可以生成逼真的图像内容。通过使用PS中的AI生成工具，您可以快速生成风景、人物或其他对象的逼真图像，为您的创意设计提供更多素材选择。

4. 支持中文
   拥有良好的中文支持，并且不需要翻墙，这一点在国内使用尤为舒适，且生成速度也能接受。

5. 艺术风格转换
   使用AI技术和PS的滤镜功能，可以将一幅照片转换为特定艺术风格的图像。尝试将一张普通照片转换为梵高或毕加索的风格，观察AI如何改变图像的外观和氛围。

6. 智能合成
   利用AI技术和PS的图层功能，可以将多张照片合成为一个完整的场景。尝试将不同的照片元素（如天空、建筑、人物）合成在一起，创造出令人惊叹的视觉效果。

7. 文字识别与编辑
   借助AI技术和PS的文字识别功能，可以从图像中提取文字并进行编辑。尝试从一张图片中提取文字，然后对其进行修改、替换或添加效果，使文字与图像融为一体。

步骤三: 永久无限制使用

这里我提供一个补丁beta25.0 mac版本的补丁，官方的安装完以后直接运行补丁就能永久使用了。

提取码: yuyu

内容测试

经过测试并不是所有内容都能生成，生成是经过了Adobe服务器的，所以不能生成瑟瑟内容，存在违规检测！

结论

AI与PS的结合为创意设计带来了无限的可能性。通过安装PS Beta 25.0并探索AI与PS的创意式生成功能，可以开拓创作的新领域，创造出令人振奋的作品。希望本教程对您有所帮助！

请注意，PS Beta版本可能存在一些实验性功能和限制，使用时请谨慎。如果您在使用过程中遇到任何问题，请参考Adobe官方文档或寻求相关支持。

2023-07-23 17:55:44

在受到过一次教训后，得出结论，完全解析至不可访问的界面并不是最优解，在受到小伙伴的提醒后发现，起码会让必应的搜索结果变的很奇怪。

那么，我得找到一个能在国外也访问我博客的办法，但是同时也要能狗抵御住一般的攻击，很快我想到了cloudflare

我们可以把境内的正常解析到我们的境内CDN上或者源站服务器上，将境外的接入到cloudflare

说干就干

域名接入cloudflare

此处不再赘述如何创建cloudflare账号，在cloudflare官网创建好账号后

1. 登录 => 主页 => 添加网站

2. 输入你的域名

3. 选择Free计划

4. cloudflare会扫描已有DNS记录，将已有的DNS记录添加进去，这一步很重要，防止出现服务中断，如果这一步没做好，可能会有部分站点后面没有解析导致出现网站不可访问的现象，将所有已经有的解析记录都在这一步加好。

5. 获取到cloudflare到NS服务器地址

6. 登录你的域名厂商解析修改域名的DNS服务器，此处以腾讯云举例

打开 域名控制台 点击修改DNS服务器地址

添加上刚刚在cloudflare获取到的DNS服务器地址，两个都加上，此时只是暂时改，为了通过✅cloudflare的监测，通过以后就可以改回来了。

7. 等待⌛️10分钟左右，cloudflare会发送一封邮件📧 说明DNS服务器修改成功，改成功以后就可以正式开始接入了，在左侧的DNS->记录可以找到你的所有记录，在这里可以把你的解析记录都加好，解析到你的服务器上，并且打开代理状态的小云朵☁️，亮起则代表，cloudflare正在代理你的流量，才能起到防护作用，否则只有解析作用。

8. 左侧的DNS->记录中，最下面可以看到一开始你验证的时候的NS值，将这个NS值复制下来，然后到腾讯云进行境外解析，添加NS记录，记得需要两条，这样一个域名，在腾讯云就有三条解析记录，在cloudflare有一条。

9. 最后再在腾讯云将DNS服务器改回来dnspod

就可以达到境内解析为国内CDN，境外解析为cloudflare防护。

总结

弊端1：不适用于根域名，只能子域名（二级域名等）使用NS解析过去
弊端2：依赖于dnspod的解析ip池判断，某些地区可能存在判断错误（移动尤为明显）

优势：免费的要什么自行车

总的来说还是很不错的，值得一试，另外也可以将境外的解析到奇安信CDN上，也能达到类似的效果。

2023-07-16 17:55:44

昨天2023年7月16日，本站遇到了搭建博客以来最大的攻击，10分钟2700w的请求🙏，峰值达到了令人震惊的1400w！

从时间上来看，18:40到18:50，短短10分钟，几乎是一瞬间就被请求了https数2000万次，多吉云在20:00给我发送了请求数激增到2000w的短信

我立马反应过来，登录控制台一看，哦豁，由于之前换了域名，还没来的及设置QPS 限制，于是就被钻空子了

什么是QPS 限制？

超出 QPS 限制的请求会直接返回错误，设置较低频次限制可能会影响正常用户的使用，请根据业务情况合理设置阈值。
被 QPS 限制拦截的请求不会产生 HTTPS 请求数计费。但需要特别注意的是，当请求被“域名防盗链”规则优先拦截后，无论是否超过 QPS 限制，都将进行 HTTPS 请求数计费。

比如我设置为120次/s，那么一个ip在1s内只能请求当前域名120次，将QPS设置在一个合理的范围内将能够很大程度上的保护你的站点，设置过低将降低正常用户的访问。

日志查看

设置好QPS以后，我痛定思痛，将多吉云提供的将近3G的日志下载了下来

下载下来vscode打开一看，好家伙，上百万行数据，随便搜索了一下，无一例外，全是国外ip

痛定思痛

首先一定要设置好QPS和每日上限，我目前每日上限设置为5G，QPS为20/s

经过仔细观察可以发现，几乎所有的攻击都来自海外，所以我们需要屏蔽海外的流量，首先Nginx防火墙，从Nginx下手其实并不是最优解，因为即便是在Nginx将所有的海外ip都封禁了，但是由于我有使用CDN，也就是说，流量还是会先经过CDN再来到Nginx防火墙，依然被刷掉了CDN的https次数，所以我们应该另外寻找办法

首先我们可以想到在机房层面屏蔽海外ip和udp，这是最优解，但是总是调整或者经常联系机房对我这个社恐来说是不现实的，于是我看上了第二种办法。

那就是从解析层面处理，使用DNSPod解析是支持境内与境内分开解析的，将境内解析到国内CDN以后，再将境外解析到127.0.0.1即可解决问题。

但是解析到127.0.0.1以后使用境外ip是完全打不开了，所以我做了一个单页面用来提示境外访问使用境内网络环境访问。

项目地址: https://github.com/anzhiyu-c/OverseasProhibition

然后使用cname这个单页网站解析到vercel

直接在vercl导入github项目后绑定自定义域名

至此算是做了我能想到的所有努力，欢迎大家补充。