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

最新推荐文章于 2024-03-14 00:15:42 发布

Peace & Love

最新推荐文章于 2024-03-14 00:15:42 发布

阅读量1.2k

点赞数

分类专栏： Django 文章标签： bootstrap django css 调试

本文链接：https://blog.csdn.net/u013205877/article/details/76285329

版权

Django 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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

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

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

DEBUG = True
STATIC_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>