Home Explore
Register Sign In
SongZihuan
/
HBlog
mirror of https://github.com/SongZihuan/HBlog.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

feat: 首页使用bootstrap卡片

SongZihuan 2 years ago
parent
f0bc981366
commit
d268da2cab
3 changed files with 70 additions and 93 deletions
Unified View Show Diff Stats
  1. 0 37
      static/styles/index/index.css
  2. 41 0
      templates/base.html
  3. 29 56
      templates/index/index.html

+ 0 - 37
static/styles/index/index.css
View File 

@@ -1,37 +0,0 @@
 
-.docx {
 
-    margin-bottom: 20px;
 
-    border-radius: 10px;
 
-    border: 2px solid #0074D9;
 
-    background-color: white;
 
-    padding: 15px;
 
-}
 
-
 
-.docx a, .msg .msg-title {
 
-    color: black;
 
-    text-decoration: none;
 
-}
 
-
 
-.docx a:hover {
 
-    color: darkblue;
 
-    text-decoration: none;
 
-}
 
-
 
-.msg {
 
-    margin-bottom: 20px;
 
-    border-radius: 10px;
 
-    border: 2px solid #FFDC00;
 
-    padding: 15px;
 
-    background-color: white;
 
-}
 
-
 
-.introduce {
 
-    margin-bottom: 20px;
 
-    border-radius: 10px;
 
-    border: 2px solid #3D9970;
 
-    padding: 15px;
 
-    background-color: white;
 
-}
 
-
 
-.introduce p{
 
-    text-indent: 2em;
 
-}

+ 41 - 0
templates/base.html
View File 

@@ -1,5 +1,46 @@
 
 {% import "macro.html" as macro %}
 
 {% import "macro.html" as macro %}
 
 
 
+{% macro render_docx(blog) %}
 
