在django项目中加入像bootstrap这样的css，js，图片等静态文件

来源：互联网发布：淘宝众筹赚钱编辑：程序博客网时间：2024/05/21 09:21

参考文档:http://python.usyiyi.cn/documents/django_182/intro/tutorial06.html

一. 简单易会的傻瓜式方法

本地开发环境下访问
1. settings里面

DEBUG = TrueSTATIC_URL = '/static/'

在app下新建static,文件放进去

3.模板里访问

<link href="/static/css/bootstrap-combined.min.css" rel="stylesheet">    <link rel="stylesheet" type="text/css" media="screen"  href="/static/css/bootstrap-datetimepicker.min.css">

4.如果setting里面这么设置

STATIC_URL = '/pythonnav/static/'

那么模板里

 <script src="/pythonnav/static/js/jquery.js"></script>

一. 高端的官方推荐的方法

高端方法用到了命名空间,听起来就很高端有木有,有傻瓜方法为啥要用高端方法呢?
是的,我们的确可以傻瓜式的将静态文件直接放在app/static下，但实际上这是一个坏主意。Django将使用它所找到的第一个符合要求的静态文件的文件名，如果在你的不同应用中存在两个同名的静态文件，Django将无法区分它们。我们需要告诉Django该使用其中的哪一个，最简单的方法就是为它们添加命名空间。也就是说，将这些静态文件放进以它们所在的应用的app命名的另外一个目录下。

1.在之前的static文件夹下面新建文件夹,名字和app名字相同,然后将之前的静态文件都移动到这个文件夹里面
C:\zqxt\devnav\pythonnav\static\pythonnav\css devnav项目名 pythonnav应用名
2.在前端html顶部加上 {% load staticfiles %}

将之前的写法改写

<!DOCTYPE html><html lang="en">{% load staticfiles %}  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="author" content="Mosaddek">    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">    <link rel="shortcut icon" href="{% static 'pythonnav/img/favicon.html' %}">    <title>FlatLab - Flat & Responsive Bootstrap Admin Template</title>    <!-- Bootstrap core CSS -->    <link href="{% static 'pythonnav/css/bootstrap.min.css' %}" rel="stylesheet">    <link href="{% static 'pythonnav/css/bootstrap-reset.css' %}"rel="stylesheet">    <!--external css-->    <link href="{% static 'pythonnav/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css' %}" rel="stylesheet" />    <link href="{% static 'pythonnav/assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />    <link href="{% static 'pythonnav/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css' %}" rel="stylesheet" type="text/css" media="screen"/>    <link rel="stylesheet" href="{% static 'pythonnav/css/owl.carousel.css' %}" type="text/css">    <!-- Custom styles for this template -->    <link href="{% static 'pythonnav/css/style.css' %}" rel="stylesheet">    <link href="{% static 'pythonnav/css/style-responsive.css' %}" rel="stylesheet" />    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->    <!--[if lt IE 9]>      <script src="{% static 'pythonnav/js/html5shiv.js' %}"></script>      <script src="{% static 'pythonnav/js/respond.min.js' %}"></script>    <![endif]-->  </head>  <body>

阅读全文

0 0