SVG 反爬

app/antispider/index.py

@@ -12,7 +12,7 @@ antispider = Blueprint('antispider', __name__, url_prefix='/as')
 @antispider.before_request
 def before_request():
     user_agent = request.headers.get("User-Agent")
-    print(user_agent)
+
     if "Mozilla" in user_agent:
         # 允许请求通过
         return None
@@ -107,7 +107,6 @@ def deviation():
 # CSS 伪类实现反爬
 @antispider.route('/css_antispider')
 def css_antispider():
-
     with open(app.root_path + '/data/blogs.json', 'r', encoding='utf-8') as f:
         json_data = json.loads(f.read())
 
@@ -118,11 +117,35 @@ def css_antispider():
         comment = item["comment"]
         collection = item["collection"]
 
-        css_str += f""".browse{index+1}::after{{content:'{browse}';font-size:14px;}}.comment{index+1}::after{{content:'{comment}';font-size:14px;}}.collection{index+1}::after{{content:'{collection}';font-size:14px;}}\n"""
+        css_str += f""".browse{index + 1}::after{{content:'{browse}';font-size:14px;}}.comment{index + 1}::after{{content:'{comment}';font-size:14px;}}.collection{index + 1}::after{{content:'{collection}';font-size:14px;}}\n"""
 
     compressed_css = compress(css_str)
 
     with open(app.static_folder + '/css/blog_antispider.min.css', 'w') as f:
         f.write(compressed_css)
 
-    return render_template("antispider/css.html",data=json_data)
+    return render_template("antispider/css.html", data=json_data)
+
+
+# 游戏排行榜
+@antispider.route('/rank')
+def games():
+    nums_dict = {
+        1: 0,
+        8: 1,
+        0: 2,
+        3: 3,
+        5: 4,
+        6: 5,
+        7: 6,
+        9: 7,
+        2: 8,
+        4: 9
+    }
+    with open(app.root_path + '/data/game.json', 'r', encoding='utf-8') as f:
+        json_data = json.loads(f.read())
+
+    # 将数字转换为列表，便于后续迭代
+    for item in json_data:
+        item["search"] = list(map(int, str(item["search"])))
+    return render_template("antispider/game.html", nums_dict=nums_dict,games = json_data)

app/data/game.json