+    {# 使用到moment, 不能放进macro #}
 
+    <div class="card mb-3">
 
+        <div class="card-header bg-primary text-white">
 
+            {{ blog.title }}
 
+            {% if blog.subtitle %}
 
+                <br>
 
+                {{ blog.subtitle }}
 
+            {% endif %}
 
+        </div>
 
+        <div class="card-body">
 
+            Update Date: {{ moment(blog.update_time).format('YYYY-MM-DD HH:mm:ss') }}
 
+            <br>
 
+            Create Date: {{ moment(blog.create_time).format('YYYY-MM-DD HH:mm:ss') }}
 
+
 
+            <div class="text-end">
 
+                <a class="card-link" href="{{ url_for("docx.article_page", blog=blog.id) }}"> 前往 </a>
 
+            </div>
 
+
 
+        </div>
 
+    </div>
 
+{% endmacro %}
 
+
 
+{% macro render_msg(msg)%}
 
+    <div class="card mb-3">
 
+        <div class="card-header bg-success text-white">
 
+            {% if show_email %}  {# 判断是否可读取用户信息 #}
 
+                {{ msg.auth.email }}
 
+            {% else %}
 
+                {{ msg.auth.star_email }}
 
+            {% endif %}
 
+        </div>
 
+        <div class="card-body">
 
+            <p> {{ msg.content.replace('\n', '<br>') | safe }} </p>
 
+            <div class="text-end">
 
+                <small style="font-size: 0.8rem"> {{ moment(msg.update_time).fromNow(refresh=True) }} </small>
 
+            </div>
 
+        </div>
 
+    </div>
 
+{% endmacro %}
 
+
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="zh">
 
 <html lang="zh">
 
 <head>
 
 <head>

+ 29 - 56
templates/index/index.html
View File 

@@ -2,29 +2,30 @@
 
 
 
 {% block title %} 主页 {% endblock %}
 
 {% block title %} 主页 {% endblock %}
 
 
 
-{% block style %}
 
-    {{ super() }}
 
-    <link href="{{ url_for('static', filename='styles/index/index.css') }}" rel="stylesheet">
 
-{% endblock %}
 
-
 
 {% block content %}
 
 {% block content %}
 
     <section id="base" class="container mt-3">
 
     <section id="base" class="container mt-3">
 
         <div class="row">
 
         <div class="row">
 
             <article class="col-12">
 
             <article class="col-12">
 
-                <div class="introduce mx-lg-2">
 
-                    {% for info in conf['INTRODUCE'] %}
 
-                        <h2> {{ info[0] }} </h2>
 
-                        {{ info[1] | safe }}
 
-                    {% endfor %}
 
+                <div class="card">
 
+                    <div class="card-body mx-lg-2">
 
+                        {% for info in conf['INTRODUCE'] %}
 
+                            <h2> {{ info[0] }} </h2>
 
+                            {{ info[1] | safe }}
 
+                        {% endfor %}
 
 
 
-                    <hr>
 
+                        <hr>
 
 
 
-                    <p> 欢迎页点击量: {{ hello_clicks }} </p>
 
-                    <p> 首页点击量: {{ home_clicks }} </p>
 
+                        <p> 欢迎页点击量: {{ hello_clicks }} </p>
 
+                        <p> 首页点击量: {{ home_clicks }} </p>
 
 
 
-                    {% for link in conf['INTRODUCE_LINK'] %}
 
-                        <a class="btn btn-outline-info mb-2" href="{{ conf['INTRODUCE_LINK'][link] }}"> {{ link }} </a>
 
-                    {% endfor %}
 
+                        <div class="text-end">
 
+                            <div class="btn-group">
 
+                                {% for link in conf['INTRODUCE_LINK'] %}
 
+                                    <a class="btn btn-outline-dark mb-2" href="{{ conf['INTRODUCE_LINK'][link] }}"> {{ link }} </a>
 
+                                {% endfor %}
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
                 </div>
 
                 </div>
 
             </article>
 
             </article>
 
         </div>
 
         </div>
 
@@ -33,23 +34,15 @@
 
             {% if current_user.check_role("ReadBlog") %}  {# 检查是否具有读取权限 #}
 
             {% if current_user.check_role("ReadBlog") %}  {# 检查是否具有读取权限 #}
 
                 {% if current_user.check_role("ReadMsg") %}
 
                 {% if current_user.check_role("ReadMsg") %}
 
                     <article class="col-12 col-lg-8">
 
                     <article class="col-12 col-lg-8">
 
-                    {% for blog in blog_list %}
 
-                        <div class="docx ms-lg-2"> <a class="h4"
 
-                                                      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></div>
 
-                    {% endfor %}
 
+                        {% for blog in blog_list %}
 
+                            {{ render_docx(blog) }}
 
+                        {% endfor %}
 
                     </article>
 
                     </article>
 
                 {% else %}
 
                 {% else %}
 
                     <article class="col-12">
 
                     <article class="col-12">
 
-                    {% for blog in blog_list %}
 
-                        <div class="docx"> <a class="h4"
 
-                                              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></div>
 
-                    {% endfor %}
 
+                        {% for blog in blog_list %}
 
+                            {{ render_docx(blog) }}
 
+                        {% endfor %}
 
                     </article>
 
                     </article>
 
                 {% endif %}
 
                 {% endif %}
 
             {% endif %}
 
             {% endif %}
 
@@ -57,35 +50,15 @@
 
             {% if current_user.check_role("ReadMsg") %}  {# 检查是否具有读取权限 #}
 
             {% if current_user.check_role("ReadMsg") %}  {# 检查是否具有读取权限 #}
 
                 {% if current_user.check_role("ReadBlog") %}
 
                 {% if current_user.check_role("ReadBlog") %}
 
                     <aside class="col-12 col-lg-4">
 
                     <aside class="col-12 col-lg-4">
 
-                    {% for msg in msg_list %}
 
-                        <div class="msg me-0 me-lg-2">
 
-                            <p class="msg-title h5">
 
-                                {% if show_email %}  {# 判断是否可读取用户信息 #}
 
-                                    {{ msg.auth.email }}
 
-                                {% else %}
 
-                                    {{ msg.auth.star_email }}
 
-                                {% endif %}
 
-                                <br> <small style="font-size: 0.8rem"> {{ moment(msg.update_time).fromNow(refresh=True) }} </small>
 
-                            </p>
 
-                            <p> {{ msg.content.replace('\n', '<br>') | safe }} </p>
 
-                        </div>
 
-                    {% endfor %}
 
+                        {% for msg in msg_list %}
 
+                            {{ render_msg(msg) }}
 
+                        {% endfor %}
 
                     </aside>
 
                     </aside>
 
                 {% else %}
 
                 {% else %}
 
                     <aside class="col-12">
 
                     <aside class="col-12">
 
-                    {% for msg in msg_list %}
 
-                        <div class="msg">
 
-                            <p class="msg-title h5">
 
-                                {% if show_email %}  {# 判断是否可读取用户信息 #}
 
-                                    {{ msg.auth.email }}
 
-                                {% else %}
 
-                                    {{ msg.auth.star_email }}
 
-                                {% endif %}
 
-                                <br> <small style="font-size: 0.8rem"> {{ moment(msg.update_time).fromNow(refresh=True) }} </small>
 
-                            </p>
 
-                            <p> {{ msg.content.replace('\n', '<br>') | safe }} </p>
 
-                        </div>
 
-                    {% endfor %}
 
+                        {% for msg in msg_list %}
 
+                            {{ render_msg(msg) }}
 
+                        {% endfor %}
 
                     </aside>
 
                     </aside>
 
                 {% endif %}
 
                 {% endif %}
 
             {% endif %}
 
             {% endif %}