refactor: bootstrap5迁移

templates/archive/archive.html

@@ -11,18 +11,18 @@
     {% if form and current_user.check_role("WriteBlog") %}
         <div class="container">
             <div class="row">
-                <section class="col-12 col-lg-6 offset-lg-3 text-right">
+                <section class="col-12 col-lg-6 offset-lg-3 text-end">
                     <div class="create">
                         <form action="{{ url_for('archive.create_archive_page') }}" method="post">
                             {{ form.hidden_tag() }}
-                            <div class="text-left">
+                            <div class="text-start">
                                 {{ macro.render_field(form.name) }}
                                 {{ macro.render_field(form.describe) }}
                             </div>
 
                             <div id="CreateModal" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title"> 创建归档？ </h4>
                                         </div>
@@ -31,14 +31,15 @@
                                         </div>
                                         <div class="modal-footer">
                                             {{ form.submit(class="btn btn-danger", value="确认") }}
-                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#CreateModal"> 创建归档 </button>
-                    </form>
+                            <button type="button" class="btn btn-primary"
+                                    data-bs-toggle="modal" data-bs-target="#CreateModal"> 创建归档 </button>
+                        </form>
                     </div>
                 </section>
             </div>
@@ -48,7 +49,7 @@
 
     <section id="base" class="d-flex mt-3 container justify-content-center flex-wrap">
         {% for archive in archive_list %}
-            <div class="archive mb-3 mr-2 ml-2">
+            <div class="archive mb-3 mx-2">
                 <h3> {{ archive[1] }} </h3>
                 <hr>
                 <p class="archive_describe"> {{ archive[2] }} </p>
@@ -57,7 +58,7 @@
                 {% if show_delete %}
                     <div id="DeleteModal{{archive[0]}}" class="modal fade" role="dialog" aria-hidden="true">
                         <div class="modal-dialog">
-                            <div class="modal-content text-left">
+                            <div class="modal-content text-start">
                                 <div class="modal-header">
                                     <h4 class="modal-title"> 确认删除归档？ </h4>
                                 </div>
@@ -67,14 +68,14 @@
                                 <div class="modal-footer">
                                     <a class="btn btn-danger"
                                        href="{{ url_for("archive.delete_archive_page", archive=archive[0]) }}"> 删除 </a>
-                                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal"> 取消 </button>
+                                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
                     <button type="button" class="btn btn-danger"
-                            data-toggle="modal" data-target="#DeleteModal{{archive[0]}}"> 删除归档 </button>
+                            data-bs-toggle="modal" data-bs-target="#DeleteModal{{archive[0]}}"> 删除归档 </button>
                 {% endif %}
             </div>
         {% endfor %}

templates/auth/delete.html

@@ -26,14 +26,14 @@
                                 </div>
                                 <div class="modal-footer">
                                     {{ DeleteUserForm.submit(class='btn btn-danger', value='确认') }}
-                                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <div class="text-right">
-                        <a class="btn btn-outline-danger" data-toggle="modal" data-target="#DeleteModal"> 删除用户 </a>
+                    <div class="text-end">
+                        <a class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#DeleteModal"> 删除用户 </a>
                     </div>
                 </form>
             </div>

templates/auth/login.html

@@ -15,9 +15,9 @@
                 {{ form.hidden_tag() }}
                 {{ macro.render_field(form.email) }}
                 {{ macro.render_field(form.passwd) }}
-                <div class="text-right">
-                    <a class="btn btn-outline-secondary mr-2" href="{{ url_for("auth.register_page") }}"> 前往注册 </a>
-                    {{ form.submit(class='btn btn-success mr-2') }}
+                <div class="text-end">
+                    <a class="btn btn-outline-secondary me-2" href="{{ url_for("auth.register_page") }}"> 前往注册 </a>
+                    {{ form.submit(class='btn btn-success me-2') }}
                     {{ form.remember() }} {{ form.remember.label }}
                 </div>
             </form>

templates/auth/passwd.html

@@ -17,7 +17,7 @@
                 {{ macro.render_field(ChangePasswdForm.passwd) }}
                 {{ macro.render_field(ChangePasswdForm.passwd_again) }}
 