+[
+  {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgp-dev.cdn.bcebos.com%2Fgp-dev%2Fupload%2Ffile%2Fsource%2Fd0ad98db869bb3f8e91f80c7d5365960.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=d5678f60257cfae32225e954ae608909",
+    "score": "9.0",
+    "title": "原神",
+    "desc": "陌生的天空下，少年少女立于尘沙。\n\n                                    你们是一对旅行中的双子，从世界之外漂流而来。你的血亲被陌生的神灵带走，而你也被神封印，陷入沉眠。\n\n                                    再度醒来，天地间风景已变……\n\n\n                                    《原神》是由米哈游自研的一款全新开放世界冒险RPG。你将在游戏中探索一个被称作「提瓦特」的幻想世界。\n\n                                    在这广阔的世界中，你可以踏遍七国，邂逅性格各异、能力独特的同伴，与他们一同对抗强敌，踏上寻回血亲之路；也可以不带目的地漫游，沉浸在充满生机的世界里，让好奇心驱使自己发掘各个角落的奥秘…",
+    "type": "角色扮演/ARPG",
+    "search": 303282,
+    "status": "status-down"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fappdown.baidu.com%2Fimg%2F0%2F512_512%2F244d263299e954004a6475b171586157.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=908d62726408cacaef38cda9b768e956",
+    "score": "6.8",
+    "title": "王者荣耀",
+    "desc": "S28赛季开启：狂沙之外，坚守所在。",
+    "type": "策略",
+    "search": 213849,
+    "status": "status-down"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgp-open-platform.cdn.bcebos.com%2F204301061245%2F0cb9eea1c8501b8c4f09ff14952e55a1%2Fgp-open-platform%2Fupload%2Ffile%2Fimg%2F6b13e7843ad977a1f5d1bddb0af9d99d.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=f3eb487fe706e8f99e4aafec09969728",
+    "score": "9.1",
+    "title": "香肠派对",
+    "desc": "在《香肠派对》您能体会到到酣畅、硬核的战斗系统。游戏中的枪械有着真实的弹道下坠、屏息系统；同时，游戏战场中包含信号枪、复活机、战术掩体、身份卡系统，考验着队伍间的默契程度。",
+    "type": "射击/枪械",
+    "search": 121791,
+    "status": "status-down"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgp-dev.cdn.bcebos.com%2Fgp-dev%2Fupload%2Ffile%2Fsource%2Ff8f5324a6b661c979cf18142cfa89dec.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=e87ab675b44c099eec9543c47b736a14",
+    "score": "8.2",
+    "title": "迷你世界",
+    "desc": "《迷你世界》是一款高度自由的休闲益智型3D沙盒游戏，有着非常方便快捷的多人联机模式，只要有网络\n                                    就能和各个地方的小伙伴们一起玩，不只局限于局域网内的小伙伴哦！",
+    "type": "策略经营/开放世界",
+    "search": 118210,
+    "status": "status-down"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fimg%2Ffad44df25ce28a8e46a3c45ba8897393%2Ffad44df25ce28a8e46a3c45ba8897393.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=2cc7cb48678088a6f7a4b117f873a0b4",
+    "score": "8.5",
+    "title": "明日方舟",
+    "desc": "大地被起因不明的天灾四处肆虐，经由天灾席卷过的土地上出现了大量的神秘矿物——“源石”。\n                                    依赖于技术的进步，源石蕴含的能量投入工业后使得文明顺利迈入现代，与此同时，源石本身也催生出“感染者”的存在。",
+    "type": "策略经营/卡牌",
+    "search": 109040,
+    "status": "status-down"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fsource%2F97e4c84a7881d7576db791519f01dde3.jpg&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=7c527532917f35aa925630160d55e192",
+    "score": "9.8",
+    "title": "原始传奇",
+    "desc": "《原始传奇》是一款MMORPG游戏，有战士、法师和道士三种职业。玩家可以在游戏的虚拟世界中与同伴尽情冒险，体验到养成、打斗、社交、互动等各种丰富多样的功能，成就一段强者的成长之路。游戏采用了大量的写实",
+    "type": "传奇/PK/热血",
+    "search": 66931,
+    "status": "status-up"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fsource%2F33602d58e26965a7ceccc66decd2439d.jpeg&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=c6bbb7ef1e0523ce0fa0edb4d585e055",
+    "score": "8.1",
+    "title": "原始传奇",
+    "desc": "《原始传奇》是一款主打“原汁原味传奇”的精品MMORPG手游。沿用端游《传奇》的登录界面、三职业形象、地图与怪物设计，细节考究，精确到主城的一草一木，最大程度重现经典，为千万玩家打造真正“热血传奇”。",
+    "type": "角色扮演",
+    "search": 66931,
+    "status": "status-up"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgp-open-platform.cdn.bcebos.com%2F204212301650%2Faa59fa5cca6049a02fe9cd0acf514dcf%2Fgp-open-platform%2Fupload%2Ffile%2Fimg%2Fe2c057c3e42287e37da1850ff0121a3f.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=62b03115bf5c38b9b84c97f91a908ffe",
+    "score": "9.3",
+    "title": "我的世界手游",
+    "desc": "网易「我的世界」Mojang官方授权代理_正版下载！",
+    "type": "角色扮演/冒险",
+    "search": 63614,
+    "status": "status-up"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fimg%2F6bc797a64224a27ffb7bafd710b73d63%2F6bc797a64224a27ffb7bafd710b73d63.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=aab6e710632efb41d62da0b5782685f9",
+    "score": "8.2",
+    "title": "决战沙城",
+    "desc": "《决战沙城》正版传奇世界授权，PK抢BOSS，传承了传奇世界核心玩法，再现战法道经典职业组合。自动打怪升级，带您重新回味经典，带给您不一样的极致享受。",
+    "type": "角色扮演/其它",
+    "search": 62254,
+    "status": "status-up"
+  },
+   {
+    "src": "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgdown.baidu.com%2Fappcenter%2Fsource%2F1396538632%2F4e5355c7ac481194a8adec8e4420bd28%2Fres%2Fdrawable-xhdpi-v4%2Ficon.png&app=2000&size=f200,200&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=ed36b98299cb6ad54a8f47a71f27cb8b",
+    "score": "8.8",
+    "title": "和平精英",
+    "desc": "重启未来前方2050 黑刃航母来袭 重启未来版本正式开启",
+    "type": "射击",
+    "search": 53088,
+    "status": "status-up"
+  }
+
+
+]
\ No newline at end of file

