奇幻网站开发过程
第三章 模板设计
1 创建文件
在项目根目录下,也就是qihuan_web目录下,创建templates/blog这个目录, 在templates下创建一个文件base.html
2 编写基模板templates/base.html
<!-- 这是所有页面的基本模板 -->
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<link href="{% static 'blog/css/bootstrap.min.css' %}" rel="stylesheet">
<sript src="{% static 'blog/js/jquery.min.js' %}"></sript>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'blog/css/base.css' %}"/>
{% block link %} {% endblock link %}
<title>{% block title %} 奇幻人生{% endblock title %}</title>
</head>
<body>
<div id="base_top">
{% block base_top %}
<!--===================标题===============================-->
<div class="container top_title">
<div class="row">
<div class="col-xs-12 col-md-12">
<h1>奇 幻 人 生</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<span>人生如梦,何不放浪形骸</span>
</div>
<div class="col-md-4">
<span>奇幻人生,给您不一样的人生</span>
</div>
<div class="col-md-4">
<span>生活如山,且须步步为营</span>
</div>
</div>
<!--===================导航===============================-->
<div class="row">
<div class="col-md-12 col-md-offset-3">
<nav class="top_nav ">
<ul class="top_ul nav nav-tabs nav-justified">
<li class="nav_li"><a href="#">首页</a></li>
<li class="nav_li"><a href="#">创意</a></li>
<li class="nav_li"><a href="#">博客</a></li>
<li class="nav_li"><a href="#">论坛</a></li>
<li class="nav_li"><a href="#">商城</a></li>
<li class="nav_li"><a href="#">资源</a></li>
<li class="nav_li_big">
<input class="search" type="text" name="search"/>
<input class="button" type="button" name="button" value="搜索">
</li>
</ul>
</nav>
</div>
</div>
{% endblock base_top %}
</div>
<div id="base_middle" class="container">
<div id="base_left" class="row">
<div class="col-md-2">
{% block base_left %}
{% endblock base_left %}
</div>
<div id="base_center" class="col-md-8">
{% block base_center %}
{% endblock base_center %}
</div>
<div id="base_right" class="col-md-2">
{% block base_right %}
{% endblock base_right %}
</div>
</div>
</div>
<div id="base_bottom" class="base_bottom" >
<div class="row ">
<div class="col-md-12 ">
{% block base_bottom %}
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-2 col-md-offset-2">
<ul class="list-group">
<li class="list-group-item"><h6 >导航 </h6></li>
<li class="list-group-item"><a href="#">首页</a></li>
</ul>
</div>
<div class="col-md-2 ">
<ul class="list-group">
<li class="list-group-item"><h6>友情链接</h6></li>
<li class="list-group-item"><a href=""></a></li>
</ul>
</div>
<div class="col-md-2 ">
<ul class="list-group">
<li class="list-group-item"><h6>产品</h6></li>
<li class="list-group-item"><a href=""></a></li>
</ul>
</div>
<div class="col-md-2">
<ul class="list-group">
<li class="list-group-item"><h6>联系</h6></li>
<li class="list-group-item"><a href="">地址</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p class="copy_right">Copyright@2018-2035 奇幻人生版权所有</p>
</div>
</div>
{% endblock base_bottom %}
</div>
</div>
</div>
</body>
</html>
3 编写基本的样式base.css(创建blog/static/blog文件夹,将blog所需要的js,imgcss放在这里)
并且将bootstrap样式文件放置在css/文件夹下.
*{
margin:0;
padding:0;
}
#base_top{
height:80px;
background-image:url("../images/bg_top_11.jpg");
background-repeat: repeat-x;
}
#base_top h1{
text-align: center;
}
span{
display:inline-block;
text-align: center;
}
.top_nav{
margin-top:0;
height:30px;
background-image:url("../images/nav_bg.png");
}
.top_ul{
position: relative;
left:20%;
}
li{
list-style:none;
}
.nav_li{
float:left;
list-style:none;
width:50px;
}
.nav_li_big{
float:left;
list-style:none;
}
.button{
width:50px;
}
.base_middle{
width:200px;
height:300px;
background-color:black;
}
.ul_ul{
}
.base_bottom{
background-color: #F3D4D6;
}
.copy_right{
padding:0;
margin:0;
text-align: center;
background-color:gray;
}
4 添加搜索路径
qihuan_web/settings.py #用于搜索 STATICFIFLES_DIRS=[os.path.join(BASE_DIR,'static'),] #用于部署nginx STATIC_ROOT =os.path.join(BASE_DIR,'static')
5 编写blog的index.html,(位于qihuan_web/templates/blog/index.html)
{% extends "base.html" %}
{% load static %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/index.css' %}"/>
{% endblock link %}
{% block base_left %}
<ul>
{% for post in post_list %}
<li><a href="#">{{ post.title }}</a></li>
{% empty %}
<li>暂时没有文章</li>
{% endfor %}
</ul>
{% endblock base_left %}
{% block base_center %}
{% for post in post_list %}
{% if forloop.last %}
<h5>{{ post.title }} </h5>
<p>{{ post.body }} </p>
{% endif %}
{% endfor %}
{% endblock base_center %}
6 编写静态文件blog\static\blog\css\index.css
.text-center{
text-align:center;
}
#base_center p{
text-indent:25px;
}
.f-si{
font-size:20px;
}
.bd-rd{
border-radius:10px;
}
.bg-col-gre{
background-color:green;
}
.bg-col-FAD{
background-color: #FADB96;
}
.f-col-r{
color:red;
}
.f-col-b{
color:black;
}
.mar-gin{
margin:0;
}
7 注意事项:
编写每一个模板文件都要加入 {% load staticfiles %}
浏览器查看的时候,注意清除缓存,否则修改后,刷新不会变化.
第四章视图设计
1 编写blog/views.py(采用通用视图ListView)
from django.shortcuts import render
from django.views.generic import ListView,DetailView
from .models import Post
# Create your views here.
'''
使用通用视图
'''
class IndexView(ListView):
'''
博客首页视图,获取文章列表.
'''
model =Post
template_name = "blog/index.html"
context_object_name = "post_list"
2配置访问路径:
1 在qihuan_web/blog下面创建一个urls.py文件.进入配置路径
from django.urls import path
from .views import IndexView
#命令blog命名空间
app_name="blog"
urlpatterns =[
path(r'',IndexView.as_view(),name="index"),
]
2 配置项目qihuan_web\urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
#所有blog的请求都交给blog文件夹下urls.py
path('blog/',include('blog.urls')),
]
3 访问浏览器查看:
$ python manage.py runserver 然后浏览器访问 localhost:8000/blog/ 基本的流程已经完成,下面都是增加功能进行拓展.
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