-                <div class="text-right">
+                <div class="text-end">
                     {{ ChangePasswdForm.submit(class='btn btn-outline-danger') }}
                 </div>
             </form>

templates/auth/register.html

@@ -16,8 +16,8 @@
                 {{ macro.render_field(RegisterForm.email) }}
                 {{ macro.render_field(RegisterForm.passwd) }}
                 {{ macro.render_field(RegisterForm.passwd_again) }}
-                <div class="text-right">
-                    {{ RegisterForm.submit(class='btn btn-success mr-2') }}
+                <div class="text-end">
+                    {{ RegisterForm.submit(class='btn btn-success me-2') }}
                     <a class="btn btn-outline-secondary" href="{{ url_for("auth.login_page") }}"> 前往登录 </a>
                 </div>
             </form>

templates/auth/role.html

@@ -11,21 +11,21 @@
     <section id="base" class="container mt-3">
         <div class="row">
             <div class="col-12 col-lg-6 offset-lg-3">
-                <ul id="RoleTab" class="nav nav-pills justify-content-center mb-2">
-                    <li class="active nav-item">
-                        <a href="#create" class="nav-link" data-toggle="tab"> 创建角色 </a>
+                <ul id="RoleTab" class="nav nav-tabs nav-pills justify-content-center mb-2">
+                    <li class="nav-item">
+                        <a href="#create" class="nav-link active" data-bs-toggle="tab"> 创建角色 </a>
                     </li>
                     <li class="nav-item">
-                        <a href="#drop" class="nav-link" data-toggle="tab"> 删除角色 </a>
+                        <a href="#drop" class="nav-link" data-bs-toggle="tab"> 删除角色 </a>
                     </li>
                     <li class="nav-item">
-                        <a href="#set" class="nav-link" data-toggle="tab"> 设置角色 </a>
+                        <a href="#set" class="nav-link" data-bs-toggle="tab"> 设置角色 </a>
                     </li>
                 </ul>
 
                 <div id="RoleTabDiv">
                     <div id="RoleTabContent" class="tab-content">
-                        <div class="tab-pane fade active" id="create">
+                        <div class="tab-pane fade show active" id="create">
                             <form method="post" action="{{ url_for('auth.role_create_page') }}" class="role-form">
                                 {{ CreateRoleForm.hidden_tag() }}
                                 {{ macro.render_field(CreateRoleForm.name) }}
@@ -42,7 +42,7 @@
                                             </div>
                                             <div class="modal-footer">
                                                 {{ CreateRoleForm.submit(class='btn btn-danger', value='确认') }}
-                                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">
+                                                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">
                                                     取消
                                                 </button>
                                             </div>
@@ -50,8 +50,8 @@
                                     </div>
                                 </div>
 
-                                <div class="text-right">
-                                    <a class="btn btn-outline-danger" data-toggle="modal" data-target="#CreateModal"> 创建角色 </a>
+                                <div class="text-end">
+                                    <a class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#CreateModal"> 创建角色 </a>
                                 </div>
                             </form>
                         </div>
@@ -72,7 +72,7 @@
                                             </div>
                                             <div class="modal-footer">
                                                 {{ DeleteRoleForm.submit(class='btn btn-danger', value='确认') }}
-                                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">
+                                                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">
                                                     取消
                                                 </button>
                                             </div>
@@ -80,8 +80,8 @@
                                     </div>
                                 </div>
 
-                                <div class="text-right">
-                                    <a class="btn btn-outline-danger" data-toggle="modal" data-target="#DeleteModal"> 删除角色 </a>
+                                <div class="text-end">
+                                    <a class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#DeleteModal"> 删除角色 </a>
                                 </div>
                             </form>
                         </div>
@@ -103,7 +103,7 @@
                                             </div>
                                             <div class="modal-footer">
                                                 {{ SetRoleForm.submit(class='btn btn-danger', value='确认') }}
-                                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">
+                                                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">
                                                     取消
                                                 </button>
                                             </div>
@@ -111,8 +111,8 @@
                                     </div>
                                 </div>
 
-                                <div class="text-right">
-                                    <a class="btn btn-outline-danger" data-toggle="modal" data-target="#SetModal"> 设置角色 </a>
+                                <div class="text-end">
+                                    <a class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#SetModal"> 设置角色 </a>
                                 </div>
                             </form>
                         </div>
