Django静态文件的路径根据页面而变化

时间:2017-09-18 09:22:29

标签: django python-2.7 django-urls

我有一个索引页面,其中包含数据表中的mouvements列表,每行都有一些按钮,允许用户按下"编辑"去一个新的页面,在那里他可以查看有关的详细信息。

在索引页面和基本详细信息页面上,一切正常,静态文件加载路径/ gestion_mouvements / static /...

但是当我使用"(?P [0-9] +)/ $"在我的页面url中能够获取url中的mouvement ID,加载的页面将静态路径更改为gestion_mouvements / mouvementDetails / static / ...例如,无法加载静态文件,因为路径应该是gestion_mouvements / static / ...

我在settings.py中检查并尝试了许多不同的静态设置,但到目前为止没有任何工作,任何人都知道如何更改它?

这是我在app中的urls.py

from django.conf.urls import url, patterns
from .views import *

urlpatterns = patterns('Gestion_Mouvement.views',
    url(r'^tableau/(?P<idMI>\d+)$','tableau', name = 'tableau'),
    url(r'^$', index),
    url(r'^tableau',tableau, name = 'tableau'),
    url(r'^mouvementDetails/(?P<pk>[0-9]+)/$', 'mouvementDetails', name = 'mouvementDetails'),
    url(r'^index', index, name = 'index'),
    url(r'^refresh_index','refresh_index', name = 'refresh_index'),
    url(r'^finalisation','finalisation', name = 'finalisation'),
    url(r'^creation','creation', name = 'creation'),
    url(r'^historiques','histos', name = 'histos'),
    url(r'^histo-pt0','histosPT0', name = 'histo-pt0'),
    url(r'^histo-entrants','histosEntrants', name = 'histo-entrants'),
    url(r'^histo-sortants','histosSortants', name = 'histo-sortants'),
)

我的index.html

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="../static\css/Gestion_Mouvements.css" rel="stylesheet">
<link href="../static\css/index.css" rel="stylesheet">
<link href="{% static 'css/jquery-ui.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/jquery.dataTables.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css" rel="stylesheet' %}" media="all">
<link href="{% static 'css//bootstrap-datetimepicker.min.css' %}" media="all" rel="stylesheet">
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
<script type="text/javascript">   
$(document).ready(function() {
 $('#indexTab').dataTable( {
  "bLengthChange": false,
  "lengthMenu": [ [-1], ["All"] ]
} );
 $('.editbtn').click(function(){
        var $row = $(this).closest("tr");    // Find the row
        var $text = $row.find(".idMark").text(); // Find the text
        alert($text);
    });
 $('.deletebtn').click(function(){
       var $row = $(this).closest("tr");    // Find the row
       var $text = $row.find(".idMark").text(); // Find the text
       alert($text);
    });
});
</script>
</head>
<body>
<div id="wb_Shape1" style="position:absolute;left:4px;top:5px;width:1300px;height:100px;z-index:0;">
<img src="../static\images/img0003.png" id="Shape1" alt="" style="width:1300px;height:100px;"></div>
<div id="Html1" style="position:absolute;left:4px;top:107px;width:1300px;height:400px;z-index:1">
<table id="indexTab" class="display" width="100%" cellspacing="0">
            <thead>
            <tr>
                <th>ID</th>
                <th>Date et heure création</th>
                <th>Véhicule</th>
                <th>Pesée 1</th>
                <th>Type mouvement</th>
                <th>Sous type</th>
                <th>Code espèce</th>
                <th>Libellé espèce</th>
                <th>Edit / Delete</th>
            </tr>
        </thead>
        <tbody>     
           {% for mouvement in mouvements %}
            <tr  name="mvtRow{{mouvement.Id}}">
            <th class="idMark">{{mouvement.Id}}</span></th>
            <th class="ce3l7">{{mouvement.DateHeureCreat}}</span></th>
            <th class="ce3l8">{{mouvement.Immat_Transporteur}}</span></th>
            <th class="ce3l9">{{mouvement.Poids_Charge}}</span></th>
            <th class="ce3l2">{{mouvement.Type_Mouvement}}</span></th>
            <th class="ce3l8">{{mouvement.Sous_Domaine}}</span></th>
            <th class="ce3l9">{{mouvement.Espece}}</span></th>
            <th class="ce312">{{mouvement.Libelle}}</span></th>
            <th><a href="/gestion_mouvement/mouvementDetails/{{mouvement.Id}}"><button type="button" class="editbtn">Edit</button> <a href="/gestion_mouvement/tableau"><button class="deletebtn">Delete</button></a></th>
            </tr>
            {% endfor %}
        </tbody>
</table></div>
<input type="text" id="Editbox1" style="position:absolute;left:15px;top:17px;width:900px;height:30px;line-height:30px;z-index:2;" name="ebFluxState" value="{{listOPT.0}}" readonly spellcheck="false">
<input type="submit" id="Button1" name="btn_PeseeSilo" value="Pesée Silo" style="position:absolute;left:936px;top:17px;width:96px;height:40px;z-index:3;">
<input type="submit" id="Button2" name="btn_createManual" value="Création Manuelle" style="position:absolute;left:1037px;top:17px;width:119px;height:40px;z-index:4;">
<input type="submit" id="Button3" name="btn_refresh" value="Rafraichissement" style="position:absolute;left:1174px;top:17px;width:119px;height:40px;z-index:5;">
</body>
</html>

和我的settings.py STATIC选项:

#STATIC_ROOT = os.path.join(os.path.dirname(__file__), '..', 'static').replace('\\', '/')
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
PROJECT_DIR  = os.path.dirname(__file__) 
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")

STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR,'static'),
)

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__),'../templates'),
)

js / css文件的链接在另一个页面中完全相同,它们被称为完全相同的方式,但仍然将/ mouvementDetails /添加到每个路径

2 个答案:

答案 0 :(得分:0)

编辑:嗯,既然您提供了相关信息,问题就很清楚,请参阅评论。

更多信息,例如settings.py中的静态设置会非常有用。但是,它可能归结为这些东西:

settings.py中,请务必将STATIC_URL设置为/static/

# settings.py
STATIC_URL = '/static/'

然后,在您的模板中:

# your_template.html
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>

答案 1 :(得分:0)

其他所有事情都完美无缺。您需要更改HTML文件的片段,如下所示:

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="../static\css/Gestion_Mouvements.css" rel="stylesheet">
<link href="../static\css/index.css" rel="stylesheet">
<link href="{% static 'css/jquery-ui.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/jquery.dataTables.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css" rel="stylesheet' %}" media="all">
<link href="{% static 'css//bootstrap-datetimepicker.min.css' %}" media="all" rel="stylesheet">
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>

致:

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="{% static 'css/Gestion_Mouvements.css' %}"  rel="stylesheet">
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<link href="{% static 'css/jquery-ui.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/jquery.dataTables.min.css' %}" media="all" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css" rel="stylesheet' %}" media="all">
<link href="{% static 'css//bootstrap-datetimepicker.min.css' %}" media="all" rel="stylesheet">
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>

由于 ../ static 会根据静态文件夹和项目/应用的相对路径搜索所有可能的组合。