feat: 文字列表使用bootstrap卡片

static/styles/docx/docx.css

@@ -1,31 +1,3 @@
-.docx, .docx-top {
-    margin-bottom: 20px;
-    border-radius: 10px;
-    border-width: 2px;
-    border-style: solid;
-    padding: 15px;
-}
-
-.docx {
-    border-color: #0074D9;
-    background-color: white;
-}
-
-.docx-top {
-    border-color: #dc3023;
-    background-color: white;
-}
-
-.docx a, .docx-top a {
-    color: black;
-    text-decoration: none;
-}
-
-.docx a:hover, .docx-top a:hover {
-    color: darkblue;
-    text-decoration: none;
-}
-
 .markdown {
     background-color: white;
     padding: 15px;

templates/base.html

@@ -1,9 +1,9 @@
 {% import "macro.html" as macro %}
 
-{% macro render_docx(blog) %}
+{% macro render_docx_color(blog, color, show_delete) %}
     {# 使用到moment, 不能放进macro #}
     <div class="card mb-3">
-        <div class="card-header bg-primary text-white">
+        <div class="card-header {{ color }} text-white">
             {{ blog.title }}
             {% if blog.subtitle %}
                 <br>
@@ -16,14 +16,29 @@
             Create Date: {{ moment(blog.create_time).format('YYYY-MM-DD HH:mm:ss') }}
 
             <div class="text-end">
+                {% if show_delete %}
+                    <a type="button" class="card-link"
+                        data-bs-toggle="modal" data-bs-target="#DeleteModal{{blog.id}}"> 删除 </a>
+                {% endif %}
+
                 <a class="card-link" href="{{ url_for("docx.article_page", blog=blog.id) }}"> 前往 </a>
             </div>
-
         </div>
     </div>
 {% endmacro %}
 
+{% macro render_docx(blog, show_delete) %}
+    {# 使用到moment, 不能放进macro #}
+    {{ render_docx_color(blog, "bg-primary", show_delete) }}
+{% endmacro %}
+
+{% macro render_docx_top(blog, show_delete) %}
+    {# 使用到moment, 不能放进macro #}
+    {{ render_docx_color(blog, "bg-success", show_delete) }}
+{% endmacro %}
+
 {% macro render_msg(msg)%}
+    {# 使用到moment, 不能放进macro #}
     <div class="card mb-3">
         <div class="card-header bg-success text-white">
             {% if show_email %}  {# 判断是否可读取用户信息 #}

templates/docx/docx.html

@@ -83,27 +83,9 @@
                         {% endif %}
 
                         {% if blog.top %}
-                            <div class="docx-top">
-                                <a class="h4 my-auto" href="{{ url_for("docx.article_page", blog=blog.id) }}">
-                                {{ blog.title }}
-                                    <small> {{ blog.subtitle }}
-                                        <small> {{ moment(blog.update_time).format('YYYY-MM-DD HH:mm:ss') }} / {{ moment(blog.create_time).format('YYYY-MM-DD HH:mm:ss') }} </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.id}}"> </button>
-                                {% endif %}
-                            </div>
+                            {{ render_docx_top(blog, show_delete) }}
                         {% else %}
-                            <div class="docx">
-                                <a class="h4 my-auto" href="{{ url_for("docx.article_page", blog=blog.id) }}">
-                                {{ blog.title }}
-                                    <small> {{ blog.subtitle }}
-                                        <small> {{ moment(blog.update_time).format('YYYY-MM-DD HH:mm:ss') }} / {{ moment(blog.create_time).format('YYYY-MM-DD HH:mm:ss') }} </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.id}}"> </button>
-                                {% endif %}
-                            </div>
+                            {{ render_docx(blog, show_delete) }}
                         {% endif %}
                     {% endfor %}
                     </article>

templates/index/index.html

@@ -35,13 +35,13 @@
                 {% if current_user.check_role("ReadMsg") %}
                     <article class="col-12 col-lg-8">
                         {% for blog in blog_list %}
-                            {{ render_docx(blog) }}
+                            {{ render_docx(blog, False) }}
                         {% endfor %}
                     </article>
                 {% else %}
                     <article class="col-12">
                         {% for blog in blog_list %}
-                            {{ render_docx(blog) }}
+                            {{ render_docx(blog, False) }}
                         {% endfor %}
                     </article>
                 {% endif %}