Django搭建简易博客教程(八)-动态U途达L


任何项目早就放在Github上, 随时更新,
品类地址


动态URL


运营已经办好的博客框架, 会发现一个难题, 唯有1个主页的空盒子,
而超越5/10时候大家希望可以让每篇博客文章都有一个单身的页面.

本人首先个想到的主意是给每篇博客文章加三个view函数逻辑,
然后安装贰个独自的url(小编不知道语言比如PHP,
可能web框架rail等是假若消除的, 小编是率先次精心的就学web框架,
也从未前端开发经验), 不过那种情势耦合性太强, 而且用户不本人, 缺点分外多

Django给大家提供了2个便于的缓解格局, 正是动态URL

今后涂改my_blog/article/views.py代码:

# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
from article.models import Article
from datetime import datetime
from django.http import Http404

# Create your views here.
def home(request):
    post_list = Article.objects.all()  #获取全部的Article对象
    return render(request, 'home.html', {'post_list' : post_list})

def detail(request, id):
    try:
        post = Article.objects.get(id=str(id))
    except Article.DoesNotExist:
        raise Http404
    return render(request, 'post.html', {'post' : post})

因为id是每一种博文的绝无仅有标识, 所以这里运用id对数据库中的博文实行搜索

在my_blog/my_blog/urls.py中修改url设置:

from django.conf.urls import patterns, include, url
from django.contrib import admin

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'my_blog.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),

    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', 'article.views.home', name = 'home'),
    url(r'^(?P<id>\d+)/$', 'article.views.detail', name='detail'),
)

接下来在templates下创立一个用来呈现单页博文的界面:

#post.html
{% extends "base.html" %}

{% block content %}
<div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content }}
                    </p>
                </div>
        </section>
</div><!-- /.blog-post -->
{% endblock %}     

能够发现只要求对home.html进行简要的改动, 去掉循环就足以了.

修改home.html和base.html, 到场动态链接和主页, 归档, 专题和About Me按钮

<!--home.html-->
{% extends "base.html" %}

{% block content %}
<div class="posts">
    {% for post in post_list %}
        <section class="post">
            <header class="post-header">
                <h2 class="post-title"><a href="{% url 'detail' id=post.id %}">{{ post.title }}</a></h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time |date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content }}
                    </p>
                </div>
                <a class="pure-button" href="{% url 'detail' id=post.id %}">Read More >>> </a>
        </section>
    {% endfor %}
</div><!-- /.blog-post -->
{% endblock %}      


<!--base.html-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Andrew Liu Blog</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    <link rel="stylesheet" href="http://picturebag.qiniudn.com/blog.css">

</head>
<body>
<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header">
            <h1 class="brand-title"><a href="{% url 'home' %}">Andrew Liu Blog</a></h1>
            <h2 class="brand-tagline">雪忆 - Snow Memory</h2>
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">归档</a>
                    </li>
                    <li class="nav-item">
                        <a class="pure-button" href="https://github.com/Andrew-liu/my_blog_tutorial">Github</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-error pure-button" href="http://weibo.com/dinosaurliu">Weibo</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">专题</a>
                    </li>
                    <li class="nav-item">
                        <a class="button-success pure-button" href="/">About Me</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            {% block content %}
            {% endblock %}
            <div class="footer">
                <div class="pure-menu pure-menu-horizontal pure-menu-open">
                    <ul>
                        <li><a href="http://andrewliu.tk/about/">About Me</a></li>
                        <li><a href="http://twitter.com/yuilibrary/">Twitter</a></li>
                        <li><a href="http://github.com/yahoo/pure/">GitHub</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

中间主要改动

  • 添加了多少个导航按钮, 方便以往添加效果(最近不添加登陆成效)
  • 添加read more按钮
  • 在博客文章的充实一个链接,
    链接的href属性为{% url 'detail' id=post.id %},
    当点击这么些小说标题时, 会将相应的数据库对象的id传入的url中,
    类似于url传参, 不记得的同窗能够另行归来前几页翻一下.
    那边将数据库对象唯一的id传送给url设置,
    url取出那几个id给相应的view中的函数逻辑当做参数.
    那样那个id就传到对应的参数中被运用

比如: 点击到的博客著作题指标靶子对应的id=2,
这几个id被传送到name=detail的url中,
'^(?P<id>\d+)/$'正则表明式匹配后取出id,
然后将id传送到article.views.detail用作函数参数,
然后经过get方法得到相应的数据库对象, 然后对相应的模版举办渲染,
发送到浏览器中..

那时候重国民党的新生活运动行服务器,
然后在浏览器中输入http://127.0.0.1:8000/点击相应的博客文章标题,
能够成功的跳转到三个独门的页面中

图片 1

博客

相关文章