• 用django搭建一个简易blog系统(翻译)(四)


    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: 0;
        padding: 0;
        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小节。

      

        

  • 相关阅读:
    Git命令家底儿及Git数据通信原理详解
    git SSH keys
    TRIM函数
    c# List AddRange
    vtk第一个程序
    MFC CStatic类动态创建
    前端基础之BOM和DOM
    JavaScript
    前端CSS属性相关
    前端CSS
  • 原文地址:https://www.cnblogs.com/Happy-Tuesday/p/3353548.html
Copyright © 2020-2023  润新知