app/hw/index.py

@@ -20,7 +20,7 @@ where blogs_create_time like "2023/01%"
 GROUP BY blogs_author_info
 ) b 
 ORDER BY b.s desc
-limit 31""")
+limit 12""")
 
     result = db.engine.execute(sql)
     data = result.fetchall()

app/static/css/game.css

+   .type-rank-main {
+        align-items: flex-start;
+        display: flex;
+        justify-content: flex-start;
+        margin: 30px auto 0;
+        min-height: 450px;
+    }
+    .type-rank-main .right {
+        flex: 1;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap {
+        align-items: center;
+        display: flex;
+        justify-content: flex-start;
+        margin: 0 0 20px;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap .area-1 {
+        align-items: flex-start;
+        display: flex;
+        justify-content: flex-start;
+        width: 463px;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap.rank-item-mini .area-1 .cover-box, .type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .cover-box {
+        border-radius: 13px;
+        flex-shrink: 0;
+        height: 100px;
+        overflow: hidden;
+        position: relative;
+        width: 100px;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .cover-box .cover {
+    background: url(//fenwan.cdn.bcebos.com/webgame/static/lewangame/images/ca7773c1aaf7a2796c1b.png) 50% no-repeat ;
+    background-size: 40px;
+    border: none;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+ .type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .rank-index.index-1 {
+    background: #fe2d46;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .rank-index {
+    background: #ccc;
+    border-radius: 2px;
+    color: #fff;
+    font-size: 12px;
+    height: 20px;
+    left: 3px;
+    line-height: 20px;
+    min-width: 15px;
+    padding: 0 2px;
+    position: absolute;
+    text-align: center;
+    top: 3px;
+}
+    .type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box {
+        align-items: flex-start;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        height: 100px;
+        justify-content: space-between;
+        margin: 0 0 0 10px;
+        padding: 5px 0 0;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap.rank-item-mini .area-1 .info-box .info-top, .type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .info-box .info-top {
+        max-width: 325px;
+    }
+    .type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .cname {
+        color: #000;
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .cname .off-mark-box {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAcCAMAAAAOe/xLAAAAeFBMVEXvw3XRrGrRrGnVsGrVsm7duG7Pq2rSrmrPrGnPq2novnHPq2rRrmrUr2rUrmzOrWvPqmnSrGrSrWvWsWvNrG7Qq2nPq2rQrWrSrWvQrGvRrWrUrmrZs2vPq2nPq2nQq2rTrWvVr2vwxHAAAADTr2vet27kunfOqmkZPynZAAAAJ3RSTlMWtKpmSS7kc9ToHr6BbmC58Z+QVRzC0Zh3pIpcQfrcznxjGQB1NCZAanuzAAABLUlEQVQ4y6XVYXeCIBiG4VeUFmklaDk1NW3b8///4VoElk0qvT7x5T4K7zlAp5QJTCJYeqI0xmRxSgwhp0l4CEYCnCbiEATQgK8CetSV3zQE/JNLbOmRhPckV8uLGlhqino8xsGdMwwwOss9bYHa00ZzGdyQOhcYqEbzqF1bZaTz0j9j2PlGO5Ifvc0C1r7dHskokBE9P/kF1OdFhj3dyFC8lJvjTe5zhnqrFe682V3s7/MGhufOrdu8i+EnfySYOw9WBvUSNNfTRe7Oo40RkCVxHUKEzJ33QjIOFbgZYOHOs0hjfd418OwAv14aHPl9LiE4aSFKd64+tNzmOWyToOJv7l3i+sNeFQOK3vz6Qaz1ohVxrVbOnPOOtBX/MSsaA8y8Kmde1DOfiZmP1C/IPlRaxR5SMgAAAABJRU5ErkJggg==) 50%/cover no-repeat;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 14px;
+    margin: 0 0 0 4px;
+    position: relative;
+    top: 2px;
+    width: 31px;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .ename {
+    color: #999;
+    font-size: 12px;
+    height: 12px;
+    line-height: 12px;
+    margin: 6px 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-bottom {
+    align-items: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    height: 30px;
+    justify-content: flex-start;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-bottom .type {
+    color: #333;
+    font-size: 12px;
+    line-height: 12px;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .score {
+    align-items: flex-end;
+    background: linear-gradient(180deg,transparent,#000);
+    bottom: 0;
+    box-sizing: border-box;
+    color: #f14027;
+    display: flex;
+    font-size: 14px;
+    height: 48px;
+    justify-content: flex-end;
+    left: 0;
+    line-height: 14px;
+    padding: 6px;
+    position: absolute;
+    width: 100%;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-2 {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+    min-width: 100px;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-2 .status.status-down {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAABmsyxrtTFmsS1lsixotC9ntS1lsi1msSxmsyxmsy1rvDZlsSzcE74kAAAADHRSTlMAfx/f+Ecs6uKiKBNPEVvsAAAAaUlEQVQoz2OgK+BetQFVgPGMwMALZASABVjboHy2GlewQMjxBIgAk82RAKAAq89hBagS5TOuQIGQM0ZANkxJ4BlRsAK4Es8zU8AKEErOQBQglJyBKEAoOQNRgFACVYBQYqyAFqhKDDQEAO8xJIf6804JAAAAAElFTkSuQmCC);
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-2 .status {
+    background: 50% no-repeat;
+    background-size: cover;
+    height: 18px;
+    margin: 0 0 0 4px;
+    width: 18px;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-3 {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    width: 150px;
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-2 .status.status-up {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAKlBMVEUAAADzQCj3QinxQCjzQCf0QSj0RSjyQCfxQCf0QSfyRi3yQyj/SUnxQCfo3Zf3AAAADXRSTlMAfx/f+Ecs6uKiKBMH5ZXFJgAAAG1JREFUKM9joCVgUkATUDZCU2B7WQFVwd27RqgK7t4FK0Eo8L0CUoJQcGXuTV+gEoQCV9mLIUAlCAUBshdZgUoQChhkLzIglKRfCQAJsPqWQQXYWhlAAgwRCTBDDkAEeBD2QgQY6C+wazUDPQEA27QncyQYqS8AAAAASUVORK5CYII=);
+}
+.type-rank-main .right .list-box .rank-item-wrap .area-2 .status {
+    background: 50% no-repeat;
+    background-size: cover;
+    height: 18px;
+    margin: 0 0 0 4px;
+    width: 18px;
+}
\ No newline at end of file

app/static/css/game.min.css

+.type-rank-main{align-items:flex-start;display:flex;justify-content:flex-start;margin:30px auto 0;min-height:450px}.type-rank-main .right{flex:1}.type-rank-main .right .list-box .rank-item-wrap{align-items:center;display:flex;justify-content:flex-start;margin:0 0 20px}.type-rank-main .right .list-box .rank-item-wrap .area-1{align-items:flex-start;display:flex;justify-content:flex-start;width:463px}.type-rank-main .right .list-box .rank-item-wrap.rank-item-mini .area-1 .cover-box,.type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .cover-box{border-radius:13px;flex-shrink:0;height:100px;overflow:hidden;position:relative;width:100px}.type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .cover-box .cover{background:url(//fenwan.cdn.bcebos.com/webgame/static/lewangame/images/ca7773c1aaf7a2796c1b.png) 50% no-repeat;background-size:40px;border:0;display:block;height:100%;width:100%}.type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .rank-index.index-1{background:#fe2d46}.type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .rank-index{background:#ccc;border-radius:2px;color:#fff;font-size:12px;height:20px;left:3px;line-height:20px;min-width:15px;padding:0 2px;position:absolute;text-align:center;top:3px}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box{align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;height:100px;justify-content:space-between;margin:0 0 0 10px;padding:5px 0 0}.type-rank-main .right .list-box .rank-item-wrap.rank-item-mini .area-1 .info-box .info-top,.type-rank-main .right .list-box .rank-item-wrap.rank-item-mobile .area-1 .info-box .info-top{max-width:325px}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .cname{color:#000;cursor:pointer;font-size:14px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .cname .off-mark-box{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAcCAMAAAAOe/xLAAAAeFBMVEXvw3XRrGrRrGnVsGrVsm7duG7Pq2rSrmrPrGnPq2novnHPq2rRrmrUr2rUrmzOrWvPqmnSrGrSrWvWsWvNrG7Qq2nPq2rQrWrSrWvQrGvRrWrUrmrZs2vPq2nPq2nQq2rTrWvVr2vwxHAAAADTr2vet27kunfOqmkZPynZAAAAJ3RSTlMWtKpmSS7kc9ToHr6BbmC58Z+QVRzC0Zh3pIpcQfrcznxjGQB1NCZAanuzAAABLUlEQVQ4y6XVYXeCIBiG4VeUFmklaDk1NW3b8///4VoElk0qvT7x5T4K7zlAp5QJTCJYeqI0xmRxSgwhp0l4CEYCnCbiEATQgK8CetSV3zQE/JNLbOmRhPckV8uLGlhqino8xsGdMwwwOss9bYHa00ZzGdyQOhcYqEbzqF1bZaTz0j9j2PlGO5Ifvc0C1r7dHskokBE9P/kF1OdFhj3dyFC8lJvjTe5zhnqrFe682V3s7/MGhufOrdu8i+EnfySYOw9WBvUSNNfTRe7Oo40RkCVxHUKEzJ33QjIOFbgZYOHOs0hjfd418OwAv14aHPl9LiE4aSFKd64+tNzmOWyToOJv7l3i+sNeFQOK3vz6Qaz1ohVxrVbOnPOOtBX/MSsaA8y8Kmde1DOfiZmP1C/IPlRaxR5SMgAAAABJRU5ErkJggg==) 50%/cover no-repeat;display:inline-block;flex-shrink:0;height:14px;margin:0 0 0 4px;position:relative;top:2px;width:31px}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-top .ename{color:#999;font-size:12px;height:12px;line-height:12px;margin:6px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-bottom{align-items:flex-end;display:flex;flex-wrap:wrap;height:30px;justify-content:flex-start}.type-rank-main .right .list-box .rank-item-wrap .area-1 .info-box .info-bottom .type{color:#333;font-size:12px;line-height:12px}.type-rank-main .right .list-box .rank-item-wrap .area-1 .cover-box .score{align-items:flex-end;background:linear-gradient(180deg,transparent,#000);bottom:0;box-sizing:border-box;color:#f14027;display:flex;font-size:14px;height:48px;justify-content:flex-end;left:0;line-height:14px;padding:6px;position:absolute;width:100%}.type-rank-main .right .list-box .rank-item-wrap .area-2{align-items:center;display:flex;flex:1;justify-content:flex-start;min-width:100px}.type-rank-main .right .list-box .rank-item-wrap .area-2 .status.status-down{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAABmsyxrtTFmsS1lsixotC9ntS1lsi1msSxmsyxmsy1rvDZlsSzcE74kAAAADHRSTlMAfx/f+Ecs6uKiKBNPEVvsAAAAaUlEQVQoz2OgK+BetQFVgPGMwMALZASABVjboHy2GlewQMjxBIgAk82RAKAAq89hBagS5TOuQIGQM0ZANkxJ4BlRsAK4Es8zU8AKEErOQBQglJyBKEAoOQNRgFACVYBQYqyAFqhKDDQEAO8xJIf6804JAAAAAElFTkSuQmCC)}.type-rank-main .right .list-box .rank-item-wrap .area-2 .status{background:50% no-repeat;background-size:cover;height:18px;margin:0 0 0 4px;width:18px}.type-rank-main .right .list-box .rank-item-wrap .area-3{align-items:center;display:flex;justify-content:flex-end;width:150px}.type-rank-main .right .list-box .rank-item-wrap .area-2 .status.status-up{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAKlBMVEUAAADzQCj3QinxQCjzQCf0QSj0RSjyQCfxQCf0QSfyRi3yQyj/SUnxQCfo3Zf3AAAADXRSTlMAfx/f+Ecs6uKiKBMH5ZXFJgAAAG1JREFUKM9joCVgUkATUDZCU2B7WQFVwd27RqgK7t4FK0Eo8L0CUoJQcGXuTV+gEoQCV9mLIUAlCAUBshdZgUoQChhkLzIglKRfCQAJsPqWQQXYWhlAAgwRCTBDDkAEeBD2QgQY6C+wazUDPQEA27QncyQYqS8AAAAASUVORK5CYII=)}.type-rank-main .right .list-box .rank-item-wrap .area-2 .status{background:50% no-repeat;background-size:cover;height:18px;margin:0 0 0 4px;width:18px}

app/static/images/random_numbers.svg

+<?xml version="1.0" encoding="utf-8" ?>
+<svg baseProfile="tiny" height="20" version="1.2" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="black" font-size="16" x="0" y="20">1</text><text fill="black" font-size="16" x="20" y="20">8</text><text fill="black" font-size="16" x="40" y="20">0</text><text fill="black" font-size="16" x="60" y="20">3</text><text fill="black" font-size="16" x="80" y="20">5</text><text fill="black" font-size="16" x="100" y="20">6</text><text fill="black" font-size="16" x="120" y="20">7</text><text fill="black" font-size="16" x="140" y="20">9</text><text fill="black" font-size="16" x="160" y="20">2</text><text fill="black" font-size="16" x="180" y="20">4</text></svg>
\ No newline at end of file

app/templates/antispider/game.html

+{% extends "base.html" %}
+{% block style %}
+
+<style type="text/css">
+    .svg_img{
+        display: inline-block;
+        width: 10px;
+        height: 26px;
+        background: url('{{url_for("static",filename="images/random_numbers.svg")}}') no-repeat;
+        line-height: 20px;
+    }
+</style>
+{% endblock style %}
+{% block link %}
+<link rel="stylesheet" href="{{url_for('static',filename='css/game.min.css')}}">
+{% endblock link %}
+
+{% block content %}
+<div class="container">
+
+    <div class="type-rank-main">
+
+        <div class="right">
+
+            <div class="list-box">
+                {% for game in games%}
+                <div class="rank-item-wrap ubc-show-item rank-item-mobile">
+                    <div class="area-1"><a class="cover-box" href="#" target="_blank" rel="noreferrer noopener"><img
+                            src="{{game['src']}}"
+                            alt="" importance="auto"
+                            class="cover xlazy xlazy-loaded"><span class="rank-index index-{{loop.index}}">{{loop.index}}</span><span
+                            class="score">{{game['score']}}</span></a>
+                        <div class="info-box">
+                            <div class="info-top"><a class="cname" href="#" target="_blank" rel="noreferrer noopener">{{game['title']}}<span
+                                    class="off-mark-box"></span></a>
+                                <div class="ename desc">{{game['desc']}}</div>
+                            </div>
+                            <div class="info-bottom">
+                                <div class="type">{{game['type']}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="area-2">
+                        <div class="search">
+                            {% for num in game['search'] %}<span class="svg_img" style="background-position:-{{nums_dict[num]*20 }}px 0;"></span>{% endfor %}
+                        </div>
+                        <div class="status {{game['status']}}"></div>
+                    </div>
+                </div>
+                {% endfor%}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
\ No newline at end of file

app/templates/blog.html

@@ -63,6 +63,10 @@
                    class="list-group-item list-group-item-action">24. CSS偏移反爬见过没，打开本文你就能学会 | 爬虫训练场</a>
                  <a href="https://dream.blog.csdn.net/article/details/128666768?spm=1001.2014.3001.5502" target="_blank"
                    class="list-group-item list-group-item-action">25. 听说你想用开发者工具调试我的网站？挺可以的啊。</a>
+                <a href="https://blog.csdn.net/hihell/article/details/128550751" target="_blank"
+                   class="list-group-item list-group-item-action">26. 呦~，这不 SVG 映射反爬么，这你都会？厉害厉害 | 案例 25</a>
+
+
             </div>
         </div>
     </div>

app/templates/csdn/m_rank.html

@@ -32,7 +32,7 @@
         </thead>
         <tbody>
         {% for item in data %}
-        {% if item.userName in ['hihell']%}
+        {% if item.userName in ['hihell','qq_33487044']%}
         {%else%}
         <tr>
             <td>{{loop.index}}</td>

app/templates/csdn/rank.html

@@ -33,7 +33,7 @@
         </thead>
         <tbody>
         {% for item in data %}
-        {% if item.userName in ['hihell']%}
+        {% if item.userName in ['hihell','qq_33487044']%}
         {%else%}
         <tr>
             <td>{{loop.index}}</td>

app/templates/hw/rank.html

@@ -67,12 +67,15 @@ padding:3px;}
         {% for u in data %}
         <td>{{loop.index}}</td>
         <td>{{u[0]|hide_middle}}</td>
-        <td>{{u[2]}}</td>
+        <td>/[隐藏]</td>
         </tr>
         {%endfor%}
 
         </tbody>
     </table>
+     <div class="alert alert-danger">
+        <strong>为防止【过卷】，每月最后一周，仅展示前10昵称排名，隐藏更文数，完整数据，请进群索取。</strong>
+    </div>
 </div>
 <div class="card text-center" style="position:fixed;bottom:20px;right:0px;">
 

app/templates/index.html

@@ -332,7 +332,7 @@
                 </div>
             </div>
         </div>
-         <div class="col mt-2">
+        <div class="col mt-2">
             <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                 <div class="card-header text-center">
                     <h4 class="card-title">禁用开发者工具</h4>
@@ -355,6 +355,29 @@
                 </div>
             </div>
         </div>
+        <div class="col mt-2">
+            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
+                <div class="card-header text-center">
+                    <h4 class="card-title">SVG图片反爬</h4>
+                    <div class="bg-danger text-white rounded p-1"
+                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
+                    </div>
+                </div>
+                <div class="card-body">
+                    <p class="card-text">本案例热度数据调用SVG图片生成，采集时需先分析SVG图片构成，然后进行数据解析。</p>
+                    <p class="card-text text-left">难度：⭐⭐</p>
+                    <p class="card-text">
+                        案例：
+                        <a href="/as/rank" class="card-link text-success">游戏排行榜</a>
+                    </p>
+                </div>
+                <div class="card-footer text-end">
+                    <a href="https://dream.blog.csdn.net/article/details/128550751" target="_blank"
+                       class="card-link text-muted small">案例制作教程</a>
+                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
+                </div>
+            </div>
+        </div>
     </div>
 
 </div>

app/templates/timeline.html

@@ -16,6 +16,27 @@
                 <span class="timeline-label">
                         <span class="label bg-success text-white p-1">正在更新中</span>
                     </span>
+
+
+                <div class="timeline-item">
+
+                    <div class="timeline-point timeline-point-success">
+                        <i class="fa fa-times"></i>
+                    </div>
+                    <div class="timeline-event">
+                        <div class="timeline-heading">
+                            <h4>爬虫训练场 V0.20.0 发布</h4>
+                        </div>
+                        <div class="timeline-body">
+                            <p>上线 SVG 图片反爬案例</p>
+
+                        </div>
+                        <div class="timeline-footer">
+                            <p class="text-right">2023年01月27日</p>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="timeline-item">
 
                     <div class="timeline-point timeline-point-success">