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. Oracle Global Finanicals Technical Reference（一个）

    Skip Headers Oracle Global Finanicals Oracle Global Financials Technical Reference Manual Release 11 ...

  2. S2SH新手框架建立具体过程

    S2SH集成框架新手学习总结 第一章:S2SH框架新手搭建准备工作仅仅都须要导入那些文件 第二篇:S2SH框架新手搭建具体过程 版本号信息:Struts2.3+Hibernate4.3.6+Sprin ...

  3. RPC框架

    RPC框架实现 - 路由控制篇 2015-04-27 22:26 by bangerlee, 499 阅读, 1 评论, 收藏, 编辑 RPC(Remote Procedure Call,远程过程调用 ...

  4. 管理员控制Windows Service

    C# 以管理员方式启动Winform,进而使用管理员控制Windows Service   问题起因: 1,) 问题自动分析Windows服务在正常运行时,确实会存在程序及人为原因导致该服务停止.为了 ...

  5. WebBrowser一点心得，如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  6. VS2010类模板修改——添加版权、说明

    VS2010类模板修改——添加版权.说明 最近在学习使用Memcache,就想着用C#代码写一个实现Cache与Memcache以及将来若是能融入Redis切换使用的程序集...不过刚开始写代码,强迫 ...

  7. Java笔试题集锦

    Java笔试题集锦 1.MVC的各个部分都有那些技术来实现?怎样实现? 答:MVC是Model-View-Controller的简写."Model" 代表的是应用的业务逻辑(通过J ...

  8. 12个有趣的c面试题目

    1.gets()函数 问:请找出以下代码里的问题: #include<stdio.h>  int main(void)  {      char buff[10];      memset ...

  9. 4. SQL Server数据库状态监控 - 作业状态

    原文:4. SQL Server数据库状态监控 - 作业状态 有很多地方可以设置定时任务,比如:Windows的计划任务,Linux下的crontab,各种开发工具里的timer组件.SQL Serv ...

  10. 一个可以直接使用的MsgBox基于form居中API

    可直接复制DialogBox项目(文件夹)到需要的项目中然后直接引用和using CodeProject.Dialog 已修正原作者代码错误的地方,可直接使用,VS2010测试成功 具体可以参考案例T ...