你的第一个博客-第二弹

按照第一弹中博客整体布局和功能要求，给出 templates 目录下相关的 HTML 模板代码。

1. base.html (基础模板)

base.html 是所有页面的基础模板，包含了公共的 HTML 结构（如头部、尾部、导航条等），其他页面会继承它。

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客系统</title><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><header><nav><ul><li><a href="{{ url_for('index') }}">首页</a></li>{% if current_user.is_authenticated %}<li><a href="{{ url_for('new_post') }}">发布文章</a></li><li><a href="{{ url_for('logout') }}">注销</a></li>{% else %}<li><a href="{{ url_for('login') }}">登录</a></li><li><a href="{{ url_for('register') }}">注册</a></li>{% endif %}</ul></nav></header><main>{% block content %}{% endblock %}</main><footer><p>© 2024 我的博客系统</p></footer>
</body>
</html>

2. index.html (首页模板)

index.html 是显示博客文章列表的页面，继承了 base.html。它会从数据库中查询所有文章并显示在页面上。

<!-- templates/index.html -->
{% extends 'base.html' %}{% block content %}<h1>博客文章</h1>{% if posts %}<ul>{% for post in posts %}<li><h2><a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></h2><p>{{ post.content[:200] }}...</p>  <!-- 截取内容的前200个字符 --><p><small>发布于: {{ post.date_posted }}</small></p></li>{% endfor %}</ul>{% else %}<p>目前还没有文章发布。</p>{% endif %}
{% endblock %}

3. post.html (单篇文章页面模板)

post.html 用来展示单篇文章的详细内容，用户点击文章标题后，会跳转到这个页面。

<!-- templates/post.html -->
{% extends 'base.html' %}{% block content %}<h1>{{ post.title }}</h1><p><small>发布于: {{ post.date_posted }} | 作者: {{ post.user.username }}</small></p><div>{{ post.content }}</div>{% if current_user == post.user %}<a href="{{ url_for('edit_post', post_id=post.id) }}">编辑文章</a><a href="{{ url_for('delete_post', post_id=post.id) }}">删除文章</a>{% endif %}<a href="{{ url_for('index') }}">返回首页</a>
{% endblock %}

4. login.html (登录页面模板)

login.html 用于用户登录。

<!-- templates/login.html -->
{% extends 'base.html' %}{% block content %}<h1>登录</h1><form method="POST">{{ form.hidden_tag() }}<div><label for="username">用户名</label>{{ form.username(class="form-control") }}</div><div><label for="password">密码</label>{{ form.password(class="form-control") }}</div><div><button type="submit" class="btn btn-primary">登录</button></div></form><p>还没有账号？<a href="{{ url_for('register') }}">注册</a></p>
{% endblock %}

5. register.html (注册页面模板)

register.html 用于用户注册。

<!-- templates/register.html -->
{% extends 'base.html' %}{% block content %}<h1>注册</h1><form method="POST">{{ form.hidden_tag() }}<div><label for="username">用户名</label>{{ form.username(class="form-control") }}</div><div><label for="email">电子邮件</label>{{ form.email(class="form-control") }}</div><div><label for="password">密码</label>{{ form.password(class="form-control") }}</div><div><label for="confirm_password">确认密码</label>{{ form.confirm_password(class="form-control") }}</div><div><button type="submit" class="btn btn-primary">注册</button></div></form><p>已有账号？<a href="{{ url_for('login') }}">登录</a></p>
{% endblock %}

6. create_post.html (创建文章页面模板)

create_post.html 用于发布新文章。

{% extends "layout.html" %}{% block content %}<h2>Create New Post</h2><form method="POST" action="{{ url_for('new_post') }}">{{ form.hidden_tag() }}<div>{{ form.title.label }}<br>{{ form.title(size=32) }}<br>{% for error in form.title.errors %}<span class="text-danger">{{ error }}</span><br>{% endfor %}</div><div>{{ form.content.label }}<br>{{ form.content(rows=10, cols=50) }}<br>{% for error in form.content.errors %}<span class="text-danger">{{ error }}</span><br>{% endfor %}</div><div><button type="submit">Create Post</button></div></form>
{% endblock %}

7. edit_post.html (编辑文章页面模板)

{% extends "layout.html" %}{% block content %}<h2>Edit Post</h2><form method="POST" action="{{ url_for('edit_post', post_id=post.id) }}">{{ form.hidden_tag() }}<div>{{ form.title.label }}<br>{{ form.title(size=32) }}<br>{% for error in form.title.errors %}<span class="text-danger">{{ error }}</span><br>{% endfor %}</div><div>{{ form.content.label }}<br>{{ form.content(rows=10, cols=50) }}<br>{% for error in form.content.errors %}<span class="text-danger">{{ error }}</span><br>{% endfor %}</div><div><button type="submit">Update Post</button></div></form>
{% endblock %}

8. layout.html (定义整个网站的基础结构和样式)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{% block title %}My Blog{% endblock %}</title><!-- 引入全局样式 --><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body><!-- 页面头部 --><header><h1>Welcome to My Blog</h1><nav><ul><li><a href="{{ url_for('index') }}">Home</a></li><li><a href="{{ url_for('new_post') }}">Create New Post</a></li><li><a href="{{ url_for('login') }}">Login</a></li><li><a href="{{ url_for('logout') }}">Logout</a></li></ul></nav></header><!-- 页面主要内容 --><main>{% block content %}<!-- 子页面的内容将在这里显示 -->{% endblock %}</main><!-- 页面页脚 --><footer><p>&copy; 2024 My Blog. All rights reserved.</p></footer><!-- 引入脚本 --><script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

9. style.css (CSS 文件)

最后是简单的样式文件 style.css，可以用来设置一些基础样式，使界面更美观。

/* static/css/style.css */
body {font-family: Arial, sans-serif;line-height: 1.6;background-color: #f4f4f4;margin: 0;padding: 0;
}header {background-color: #333;color: #fff;padding: 1rem;text-align: center;
}nav ul {list-style: none;padding: 0;
}nav ul li {display: inline;margin-right: 20px;
}nav ul li a {color: #fff;text-decoration: none;
}h1, h2 {color: #333;
}footer {text-align: center;background-color: #333;color: #fff;padding: 10px 0;
}form {margin: 20px auto;max-width: 500px;background: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);
}form input, form textarea, form button {width: 100%;padding: 10px;margin: 10px 0;border-radius: 5px;border: 1px solid #ddd;
}form button {background-color: #5cb85c;color: white;cursor: pointer;
}form button:hover {background-color: #4cae4c;
}