就算被打也要漂漂亮亮的——CloudFlare Custom Pages 自定义教程

前排提醒:这篇文章仅适用于CF Pro用户

如果您还不是的话,可于我的杂货铺内自助购买,点我直达Aiden 的杂货铺


大家好!我是Aiden,我又来水文章了(捂脸)

最近被打的有点多,,,攻击经常发生在用户浏览高峰期时期。经常有用户访问的时候突然看到个5s盾警告,或者开着梯子看我们网站的时候莫名其妙要输入验证码,又或者不小心点到了某些奇怪的目录导致被锁定访问(你肯定是故意的)看到满屏幕的英文,估计没啥互联网知识的访客会一脸懵逼进来,一脸懵逼出去。

然后我想着,诶,我是CF Pro用户呀,我可以自定义错误页面!但是我找了将近半个小时,中文互联网对这方面的介绍还是相当的少,沧水的错误页面可拉倒吧,太杀马特了(www别打我——ε=ε=ε=┏(゜ロ゜;)┛ )

今天捣鼓了一下,将我的博客的自定义错误页分享给大家!

首先是用户触发了 Basic Security Challenge, WAF Challenge, Country Challenge这几项需要进行验证码验证时的错误页

然后是用户触发了429 errors, 1000 Class Errors, WAF Block, IP/Country Block, Rate Limit等被阻止访问的错误页

(背景是多图!可以自己淡入淡出和切换的那种!!!)

(错误页还有音乐!让无法访问的用户享受下音乐作为补偿!我真是个带善人!)

(我实在是触发不了这些错误,所以就拿HTML将就一下咯,反正都是一个效果 ε=ε=ε=┏(゜ロ゜;)┛)

前置操作

首先放出HTML 成品文件

中文化的五秒盾(再次感谢宿云提供的支持) 点我直达

1000.html对应阻止访问,Google reCAPTCHA.html对应验证码验证。

编辑软件推荐Sublime Text 3,我用着反正挺顺手的,点我直达官网!

开始编辑!

我们首先用Sublime Text 3 打开1000.html文件

<title>对应出现错误时的网站标题

<meta name=”description” content=”人生何处不青山”> 对应你的网站描述

<meta name=”keywords” content=”Aiden’s World,网站运维,系统运维,网页制作,脚本编程,实用软件,生活随写”> 对应你的网站关键词,自己对应着改咯。

<link rel=”icon” type=”image/png” href=”https://pics.xn--6n2ao17b.com/images/Mai.png”> 对应你的站点icon

<div style=”background:url …… 对应你的网站错误页背景,都是可以自定义的。


<h1 class=”cTtigs ibhev iHZvIS”>电波无法到达哦</h1> 对应错误提示

算了不列举了,是人都应该会举一反三。

着重说一下这个,这个前面的是点击你左上角LOGO后跳转的页面,后面的<span>A</span>之类的是你的博客名称,中间夹着的是字符,会举一反三吧?

Google reCAPTCHA 的修改就简单多了

你只需要照着你自己的博客信息修改前三行就行了。

动图的修改在第二十六行,标题和提示在二十八行和二十九行。

修改完了在CF Custom Pages提交就行了

(别告诉我你连托管HTML都不会)

祝您被打愉快~(当然永远看不到这些错误最好)

来源&鸣谢

  1. 老兄de博客 (已在我的友链里面咯!)(提供1000系错误页面模板)
  2. 萌歪 – Moeyy.cn (提供验证码错误模板,然而还是得我来修改让它变成CF要求的样式)
  3. 宿云,提供汉化版五秒盾页面

在此再次感谢他们的无私付出,没有他们的支持,我一个人是做不到这些的。

评论

  1. laoxong
    Linux Chrome

    领导来视察

    5月前
    2020-3-05 17:22:24
    • Sakurajima 博主
      Windows Chrome

      5月前
      2020-3-05 18:26:53

发送评论 编辑评论


上一篇
下一篇