yuangyaa/blog
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change view && setup category follow wiht details

Browse Source
This commit is contained in:
yuangyaa
2025-07-27 23:12:12 +08:00
parent c8970dc447
commit 55d873c450
2 changed files with 71 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
myblog/blog/templates/blog/detail.html
View File

@@ -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">

50
myblog/blog/templates/blog/index.html
View File

@@ -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 %}