AI 生成: 一个简洁优雅的个人博客网站，包含首页文章列表、文章详情页和关于页面。使用 Python Flask 构建，支持 Markdown 文章渲染。
This commit is contained in:
admin
@@ -0,0 +1,77 @@
|
|||||||
|
# Personal Blog
|
||||||
|
|
||||||
|
一个简洁优雅的个人博客网站。
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
- 首页文章列表
|
||||||
|
- 文章详情页（支持 Markdown 渲染）
|
||||||
|
- 关于页面
|
||||||
|
- 响应式设计，简洁优雅的界面
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- Python 3.8+
|
||||||
|
- Flask
|
||||||
|
- Markdown
|
||||||
|
- HTML5 / CSS3
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
personal-blog/
|
||||||
|
├── app.py # Flask 应用入口
|
||||||
|
├── requirements.txt # 依赖文件
|
||||||
|
├── README.md # 说明文件
|
||||||
|
├── posts/ # Markdown 文章目录
|
||||||
|
│ ├── hello-world.md
|
||||||
|
│ └── python-tips.md
|
||||||
|
├── templates/ # HTML 模板
|
||||||
|
│ ├── base.html
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── post.html
|
||||||
|
│ └── about.html
|
||||||
|
└── static/
|
||||||
|
└── css/
|
||||||
|
└── style.css
|
||||||
|
```
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
1. 安装依赖：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pip install -r requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 启动应用：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python app.py
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 打开浏览器访问：
|
||||||
|
|
||||||
|
```
|
||||||
|
http://127.0.0.1:5000
|
||||||
|
```
|
||||||
|
|
||||||
|
## 添加新文章
|
||||||
|
|
||||||
|
在 `posts/` 目录下创建新的 `.md` 文件，文件名即为 URL 路径。
|
||||||
|
|
||||||
|
文件头部使用 YAML front matter 定义元信息：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: 我的文章标题
|
||||||
|
date: 2024-01-01
|
||||||
|
summary: 文章摘要
|
||||||
|
---
|
||||||
|
|
||||||
|
正文内容...
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
"""
|
||||||
|
个人博客 - Flask 应用入口
|
||||||
|
"""
|
||||||
|
import os
|
||||||
|
import re
|
||||||
|
from datetime import datetime
|
||||||
|
from flask import Flask, render_template, abort
|
||||||
|
import markdown
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||||
|
POSTS_DIR = os.path.join(BASE_DIR, 'posts')
|
||||||
|
|
||||||
|
|
||||||
|
def parse_front_matter(text):
|
||||||
|
"""解析 Markdown 文件的 YAML front matter（简单实现）"""
|
||||||
|
meta = {}
|
||||||
|
body = text
|
||||||
|
match = re.match(r'^---\s*\n(.*?)\n---\s*\n(.*)$', text, re.DOTALL)
|
||||||
|
if match:
|
||||||
|
raw_meta, body = match.group(1), match.group(2)
|
||||||
|
for line in raw_meta.strip().splitlines():
|
||||||
|
if ':' in line:
|
||||||
|
key, value = line.split(':', 1)
|
||||||
|
meta[key.strip()] = value.strip()
|
||||||
|
return meta, body
|
||||||
|
|
||||||
|
|
||||||
|
def load_posts():
|
||||||
|
"""加载所有文章，返回按日期倒序的列表"""
|
||||||
|
posts = []
|
||||||
|
if not os.path.isdir(POSTS_DIR):
|
||||||
|
return posts
|
||||||
|
for filename in os.listdir(POSTS_DIR):
|
||||||
|
if not filename.endswith('.md'):
|
||||||
|
continue
|
||||||
|
slug = filename[:-3]
|
||||||
|
path = os.path.join(POSTS_DIR, filename)
|
||||||
|
with open(path, 'r', encoding='utf-8') as f:
|
||||||
|
raw = f.read()
|
||||||
|
meta, body = parse_front_matter(raw)
|
||||||
|
posts.append({
|
||||||
|
'slug': slug,
|
||||||
|
'title': meta.get('title', slug),
|
||||||
|
'date': meta.get('date', ''),
|
||||||
|
'summary': meta.get('summary', ''),
|
||||||
|
'content': body,
|
||||||
|
})
|
||||||
|
posts.sort(key=lambda p: p['date'], reverse=True)
|
||||||
|
return posts
|
||||||
|
|
||||||
|
|
||||||
|
def get_post(slug):
|
||||||
|
"""根据 slug 获取单篇文章"""
|
||||||
|
for post in load_posts():
|
||||||
|
if post['slug'] == slug:
|
||||||
|
return post
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
"""首页：文章列表"""
|
||||||
|
posts = load_posts()
|
||||||
|
return render_template('index.html', posts=posts)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/post/<slug>')
|
||||||
|
def post_detail(slug):
|
||||||
|
"""文章详情页"""
|
||||||
|
post = get_post(slug)
|
||||||
|
if not post:
|
||||||
|
abort(404)
|
||||||
|
html_content = markdown.markdown(
|
||||||
|
post['content'],
|
||||||
|
extensions=['fenced_code', 'codehilite', 'tables']
|
||||||
|
)
|
||||||
|
return render_template('post.html', post=post, content=html_content)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/about')
|
||||||
|
def about():
|
||||||
|
"""关于页面"""
|
||||||
|
return render_template('about.html')
|
||||||
|
|
||||||
|
|
||||||
|
@app.errorhandler(404)
|
||||||
|
def not_found(e):
|
||||||
|
return render_template('404.html'), 404
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(debug=True, host='127.0.0.1', port=5000)
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
title: 你好，世界
|
||||||
|
date: 2024-01-15
|
||||||
|
summary: 这是博客的第一篇文章，记录下开始写作的这一刻。
|
||||||
|
---
|
||||||
|
|
||||||
|
## 为什么写博客
|
||||||
|
|
||||||
|
写作是最好的思考方式。当你尝试把想法用文字表达出来时，会发现自己对问题的理解是否真正清晰。
|
||||||
|
|
||||||
|
这个博客会记录我在：
|
||||||
|
|
||||||
|
- 编程与技术上的学习
|
||||||
|
- 阅读与思考的收获
|
||||||
|
- 生活里的小确幸
|
||||||
|
|
||||||
|
## 关于技术
|
||||||
|
|
||||||
|
本站使用 **Python Flask** 构建，文章用 Markdown 编写。
|
||||||
|
|
||||||
|
```python
|
||||||
|
from flask import Flask
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
return 'Hello, World!'
|
||||||
|
```
|
||||||
|
|
||||||
|
> 保持简单，保持专注。
|
||||||
|
|
||||||
|
希望你能在这里找到一些有价值的东西。
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
---
|
||||||
|
title: 5 个实用的 Python 小技巧
|
||||||
|
date: 2024-02-20
|
||||||
|
summary: 分享几个日常开发中非常实用的 Python 技巧，让你的代码更简洁。
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 使用 enumerate 获取索引
|
||||||
|
|
||||||
|
```python
|
||||||
|
fruits = ['apple', 'banana', 'cherry']
|
||||||
|
for i, fruit in enumerate(fruits):
|
||||||
|
print(i, fruit)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. 列表推导式
|
||||||
|
|
||||||
|
用一行代码完成过滤和映射：
|
||||||
|
|
||||||
|
```python
|
||||||
|
squares = [x * x for x in range(10) if x % 2 == 0]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. 使用 zip 同时遍历
|
||||||
|
|
||||||
|
```python
|
||||||
|
names = ['Alice', 'Bob']
|
||||||
|
ages = [25, 30]
|
||||||
|
for name, age in zip(names, ages):
|
||||||
|
print(f'{name} is {age}')
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4. 字典的 get 方法
|
||||||
|
|
||||||
|
避免 KeyError：
|
||||||
|
|
||||||
|
```python
|
||||||
|
config = {'debug': True}
|
||||||
|
level = config.get('level', 'INFO')
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5. 使用 f-string 格式化
|
||||||
|
|
||||||
|
```python
|
||||||
|
name = 'World'
|
||||||
|
print(f'Hello, {name}!')
|
||||||
|
```
|
||||||
|
|
||||||
|
这些小技巧虽然简单，但能让代码更 Pythonic。
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
Flask==3.0.0
|
||||||
|
Markdown==3.5.1
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
/* ---------- 基础样式 ---------- */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||||
|
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||||
|
color: #333;
|
||||||
|
background: #fafafa;
|
||||||
|
line-height: 1.75;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2b6cb0;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #1a4d80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 头部 ---------- */
|
||||||
|
.site-header {
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 20px 0;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #222;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title:hover {
|
||||||
|
color: #2b6cb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav a {
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav a:hover {
|
||||||
|
color: #2b6cb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 首页 Hero ---------- */
|
||||||
|
.hero {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #222;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .subtitle {
|
||||||
|
color: #888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 文章列表 ---------- */
|
||||||
|
.post-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-item {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title a {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title a:hover {
|
||||||
|
color: #2b6cb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
color: #555;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2b6cb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 文章详情 ---------- */
|
||||||
|
.post-detail {
|
||||||
|
background: #fff;
|
||||||
|
padding: 40px 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #222;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 32px 0 16px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h3 {
|
||||||
|
font-size: 17px;
|
||||||
|
margin: 24px 0 12px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content ul,
|
||||||
|
.post-content ol {
|
||||||
|
margin: 0 0 16px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content li {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content blockquote {
|
||||||
|
border-left: 3px solid #ddd;
|
||||||
|
padding: 8px 16px;
|
||||||
|
color: #666;
|
||||||
|
background: #f9f9f9;
|
||||||
|
margin: 16px 0;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content code {
|
||||||
|
background: #f4f4f4;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "SFMono-Regular", Consolas, Menlo, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content pre {
|
||||||
|
background: #2d2d2d;
|
||||||
|
color: #f8f8f2;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content pre code {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-footer {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
color: #2b6cb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 关于页面 ---------- */
|
||||||
|
.about {
|
||||||
|
background: #fff;
|
||||||
|
padding: 40px 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 28px 0 12px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 404 ---------- */
|
||||||
|
.not-found {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found h1 {
|
||||||
|
font-size: 72px;
|
||||||
|
color: #ddd;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found p {
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 底部 ---------- */
|
||||||
|
.site-footer {
|
||||||
|
margin-top: 80px;
|
||||||
|
padding: 32px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 14px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- 响应式 ---------- */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
.post-detail,
|
||||||
|
.about {
|
||||||
|
padding: 28px 20px;
|
||||||
|
}
|
||||||
|
.post-header h1 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.header-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.site-nav a {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
{% block title %}页面未找到 - 我的博客{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<section class="not-found">
|
||||||
|
<h1>404</h1>
|
||||||
|
<p>抱歉，你访问的页面不存在。</p>
|
||||||
|
<a href="{{ url_for('index') }}" class="back-link">← 返回首页</a>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
{% block title %}关于 - 我的博客{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<section class="about">
|
||||||
|
<h1>关于我</h1>
|
||||||
|
<p>你好，欢迎来到我的个人博客！</p>
|
||||||
|
<p>这里记录我在编程、生活、阅读中的思考与成长。我相信写作是最好的思考方式，也希望这些文字能对你有所启发。</p>
|
||||||
|
|
||||||
|
<h2>联系方式</h2>
|
||||||
|
<ul class="contact-list">
|
||||||
|
<li>邮箱：hello@example.com</li>
|
||||||
|
<li>GitHub：<a href="https://github.com/" target="_blank" rel="noopener">github.com</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>关于本站</h2>
|
||||||
|
<p>本站使用 Python Flask 构建，文章以 Markdown 格式编写，简洁、纯粹。</p>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>{% block title %}我的博客{% endblock %}</title>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<a href="{{ url_for('index') }}" class="site-title">我的博客</a>
|
||||||
|
<nav class="site-nav">
|
||||||
|
<a href="{{ url_for('index') }}">首页</a>
|
||||||
|
<a href="{{ url_for('about') }}">关于</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2024 我的博客 · 用心记录每一刻</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
{% block title %}首页 - 我的博客{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<section class="hero">
|
||||||
|
<h1>欢迎来到我的博客</h1>
|
||||||
|
<p class="subtitle">记录思考，分享成长</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="post-list">
|
||||||
|
{% if posts %}
|
||||||
|
{% for post in posts %}
|
||||||
|
<article class="post-item">
|
||||||
|
<h2 class="post-title">
|
||||||
|
<a href="{{ url_for('post_detail', slug=post.slug) }}">{{ post.title }}</a>
|
||||||
|
</h2>
|
||||||
|
<div class="post-meta">
|
||||||
|
<time>{{ post.date }}</time>
|
||||||
|
</div>
|
||||||
|
{% if post.summary %}
|
||||||
|
<p class="post-summary">{{ post.summary }}</p>
|
||||||
|
{% endif %}
|
||||||
|
<a class="read-more" href="{{ url_for('post_detail', slug=post.slug) }}">阅读全文 →</a>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<p class="empty-tip">还没有文章，去 <code>posts/</code> 目录添加吧。</p>
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
{% block title %}{{ post.title }} - 我的博客{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<article class="post-detail">
|
||||||
|
<header class="post-header">
|
||||||
|
<h1>{{ post.title }}</h1>
|
||||||
|
<div class="post-meta">
|
||||||
|
<time>{{ post.date }}</time>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="post-content">
|
||||||
|
{{ content|safe }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post-footer">
|
||||||
|
<a href="{{ url_for('index') }}" class="back-link">← 返回首页</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user