將現有的Web前端項目生成導入到Django的Template

2019 年 12 月 25 日
筆記

實際項目中，會遇到這樣的問題：沒有使用任何伺服器端框架的前端程式碼，即包含html網頁文件，也包含js和css的程式碼，如何將這些現有的項目做最少的修改而引入到Django框架中呢？Django官網上給出了解決方法，使用static目錄來存放css和js程式碼（雖然js是動態程式碼，但Django將其與css等同為靜態程式碼，因為在後端看來，前端程式碼是靜態的），然後在html文件裡面，將原先的href引用改為通過static目錄來引用。可以看這裡，但裡面講的不是很清楚，我在查了一些資料後才搞定這個問題，所以這裡寫個總結來總結總結。

修改配置文件，增加`static`相關目錄

在配置文件settings.py裡面，增加STATIC_ROOT，STATIC_URL和STATICFILES_DIRS變數，使得程式在執行時知道從哪裡讀取配置文件：

SITE_ROOT = os.path.join(os.path.abspath(os.path.dirname(__file__)),'')  STAIC_ROOT = os.path.join(SITE_ROOT,'static')  STATIC_URL = '/static/'    #最後關鍵部分需要添加上STATICFILE_DIRS的配置  STATICFILES_DIRS = (      ("css", os.path.join(STATIC_ROOT,'css')),      ("js", os.path.join(STATIC_ROOT,'js')),      ("images", os.path.join(STATIC_ROOT,'images')),  )

上面程式碼中，為了更容易地表示STATIC_ROOT的值，先獲取了SITE_ROOT的值。注意：這個設置只能在DEBUG=True，即處於開發狀態的的時候才有用，實際生產環境中的配置還有些區別。

在app裡面創建`static`目錄

在相應的app裡面創建好static目錄，然後將現有項目的css和js目錄拷貝到該目錄下。至於html文件，則放在相應的templates目錄下。

修改`html`文件裡面的`href`引用

因為原先項目中，對於Javascript和CSS程式碼的引用都是通過相對目錄來引用的，例如：

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">  <link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css">

而在Django裡面，需要對相對目錄進行修改，將其改為通過static來引用的方式，也很簡單：

{% raw %}  ** {% load staticfiles %}**  {% endraw %}  <link rel="stylesheet" type="text/css" {% raw %} href="{% static "css/bootstrap.css" %}" {% endraw %}>  <link rel="stylesheet" type="text/css" {% raw %} href="{% static "css/jquery.fullPage.css" %}"> {% endraw %}

我們可以看到主要有2處修改： 1.增加了 `{% load staticfiles %}` 語句，其中staticfiles是Django自帶的庫，`{% %}` 是Django的模板語法。這條語句表示導入staticfiles模組。

將href中的引用修改為 `href="{% static "subfolder/filename" %}"` 的格式，也很好理解，相當於文件引用路徑是static + subfolder/filename，即通過前面settings.py裡面設置的static目錄來尋找css和js文件。

頁面跳轉的問題

還遇到了一些問題，比如說在現成的前端項目中，我們要跳轉到別的網頁，我們可以這樣寫：

<a href="something.html">Something</a>

但在Django裡面，卻要改為：

<a href="/something/">Something</a>

否則會跳轉出錯。