内容简介：博客展示前面我们已经使用Django自带的Admin系统，将博客的后台功能编写完成，这节我们就可以展示给用户了。1.导航 2.登录 3.博客列表 4.博客详情
博客展示
前面我们已经使用Django自带的Admin系统，将博客的后台功能编写完成，这节我们就可以展示给用户了。
需求
1.导航 2.登录 3.博客列表 4.博客详情
模版搭建
在mysite/下创建一个templates目录和static目录。
templates放置html模版
static放置静态文件。然后在static下在创建一个css目录，存放样式表。
结构如下：
|--mystie
|--migrations
|--static
|--templates
...
templates目录创建一个base.html，是所有页面的基页面。
<!DOCTYPE html>
{#加载静态文件#}
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
{# 标题占位#}
<title>{% block title %} {% endblock %}</title>
{# 加载static/css下的样式表#}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{# 其他放在头部的文件占位，留给子模版重写，比如js css#}
{% block header %}
{% endblock %}
</head>
<body>
<header>
{# 导航#}
<nav class="nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">技术</a></li>
<li><a href="/">资讯</a></li>
<li><a href="{% url 'about' %}">关于</a></li>
</ul>
{# 如果用户没有登录显示登录 否则 显示用户名和登出#}
{% if not request.user.is_authenticated %}
<a style="float: right; color: white;text-decoration: none" href="{% url 'login' %}">登录/注册</a>
{% else %}
<div style="float: right;color: white;">
{{ user.username }}
<a style="color: white;text-decoration: none" href="{% url 'logout' %}">登出</a>
</div>
{% endif %}
</nav>
</header>
{## 页面主体部分，留给子模版重写#}
<div class="content">
{% block content %}
{% endblock %}
</div>
{#页面底部的说明#}
<footer>
<div class="footer">
COPYRIGHT@2019 litets.com
<div>power by <a target="_blank" href="https://litets.com">litets.com</a></div>
</div>
</footer>
</body>
</html>
index.html
{#继承自base#}
{% extends 'base.html' %}
{#标题 显示在浏览器标签上的#}
{% block title %}
首页
{% endblock %}
{#页面内使用到的资源，此处没有用到也可以不写#}
{% block header %}
{% endblock %}
{#主体部分#}
{% block content %}
<ul>
{# 遍历文章#}
{% for article in articles %}
<li class="item">
<a href="{% url 'detail' article.id %}">
<div class="title">
{{ forloop.counter }}、{{ article.title }}
</div>
</a>
<div class="info">
本条目由{{ article.author }},发布于{{ article.pub_date }}
</div>
</li>
{% endfor %}
</ul>
{% endblock %}
在static/css下添加一个style.css样式文件. 调整页面样式的
* {
margin: 0;
padding: 0;
}
.nav {
background-color: darkslategrey;
line-height: 45px;
height: 45px;
padding-left: 30px;
padding-right: 30px;
}
.content {
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
.footer{
background: #999999;
height: 60px;
text-align: center;
padding-top: 20px;
}
ul {
list-style: none;
}
.nav ul li {
display: inline-block;
float: left;
}
.nav ul li a {
color: white;
text-decoration: none;
line-height: 45px;
display: inline-block;
padding-right: 20px;
padding-left: 20px;
background-color: forestgreen;
margin-right: 1px;
}
.nav ul li a:hover {
background-color: darkgreen;
}
.title{
color: black;
font-size: 20px;
}
.info {
margin-top: 5px;
margin-bottom: 5px;
color: gray;
}
.item {
color: cadetblue;
padding-top: 10px;
padding-bottom: 10px;
}
.item a {
text-decoration: none;
}
.item .title:hover {
color: darkgreen;
}
.item .title{
color: forestgreen;
}
.item .time{
color: #cccccc;
}
然后在setting.py中设置app使用的静态文件目录
STATIC_URL = '/static/' # 全局性的 STATIC_ROOT = 'static' # 每个app下的
views.py中添加
from django.shortcuts import render
from mysite.models import Article
# 首页处理视图
def index(request):
# 查询status=1已发表的所有文章
articles = Article.objects.filter(status=1)
# locals() 是把articles变成模版的参数传递进去 也可以使用
# context = {'articles': articles}
return render(request, 'index.html', locals())
启动服务器， http://127.0.0.1:8000 将会看到。
注：如果查询不到文章，首先摇到admin后台，添加文章 http://127.0.0.1:8000/admin
以上所述就是小编给大家介绍的《4.博客展示》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Go基础学习记录之Web开发的博客文章列表展示功能
- WakaTime数据同步展示工具
- 前端数值展示的思考与实践
- Swift 化的视图控制器展示
- “智慧中国杯”参赛展示|Shun：活得
- WhatsNew - 自动展示更新日志的提示库
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
