评论提交

templates/_common/base.html

@@ -41,7 +41,7 @@
     {% endif %}
     <style>
         :root {
-            --primary: #000000;
+             --primary: #333333;
             --bg-light: #f8f8f8;
             --text: #333;
             --gray: #666;

templates/category.html

@@ -28,29 +28,72 @@
     margin-top: 1em;
     padding-top: .5em;
     }
-
+    /* 容器 & 布局保持不变 */
     .pagination {
-    list-style: none;
-    margin: 0;
-    padding: 0;
     display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    padding: 0.75rem 0;
+    margin: 0;
+    list-style: none;
     }
 
     .pagination li {
-    margin: 0 1px;
+    list-style: none;
     }
 
-    .pagination a {
-    display: block;
-    padding: .5em 1em;
-    border: 1px solid #999;
-    border-radius: .2em;
+    /* 普通按钮 */
+    .pagination a,
+    .pagination span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5em;
+    height: 2.5em;
+    padding: 0 0.5em;
+    border: 1px solid #ddd;
+    border-radius: 0.4em;
+    background-color: #fff;
+    color: var(--text);
+    font-size: 1rem;
     text-decoration: none;
+    transition:
+    background-color 0.2s,
+    color 0.2s,
+    box-shadow 0.2s,
+    transform 0.1s;
+    cursor: pointer;
+    }
+
+    /* 悬停态：浅灰背景，深灰文字 */
+    .pagination a:hover {
+    background-color: #f2f2f2;
+    color: #111;
     }
 
-    .pagination a[aria-current="page"] {
-    background-color: #333;
+    /* 聚焦态：灰黑色光环 */
+    .pagination a:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.3);
+    }
+
+    /* 当前页（Active） */
+    .pagination li.active a {
+    background-color: var(--primary);
+    border-color: var(--primary);
     color: #fff;
+    pointer-events: none;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    }
+
+    /* 禁用态（上一页/下一页边界） */
+    .pagination li.disabled span {
+    color: #ccc;
+    border-color: #eee;
+    background-color: #fafafa;
+    cursor: not-allowed;
     }
 
 {% endblock %}
@@ -63,28 +106,47 @@
 
                     <nav aria-label="pagination">
                         <ul class="pagination">
+                            {# 上一页 #}
                             {% if articles.number > 1 %}
-                                <li><a href="?page={{ articles.number|add:-1 }}"><span aria-hidden="true">«</span><span
-                                        class="visuallyhidden">previous set of pages</span></a>
+                                <li>
+                                    <a href="?page={{ articles.number|add:"-1" }}" aria-label="上一页">
+                                        «
+                                    </a>
                                 </li>
                             {% else %}
-                                <li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden">previous set of pages</span></a>
+                                <li class="disabled">
+                                    <span aria-label="上一页">«</span>
                                 </li>
                             {% endif %}
 
+                            {# 中间页码 #}
                             {% for page in articles.paginator.page_range %}
-                                {% circle_page_index articles.number page %}
+                                {% if page == articles.number %}
+                                    <li class="active">
+                                        <a href="?page={{ page }}" aria-current="page">{{ page }}</a>
+                                    </li>
+                                {% else %}
+                                    <li>
+                                        <a href="?page={{ page }}">{{ page }}</a>
+                                    </li>
+                                {% endif %}
                             {% endfor %}
-                            {% if articles.number <  articles.paginator.num_pages %}
-                                <li><a href="?page={{ articles.number | add:1 }}"><span class="visuallyhidden">next set of pages</span><span
-                                        aria-hidden="true">»</span></a></li>
+
+                            {# 下一页 #}
+                            {% if articles.number < articles.paginator.num_pages %}
+                                <li>
+                                    <a href="?page={{ articles.number|add:"1" }}" aria-label="下一页">
+                                        »
+                                    </a>
+                                </li>
                             {% else %}
-                                <li><a href=""><span class="visuallyhidden">next set of pages</span><span
-                                        aria-hidden="true">»</span></a></li>
+                                <li class="disabled">
+                                    <span aria-label="下一页">»</span>
+                                </li>
                             {% endif %}
-
                         </ul>
                     </nav>
+
                     {% for item in articles %}
                         {% if item.status == 1 %}
                             {% if item.type == 1 %}
@@ -99,8 +161,9 @@
                                             {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                             发布了{{ item.category__name }}:<a
                                                     href="/article/{{ item.title }}.html">{{ item.title }}</a>
-                                          {% if  is_login %}
-                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i class="icon home"></i></a>
+                                            {% if  is_login %}
+                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i
+                                                        class="icon home"></i></a>
                                             {% endif %}</div>
                                         <div class="extra text">{{ item.intro }}
                                             &nbsp;&nbsp;&nbsp;Tags:
@@ -122,8 +185,9 @@
                                             {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                             发布了{{ item.category__name }}:<a
                                                     href="/article/{{ item.title }}.html">{{ item.title }}</a>
-                                          {% if  is_login %}
-                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i class="icon home"></i></a>
+                                            {% if  is_login %}
+                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i
+                                                        class="icon home"></i></a>
                                             {% endif %}</div>
                                         {% autoescape off %}
                                             <div class="extra images">