Add extra_head and extra_js blocks to base.html and help.html templates

Ehco1996 · Feb 28, 2024 · fc75998 · fc75998
1 parent 202bbae
commit fc75998
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 32 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -7,6 +7,8 @@
         <meta name="keywords" content="{% settings_value " KEYWORDS" %}" />
         <meta name="description" content="{% settings_value " DESCRIPTION" %}" />
         {% include "basehead.html" %}
+        {% block extra_head %}
+        {% endblock extra_head %}
     </head>
     <body>
         <nav class="navbar is-info is-spaced">
@@ -184,4 +186,6 @@ <h1 class="subtitle">{% settings_value "SITE_SUBTITLE" %}</h1>
             }
         </script>
     {% endif %}
+    {% block extra_js %}
+    {% endblock extra_js %}
 </html>
diff --git a/templates/basehead.html b/templates/basehead.html
@@ -7,29 +7,29 @@
       type="image/x-icon" />
 <!-- css -->
 {% if user.theme and user.theme != "default" %}
-    <link href="https://cdn.staticfile.org/bulmaswatch/0.8.1/{{ user.theme }}/bulmaswatch.min.css"
-          rel="stylesheet" />
+      <link href="https://cdn.staticfile.org/bulmaswatch/0.8.1/{{ user.theme }}/bulmaswatch.min.css"
+            rel="stylesheet" />
 {% else %}
-    <link href="https://cdn.staticfile.org/bulma/0.9.4/css/bulma.min.css"
-          rel="stylesheet" />
+      <link href="https://cdn.staticfile.org/bulma/0.9.4/css/bulma.min.css"
+            rel="stylesheet" />
 {% endif %}
 <link rel="stylesheet" href="{% static 'sspanel/css/sspanel.css' %}" />
 {% if not simple_extra_static or user.is_authenticated %}
-    <link rel="stylesheet"
-          href="https://cdn.staticfile.org/flag-icon-css/3.5.0/css/flag-icon.min.css" />
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-extensions.min.css" />
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" />
+      <link rel="stylesheet"
+            href="https://cdn.staticfile.org/flag-icon-css/3.5.0/css/flag-icon.min.css" />
+      <link rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-extensions.min.css" />
+      <link rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" />
 {% endif %}
 <!-- js -->
 <script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/sweetalert/2.1.2/sweetalert.min.js"></script>
 <script src="{% static 'sspanel/js/sspanel.js' %}"></script>
 {% if not simple_extra_static or user.is_authenticated %}
-    <script src="https://cdn.staticfile.org/clipboard.js/1.7.1/clipboard.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
-    <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-extensions.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/all.min.js"></script>
+      <script src="https://cdn.staticfile.org/clipboard.js/1.7.1/clipboard.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+      <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-extensions.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/all.min.js"></script>
 {% endif %}
diff --git a/templates/footer.html b/templates/footer.html
@@ -4,7 +4,7 @@
             <div class="content has-text-centered">
                 <p>
                     <p class="copyright">
-                        &copy; 2016 -
+                        © 2016 -
                         <script>
                             document.write(new Date().getFullYear());
                         </script>

diff --git a/templates/web/help.html b/templates/web/help.html
@@ -1,16 +1,45 @@
 {% extends 'base.html' %}
+{% block extra_head %}
+    <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-steps.min.js "></script>
+    <link href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-steps.min.css "
+          rel="stylesheet">
+{% endblock extra_head %}
+
 {% block authed %}
-    <div class="column">
-        <section class="section">
-            <div class="container">
-                <div class="notification is-warning">
-                    <h1 class="title">公告</h1>
-                    <p class="subtitle">正在装修</p>
-                    <p>我们正在对帮助栏进行装修，在此期间，公告栏将暂时关闭。装修完成后，我们将尽快重新开放。</p>
-                    <p>对于由此造成的不便，我们深表歉意。感谢您的理解和支持。</p>
+    <div class="section">
+        <div class="container">
+            <h1 class="title">如何使用本站</h1>
+            <div class="steps" id="stepsDemo">
+                <div class="step-item is-active">
+                    <div class="step-marker">1</div>
+                    <div class="step-details">
+                        <p class="step-title">捐赠充值</p>
+                        <p>访问左侧导航栏中的「捐赠充值」，选择合适的充值金额进行充值。</p>
+                    </div>
+                </div>
+                <div class="step-item">
+                    <div class="step-marker">2</div>
+                    <div class="step-details">
+                        <p class="step-title">购买套餐</p>
+                        <p>在「独享节点」或「共享节点」菜单栏里选择您需要的套餐进行购买。</p>
+                    </div>
+                </div>
+                <div class="step-item">
+                    <div class="step-marker">3</div>
+                    <div class="step-details">
+                        <p class="step-title">获取订阅地址</p>
+                        <p>在「用户中心」找到「订阅地址」，复制适合您客户端的订阅地址。</p>
+                    </div>
+                </div>
+                <div class="step-item">
+                    <div class="step-marker">4</div>
+                    <div class="step-details">
+                        <p class="step-title">配置客户端</p>
+                        <p>在您的客户端中粘贴复制的订阅地址，根据客户端的指引完成其他配置即可开始使用。</p>
+                    </div>
                 </div>
             </div>
-        </section>
+        </div>
     </div>
 {% endblock authed %}
 {% block un-authed %}
@@ -61,3 +90,10 @@ <h2 class="title">注册了你就知道了 ʘʚʘ</h2>
         </div>
     </div>
 {% endblock un-authed %}
+{% block extra_js %}
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const steps = bulmaSteps.attach();
+        });
+    </script>
+{% endblock extra_js %}
diff --git a/templates/web/invite.html b/templates/web/invite.html
@@ -42,13 +42,7 @@ <h2 class="subtitle">{% settings_value "INVITEINFO" %}</h2>
                         <tr>
                             <td>{{ code.created_at|date:"m月d日" }}</td>
                             <td>
-                                <a
-                                    href="{% url 'sspanel:register' %}?invitecode={{ code.code }}"
-                                    code.code
-                                    }}
-                                    >
-                                    {{ code.code }}
-                                </a>
+                                <a href="{% url 'sspanel:register' %}?invitecode={{ code.code }}">{{ code.code }}</a>
                             </td>
                         </tr>
                     {% empty %}