【django】搭建博客教程(2)——Template的使用

来源：互联网发布：淘宝拍摄布光编辑：程序博客网时间：2024/04/29 18:51

测试Template

前面我们只是将后端的数据显示到页面上而已，这并不能满足我们的需求，实际上，我们需要用到html，css，js，jquery等等来构建我们的博客。在界面设计方面，我们使用Bootstrap来作为前端的工具。对于前端部分，在教程中我就不多说了～因为东西太多了，大家有兴趣的可以自己学习～（由于我对前端其实不怎么感冒，所以也只是略懂一二，大多数时候是模仿着来做的！）

首先在/jiange_blog/blog/下创建templates文件夹；

接下来，在在jiange_blog/jiange_blog/setting.py下设置templates的位置

TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [os.path.join(BASE_DIR, "templates/"),],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },]

添加template：

<!--在文件夹下添加test.html--><!DOCTYPE html><html>    <head>        <title>Test template</title>        <style>            body {               background-color: blue;            }            em {                color: LightSeaGreen;            }        </style>    </head>    <body>        <h1>Hello World!</h1>        <strong>{{ current_time }}</strong>    </body></html>

修改views.py，此处我们使用通用视图：

from django.shortcuts import renderfrom django.http import HttpResponsefrom django.views.generic.base import TemplateViewfrom datetime import datetime# Create your views here.class TestView(TemplateView):    template_name = "test.html"    def get_context_data(self, **kwargs):        context = super(TestView, self).get_context_data(**kwargs)        context['current_time'] = datetime.now()        return context

修改urls.py：

from django.conf.urls import urlfrom blog.views import TestViewurlpatterns = [        url(r'^$', TestView.as_view(), name='test'),]

运行之后，就可以看到渲染好的页面啦～

关于Class-based views ，官方文档:

https://docs.djangoproject.com/en/dev/ref/class-based-views/#built-in-class-based-views-api

正式开始我们的博客搭建：

1.数据库设计：略

2.templates设计：

首先，我们用一个base.html来作为基础，将我们的博客页面分为3个部分：导航栏nav，主体部分main，页脚footer：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <!--手机html -->    <meta name="viewport" content="width=device-width, initial-scale=1" />     <title>Jiange</title>    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <link rel="stylesheet" href="/static/css/jiange.css">    <link rel="stylesheet" href="/static/css/jiange_comments.css">    <link rel="stylesheet" href="/static/css/jiange_auth.css">    <link rel="stylesheet" href="/static/jquery/jquery.Jcrop.min.css">    <script src="/static/jquery/jquery-2.1.3.min.js"></script>    <script src="/static/jquery/jquery.cookie.js"></script>    <script src="/static/jquery/jquery.form.js"></script>    <script src="/static/jquery/jquery.Jcrop.min.js"></script>    <script src="/static/bootstrap/js/bootstrap.min.js"></script>    {% block css%} {% endblock%}</head><body id="jiange">    <!-- 导航栏 -->    {% include "./include/nav.html"%}    <!-- 文章列表 与 侧边 -->    <div id="jiange-main">        <div id="jiange-content" class="container">            {%block main%} {% endblock %}        </div>        <footer>           <div class="container">               <p class="text-center">Copyright © Jiange 2015</p>           </div>        </footer>    </div></body><script type="text/javascript" src="/static/js/jiange.js"></script>{% block js%}{% endblock%}</html>

其中，nav从”./include/nav.html”中包含进来，于是，整体只有main部分是变化的，所以其他页面只需要继承我们的base.html，就有了nav和footer，只需要在main中填充想要的内容即可。

比如我们的index.html：

{% extends "./base.html" %}{%block main%}<div class="row">    <div id="jiange-content" class="col-md-8 col-lg-9">        <!-- 警告框 -->        <div class="well alert hidden-xs fade in">            <button class="close" data-dismiss="alert" type="button">&times;</button>            欢迎来到            <a href="" target="_blank">Jiange的个人博客</a>            ,欢迎联系我：759878652@qq.com        </div>        <div class="visible-xs">            <div class="search">                <form class="form-inline clearfix" role="form" method="get" action="/search/">                     <input type="text" class="form-control" id="top-s" name="s">                    <button class="btn btn-jiange">                        <span class="glyphicon glyphicon-search"></span>                    </button>                </form>            </div>        </div>        <!-- 首页文章列表 -->        <div id="home-post-list">            <!--首页文章列表 -->            {% if article_list %}            {% with post_list=article_list %}            {% for post in post_list %}                {% include "./include/home_post.html" %}            {% endfor %}            {% endwith %}            {% endif %}            <!--分页 -->            {% if page_obj%}            {% include "./include/pagination.html"%}            {% endif %}        </div>    </div>    <!-- 右边的widgets -->    <div id="jiange-side" class="col-md-4 col-lg-3 hidden-xs">        {% include "./widgets/tags_cloud.html"%}        {% include "./widgets/search.html"%}        {% include "./widgets/hotest_posts.html"%}        {% include "./jiange_comments/latest_comments.html"%}        {% include "./widgets/links.html"%}    </div></div>{% endblock %}

对于view.py部分，由于我们的页面中间部分分为主体+侧边栏，而侧边栏是不变的，所以可以写一个class BaseMixin(object) 来对侧边栏的热门评论，最新文章进行渲染。然后用class IndexView(BaseMixin,ListView) 来对index.html进行渲染，返回侧边栏的信息以及文章信息。

class BaseMixin(object):    def get_context_data(self,*args,**kwargs):        context = super(BaseMixin,self).get_context_data(**kwargs)        try:            #热门文章            context['hot_article_list'] = Article.objects.order_by("-view_times")[0:10]            #导航条            context['nav_list'] =  Nav.objects.filter(status=0)            #最新评论            context['latest_comment_list'] = Comment.objects.order_by("-create_time")[0:10]            #友情链接            context['link_list'] = Link.objects.all()        except Exception as e:            logger.error(u'[BaseMixin]加载基本信息出错')        return contextclass IndexView(BaseMixin,ListView):    template_name = 'index.html'    context_object_name = 'article_list'    paginate_by = PAGE_NUM #分页--每页的数目    def get_context_data(self,**kwargs):        return super(IndexView,self).get_context_data(**kwargs)    def get_queryset(self):        article_list = Article.objects.filter(status=0).exclude(en_title = 'aboutme')        return article_list

0 0