@@ -122,10 +122,3 @@
         </div>
     </section>
 {% endblock %}
-
-{% block javascript %}
-    {{ super() }}
-    <script>
-        $('#RoleTab .active a').tab('show');  // 显示第一个 tab
-    </script>
-{% endblock %}

templates/auth/yours.html

@@ -11,7 +11,7 @@
     <section id="base" class="container mt-3">
     <div class="row">
         <div class="col-12 col-lg-6 offset-lg-3">
-            <div class="card mr-lg-2 mb-3">
+            <div class="card me-lg-2 mb-3">
                 <div class="card-header"> 你的 </div>
                 <div class="card-body">
                     <h4 class="card-title mb-2"> {{ current_user.email }} </h4>
@@ -31,14 +31,14 @@
                                 </div>
                                 <div class="modal-footer">
                                     <a class="btn btn-danger" href="{{ url_for('auth.logout_page') }}"> 确认 </a>
-                                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
                     <a class="card-link" href="{{ url_for('auth.change_passwd_page') }}"> 修改密码 </a>
-                    <a class="card-link" data-toggle="modal" data-target="#LogoutModal"> 退出登录 </a>
+                    <a class="card-link" data-bs-toggle="modal" data-bs-target="#LogoutModal"> 退出登录 </a>
                     {% if current_user.check_role('DeleteUser') %}
                         <a class="card-link" href="{{ url_for('auth.delete_user_page') }}"> 删除用户 </a>
                     {% endif %}

templates/base.html

@@ -4,7 +4,7 @@
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {% block icon %}
         <link rel="icon" href="{{ url_for('static', filename=conf["LOGO"]) }}" type="image/x-icon"/>
@@ -17,7 +17,7 @@
     {% endblock %}
 
     {% block style %}
