♻️ Rename HTML templates to use .jinja2 extension

Previously, all templates were named with the .html extension, which caused problems for editors to recognize the Jinja2 syntax used in them. In this commit, all templates have been renamed to use the .jinja2 extension to better reflect their use of Jinja2 and to improve editor recognition.

plugins/genshin/abyss.py

@@ -280,7 +280,7 @@ class AbyssPlugin(Plugin):
 
             def overview_task():
                 return -1, self.template_service.render(
-                    "genshin/abyss/overview.html", render_data, viewport={"width": 750, "height": 580}
+                    "genshin/abyss/overview.jinja2", render_data, viewport={"width": 750, "height": 580}
                 )
 
             def floor_task(floor_index: int):
@@ -288,7 +288,7 @@ class AbyssPlugin(Plugin):
                 return (
                     floor_d["floor"],
                     self.template_service.render(
-                        "genshin/abyss/floor.html",
+                        "genshin/abyss/floor.jinja2",
                         {
                             **render_data,
                             "floor": floor_d,
@@ -314,7 +314,7 @@ class AbyssPlugin(Plugin):
             render_data["data"] = jsonlib.loads(result)
             return [
                 await self.template_service.render(
-                    "genshin/abyss/overview.html", render_data, viewport={"width": 750, "height": 580}
+                    "genshin/abyss/overview.jinja2", render_data, viewport={"width": 750, "height": 580}
                 )
             ]
         num_dic = {
@@ -342,6 +342,6 @@ class AbyssPlugin(Plugin):
         render_data["total_stars"] = f"{floor_data[0]['stars']}/{floor_data[0]['max_stars']}"
         return [
             await self.template_service.render(
-                "genshin/abyss/floor.html", render_data, viewport={"width": 690, "height": 500}
+                "genshin/abyss/floor.jinja2", render_data, viewport={"width": 690, "height": 500}
             )
         ]

plugins/genshin/abyss_team.py

@@ -80,7 +80,7 @@ class AbyssTeamPlugin(Plugin):
 
         await message.reply_chat_action(ChatAction.UPLOAD_PHOTO)
         render_result = await self.template_service.render(
-            "genshin/abyss_team/abyss_team.html",
+            "genshin/abyss_team/abyss_team.jinja2",
             abyss_teams_data,
             {"width": 785, "height": 800},
             full_page=True,

plugins/genshin/avatar_list.py

@@ -239,7 +239,7 @@ class AvatarListPlugin(Plugin):
         await message.reply_chat_action(ChatAction.UPLOAD_DOCUMENT if as_document else ChatAction.UPLOAD_PHOTO)
 
         image = await self.template_service.render(
-            "genshin/avatar_list/main.html",
+            "genshin/avatar_list/main.jinja2",
             render_data,
             viewport={"width": 1040, "height": 500},
             full_page=True,

plugins/genshin/calendar.py

@@ -52,7 +52,7 @@ class CalendarPlugin(Plugin):
         data = await self._fetch_data()
         data["display_mode"] = mode
         image = await self.template_service.render(
-            "genshin/calendar/calendar.html",
+            "genshin/calendar/calendar.jinja2",
             data,
             query_selector=".container",
         )

plugins/genshin/daily/material.py

@@ -314,14 +314,14 @@ class DailyMaterial(Plugin):
 
         character_img_data, weapon_img_data = await asyncio.gather(
             self.template_service.render(  # 渲染角色素材页
-                "genshin/daily_material/character.html",
+                "genshin/daily_material/character.jinja2",
                 {"data": render_data},
                 {"width": 1164, "height": 500},
                 file_type=file_type,
                 ttl=30 * 24 * 60 * 60,
             ),
             self.template_service.render(  # 渲染武器素材页
-                "genshin/daily_material/weapon.html",
+                "genshin/daily_material/weapon.jinja2",
                 {"data": render_data},
                 {"width": 1164, "height": 500},
                 file_type=file_type,

plugins/genshin/daily_note.py

@@ -82,7 +82,7 @@ class DailyNotePlugin(Plugin):
             "transformer_recovery_time": transformer_recovery_time,
         }
         render_result = await self.template_service.render(
-            "genshin/daily_note/daily_note.html",
+            "genshin/daily_note/daily_note.jinja2",
             render_data,
             {"width": 600, "height": 548},
             full_page=False,

plugins/genshin/help.py

@@ -22,7 +22,7 @@ class HelpPlugin(Plugin):
         logger.info("用户 %s[%s] 发出help命令", user.full_name, user.id)
         await message.reply_chat_action(ChatAction.TYPING)
         render_result = await self.template_service.render(
-            "bot/help/help.html",
+            "bot/help/help.jinja2",
             {"bot_username": self.application.bot.username},
             {"width": 1280, "height": 900},
             ttl=30 * 24 * 60 * 60,

plugins/genshin/ledger.py

@@ -63,7 +63,7 @@ class LedgerPlugin(Plugin):
             "color": color,
         }
         render_result = await self.template_service.render(
-            "genshin/ledger/ledger.html", ledger_data, {"width": 580, "height": 610}
+            "genshin/ledger/ledger.jinja2", ledger_data, {"width": 580, "height": 610}
         )
         return render_result
 

plugins/genshin/material.py

@@ -181,7 +181,7 @@ class MaterialPlugin(Plugin):
         if not data:
             return
         return await self.template_service.render(
-            "genshin/material/roles_material.html",
+            "genshin/material/roles_material.jinja2",
             data,
             {"width": 960, "height": 1460},
             full_page=True,

plugins/genshin/player_cards.py

@@ -228,7 +228,7 @@ class PlayerCards(Plugin):
         buttons = self.gen_button(data, user.id, uid, update_button=False)
         render_data = await self.parse_holder_data(data)
         holder = await self.template_service.render(
-            "genshin/player_card/holder.html",
+            "genshin/player_card/holder.jinja2",
             render_data,
             viewport={"width": 750, "height": 580},
             ttl=60 * 10,
@@ -492,13 +492,8 @@ class RenderTemplate:
             "DigitType": DigitType,
         }
 
-        # html = await self.template_service.render_async(
-        #     "genshin/player_card/player_card.html", data
-        # )
-        # logger.debug(html)
-
         return await self.template_service.render(
-            "genshin/player_card/player_card.html",
+            "genshin/player_card/player_card.jinja2",
             data,
             {"width": 950, "height": 1080},
             full_page=True,

plugins/genshin/stats.py

@@ -113,15 +113,10 @@ class PlayerStatsPlugins(Plugin):
             "style": random.choice(["mondstadt", "liyue"]),  # nosec
         }
 
-        # html = await self.template_service.render_async(
-        #     "genshin/stats/stats.html", data
-        # )
-        # logger.debug(html)
-
         await self.cache_images(user_info)
 
         return await self.template_service.render(
-            "genshin/stats/stats.html",
+            "genshin/stats/stats.jinja2",
             data,
             {"width": 650, "height": 800},
             full_page=True,

plugins/genshin/weapon.py

@@ -120,7 +120,7 @@ class WeaponPlugin(Plugin):
                 self.add_delete_message_job(reply_message)
             return
         png_data = await self.template_service.render(
-            "genshin/weapon/weapon.html", template_data, {"width": 540, "height": 540}, ttl=31 * 24 * 60 * 60
+            "genshin/weapon/weapon.jinja2", template_data, {"width": 540, "height": 540}, ttl=31 * 24 * 60 * 60
         )
         await message.reply_chat_action(ChatAction.UPLOAD_PHOTO)
         reply_photo = await png_data.reply_photo(

plugins/genshin/wish.py

@@ -266,7 +266,7 @@ class WishSimulatorPlugin(Plugin):
         template_data["items"] = data
         await message.reply_chat_action(ChatAction.UPLOAD_PHOTO)
         png_data = await self.template_service.render(
-            "genshin/gacha/gacha.html", template_data, {"width": 1157, "height": 603}, False
+            "genshin/wish/wish.jinja2", template_data, {"width": 1157, "height": 603}, False
         )
 
         reply_message = await message.reply_photo(png_data.photo)

resources/bot/help/example.html

@@ -11,7 +11,7 @@
 <div class="container mx-auto px-5 py-10 max-w-7xl">
     <div class="header p-6 flex mb-8 rounded-xl bg-cover justify-between">
         <div>
-            <h1 class="text-4xl italic">TGPaimonBot</h1>
+            <h1 class="text-4xl italic">PaiGram</h1>
             <h1 class="text-2xl">使用说明</h1>
         </div>
         <div>

resources/bot/help/help.jinja2

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8" />
+    <title>Title</title>
+    <link href="../../styles/tailwind.min.css" rel="stylesheet" />
+    <link href="../../styles/font-awesome.min.css" rel="stylesheet" />
+    <link href="help.css" rel="stylesheet" />
+</head>
+<body>
+<div class="container mx-auto px-5 py-10 max-w-7xl">
+    <div class="header p-6 flex mb-8 rounded-xl bg-cover justify-between">
+        <div>
+            <h1 class="text-4xl italic">PaiGram</h1>
+            <h1 class="text-2xl">使用说明</h1>
+        </div>
+        <div>
+            <div class="pt-1 opacity-70">
+            <i class="fa fa-id-card-o mr-2"></i>需要绑定Cookie
+        </div>
+        <div class="pt-1 opacity-70">
+            <i class="fa fa-user-circle-o mr-2"></i>需要绑定UID
+        </div>
+        </div>
+    </div>
+    <div class="box pt-4 rounded-xl space-y-4 overflow-hidden">
+        <div>
+            <div class="command-background pointer-events-none">
+                <img src="background/2015.png"  alt=""/>
+            </div>
+            <div class="command-title text-2xl mx-1">
+                <h1>查询命令</h1>
+            </div>
+            <div class="grid grid-cols-4 py-4 px-2">
+                <!-- WIKI类 -->
+                <div class="command">
+                    <div class="command-name">/weapon</div>
+                    <div class="command-description">查询武器</div>
+                </div>
+                <div class="command rounded-xl flex-1">
+                    <div class="command-name">/strategy</div>
+                    <div class="command-description">查询角色攻略</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/material</div>
+                    <div class="command-description">角色培养素材查询</div>
+                </div>
+                <!-- UID 查询类 -->
+                <div class="command">
+                    <div class="command-name">
+                        /stats
+                        <i class="fa fa-user-circle-o ml-2"></i>
+                    </div>
+                    <div class="command-description">玩家统计查询</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /player_card
+                        <i class="fa fa-user-circle-o ml-2"></i>
+                    </div>
+                    <div class="command-description">角色卡片</div>
+                </div>
+                <!-- 最高查询类 -->
+                <div class="command">
+                    <div class="command-name">
+                        /dailynote
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">查询实时便笺</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /ledger
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">查询当月旅行札记</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /abyss
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">查询当期深渊战绩</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /abyss_team
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">查询深渊推荐配队</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /avatars
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">查询角色练度</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /reg_time
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">原神账号注册时间</div>
+                </div>
+                <!--! gacha_log 相关 -->
+                <div class="command">
+                    <div class="command-name">
+                        /gacha_log
+                        <i class="fa fa-user-circle-o ml-2"></i>
+                    </div>
+                    <div class="command-description">抽卡记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /gacha_count
+                        <i class="fa fa-user-circle-o ml-2"></i>
+                    </div>
+                    <div class="command-description">抽卡统计</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /pay_log
+                        <i class="fa fa-user-circle-o ml-2"></i>
+                    </div>
+                    <div class="command-description">充值记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /sign
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">每日签到 | 查询</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/daily_material</div>
+                    <div class="command-description">每日素材</div>
+                </div>
+                <!--! 其他 -->
+                <div class="command">
+                    <div class="command-name">/hilichurls</div>
+                    <div class="command-description">丘丘语字典</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/birthday</div>
+                    <div class="command-description">角色生日</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">
+                        /birthday_card
+                        <i class="fa fa-id-card-o ml-2"></i>
+                    </div>
+                    <div class="command-description">领取角色生日画片</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/calendar</div>
+                    <div class="command-description">活动日历</div>
+                </div>
+             </div>
+        </div>
+
+        <div>
+            <div class="command-background pointer-events-none">
+                <img src="background/1006.png" />
+            </div>
+            <div class="command-title text-2xl mx-1">
+                <h1>其他命令</h1>
+            </div>
+            <div class="grid grid-cols-4 py-4 px-2">
+                <div class="command">
+                    <div class="command-name">/wish</div>
+                    <div class="command-description">抽卡模拟器（非洲人模拟器）</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/set_wish</div>
+                    <div class="command-description">抽卡模拟器定轨</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/quiz</div>
+                    <div class="command-description">
+                        派蒙的十万个为什么
+                    </div>
+                </div>
+                <!--! gacha_log 相关 -->
+                <div class="command">
+                    <div class="command-name">/gacha_log_import</div>
+                    <div class="command-description">导入抽卡记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/gacha_log_export</div>
+                    <div class="command-description">导出抽卡记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/gacha_log_delete</div>
+                    <div class="command-description">删除抽卡记录</div>
+                </div>
+                <!--! pay_log 相关 -->
+                <div class="command">
+                    <div class="command-name">/pay_log_import</div>
+                    <div class="command-description">导入充值记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/pay_log_export</div>
+                    <div class="command-description">导出充值记录</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/pay_log_delete</div>
+                    <div class="command-description">删除充值记录</div>
+                </div>
+                <!--! user 相关 -->
+                <div class="command">
+                    <div class="command-name">/setuid</div>
+                    <div class="command-description">添加/重设UID（请私聊BOT）</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/setcookie</div>
+                    <div class="command-description">添加/重设Cookie（请私聊BOT）</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">/player</div>
+                    <div class="command-description">管理账号（请私聊BOT）</div>
+                </div>
+                <!--! 取消操作 -->
+                <div class="command rounded-xl flex-1">
+                    <div class="command-name">/cancel</div>
+                    <div class="command-description">
+                        取消操作（解决一切玄学问题）
+                    </div>
+                </div>
+             </div>
+        </div>
+
+        <div>
+            <div class="command-title text-2xl mx-1">
+                <h1>inline 模式关键词</h1>
+            </div>
+            <div class="grid grid-cols-2 py-4 px-2">
+                <div class="command">
+                    <div class="command-name">@{{bot_username}} 角色名</div>
+                    <div class="command-description">查询角色攻略</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">@{{bot_username}} 武器名</div>
+                    <div class="command-description">查询武器信息</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="about text-center leading-8 text-xs opacity-50">
+            更多功能，还在咕咕咕！咕咕咕！
+        </div>
+    </div>
+</div>
+</body>
+</html>

resources/genshin/abyss/floor.jinja2

@@ -75,7 +75,8 @@
                                                 {{ constellation }} 命
                                             </div>
                                         {% endif %}
-                                        <div class="element" style="background-image: url('../../img/element/{{ character.element }}.png')"></div>
+                                        <div class="element"
+                                             style="background-image: url('../../img/element/{{ character.element }}.png')"></div>
                                         <div class="icon"
                                              style="background-image: url('../../background/rarity/half/{{ character.rarity }}.png')">
                                             <img src="{{ character.icon }}" alt=""/>

resources/genshin/abyss/overview.jinja2

@@ -37,7 +37,8 @@
             <div class="characters">
                 {% for avatar in data.ranks.most_played %}
                     <div class="character">
-                        <div class="element" style="background-image: url('../../img/element/{{ avatar.element }}.png')"></div>
+                        <div class="element"
+                             style="background-image: url('../../img/element/{{ avatar.element }}.png')"></div>
                         <div
                                 class="icon"
                                 style="background-image: url('../../background/rarity/half/{{ avatar.rarity }}.png')"

resources/genshin/player_card/player_card.jinja2

@@ -46,7 +46,7 @@
       }
       .enka-log:before {
         content: "\e93a";
-        font-family: shicon;
+          font-family: shicon, serif;
         font-size: 1.25em;
       }
     </style>
@@ -63,7 +63,7 @@
           style="background-image: url('{{ character.image.banner.url }}'); background-size: auto 100%;"
         ></div>
         <div class="relative w-full flex p-5 space-x-8">
-          {% include 'genshin/player_card/constellations.html' %}
+          {% include "genshin/player_card/constellations.jinja2" %}
 
           <div class="flex-1 space-y-4">
             <div class="text-right italic">
@@ -83,8 +83,8 @@
               </div>
             </div>
 
-            {% include 'genshin/player_card/skills.html' %} {% include
+            {% include "genshin/player_card/skills.jinja2" %} {% include
-            'genshin/player_card/stats.html' %}
+            "genshin/player_card/stats.jinja2" %}
           </div>
         </div>
       </div>
@@ -93,11 +93,11 @@
       <div class="px-5 relative">
         <div class="grid grid-cols-3 gap-4">
           <div class="flex flex-col space-y-2">
-            {% include 'genshin/player_card/weapon.html' %} {% include
+            {% include "genshin/player_card/weapon.jinja2" %} {% include
-            'genshin/player_card/score.html' %}
+            "genshin/player_card/score.jinja2" %}
           </div>
 
-          {% include 'genshin/player_card/artifacts.html' %}
+          {% include "genshin/player_card/artifacts.jinja2" %}
         </div>
       </div>
 

resources/genshin/wish/wish.css

@@ -116,7 +116,7 @@ body {
     left: 3px;
     width: 106px;
     height: 448px;
-    clip-path: url(#wishframe);
+    clip-path: url(#wish-frame);
     z-index: 100;
 }
 
@@ -134,7 +134,7 @@ body {
     width: 106px;
     height: 448px;
     z-index: 101;
-    clip-path: url(#wishframe);
+    clip-path: url(#wish-frame);
 }
 
 .item-weapon-img {

resources/genshin/wish/wish.jinja2

@@ -3,7 +3,7 @@
 <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
     <link rel="preload" href="./items/background.jpg" as="image">
-    <link type="text/css" href="./gacha.css" rel="stylesheet">
+    <link type="text/css" href="wish.css" rel="stylesheet">
     <link type="text/css" href="../../styles/public.css" rel="stylesheet">
 </head>
 <body>
@@ -53,10 +53,9 @@
 </div>
 </body>
 <svg viewBox="0 0 302.22 1333.94" height="0" width="0">
-    <clipPath id="wishframe" transform="scale(0.003308 0.00074965)" clipPathUnits="objectBoundingBox">
+    <clipPath id="wish-frame" transform="scale(0.003308 0.00074965)" clipPathUnits="objectBoundingBox">
         <path
-                d="M0.01 168.12l0 -9.64c4.32,-21.34 12,-32.33 25.46,-25.58 -2.35,-10.3 -1.53,-26.06 5.79,-25.96 19.18,0.25 29.95,-3.14 40.24,-13.16 -4.5,-66.43 51.39,-54.26 79.61,-93.78l0 0c28.22,39.52 84.1,27.34 79.61,93.78 10.29,10.02 21.06,13.41 40.24,13.16 7.32,-0.1 8.13,15.66 5.79,25.96 13.46,-6.75 21.14,4.24 25.46,25.58l0 9.64 0.01 0 0 1004.21 -0.01 0 0 3.13c-4.32,21.34 -12,32.33 -25.46,25.58 2.35,10.3 1.53,26.06 -5.79,25.96 -19.18,-0.25 -29.95,3.14 -40.24,13.16 4.5,66.43 -51.39,54.26 -79.61,93.78l0 0c-28.22,-39.52 -84.1,-27.34 -79.61,-93.78 -10.29,-10.02 -21.06,-13.41 -40.24,-13.16 -7.32,0.1 -8.13,-15.66 -5.79,-25.96 -13.46,6.75 -21.14,-4.24 -25.46,-25.58l0 -3.13 -0.01 0 0 -1004.21 0.01 0z"
+                d="M0.01 168.12l0 -9.64c4.32,-21.34 12,-32.33 25.46,-25.58 -2.35,-10.3 -1.53,-26.06 5.79,-25.96 19.18,0.25 29.95,-3.14 40.24,-13.16 -4.5,-66.43 51.39,-54.26 79.61,-93.78l0 0c28.22,39.52 84.1,27.34 79.61,93.78 10.29,10.02 21.06,13.41 40.24,13.16 7.32,-0.1 8.13,15.66 5.79,25.96 13.46,-6.75 21.14,4.24 25.46,25.58l0 9.64 0.01 0 0 1004.21 -0.01 0 0 3.13c-4.32,21.34 -12,32.33 -25.46,25.58 2.35,10.3 1.53,26.06 -5.79,25.96 -19.18,-0.25 -29.95,3.14 -40.24,13.16 4.5,66.43 -51.39,54.26 -79.61,93.78l0 0c-28.22,-39.52 -84.1,-27.34 -79.61,-93.78 -10.29,-10.02 -21.06,-13.41 -40.24,-13.16 -7.32,0.1 -8.13,-15.66 -5.79,-25.96 -13.46,6.75 -21.14,-4.24 -25.46,-25.58l0 -3.13 -0.01 0 0 -1004.21 0.01 0z"></path>
-        />
     </clipPath>
 </svg>
 </html>