12. Create the templates

　　你需要做三件事来去掉TemplateDoesNotExist错误

第一件，创建下面目录

* netmag/netmag/templates

* netmag/netmag/templates/blog

　　下一步，你需要配置Django能找到你的templates。打开settings.py文件找到TEMPLATE_DIRS元组。

　　你只需要告诉django去哪找你的netmag/netmag/templates目录，所以编辑TEMPLATE_DIRS元组，让它有指向netmag/netmag/templates目录的绝对路径。字符串后面的逗号很重要。在我电脑上的绝对路径是这样的，注意要改成你们自己电脑上的绝对路径。

TEMPLATE_DIRS = (

    "C:/Users/zhanglei/Desktop/netmag/netmag/templates",

    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".

    # Always use forward slashes, even on Windows.

    # Don't forget to use absolute paths, not relative paths.

)

　　最后，你需要创建三个模板。第一个是base.html，它是其它模板要继承的模板。创建templates/base.html并且输入下面的代码在里面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>{% block title %}{% endblock %}</title>

</head>

<body>

    <div class="content">

        {% block content %}

        {% endblock %}

    </div>

</body>

</html>

　　现在我们需要再创建两个模板，每个对应一个view函数，创建templates/blog/index.html文件并输入下面的代码：

{% extends 'base.html' %}

{% block title %}Blog Archive{% endblock %}

{% block content %}

    <h1> My Blog Archive</h1>

    {% for post in posts %}

    <div class="post">

        <h2>

        <a href="{{post.get_absolute_url}}">

        {{post.title}}

        </a>

        </h2>

        <p>{{post.description}}</p>

        <p>

            Posted on

            <time datetime="{{post.created|date:'c'}}">

                {{post.created|date}}

            </time>

        </p>

    </div>

    {% endfor %}

{% endblock %}

　　最后，创建templates/blog/post.html文件，并且输入下面代码：

{% extends 'base.html' %}

{% block title %}{{post.title}}{% endblock %}

{% block content %}

<article>

    <header>

        <h1>{{post.title}}</h1>

        <p>

            Posted on

            <time datetime="{{post.created|date:'c'}}">

                {{post.created|date}}

            </time>

        </p>

    </header>

    <p class="description">

        {{post.description}}

    </p>

    {{post.content|safe}}

</article>

{% endblock %}

　　上面有一些不是HTML的元素

* {% tag %} 是一个模板标签

* {{variable}} 是模板变量

* {{variable|filter}} 是被特定的模板过滤器过滤的模板变量

　　关于模板语言，如果想了解更多的话，请查看 https://docs.djangoproject.com/en/1.4/topics/templates/ 值得及花几分钟好好看看。

　　讲了够多的理论，现在回到浏览器刷新页面，查看目前为止的成果

　　好的，到目前为止，我们已经做了很多了。我们可以回顾一下：

* 编辑urls.py，添加一些把特定的urls映射到view函数的urlpattern

* 写一些view函数来对应相应的URLS

* 为模板创建目录

* 配置django去寻找模板

* 创建base.html模板

* 为每一个view函数创建一个模板

* 简单的学习一下django模板语言

　　然而，还有一些问题，blog太单调了。

13. Adding some style

　　添加一点样式，就会让网页的可阅读性大幅提高。这一小部分，我们就给base.html添加一些样式。

　　请注意：一些在开发版上用的方法目前觉得还行，但是别用在要上线的服务器上面。用django来管理static文件是对资源的浪费，好一点的解决方案是用web服务器来管理static文件，关于这方面如果想了解更多的话，请查看 https://docs.djangoproject.com/en/dev/howto/static-files/#basic-usage

　　创建目录netmag/netmag/static，然后在里面创建一个文件style.css并输入下面代码：

body {

    background-color: #fdfdfd;

    color: #2e2e2e;

    margin:;

    padding:;

    font-size: 14px;

    line-height: 28px;

    font-family: 'Helvetica Neue',Helvetica, Arial, sans-serif;

}

div.content {

    border: 1px solid #fbfbfb;

    background-color: #fff;

    max-width: 640px;

    width: 96%;

    padding: 2%;

    margin:28px auto;

}

　　现在在base.html文件里面的头部分添加下面这行代码：

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}style.css">

　　在你试着刷新浏览器页面的时候，先停一下，像配置templates位置一样，你需要做一些配置让django知道你的static文件在哪。并且用什么URL来引用它们。

　　打开settings.py文件，修改STATIC_URL如下：

STATIC_URL = '/static/'

　　下一步修改STATICFILES_DIRS像下面这样：

STATICFILES_DIRS = (

    'C:/Users/zhanglei/Desktop/netmag/netmag/static/',

    # Put strings here, like "/home/html/static" or "C:/www/django/static".

    # Always use forward slashes, even on Windows.

    # Don't forget to use absolute paths, not relative paths.

)

　　注意：和模板目录一样这里是我的static的绝对目录，读者要改成自己电脑存放static文件的绝对路径。

