Web实战丨基于Django与HTML的新闻发布系统：https://developer.aliyun.com/article/1534698
6.配置模板文件
本项目共需要创建六个模板文件，首先我们需要在"news"目录下新建一个"templates"子目录，然后在"templates"目录中创建六个文件（页面）：
- home：主页
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A layout example that shows off a blog page with a list of posts."> <title>新闻系统</title> <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/pure-min.css"> <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/grids-responsive-min.css"> <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/blog.css"> </head> <body> <div id="layout" class="pure-g"> <div class="sidebar pure-u-1 pure-u-md-1-4"> <div class="header"> <h1 class="brand-title"><a href="#"> Want595最新要闻</a> ……具体代码需要下载后查看哦~ <h
该HTML模板文件用于渲染新闻系统的页面布局。
页面布局分为两个部分：侧边栏（sidebar）和内容区域（content）。
侧边栏部分包含以下内容：
网站标题和标语，用<h1>和<h2>标签进行展示。
导航栏，包含一个无序列表（<ul>），其中的列表项（<li>）包含以下内容：
如果用户已经登录，显示用户的用户名和一个退出按钮。
如果用户未登录，显示一个注册按钮和一个登录按钮。
内容区域部分使用一个<div>元素包裹，用于渲染具体的页面内容。在模板中使用了一个{% block content %}标签，表示该区域是一个可被子模板继承并填充内容的区域。
该模板文件使用了PureCSS框架提供的样式表，以实现页面的样式和布局。
通过使用该模板文件，可以方便地创建新闻系统的页面布局，并根据具体需求填充和扩展页面内容。
- regist：用户注册页面
{% extends 'home.html' %} {% block content %} <h1>注册页面</h1> <form method="POST" enctype="multipart/form-data"> {% csrf_token %} {{uf.as_p}} <input type="submit" value="OK" /> </form> {% endblock %}
这个模板继承自一个名为home.html的父模板，通过{% extends 'home.html' %}指令进行继承。
在模板中使用了一个{% block content %}标签来填充内容，表示该区域是可以被父模板中同名块所替换的区域。
具体内容如下：
- 使用<h1>标签显示了一个标题为"注册页面"的标题。
- 使用<form>标签创建了一个表单，其中method属性指定了使用POST方法提交表单数据，enctype属性指定了表单数据的编码方式为multipart/form-data。
- 使用{% csrf_token %}标签生成一个CSRF令牌，用于防止跨站请求伪造。
- 使用{{ uf.as_p }}渲染了一个表单对象uf，其中的as_p方法会将表单字段渲染为<p>标签的形式，方便显示字段和输入框。
- 使用<input>标签创建了一个类型为"submit"的按钮，显示文本为"OK"，用于提交表单。
- 通过这个模板，可以在注册页面中显示一个表单，接收用户的注册信息，并通过提交按钮将信息发送给服务器进行处理。
- regists：注册成功或失败页面
{% extends 'home.html' %} {% block content %} {{registAdd}} <br> ================ <br> {% if username %} 注册失败，{{ username }}已存在！ <a href="/regist">注册</a> {% else %} 注册成功！ <a href="/login">登录</a> {% endif %} {% endblock %}
这个模板继承自一个名为home.html的父模板，通过{% extends 'home.html' %}指令进行继承。
在模板中使用了一个{% block content %}标签来填充内容，表示该区域是可以被父模板中同名块所替换的区域。
具体内容如下：
- 使用{{registAdd}}语句输出了一个变量registAdd的值。根据上下文来看，这个变量可能是在视图函数中传递给模板的。
- 使用<br>标签插入一个换行。
- 使用{% if username %}条件语句，判断变量username是否存在。
- 如果username存在，输出"注册失败"和username已存在的提示信息，同时提供一个"注册"的链接用于重新注册。
- 如果username不存在，输出"注册成功！"的提示信息，同时提供一个"登录"的链接用于跳转到登录页面。
通过这个模板，可以根据不同的情况在注册结果页面显示不同的提示信息，给用户提供相应的操作选项。
- login：用户登录页面
{% extends 'home.html' %} {% block content %} <div> <form action="/login/" method="POST">{% csrf_token %} <h2>请登录</h2> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">登录</button> <p style="color: red">{{ login_error }}</p> </form> </div> {% endblock %}
这个模板继承自一个名为home.html的父模板，通过{% extends 'home.html' %}指令进行继承。
在模板中使用了一个{% block content %}标签来填充内容，表示该区域是可以被父模板中同名块所替换的区域。
具体内容如下：
- 使用<div>元素包裹了一个表单，该表单的提交目标为"/login/"，使用POST方法提交数据。
- 使用{% csrf_token %}模板标签添加一个跨站请求伪造保护的令牌。
- 使用<h2>标签显示"请登录"的标题。
- 使用两个<input>标签分别用于输入用户名和密码，分别对应name="username"和name="password"。
- 使用<button>标签显示一个"登录"按钮。
- 使用<p>标签显示一个红色文本，该文本内容由login_error变量提供，用于显示登录出现的错误信息。
通过这个模板，用户可以在登录页面输入用户名和密码，并点击登录按钮进行登录操作。如果登录失败，会显示相应的错误信息。
- article：新闻页面
{% extends 'home.html' %} {% block content %} <h2>新闻列表</h2> {% for article in article_list %} <h3><a href="{% url 'detail' id=article.id %}">{{ article.title }}</a></h3> {% endfor %} {% endblock %}
这个模板继承自一个名为home.html的父模板，通过{% extends 'home.html' %}指令进行继承。
在模板中使用了一个{% block content %}标签来填充内容，表示该区域是可以被父模板中同名块所替换的区域。
具体内容如下：
- 使用<h2>标签显示"新闻列表"的标题。
- 使用{% for article in article_list %}模板标签开始一个循环，遍历article_list列表中的每个元素。
- 在循环内部，使用<h3>标签显示每篇文章的标题，并且使用{% url 'detail' id=article.id %}生成文章详情页面的链接。
- 使用{% endfor %}结束循环。
通过这个模板，可以在页面上显示新闻列表，并且每个新闻标题都有对应的链接可以跳转到相应的新闻详情页面。
- detail：新闻详情页面
{% extends 'home.html' %} {% block content %} <h2>{{ article.title }}</h2> {{ article.content }} {% endblock %}
这个模板继承自一个名为home.html的父模板，通过{% extends 'home.html' %}指令进行继承。
在模板中使用了一个{% block content %}标签来填充内容，表示该区域是可以被父模板中同名块所替换的区域。
具体内容如下：
使用<h2>标签显示article对象的标题，通过{{ article.title }}获取到文章标题的值。
使用{{ article.content }}显示article对象的内容，通过{{ article.content }}获取到文章内容的值。
通过这个模板，可以在页面上显示文章的标题和内容。
7.创建数据库
在终端输入以下命令创建（迁移）数据库
python manage.py makemigrations python manage.py migrate
8.启动项目
- 我们首先需要创建一个超级用户（管理员），用于登录后台
python manage.py createsuperuser
- 我创建了一个超级用户admin，并设置密码为123456
- 在终端输入以下命令启动项目
python manage.py runserver • 1
- 如果出现以下网址，说明项目启动成功啦！
运行结果
- 主页
- 注册页面
- 注册成功页面
- 登录页面
- 新闻页面
- 新闻详情页面
7.管理员页面
写在后面
我是一只有趣的兔子，感谢你的喜欢！
