当你的网站接入了cloudflare，对于各位站长来说，以下的这些页面是否非常熟悉？
大名鼎鼎的cf五秒盾
能把真人也挡住的captcha人机验证
永远都是公交车火车帆船，能把人逼疯
阻止用户访问，让用户一脸懵逼
当然，先不管这个，如果你能够成功进入本站，你是否发现本站的captcha验证页面比较独特？别的不说，反正没有英文，能看得懂了。不仅如此，我们可以在让用户等待五秒盾的时候增添一点网站的独特元素，让用户了解部分网站内容，又或者放广告都是可以的，起码在这短短的几秒钟不至于让用户感到无聊和空白。当然这玩意是我自己写的，审美因人而异
这便是cloudflare的一个比较人性化的功能，自定义页面。如果你用的是free计划，可以不用看了，因为钞能力才能使你强大
首先我们要开启under attack模式，启用五秒盾，或者在防火墙创建规则，启用captcha质询
这时访问我们网站，就会出现验证页面。接下来我们就是要编辑这个验证页面，个性化这个界面
控制台-自定义页面
如果你此时已经用金钱获得了美妙的权益，我们应该如何制作自定义页面？
首先，你要把你的页面写出来，然后添加必要的令牌以启用验证功能
例如：自定义五秒盾页面需要有::IM_UNDER_ATTACK_BOX::这个玩意
例如：自定义WAF页面（也就是验证码）需要有::CAPTCHA_BOX::这个玩意
这个令牌该如何添加到我们的html里面？很简单：
<body>
<div class="你自己写的玩意">
xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx
</div>
::CAPTCHA_BOX::
/*你可以直接复制进来*/
<p>::CAPTCHA_BOX::</p>
/*可以这样*/
<center>::CAPTCHA_BOX::</center>
/*也可以这样*/
<strong>::CAPTCHA_BOX::</strong>
/*这样*/
<div class="cf">::CAPTCHA_BOX::</div>
<style>
.cf{
color:red;
font-size:30px
}
</style>
/*不用局限于cf的样式，你可以自己改*/
</body>
根据页面不同，令牌和令牌的位置都需要各位调整
当页面写完以后，上传到服务器，填写文件地址，让cloudflare扫描文件即可。
我用的是京东云星盾，大同小异了
如果服务器上有宝塔的nginx防火墙，要先关闭，因为防火墙会屏蔽扫描请求导致报错。如果一切正常，即可开始使用自定义的质询页面。注意：自定义页面如果需要更新，记得要再次进行扫描，否则不会更改！
下面是我自己写的验证页面，如果你的审美跟我有相似之处，可以参考，或者白嫖，图片文字之类的自己改就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
body{
background:url(./img/85685945_p0_master1200.jpg)no-repeat center center fixed;
background-size:cover;
}
</style>
<div class="header-bar">
<style>
.header-bar{
background-color: rgb(255,255,255,0.75);
width:100%;
height: 30%;
text-align:center;
}
</style>
<a id="poice" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44090202000547" ><img src="http://rosmontis.net/cf/2022010602270496.png" />粤公网安备44090202000547号 粤ICP备2022013454号-1</a>
<style type="text/css">
#poice{
position: relative;
padding-top: 2px;
padding-bottom: 2px;
width: 100%;
color: black;
font-size:3px;
display:inline-block;
text-decoration:none;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
</style>
</div>
<div class="header-notice">
<style>
.header-notice{
position: relative;
margin-top: 10px;
width:100%;
height: 5%;
background-color: rgb(255,255,255,0.75);
text-align:center;
}
</style>
<strong><p id="b">全站公告：近日有江苏部分用户发现本站域名被江苏反诈误拦截，正在积极处理此事，请受到影响的江苏用户使用代理访问</p></strong>
<style>
#b{
position: relative;
height: auto;
width: 100%;
margin-top: 2px;
margin-bottom: 2px;
color: red;
font-size:25px;
display:inline-block;
text-decoration:none;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
</style>
</div>
<div class="logo">
<img src="img/89894115_p0.jpg">
<style>
.logo {
width:200px;
height:200px;
margin:100px auto 0px;
border-radius:200px;
border:5px solid ;
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
transition:1s all;
}
.logo img {
width:200px;
height:200px;
margin:0px auto 0px;
background:#fff;
border-radius:200px;
}
.logo:hover {
transform:rotate(360deg);
box-shadow:0px 0px 0px rgba(0,0,0,0.3);
}
</style>
</div>
<div class="container">
<div class="container-line">进入本站前，请完成2次人机验证</br>不便之处，敬请谅解！QWQ</div>
<center>
::CAPTCHA_BOX::
</center>
<style>
.container {
background: rgb(255,255,255,0.8);
width:50%;
height:30%;
margin:0 auto;
margin-top: 30px;
font-size:30px ;
}
.container-line{
text-align:center;
line-height: 50px;
color: rgb(0, 0, 0);
}
</style>
</div>
<div class="left">
<style>
.left{
position: relative;
margin-top: 180px;
width: 50%;
height: 20%;
background: rgb(255,255,255,0.75);
left: 0%;
float:left;
}
</style>
<div class="left-title">
<h1>为什么我需要完成验证？</h1>
<style>
.left-title{
font-size: 70%;
text-align:center;
}
</style>
</div>
<div class="left-content">
<p> 为了防止针对本站的网络攻击，我们不得已出此下策。目前防火墙为常开状态，这意味着每一位访客在进入本站前都必须完成人机验证，并且这并不是唯一一次验证。我们的验证频率为五分钟一次。对此给各位用户带来的不便，我们深感抱歉。我们致力于在节约成本的同时保证每一位用户正常，安全的浏览网站。感谢每位用户的理解与配合！</p>
<style>
.left-content{
font-size: 20px;
margin-left:5%;
margin-right:5%;
}
p{
line-height: 10%px;
display:inline-block;
text-decoration:none;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
</style>
</div>
</div>
<div class="right">
<style>
.right{
position: relative;
margin-top: 160px;
width: 50%;
height: 20%;
background: rgb(255,255,255,0.75);
float:left;
}
</style>
<div class="right-title">
<h1>我在进行验证的时候遇到问题？</h1>
<style>
.right-title{
font-size: 70%;
text-align:center;
}
</style>
</div>
<div class="right-content">
<p> (1)若您无法开始验证，或没有看到人机验证框，请您尝试刷新页面，更换浏览器或者更换网络环境，若仍然没有解决问题，请联系管理员；</br> (2)若您完成验证后没有跳转到正常网页，请您注意:人机挑战需要绝对正确；如您的网络环境不安全(例如使用代理)则可能会被要求完成2-3次人机验证。</p>
<style>
.right-content{
font-size: 20px;
margin-left:5%;
margin-right:5%;
}
p{
line-height: 10%px;
}
</style>
</div>
</div>
</body>
如果你认为还是cloudflare的样式好，就是差个翻译，不妨先把页面爬下来，在进行翻译
当验证出现的时候，直接右键将页面保存下来即可
就这么简单
原创文章，作者：Rosmontics，如若转载，请注明出处：https://rosmontis.com/archives/149
