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

最新推荐文章于 2022-10-28 00:03:34 发布

jiange_zh

最新推荐文章于 2022-10-28 00:03:34 发布

阅读量1.1k

点赞数

分类专栏： python 文章标签： django html css blog

本文链接：https://blog.csdn.net/jiange_zh/article/details/50038123

版权

python 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

测试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 render
from django.http import HttpResponse
from django.views.generic.base import TemplateView
from 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 url
from blog.views import TestView


urlpatterns = [
        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 context


class 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

jiange_zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【django】搭建博客教程(2)——Template的使用

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

扫一扫

专栏目录