　　现在可以刷新一下浏览器查看：

　　

　　恭喜你，在这个教程教程中，你已经做了这么多：

* 用django-admin.py创建了一个project

* 用django-admin.py创建了一个app

* 为你的app设计model

* 关于数据库和其它的项目配置

* 连接你的应用和系统自带管理app，并且自己写了一个自定义的admin类

* 为你的app写urlpatterns view函数 模板，配置关于templates相关的

* 配置css相关，提高你的网站的颗阅读性

14. Suggestions for taking it further

　　这部分是一些学习django的建议，就不翻译了，感兴趣的话可以看原文，原文网址 http://www.creativebloq.com/netmag/get-started-django-7132932 第14小节。

　　

　　　　

用django搭建一个简易blog系统（翻译）（四）的更多相关文章

  1. 用django搭建一个简易blog系统（翻译）（三）

    06. Connecting the Django admin to the blog app Django 本身就带有一个应用叫作Admin,而且它是一个很好的工具 在这一部分,我们将要激活admi ...

  2. 用django搭建一个简易blog系统（翻译）（一）

    Django 入门 原始网址: http://www.creativebloq.com/netmag/get-started-django-7132932 代码:https://github.com/ ...

  3. 用django搭建一个简易blog系统（翻译）（二）

    03. Starting the blog app 在这部分,将要为你的project创建一个blog 应用,通过编辑setting.py文件,并把它添加到INSTALLED_APPS. 在你的命令行 ...

  4. 通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）

    一.创建django项目 通过命令创建: django-admin startproject 项目名称 创建app应用 python3 manage.py startapp 应用名 #这里manage ...

  5. python django搭建一个简易博客的解析（按照文件顺序逐一讲解）

    上次讲解了一下各py文件的内容,但比较乱,所以这次整理了一个顺序版. 源代码请在http://github/Cheng0829/mysite自行下载 mysite: db.sqlite3:数据库文件. ...

  6. django 搭建一个投票类网站（四）

    昨天我把投票页面终于写完,怎么说呢,觉得这本书对我的帮助也不是很大,然后去看了下django的文档,发现竟然是同一个项目...... 但还是要善始善终吧,贴一下中文版的文档https://docs.d ...

  7. django开发个人简易Blog——数据模型

    提到数据模型,一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架,它将数据与业务逻辑分开,减小了应用之间的高度耦合.个人非常喜欢MVC开发框架,除了具有上述特性,它使得web开发变得非常 ...

  8. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  9. 如何搭建一个简易的 Web Terminal（一）

    前言 在介绍本篇文章的时候,先说一下本篇文章的一些背景.笔者是基于公司的基础建设哆啦 A 梦(Doraemon)一些功能背景写的这篇文章,不了解.有兴趣的同学可以去 袋鼠云 的 github 下面了解 ...

随机推荐

  1. 胖client和瘦client

    胖和瘦?纠结了妙龄少女,更郁闷了无数男女老少.每天充斥在宿舍的一句话就是:从明天開始我要减肥!!结果,可想而知,真的永远是明天而已.就这样,胖和瘦在我们人类之间无缝不在的存在着.但是client怎么就 ...

  2. android ndk通过遍历和删除文件

           在做移动开发过程,难免有些本地文件管理操作.例如,很常见app随着微博.微信要清除缓存功能,此功能是走app文件夹.然后删除所有缓存文件.使用java的File类能够实现本地文件遍历及删 ...

  3. JavaScript语法细节——引用与复制

    原文:JavaScript语法细节--引用与复制 我们都知道,JS中变量的赋值有两种方式,最近在折腾自己写的标签栏插件,碰到了很多平时没注意的问题.正好,那边处理清楚了,稍微整理一下关于引用与复制相关 ...

  4. 在Windows系统中安装集成的PHP开发环境

    原文:在Windows系统中安装集成的PHP开发环境 刚想学php的,又不会配置复杂php的环境,可以使用集成的,目前网上提供常用的PHP集成环境主要有AppServ.phpStudy.WAMP和XA ...

  5. CSS3+HTML5特效6 - 闪烁的文字

    先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS <style> @-webkit-keyframes flash { 0%{ ...

  6. C# 获取与解析枚举类型的 DescriptionAttribute

    原文:C# 获取与解析枚举类型的 DescriptionAttribute System.ComponentModel.DescriptionAttribute 这个 Attribute,经常被用来为 ...

  7. Swift 制作一个新闻通知中心插件1

    使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...

  8. iOS_23_undress Girl

    最后效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...

  9. testNg的安装与卸载

    1.testNG的安装 打开eclips,点击Help菜单.选择Install New Software. 在弹出的窗口的work with的输入框,输入http://beust.com/eclips ...

  10. 图解IntelliJ IDEA v13应用服务器的运行配置

    初步了解IntelliJ IDEA v13应用服务器以后,接下来我们将继续设置应用服务器的运行配置. Artifacts是IDE在通过运行配置时部署的一个服务.Artifacts包括名称.类型.输出目 ...