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. js敏感词过滤

    var filterWord={ words:"", tblRoot:{}, //敏感词文件 file:"sensitiveWords.txt", //载入敏感 ...

  2. android登录界面

    在网上在到一个登录界面感觉挺不错的,给大家分享一下~先看效果图: 这个Demo除了按钮.小猫和Logo是图片素材之外,其余的UI都是通过代码实现的. 一.背景 背景蓝色渐变,是通过一个xml文件来设置 ...

  3. XEvent – SQL Server Log文件对磁盘的写操作大小是多少

    原文:XEvent – SQL Server Log文件对磁盘的写操作大小是多少 本篇是上一篇SQL Server Log文件对磁盘的写操作大小是多少的续,使用XEvent收集SQL Server D ...

  4. HDU 2612 -Find a way (注重细节BFS)

    主题链接:Find a Way 题目不难,前几天做,当时准备写双向BFS的,后来处理细节上出了点问题,赶上点事搁置了.今天晚上重写的,没用双向,用了两次BFS搜索,和双向BFS 道理差点儿相同.仅仅是 ...

  5. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  6. Web API 2 对 CORS 的支持

    Web API 2 对 CORS 的支持 CORS概念 跨域资源共享 (CORS) 是一种万维网联合会 (W3C) 规范(通常被认为是 HTML5 的一部分),它可让 JavaScript 克服由浏览 ...

  7. jQuery组织您钞四----jQuery操作DOM

    一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...

  8. 由一个LED闪烁问题发现的MTK的LED driver中存在的问题

    今天依据最新的需求要对LED灯的提示闪烁频率进行改动,将之前默认的2000ms改为10000ms,可是改动之后没有产生预料中的效果,而是变成了常量,百思不得其解,最后还是read the fuckin ...

  9. JAVA 代码生成。SimpleCaptcha

    去官方网站下载Jar包: http://simplecaptcha.sourceforge.net/ Javadocs: http://simplecaptcha.sourceforge.net/ja ...

  10. css中字符换行的一些问题

    -------我们在处理文章的内容的过程中由于文章内容混杂有中文.英文.数字等其他字符,而我们常见的英文和数字是无法在包裹元素中自动换行,这往往会导致元素被撑破,如下图所示: css中word-bre ...