Python Django - Static File

Python Django - Static File

Static file 是在 django 的 html 範本中,使原先在html中引用外部資源檔的機制,也能成功運作。

例如css、javascript、image等。尤其是目前當紅炸子雞 jQuery 、jQuery Mobile 等,在Django機制中如何能繼續使用。

一、需定義 static file 的根路徑。如果佈署到實機環境,必須更改為實機環境中,可存取的到的完整路徑,同時要具備存取權限。

clip_image002

二、網頁範本定義

後續 assets 就代表了完整的根路徑。

{% block XXX %} 與 {% endblock %} 中間所包圍的範圍,代表可以被子網頁所繼承覆蓋的。

clip_image004 

   1: {% load static %}
   2:  
   3: <!DOCTYPE html>
   4:  
   5: <html>
   6:  
   7: <head>
   8:  
   9: <meta charset="UTF-8" />
  10:  
  11: <link rel="stylesheet" type="text/css" href="{% static "assets/css/jquery.mobile-1.3.1.css" %}" />
  12:  
  13: <link rel="stylesheet" type="text/css" href="{% static "assets/css/jquery.mobile.theme-1.3.1.css" %}" />
  14:  
  15: <link rel="stylesheet" type="text/css" href="{% static "assets/css/jquery.mobile.structure-1.3.1.css" %}" />
  16:  
  17: <link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}" />
  18:  
  19: <script type="text/javascript" src="{% static "assets/js/jquery-2.0.3.js" %}"></script>
   1:  
   2:  
   3: <script type="text/javascript" src="{% static "assets/js/jquery.mobile-1.3.1.js" %}">
</script>
  20:  
  21: <title>{% block title %}Base Template{% endblock %}</title>
  22:  
  23: </head>
  24:  
  25: <body>
  26:  
  27: <div data-role="page">
  28:  
  29: <div data-role="header">
  30:  
  31: <h3>文章列表</h3>
  32:  
  33: {% block header %}{% endblock %}
  34:  
  35: </div><!-- /header -->
  36:  
  37: <div data-role="content">
  38:  
  39: {% block content %}{% endblock %}
  40:  
  41: </div><!-- /content -->
  42:  
  43: <div data-role="footer">
  44:  
  45: {% block footer %}{% endblock %}
  46:  
  47: <h3>版權保留</h3>
  48:  
  49: </div>
  50:  
  51: </div><!-- /page -->
  52:  
  53: </body>
  54:  
  55: </html>

 

三、專案架構

clip_image006

clip_image008

clip_image010