-        <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
         <link href="{{ url_for('static', filename='styles/base.css') }}" rel="stylesheet">
         <style>
             html {
@@ -29,6 +29,10 @@
         </style>
     {% endblock %}
 
+    {% block javascript %}
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+    {% endblock %}
+
     <title>{% block title %} {% endblock %} - {{ blog_name }} </title>
 </head>
 <body>
@@ -87,7 +91,7 @@
         <section class="container mt-2 mb-2">
         {% for message in get_flashed_messages() %}
             <div class="alert alert-info">
-                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                 {{ message }}
             </div>
         {% endfor %}
@@ -112,7 +116,7 @@
                 <br> <a id="GONG_AN2" target="_blank"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011402000783"
                    style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
-                    <img src="{{ url_for('static', filename='wangan.png') }}" style="float:left;"/>
+                    <img src="{{ url_for('static', filename='wangan.png') }}" style="float:left;" alt="wangan"/>
                     {{ conf["GONG_AN"] }}
                 </a>
             {% endif %}
@@ -144,11 +148,7 @@
     </script>
 {% endblock %}
 
-{% block javascript %}
-    <script src="https://cdn.staticfile.org/popper.js/0.2.0/popper.min.js"></script>
-    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
-    <script src="https://cdn.staticfile.org/bootstrap/4.6.1/js/bootstrap.min.js"></script>
-{% endblock %}
+{% block javascript_foot %} {% endblock %}
 
 </body>
 </html>

templates/docx/article.html

@@ -6,6 +6,7 @@
     {{ super() }}
     <link href="{{ url_for('static', filename='styles/docx/article.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='editor.md/css/editormd.min.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='editor.md/css/sons-of-obsidian.css') }}" />
 {% endblock %}
 
 {% block content %}
@@ -16,7 +17,7 @@
                 <article class="col-12">
                     <h1> {{ article.title }} <small> {{ article.subtitle }} <small> {{ article.update_time}} / {{ article.create_time}} </small> </small> </h1>
                     {% for archive in article.archive %}
-                        <span class="badge badge-info"> {{ archive.name }} </span>
+                        <span class="badge bg-info"> {{ archive.name }} </span>
                     {% endfor %}
                     <a href="{{ url_for('docx.article_down_page', blog=article.id) }}"> 下载 </a>
                     <hr>
@@ -30,13 +31,13 @@
                             {{ view.content(class="form-control mb-2", style="display:none;") }}
                         </div>
                         {% for error in view.content.errors %}
-                            <small class="text-danger form-text"> {{ error }} </small>
+                            <div class="invalid-feedback"> {{ error }} </div>
                         {% endfor %}
 
                         {% if can_update %}
                             <div id="UpdateModal" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title"> 确认更新博文吗？ </h4>
                                         </div>
@@ -45,7 +46,7 @@
                                         </div>
                                         <div class="modal-footer">
                                             {{ view.submit(class="btn btn-danger", value="确认") }}
-                                            <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                         </div>
                                     </div>
                                 </div>
@@ -55,7 +56,7 @@
                         {% if can_update %}
                             <div id="UpdateArchiveModal" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title"> 更新博客归档信息？ </h4>
                                         </div>
@@ -63,26 +64,28 @@
                                             <div class="modal-body">
                                                 {{ archive.hidden_tag() }}
                                                 {{ archive.blog_id() }}
-                                                {{ macro.render_field(archive.archive) }}
+                                                {{ macro.render_select_field(archive.archive) }}
                                             </div>
                                             <div class="modal-footer">
                                                 {{ archive.add(class="btn btn-outline-danger", formaction=url_for("docx.update_archive_page", add='1')) }}
                                                 {{ archive.sub(class="btn btn-outline-danger", formaction=url_for("docx.update_archive_page", add='0')) }}
-                                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                             </div>
                                         </form>
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="text-right mb-2">
-                                <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#UpdateModal"> 更新博文 </a>
-                                {% if article.top %}
-                                    <a class="btn btn-danger" href="{{ url_for("docx.set_blog_top_page", blog=article.id, top='0') }}"> 取消置顶 </a>
-                                {% else %}
-                                    <a class="btn btn-danger" href="{{ url_for("docx.set_blog_top_page", blog=article.id, top='1') }}"> 置顶文章 </a>
-                                {% endif %}
-                                <a type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#UpdateArchiveModal"> 更新归档 </a>
+                            <div class="text-end mb-2">
+                                <div class="btn-group">
+                                    <a type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#UpdateModal"> 更新博文 </a>
+                                    {% if article.top %}
+                                        <a class="btn btn-danger" href="{{ url_for("docx.set_blog_top_page", blog=article.id, top='0') }}"> 取消置顶 </a>
+                                    {% else %}
+                                        <a class="btn btn-danger" href="{{ url_for("docx.set_blog_top_page", blog=article.id, top='1') }}"> 置顶文章 </a>
+                                    {% endif %}
+                                    <a type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#UpdateArchiveModal"> 更新归档 </a>
+                                </div>
                             </div>
                         {% endif %}
                 </article>
@@ -94,17 +97,19 @@
                 <article class="col-12">
                     <h1 class="mt-3"> 评论 </h1>
 
-                    <section class="col-12 text-right">
+                    <section class="col-12 text-end">
                         <form action="{{ url_for('docx.comment_page', blog=article.id) }}" method="post">
                             {{ form.hidden_tag() }}
-                            {{ form.content(class="form-control mb-2", rows="3") }}
-                            {% for error in form.content.errors %}
-                                <small class="text-danger form-text text-left"> {{ error }} </small>
-                            {% endfor %}
+                            <div>
+                                {{ form.content(class="form-control mb-2", rows="3") }}
+                                {% for error in form.content.errors %}
+                                    <div class="invalid-feedback"> {{ error }} </div>
+                                {% endfor %}
+                            </div>
 
                             <div id="CommentModal" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title" id="CommentModalLabel"> 确认评论？ </h4>
                                         </div>
@@ -113,13 +118,13 @@
                                         </div>
                                         <div class="modal-footer">
                                             {{ form.submit(class="btn btn-danger", value="确认") }}
-                                            <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#CommentModal"> 评论 </button>
+                            <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#CommentModal"> 评论 </button>
                         </form>
                     </section>
                     <hr>
@@ -129,7 +134,7 @@
                         {% if show_delete %}
                             <div id="DeleteModal{{comment.id }}" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title"> 确认删除评论？ </h4>
                                         </div>
@@ -139,7 +144,7 @@
                                         <div class="modal-footer">
                                             <a class="btn btn-danger"
                                                href="{{ url_for("docx.delete_comment_page", comment=comment.id) }}"> 删除 </a>
-                                            <button type="button" class="btn btn-outline-dark" data-dismiss="modal"> 取消 </button>
+                                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                                         </div>
                                     </div>
                                 </div>
@@ -157,7 +162,7 @@
 
                                     {% if show_delete %}
                                         <a class="mb-2"
-                                            data-toggle="modal" data-target="#DeleteModal{{comment.id }}"> &times; </a>
+                                            data-bs-toggle="modal" data-bs-target="#DeleteModal{{comment.id }}"> &times; </a>
                                     {% endif %}
 
                                     <br>
@@ -175,6 +180,7 @@
 
 {% block javascript %}
     {{ super() }}
+    <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='editor.md/editormd.min.js') }}"></script>
     <script src="{{ url_for('static', filename='editor.md/lib/marked.min.js') }}"></script>
     <script src="{{ url_for('static', filename='editor.md/lib/prettify.min.js') }}"></script>

