feat: 添加完整博文展示、容器样式及增加文章入口

Co-authored-by: aider (deepseek/deepseek-chat) <aider@aider.chat>

app.py

@@ -80,13 +80,11 @@ def fix_image_paths(md_content: str, post_id: str) -> str:
 
 
 def extract_summary(html_body: str, max_chars: int = 200) -> str:
-    """从 HTML 中提取纯文本摘要"""
+    """从 HTML 中提取纯文本摘要（返回完整文本）"""
     soup = BeautifulSoup(html_body, "html.parser")
     text = soup.get_text()
     # 去除多余空白
     text = re.sub(r"\s+", " ", text).strip()
-    if len(text) > max_chars:
-        return text[:max_chars] + "..."
     return text
 
 
@@ -129,10 +127,29 @@ def generate_static_page(post_id: str, title: str, html_body: str):
 
 @app.route("/")
 def index():
-    """首页：瀑布流文章列表"""
+    """首页：瀑布流文章列表（展示完整博文）"""
     posts = load_index()
     # 按日期倒序排列
     posts.sort(key=lambda p: p.get("date", ""), reverse=True)
+
+    # 为每篇文章读取生成的静态 HTML 文件内容
+    for post in posts:
+        post_id = post.get("id", "")
+        generated_path = config.GENERATED_FOLDER / f"{post_id}.html"
+        if generated_path.exists():
+            with open(generated_path, "r", encoding="utf-8") as f:
+                # 提取 <article class="post-article"> 内的内容
+                html_content = f.read()
+                # 简单提取 body 内的内容（实际项目中可用 BeautifulSoup）
+                start = html_content.find('<article class="post-article">')
+                end = html_content.find("</article>")
+                if start != -1 and end != -1:
+                    post["content"] = html_content[start + len('<article class="post-article">'):end]
+                else:
+                    post["content"] = ""
+        else:
+            post["content"] = ""
+
     return render_template("index.html", posts=posts)
 
 

static/css/style.css

@@ -38,6 +38,32 @@ body {
     padding: 0 1rem;
 }
 
+/* ==================== 文本容器 ==================== */
+.post-container {
+    background-color: #fffff2;
+    border: 3px solid #2c2c2c;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+/* ==================== 增加文章按钮 ==================== */
+.add-post-btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background-color: #2c2c2c;
+    color: #fffff2 !important;
+    border: 2px solid #2c2c2c;
+    font-weight: 700;
+    text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.add-post-btn:hover {
+    background-color: #fffff2;
+    color: #2c2c2c !important;
+}
+
 /* ==================== 瀑布流布局 ==================== */
 .waterfall {
     display: grid;

templates/base.html

@@ -25,14 +25,16 @@
             <a href="{{ url_for('index') }}" class="nav-brand">博客</a>
             <ul class="nav-links">
                 <li><a href="{{ url_for('index') }}">首页</a></li>
-                <li><a href="{{ url_for('upload') }}">上传</a></li>
+                <li><a href="{{ url_for('upload') }}" class="add-post-btn">+ 增加文章</a></li>
                 <li><a href="{{ url_for('admin') }}">管理</a></li>
             </ul>
         </div>
     </nav>
 
     <main class="main-content">
-        {% block content %}{% endblock %}
+        <div class="post-container">
+            {% block content %}{% endblock %}
+        </div>
     </main>
 
     <footer class="footer">

templates/index.html

@@ -17,7 +17,7 @@
                     <a href="{{ url_for('view_post', post_id=post.id) }}">{{ post.title }}</a>
                 </h2>
                 <time class="card-date" datetime="{{ post.date }}">{{ post.date[:10] }}</time>
-                <p class="card-summary">{{ post.summary }}</p>
+                <div class="card-summary">{{ post.content | safe }}</div>
                 <a href="{{ url_for('view_post', post_id=post.id) }}" class="card-link">阅读全文 →</a>
             </div>
         </article>