Django - Tệp tĩnh toàn cầu
Thêm tệp CSS toàn cầu
Chúng ta đã tìm hiểu cách thêm tệp tĩnh vào thư mục static
của ứng dụng và cách sử dụng tệp đó trong ứng dụng.
Nhưng nếu các ứng dụng khác trong dự án của bạn muốn sử dụng tệp thì sao?
Sau đó, chúng ta phải tạo một thư mục trên thư mục gốc và đặt (các) tệp vào đó.
Việc tạo một thư mục static
trong thư mục gốc là chưa đủ và Django sẽ sửa phần còn lại. Chúng ta phải cho Django biết nơi tìm những tệp tĩnh này.
Bắt đầu bằng cách tạo một thư mục ở cấp độ gốc của dự án, thư mục này có thể được gọi là bất cứ tên gì bạn thích, tôi sẽ gọi nó là mystaticfiles
trong hướng dẫn này:
my_tennis_club
db.sqlite3
manage.py
my_tennis_club/
members/
mystaticfiles/
Thêm một tệp CSS vào thư mục mystaticfiles
, tên do bạn chọn, chúng ta sẽ gọi nó là myglobal.css
trong ví dụ này:
my_tennis_club
db.sqlite3
manage.py
my_tennis_club/
members/
mystaticfiles/
myglobal.css
Mở tệp CSS và chèn đoạn sau:
my_tennis_club/mystaticfiles/myglobal.css
:
body {
color: violet;
}
Sửa đổi cài đặt
Bạn sẽ phải yêu cầu Django tìm kiếm các tệp tĩnh trong thư mục mystaticfiles
trong thư mục gốc, việc này được thực hiện trong tệp settings.py
:
Thêm danh sách STATICFILES_DIRS
:
my_tennis_club/my_tennis_club/settings.py
:
.
.
STATIC_ROOT = BASE_DIR / 'productionfiles'
STATIC_URL = 'static/'
#Add this in your settings.py file:
STATICFILES_DIRS = [
BASE_DIR / 'mystaticfiles'
]
.
.
Trong danh sách STATICFILES_DIRS
, bạn có thể liệt kê tất cả các thư mục mà Django nên tìm tệp tĩnh.
Từ khóa BASE_DIR
đại diện cho thư mục gốc của dự án và cùng với / "mystaticfiles"
, nó có nghĩa là thư mục mystaticfiles
trong thư mục gốc.
Thứ tự tìm kiếm
Nếu bạn có các tệp có cùng tên, Django sẽ sử dụng lần xuất hiện đầu tiên của tệp.
Việc tìm kiếm bắt đầu trong các thư mục được liệt kê trong STATICFILES_DIRS
, sử dụng thứ tự bạn đã cung cấp. Sau đó , nếu không tìm thấy tệp, việc tìm kiếm sẽ tiếp tục trong thư mục static
của mỗi ứng dụng.
Sửa đổi mẫu
Bây giờ bạn có tệp CSS chung cho toàn bộ dự án, tệp này có thể được truy cập từ tất cả các ứng dụng của bạn.
Để sử dụng nó trong một mẫu, hãy sử dụng cú pháp tương tự như bạn đã làm với tệp myfirst.css
:
Bắt đầu mẫu với nội dung sau:
{% load static %}
Và tham khảo tập tin như thế này:
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
Ví dụ
my_tennis_club/members/templates/template.html
:
{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
<body>
{% for x in fruits %}
<h1>{{ x }}</h1>
{% endfor %}
</body>
</html>
Chạy ví dụ »Không hoạt động?
Đúng rồi. Bạn cần thu thập lại các tệp tĩnh.
Thu thập tệp tĩnh
Chạy lệnh collstatic để thu thập tệp tĩnh mới:
py manage.py collectstatic
nào sẽ tạo ra kết quả này:
You have requested to collect static files at the destination
location as specified in your settings:
C:\Users\ Your Name \myworld\my_tennis_club\productionfiles
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel:
Nhập có:
Type 'yes' to continue, or 'no' to cancel: yes
nào sẽ tạo ra kết quả này:
1 static file copied to 'C:\Users\ Your Name \myworld\my_tennis_club\productionfiles', 131 unmodified.
Ví dụ nên làm việc
Khởi động máy chủ và ví dụ sẽ hoạt động:
py manage.py runserver
Kiểm tra kết quả trong trình duyệt của riêng bạn: 127.0.0.1:8000/testing/
.
Ví dụ
my_tennis_club/members/templates/template.html
:
{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
<body>
{% for x in fruits %}
<h1>{{ x }}</h1>
{% endfor %}
</body>
</html>
Chạy ví dụ »