templates/docx/docx.html

@@ -6,6 +6,7 @@
     {{ super() }}
     <link href="{{ url_for('static', filename='styles/docx/docx.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='editor.md/css/editormd.min.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='editor.md/css/sons-of-obsidian.css') }}" />
 {% endblock %}
 
 {% block content %}
@@ -19,17 +20,17 @@
                             {{ form.hidden_tag() }}
                             {{ macro.render_field(form.title) }}
                             {{ macro.render_field(form.subtitle) }}
-                            {{ macro.render_field(form.archive) }}
+                            {{ macro.render_select_field(form.archive) }}
                             <div id="editor">
                                 {{ form.content(class="form-control mb-2", style="display:none;") }}
                             </div>
                             {% for error in form.content.errors %}
-                                <small class="text-danger form-text"> {{ error }} </small>
+                                <div class="invalid-feedback"> {{ error }} </div>
                             {% endfor %}
 
                             <div id="CreateModal" class="modal fade" role="dialog" aria-hidden="true">
                                 <div class="modal-dialog">
-                                    <div class="modal-content text-left">
+                                    <div class="modal-content text-start">
                                         <div class="modal-header">
                                             <h4 class="modal-title"> 确认发表？ </h4>
                                         </div>
@@ -38,14 +39,14 @@
                                         </div>
                                         <div class="modal-footer">
                                             {{ form.submit(class="btn btn-danger", value="确认") }}
-                                            <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="text-right">
-                                <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#CreateModal"> 发表 </button>
+                            <div class="text-end">
+                                <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#CreateModal"> 发表 </button>
                             </div>
                         </form>
                     </div>
