From 55d873c450fcb3260a7969891d3e1a4fb0526ff1b9a02c0b517869b3d3ec1264 Mon Sep 17 00:00:00 2001
From: yuangyaa <yuangyaa@163.com>
Date: Sun, 27 Jul 2025 23:12:12 +0800
Subject: [PATCH] Change view && setup category follow wiht details

---
 myblog/blog/templates/blog/detail.html | 34 +++++++++++++++---
 myblog/blog/templates/blog/index.html  | 50 +++++++++++++++++++++-----
 2 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/myblog/blog/templates/blog/detail.html b/myblog/blog/templates/blog/detail.html
index aa2796b..6346848 100644
--- a/myblog/blog/templates/blog/detail.html
+++ b/myblog/blog/templates/blog/detail.html
@@ -9,29 +9,41 @@
             margin: 0;
             padding: 0;
         }
+
         .container {
             display: flex;
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+        / / 修改: 确保容器支持sticky定位 min-height: 100 vh;
         }
+
         .sidebar {
             width: 250px;
             padding-right: 20px;
             border-right: 1px solid #eee;
+        / / 修改: 添加侧边栏固定定位相关样式 position: -webkit-sticky;
+            position: sticky;
+            top: 20px;
+            align-self: flex-start;
+            height: fit-content;
         }
+
         .sidebar h3 {
             color: #333;
             border-bottom: 2px solid #007cba;
             padding-bottom: 10px;
         }
+
         .sidebar ul {
             list-style: none;
             padding: 0;
         }
+
         .sidebar ul li {
             margin: 10px 0;
         }
+
         .sidebar ul li a {
             text-decoration: none;
             color: #666;
@@ -40,14 +52,17 @@
             border-radius: 4px;
             transition: all 0.3s;
         }
+
         .sidebar ul li a:hover,
         .sidebar ul li a.active {
             background-color: #007cba;
             color: white;
         }
+
         .search-box {
             margin-bottom: 20px;
         }
+
         .search-box input[type="text"] {
             width: 100%;
             padding: 8px;
@@ -55,6 +70,7 @@
             border-radius: 4px;
             box-sizing: border-box;
         }
+
         .search-box input[type="submit"] {
             width: 100%;
             padding: 8px;
@@ -65,35 +81,43 @@
             cursor: pointer;
             margin-top: 5px;
         }
+
         .search-box input[type="submit"]:hover {
             background-color: #005a87;
         }
+
         .search-type {
             margin: 10px 0;
         }
+
         .search-type label {
             display: block;
             margin: 5px 0;
             font-size: 14px;
             color: #666;
         }
+
         .search-type input[type="radio"] {
             margin-right: 5px;
         }
+
         .main-content {
             flex: 1;
             padding-left: 20px;
         }
+
         .main-content h1 {
             color: #333;
             border-bottom: 2px solid #eee;
             padding-bottom: 10px;
         }
+
         .post-meta {
             font-size: 14px;
             color: #999;
             margin-bottom: 20px;
         }
+
         .post-content img {
             max-width: 100%;
             height: auto;
@@ -124,6 +148,7 @@
             border-radius: 0;
             font-size: 0.9em;
         }
+
         footer {
             position: fixed;
             bottom: 0;
@@ -147,7 +172,6 @@
         <div class="search-box">
             <form method="get" action="{% url 'index' %}">
                 <input type="text" name="q" placeholder="搜索文章..." value="{{ query|default:'' }}">
-                
                 <div class="search-type">
                     <label>
                         <input type="radio" name="search_type" value="all" checked>
@@ -162,17 +186,17 @@
                         内容搜索
                     </label>
                 </div>
-                
+
                 <input type="submit" value="搜索">
             </form>
         </div>
-        
+
         <h3>文章分类</h3>
         <ul>
             <li><a href="{% url 'index' %}" {% if not post.category %}class="active"{% endif %}>全部文章</a></li>
             {% for category in categories %}
                 <li>
-                    <a href="{% url 'index' %}?category={{ category.id }}" 
+                    <a href="{% url 'index' %}?category={{ category.id }}"
                        {% if post.category and post.category.id == category.id %}class="active"{% endif %}>
                         {{ category.name }}
                     </a>
@@ -180,7 +204,7 @@
             {% endfor %}
         </ul>
     </div>
-    
+
     <div class="main-content">
         <h1 style="text-align: center;">{{ post.title }}</h1>
         <div class="post-meta">
diff --git a/myblog/blog/templates/blog/index.html b/myblog/blog/templates/blog/index.html
index 2b52787..02e5bd6 100644
--- a/myblog/blog/templates/blog/index.html
+++ b/myblog/blog/templates/blog/index.html
@@ -9,29 +9,41 @@
             margin: 0;
             padding: 0;
         }
