Django 博客 – 4 编写第一个页面-主页

移动开发 waitig 375℃ 百度已收录 0评论

编写视图

blog/views.py文件里添加

from django.views.generic import ListView
from blog.models import Post


class IndexView(ListView):
    model = Post
    context_object_name = 'posts'
    template_name = 'blog/index.html'

这里是使用的是基于类的视图,由于要主页要展示的是Post的列表,所以需要继承ListView,用model指定要使用的模型,template_name指定对应的模板文件,后面再编写,context_object_name指定模型列表在模板里的名字,默认是object_list

对应的视图函数写法是

from django.shortcuts import render
from blog.models import Post

def index(request):
    posts = Post.objects.all()
    return render(request, 'blog/index.html', {'posts': posts})

编写模板文件

blog目录创建templates目录,再创建blog目录,新建一个index.html,内容如下

<ul>
    {% for post in posts %}
        <li>{{ post.title }}</li>
    {% endfor %}
</ul>

通过for标签将posts遍历,将post.title显示在列表里
这样,最简单的模板就生成了

同时将当前的模板目录添加到设置里,让模板引擎找得到对应的模板文件
修改web/settings.py,将templates添加到TEMPLATESDIRS列表里

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'blog', 'templates')],
    ...
}

配置url

blog路径下创建urls.py文件,添加

from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.IndexView.as_view(), name='index'),
]

url函数第一个参数,是一个正则表达式,这里是'^$',代表为空,所以访问http://127.0.0.1:8000/就是这个页面
第二个参数是一个视图函数,由于这里是使用的基于类的视图,所以需要调用as_view()来返回一个视图函数
name参数是一个命名,可以通过index这个名字来找到对应的url

由于默认的ROOT_URLCONF'web.urls',所以需要将blog/urls.py配置到web/urls.py里面

urlpatterns = [
    ...
    url(r'^blog/', include('blog.urls', namespace='blog')),
]

这里url函数第一个参数是r'^blog/',所以blogurl都自带一个前缀blog,主页的的url也变成了http://127.0.0.1:8000/blog/
namespace指定了命名空间,必须通过blog:index这个名字来找到主页,这是为了避免不同应用url冲突

如果为了http://127.0.0.1:8000/也可以访问主页,可以在web/urls.py里面添加

urlpatterns = [
    ...
    url(r'^$', views.IndexView.as_view())
]

配置完后,启动服务器,浏览器访问http://127.0.0.1:8000/blog/,就可以看到博客主页了,目前只是一个博客标题的列表

美化主页

由于主页模板什么样式都没有,所以比较简陋。可以使用自己熟悉的UI框架进行美化,因为我什么UI框架都不熟悉,所以我使用的是UIKit 3,比较容易上手

大部分页面都是有导航栏,并且使用相同的cssjs文件,因此可以编写一个基模板,其他模板继承基模板

新建基模板文件blog\templates\blog\base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Blog{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css"/>
    {% block beforehead %}{% endblock %}

</head>
<body>
<div class="uk-navbar-container">
    <div class="uk-container uk-container-expand">
        <nav class="" uk-navbar>
            <div class="uk-navbar-left">
                <ul class="uk-navbar-nav">
                    <li><a href="{% url 'blog:index' %}">Blog</a></li>
                    <li><a href="#">Tag</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Achieve</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>

{% block body %}{% endblock %}
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"></script>
</body>
</html>

修改blog\templates\blog\index.html

<ul>{% extends 'blog/base.html' %}

{% block body %}
    <div class="uk-container">
    {% for post in posts %}
    {{<article class="uk-article">
        <h1 class="uk-article-title"><a class="uk-link-reset" href="{{ post.get_absolute_url }}">{{ post.title }}</a></h1>
        <p class="uk-article-meta">Written by {{ post.author.username }} on {{ post.created_time }}, {{ post.views }} views</p>
        <p>{{ post.excerpt }}</p>
        <div class="uk-grid-small uk-child-width-auto" uk-grid>
            <div>
                <a class="uk-button uk-button-text" href="#">Read more</a>
            </div>
            <div>
                <a class="uk-button uk-button-text"></a>
            </div>
        </div>
    </article>
    {% endfor %}
    </ul></div>
{% endblock %}

再打开主页看一下,是不是没那么丑了

至此,主页就基本完成。

扩展阅读

Class-based views
Writing views
Built-in class-based generic views
URL dispatcher


本文由【waitig】发表在等英博客
本文固定链接:Django 博客 – 4 编写第一个页面-主页
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)