@@ -63,7 +64,7 @@
                         {# 判断是否显示删除模态框 #}
                         <div id="DeleteModal{{blog[0]}}" class="modal fade" role="dialog" aria-hidden="true">
                             <div class="modal-dialog">
-                                <div class="modal-content text-left">
+                                <div class="modal-content text-start">
                                     <div class="modal-header">
                                         <h4 class="modal-title"> 确认删除博文？ </h4>
                                     </div>
@@ -73,7 +74,7 @@
                                     <div class="modal-footer">
                                         <a class="btn btn-danger"
                                            href="{{ url_for("docx.delete_blog_page", blog=blog[0]) }}"> 删除 </a>
-                                        <button type="button" class="btn btn-outline-dark" data-dismiss="modal"> 取消 </button>
+                                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                                     </div>
                                 </div>
                             </div>
@@ -82,24 +83,26 @@
 
                     {% if blog[5] == is_top %}
                         <div class="docx-top">
-                            {% if show_delete %}
-                                <button type="button" class="btn btn-danger ml-2"
-                                    data-toggle="modal" data-target="#DeleteModal{{blog[0]}}"> &times; </button>
-                            {% endif %}
-                            <a class="h4" href="{{ url_for("docx.article_page", blog=blog[0]) }}">
+                            <a class="h4 my-auto" href="{{ url_for("docx.article_page", blog=blog[0]) }}">
                             {{ blog[1] }}
                                 <small> {{ blog[2] }}
-                                    <small> {{ blog[3] }} / {{ blog[4] }} </small> </small> </a></div>
-                    {% else %}
-                        <div class="docx">
+                                    <small> {{ blog[3] }} / {{ blog[4] }} </small> </small> </a>
                             {% if show_delete %}
-                                <button type="button" class="btn btn-danger ml-2"
-                                    data-toggle="modal" data-target="#DeleteModal{{blog[0]}}"> &times; </button>
+                                <button type="button" class="btn btn-sm btn-danger my-auto btn-close float-end"
+                                    data-bs-toggle="modal" data-bs-target="#DeleteModal{{blog[0]}}"> </button>
                             {% endif %}
-                            <a class="h4" href="{{ url_for("docx.article_page", blog=blog[0]) }}">
+                        </div>
+                    {% else %}
+                        <div class="docx">
+                            <a class="h4 my-auto" href="{{ url_for("docx.article_page", blog=blog[0]) }}">
                             {{ blog[1] }}
                                 <small> {{ blog[2] }}
-                                    <small> {{ blog[3] }} / {{ blog[4] }} </small> </small> </a></div>
+                                    <small> {{ blog[3] }} / {{ blog[4] }} </small> </small> </a>
+                            {% if show_delete %}
+                                <button type="button" class="btn btn-sm btn-danger my-auto btn-close float-end"
+                                    data-bs-toggle="modal" data-bs-target="#DeleteModal{{blog[0]}}"> </button>
+                            {% endif %}
+                        </div>
                     {% endif %}
                 {% endfor %}
                 </article>
@@ -117,6 +120,7 @@
     {{ super() }}
 
     {% if form and current_user.check_role("WriteBlog") %}
+        <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
         <script src="{{ url_for('static', filename='editor.md/editormd.js') }}"></script>
         <script type="text/javascript">
             $(function() {
@@ -128,7 +132,6 @@
                     emoji: true,
                     taskList: true,
                     tex: true,
-                    sequenceDiagram: true,
                     onfullscreen() {
                         document.getElementById("ReadBlogList").style.visibility = 'hidden';
                         document.getElementById("ReadBlogPageList").style.visibility = 'hidden';},

templates/index/index.html

@@ -11,7 +11,7 @@
     <section id="base" class="container mt-3">
         <div class="row">
             <article class="col-12">
-                <div class="introduce mr-lg-2 ml-lg-2">
+                <div class="introduce mx-lg-2">
                     {% for info in conf['INTRODUCE'] %}
                         <h2> {{ info[0] }} </h2>
                         {{ info[1] | safe }}
@@ -28,7 +28,7 @@
                 {% if current_user.check_role("ReadMsg") %}
                     <article class="col-12 col-lg-8">
                     {% for blog in blog_list %}
-                        <div class="docx ml-lg-2"> <a class="h4"
+                        <div class="docx ms-lg-2"> <a class="h4"
                                                       href="{{ url_for("docx.article_page", blog=blog[0]) }}">
                             {{ blog[1] }}
                                 <small> {{ blog[2] }}
@@ -52,7 +52,7 @@
                 {% if current_user.check_role("ReadBlog") %}
                     <aside class="col-12 col-lg-4">
                     {% for msg in msg_list %}
-                        <div class="msg mr-0 mr-lg-2">
+                        <div class="msg me-0 me-lg-2">
                             <p class="msg-title h5">
                                 {% if show_email %}  {# 判断是否可读取用户信息 #}
                                     {{ msg.auth.email }}

templates/macro.html

@@ -3,17 +3,26 @@
         {% if line %}
             <li class="page-item"><a class="page-link" href="{{ line[1] }}"> {{ line[0] }} </a></li>
         {% else %}
-            <li class="page-item"><a class="page-link" href="#"> ... </a></li>
+            <li class="page-item disabled"><a class="page-link"> ... </a></li>
         {% endif %}
     {% endfor %}
 {% endmacro %}
 
 {% macro render_field(field) %}
-    <div class="form-group">
+    <div class="form-floating my-3">
+        {{ field(class="form-control", placeholder=field.label.text, **kwargs) | safe }}
         {{ field.label }}
-        {{ field(class="form-control", **kwargs) | safe }}
         {% for error in field.errors %}
-            <small class="text-danger form-text"> {{ error }} </small>
+            <div class="invalid-feedback"> {{ error }} </div>
+        {% endfor %}
+    </div>
+{% endmacro %}
+
+{% macro render_select_field(field, height) %}
+    <div class="my-3">
+        {{ field(class="form-select", **kwargs) | safe }}
+        {% for error in field.errors %}
+            <div class="invalid-feedback"> {{ error }} </div>
         {% endfor %}
     </div>
 {% endmacro %}

templates/msg/msg.html

@@ -10,18 +10,24 @@
 {% block content %}
     <section id="base" class="container mt-3">
         <div class="row">
-            <section class="col-12 text-right">
+            <section class="col-12 text-end">
                 <form class="writer clearfix" action="{{ url_for('msg.write_msg_page', page=page) }}" method="post">
                     {{ form.hidden_tag() }}
-                    {{ form.content(class="form-control mb-2", rows="5") }}
-                    {% for error in form.content.errors %}
-                        <small class="text-danger form-text text-left"> {{ error }} </small>
-                    {% endfor %}
-                    {{ form.secret() }} {{ form.secret.label }}
+                    <div>
+                        {{ form.content(class="form-control mb-2", rows="5") }}
+                        {% for error in form.content.errors %}
+                            <div class="invalid-feedback"> {{ error }} </div>
+                        {% endfor %}
+                    </div>
+
+                    <div class="form-check" style="display: inline-block">
+                        {{ form.secret(class="form-check-input") }}
+                        {{ form.secret.label(class="form-check-label") }}
+                    </div>
 
                     <div id="MsgModal" class="modal fade" role="dialog" aria-hidden="true">
                         <div class="modal-dialog">
-                            <div class="modal-content text-left">
+                            <div class="modal-content text-start">
                                 <div class="modal-header">
                                     <h4 class="modal-title" id="MsgModalLabel"> 确认留言？ </h4>
                                 </div>
@@ -30,13 +36,13 @@
                                 </div>
                                 <div class="modal-footer">
                                     {{ form.submit(class="btn btn-danger", value="确认") }}
-                                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
+                                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">取消</button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#MsgModal"> 留言 </button>
+                    <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#MsgModal"> 留言 </button>
                 </form>
             </section>
         </div>
@@ -45,11 +51,11 @@
             <div class="row">
                 <section class="col-12">
                     {% for msg in msg_list %}
-                        <div class="msg mr-0">
+                        <div class="msg me-0">
                             {% if show_delete %}
                                 <div id="DeleteModal{{msg.id }}" class="modal fade" role="dialog" aria-hidden="true">
                                     <div class="modal-dialog">
-                                        <div class="modal-content text-left">
+                                        <div class="modal-content text-start">
                                             <div class="modal-header">
                                                 <h4 class="modal-title"> 确认删除留言？ </h4>
                                             </div>
@@ -59,7 +65,7 @@
                                             <div class="modal-footer">
                                                 <a class="btn btn-danger"
                                                    href="{{ url_for("msg.delete_msg_page", msg=msg.id) }}"> 删除 </a>
-                                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal"> 取消 </button>
+                                                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                                             </div>
                                         </div>
                                     </div>
@@ -75,7 +81,7 @@
 
                                 {% if show_delete %}
                                     <a class="mb-2"
-                                        data-toggle="modal" data-target="#DeleteModal{{msg.id }}"> &times; </a>
+                                        data-bs-toggle="modal" data-bs-target="#DeleteModal{{msg.id }}"> &times; </a>
                                 {% endif %}
 
                                 <br>

templates/oss/upload.html

@@ -15,15 +15,15 @@
                 {{ UploadForm.hidden_tag() }}
                 {{ macro.render_field(UploadForm.path) }}
 
-                <div class="form-group pb-2">
+                <div class="pb-2">
                     {{ UploadForm.file(class="form-control") }}
                     {% for error in UploadForm.file.errors %}
-                        <small class="text-danger form-text"> {{ error }} </small>
+                        <div class="invalid-feedback"> {{ error }} </div>
                     {% endfor %}
                 </div>
 
-                <div class="text-right">
-                    {{ UploadForm.submit(class='btn btn-primary mr-2') }}
+                <div class="text-end">
+                    {{ UploadForm.submit(class='btn btn-primary me-2') }}
                 </div>
             </form>
         </div>