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. NYoj WAJUEJI which home strong！（简单搜索）

    题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=1100 这道题,自己初写搜索,给学长气的只打我,Orz....... 搜索的思路要理 ...

  2. js之with

    网上找资料的时候看到有js代码里出现了大量的with语句,有点好奇,这里做下总结: 1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性. ...

  3. 经典算法题每日演练——第十七题 Dijkstra算法

    原文:经典算法题每日演练--第十七题 Dijkstra算法 或许在生活中,经常会碰到针对某一个问题,在众多的限制条件下,如何去寻找一个最优解?可能大家想到了很多诸如“线性规划”,“动态规划” 这些经典 ...

  4. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

  5. Linux 时区变化

    1.查看当前的时区 date -R 2.改动当前时区 tzselect 之后会出来一个选项菜单,选择你想要的时区就OK了 3.替换系统时区文件 cp /usr/share/zoneinfo/XXX/Y ...

  6. POJ 1637 Sightseeing tour（最大流）

    POJ 1637 Sightseeing tour 题目链接 题意:给一些有向边一些无向边,问能否把无向边定向之后确定一个欧拉回路 思路:这题的模型很的巧妙,转一个http://blog.csdn.n ...

  7. WCF常见问题(1) -- WebService/WCF Session Cookie

    原文:WCF常见问题(1) -- WebService/WCF Session Cookie 在.net 3.0推出WCF之前使用的WebService,有的应用有使用Session保持一些信息,在不 ...

  8. 原生态纯JavaScript 100大技巧大收集---你值得拥有

    1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...

  9. C语言身份证信息查询系统（修改版）

    很久以前写了一个<C语言身份证信息查询系统>,如果你点击链接进去看了. 估计也会被我那磅礴大气的代码震惊到的,最近复习/学习文件操作,把代码改了改,算是对以前还不会文件操作的时候的愿望,哈 ...

  10. 图文解说PhpStorm 7.0版本支持PHP 5.5

    PhpStorm7.0版本终于在2013年与广大开发者见面了!鉴于PhpStorm 7.0测试版中对PHP语言最新版的支持,JetBrains没让大家失望,PhpStorm 7.0正式版本中,最大的变 ...