zoukankan      html  css  js  c++  java
  • 实战Django:官方实例Part6

    我们终于迎来了官方实例的最后一个Part。在这一节中,舍得要向大家介绍Django的静态文件管理。

    现在,我们要往这个投票应用里面添加一个CSS样式表和一张图片。

    一个完整的网页文件,除了html文档外,通常还需要其它一些文件,比如图片、JS或者CSS,这些文件,我们称之为“静态文件”。

    在那些小项目中,我们不需要对静态文件关注太多,因为你可以将这些文件随便放置,只要你的服务器能查找得到就好。但在大一点的项目中,尤其是那些拥有好多个应用的项目,静态文件的管理便变得非常重要,所以骚年,还是从一开始就养成良好的静态文件管理习惯吧!

    25.添加样式表


    首先,在polls文件夹下创建一个叫static的文件夹,Django会自动查找到这个文件夹,就象它能自动查到我们的模板文件夹一样。

    Django拥有一系列的静态文件查找手段。其中一种就是在你的应用文件夹下查找有没有static文件夹。

    在你把static文件夹建好后,接着在static下面建一个polls文件夹,然后在这个polls文件夹下创建一个叫styles.css的文件。这个文件的正确路径应该是:

    polls/static/polls/style.css

    styles.css中加入下列内容:

    polls/static/polls/style.css:

    li a {
        color: green;
    }

    接下来,编辑polls/templates/polls/index.html 文件,在开头处插入下述代码:

    polls/templates/polls/index.html

    {% load staticfiles %}
    
    <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

    {% load staticfiles %} 加载了 {% static %}模板标签,这个 {% static %}模板标签负责生成这个静态文件(style.css)的绝对路径。

    让我们开启Django服务器(如何开启?请返回阅读Part1),然后访问http://127.0.0.1:8000/polls/,你会看到那个“What's Up?”已经变成了绿色,这就说明我们的样式表(style.css)已经发挥作用了。

    26.添加背景图

    下面,我们要创建一个图片文件夹,在polls/static/polls/文件夹下创建一个images文件夹,然后在这个文件夹里放一个叫background.gif的文件(找一个你认为合适的图片,改成这个名字就行),这个文件的正确路径应该是:

    polls/static/polls/images/background.gif

    然后,往样式表(style.css)里添加以下内容:

    polls/static/polls/style.css

    body {
        background: white url("images/background.gif");
    }

    刷新一下浏览器,你可以看到我们刚加上去的背景图。

    好了,我们这个官方实例就介绍到这里,有一定英文阅读能力的童鞋,建议到Django官方网站(https://www.djangoproject.com/)下载官方文档来阅读。

    在今后这段时间,舍得还会将自己整理的多个实例陆续介绍给大家。

    最后,附上整个实例的源代码,下载地址:舍得学苑下载中心

    本文版权归舍得学苑所有,欢迎转载,转载请注明作者和出处。谢谢!
    作者:舍得
    首发:舍得学苑@博客园

  • 相关阅读:
    PossibleOrders TopCoder
    505C Mr. Kitayuta, the Treasure Hunter
    p2257 YY的GCD
    浅谈莫比乌斯反演
    Hive基础(3)---Fetch Task(转)
    Hive基础(2)---(启动HiveServer2)Hive严格模式
    mysql 命令行参数
    Hive基础(1)---Hive是什么
    mybatis运行时错误Illegal argument exception argument type mismatch
    【TOMCAT启动异常】The BASEDIR environment variable is not defined correctly
  • 原文地址:https://www.cnblogs.com/emagic/p/4149530.html
Copyright © 2011-2022 走看看