如何將預先設計好的網頁帶到django並添加我自己的靜態文件

Question

我設計了一個單頁，包括一個'index.html'和一些css和'js'文件在不同的文件夾中。 然后我決定把我的網頁帶到django這樣我就可以在我的網頁中為一些內容添加數據庫和一些管理系統。 但我無法解決這個問題。 這是我到目前為止嘗試過的方式。

url.py

urlpatterns = patterns('',
    # Examples:
    url(r'^$', 'mysite.views.home', name='home'),
)

views.py

def home(request):
    return render_to_response('index.html')

setting.py

TEMPLATE_DIRS = ('/var/www/html/mysite/templates',)

我把我的index.html文件和它的親戚文件夾放到templates文件夾中。 但是，當我運行服務器時，它顯示我的主頁而不識別我的css和'js'文件。

我想知道這樣做的正確方法是什么。 謝謝你的幫助。

- 更新1--

所以參考這個文檔我已經設置了這樣的靜態文件

我在我的項目中創建了'靜態'文件夾ND在'setting.py'中添加了一行

PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH, 'static')
STATIC_URL = '/static/'

然后我將所有'css'和'js'文件傳輸到該文件夾​​。

我將這兩行添加到我的主頁以檢查它是否有效

{% load staticfiles %}
<img src="{% static "/img/b-img-4.jpg" %}" alt="My image"/>

我也試過這個命令

python manage.py collectstatic

這是我添加的新標簽的錯誤行。

[24/Dec/2014 19:27:29] "GET /img/b-img-4.jpg HTTP/1.1" 404 2163

- 更新2--

我發現了我的錯誤。 我改變了我的<img>標簽

<img src="{% static "admin/img/b-img-4.jpg" %}" alt="My image"/>

但問題是它只是識別其默認的靜態文件和文件夾。 我添加自己的文件和文件夾並運行python manage.py collectstatic但它沒有顯示我添加的新文件。

這是我的文件夾srtructure

mysite--
    |
    mysite
    |     |
    |     static
    |      |
    |      my css js files
    |
    templates
        |
        index.html

我究竟做錯了什么？

Answer 1

你幾乎就在那里，但你不應該把其他資源（JS，CSS，圖像）放到模板文件夾中。 這只適用於模板！ 您需要閱讀靜態文件docs：

https://docs.djangoproject.com/en/1.7/howto/static-files/

這需要確保您的代碼（包括模板 - 它們是一種服務器端代碼）和您的資源的正確分離。

（如果你來自PHP背景，你可能會對此感到沮喪，因為它似乎比PHP更復雜，你可以將它們混合在一起。但是，PHP混合這些東西的方式是一個非常糟糕的想法，導致多重安全漏洞 ）。

Answer 2

所以這個博客使它全部清晰，並且通過這些設置，我可以使它工作

setting.py

STATIC_URL = '/static/'
PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH, 'static')
STATICFILES_DIRS = (
    os.path.join(PROJECT_PATH, 'static_assets'),
) 

的index.html

{% load static from staticfiles %}
<img src="{% static 'img/author.jpg' %}" alt="My image"/>

文件夾結構

mysite--
    |
    mysite
    |     |
    |     static
    |      |
    |      my css js files
    |
    static_assets
    |      
    templates
        |
        index.html

Answer 3

您的static文件夾不是它應該的位置。 嘗試這個：

mysite
    static
        js
        css
        images
            b-img-4.jpg  

如果您的圖像放置在上面的樹中，這應該工作：

<img src="{% static "images/b-img-4.jpg" %}" alt="My image"/>