+
         .container {
             display: flex;
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            min-height: 100vh;
         }
+
         .sidebar {
             width: 250px;
             padding-right: 20px;
             border-right: 1px solid #eee;
+            position: -webkit-sticky;
+            position: sticky;
+            top: 20px;
+            align-self: flex-start;
+            height: fit-content;
         }
+
         .sidebar h3 {
             color: #333;
             border-bottom: 2px solid #007cba;
             padding-bottom: 10px;
         }
+
         .sidebar ul {
             list-style: none;
             padding: 0;
         }
+
         .sidebar ul li {
             margin: 10px 0;
         }
+
         .sidebar ul li a {
             text-decoration: none;
             color: #666;
@@ -40,14 +52,17 @@
             border-radius: 4px;
             transition: all 0.3s;
         }
+
         .sidebar ul li a:hover,
         .sidebar ul li a.active {
             background-color: #007cba;
             color: white;
         }
+
         .search-box {
             margin-bottom: 20px;
         }
+
         .search-box input[type="text"] {
             width: 100%;
             padding: 8px;
@@ -55,6 +70,7 @@
             border-radius: 4px;
             box-sizing: border-box;
         }
+
         .search-box input[type="submit"] {
             width: 100%;
             padding: 8px;
@@ -65,54 +81,67 @@
             cursor: pointer;
             margin-top: 5px;
         }
+
         .search-box input[type="submit"]:hover {
             background-color: #005a87;
         }
+
         .search-type {
             margin: 10px 0;
         }
+
         .search-type label {
             display: block;
             margin: 5px 0;
             font-size: 14px;
             color: #666;
         }
+
         .search-type input[type="radio"] {
             margin-right: 5px;
         }
+
         .main-content {
             flex: 1;
             padding-left: 20px;
         }
+
         .main-content h1 {
             color: #333;
             border-bottom: 2px solid #eee;
             padding-bottom: 10px;
         }
+
         .posts-list {
             list-style: none;
             padding: 0;
         }
+
         .posts-list li {
             padding: 15px 0;
             border-bottom: 1px solid #eee;
         }
+
         .posts-list li:last-child {
             border-bottom: none;
         }
+
         .post-title {
             font-size: 18px;
             font-weight: bold;
             margin-bottom: 8px;
         }
+
         .post-title a {
             text-decoration: none;
             color: #007cba;
         }
+
         .post-meta {
             font-size: 14px;
             color: #999;
         }
+
         .post-category {
             display: inline-block;
             background-color: #f0f0f0;
@@ -121,11 +150,13 @@
             font-size: 12px;
             margin-top: 5px;
         }
+
         .post-summary {
             margin: 10px 0;
             line-height: 1.6;
             color: #666;
         }
+
         footer {
         }
     </style>
@@ -141,32 +172,35 @@
         <div class="search-box">
             <form method="get">
                 <input type="text" name="q" placeholder="搜索文章..." value="{{ query|default:'' }}">
-                
+
                 <div class="search-type">
                     <label>
-                        <input type="radio" name="search_type" value="all" {% if search_type != 'title' and search_type != 'content' %}checked{% endif %}>
+                        <input type="radio" name="search_type" value="all"
+                               {% if search_type != 'title' and search_type != 'content' %}checked{% endif %}>
                         全文搜索
                     </label>
                     <label>
-                        <input type="radio" name="search_type" value="title" {% if search_type == 'title' %}checked{% endif %}>
+                        <input type="radio" name="search_type" value="title"
+                               {% if search_type == 'title' %}checked{% endif %}>
                         标题搜索
                     </label>
                     <label>
-                        <input type="radio" name="search_type" value="content" {% if search_type == 'content' %}checked{% endif %}>
+                        <input type="radio" name="search_type" value="content"
+                               {% if search_type == 'content' %}checked{% endif %}>
                         内容搜索
                     </label>
                 </div>
-                
+
                 <input type="submit" value="搜索">
             </form>
         </div>
-        
+
         <h3>文章分类</h3>
         <ul>
             <li><a href="{% url 'index' %}" {% if not selected_category %}class="active"{% endif %}>全部文章</a></li>
             {% for category in categories %}
                 <li>
-                    <a href="?category={{ category.id }}" 
+                    <a href="?category={{ category.id }}"
                        {% if selected_category == category.id|stringformat:"s" %}class="active"{% endif %}>
                         {{ category.name }}
                     </a>
@@ -174,7 +208,7 @@
             {% endfor %}
         </ul>
     </div>
-    
+
     <div class="main-content">
         <ul class="posts-list">
             {% for post in posts %}