location 最后一个文件夹名就是project名,我用了Django_Plan。

Application 是自动加入的APP名字,我用了Plan

静态文件相关配置:

Django_Plan\settings.py

STATIC_URL = '/static/'#URL访问路径

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),#URL对应的路径和URL名称设一致,编写相关代码时提示是正确的
)

示例一个图片(1.png)

存在Django_Plan\static\1.png

可直接访问路径:http://localhost:8000/static/1.png

在模板中使用:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
</head>
<body>
</body> </html>

这里引用了Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,需要自己去下载。放进static静态文件目录

可以直接在线编辑布局。http://www.runoob.com/try/bootstrap/layoutit/

省的学什么前端框架了。把生成好的代码,放进body中就可以了。

有了结构,结合前面的模板替换,模板循环。前端输出就基本搞定了。

Django(五)在模板中使用静态文件的更多相关文章

  1. Flask初级(四)flash在模板中使用静态文件

    Project name :Flask_Plan templates: 默认设置下,Flask在程序根目录中名为static的子目录中寻找静态文件. 随便找个图片放进去把,命令test.png Fla ...

  2. Django框架之模板继承和静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  3. Django框架之模板基础,静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  4. Django框架之模板路径及静态文件路径配置

    内容: (1)模板文件路径的配置 (2)静态文件路径的配置 一.模板文件路径的配置 模板文件主要通过jinja2模板进行渲染html页面,实现动态页面. 步骤一:创建一个template的文件夹,用于 ...

  5. Django中对静态文件的支持(转)

    英文原文:[http://agiliq.com/blog/2013/03/serving-static-files-in-django/] 译文:[http://segmentfault.com/a/ ...

  6. Django模板变量及静态文件引用

    一.模板变量传递 1.视图向模板传递变量 视图中的列表,数组,字典,函数均可以传递给模板 在视图中定义变量通过render(content{‘name’ : value})传递给模板 模板通过{{  ...

  7. Django框架(二)—— 基本配置:app注册、模板配置、静态文件配置、数据库连接配置post和get

    目录 app注册.模板配置.静态文件配置.数据库连接配置post和get 一.app 二.模板配置 三.静态文件配置 四.数据库连接配置 五.get请求和post请求 六.新手三件套 七.登录功能案例 ...

  8. Django 2.0 学习(13):Django模板继承和静态文件

    Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...

  9. C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

随机推荐

  1. LA 4254 处理器(二分+贪心)

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  2. Java 文件夹递归遍历

    import java.io.File; public class Demo1 { public static void main(String[] args) { File dir=new File ...

  3. 2:JavaScript中的基本运算

    今天说的是JavaScript中的数据基本运算 在上一节中已经说了关于JavaScript中的基本数据类型 那么数据有了 剩下来就是数据之间的运算 表达式-------预算符(赋值 比较 算数 逻辑 ...

  4. bzoj 1483: [HNOI2009]梦幻布丁 启发式合并vector

    1483: [HNOI2009]梦幻布丁 Time Limit: 10 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description N个 ...

  5. lombok 中的@Data注解

    今天看到有代码中的Dao包中的类文件,写的极其简洁,甚至引起了开发工具InteliJ的报错,然后程序还能稳健地跑起来. import lombok.Data; @Data public class V ...

  6. Ubuntu 14.04 的 VNC Server

    首先,如果是Desktop 版本的 Ubuntu,不需要另外安装vnc server. 网上也不知怎么搞的,一堆奇怪的方法,要安装TightVNCServer,然后一堆sb设置 然后,主要有两个配置 ...

  7. nginx File not found 错误

    使用php-fpm解析PHP,"No input file specified","File not found"是令nginx新手头疼的常见错误,原因是php ...

  8. ASP.NET调用dos命令获取交换机流量

    protected void btn_Cisco_Click(object sender, EventArgs e) { try { string ip = txt_ip.Value; string ...

  9. LncRNA

    简介:长链非编码RNA(Long non-coding RNA, lncRNA)通过多种机制发挥其生物学功能, 这些机制包括基因印记.染色质重塑.细胞周期调控.剪接调控.mRNA降解和翻译调控等.ln ...

  10. English trip -- Phonics 4 元音字母 i

    IPA   国际音标(英语:International Phonetic Alphabet [ælfəbet],缩写:IPA),早期又称万国音标 VOWELS [ɪ]   [u]   [ʌ]   [ɒ ...