Menu
×

Được chứng nhận

Ghi lại kiến ​​thức của bạn

Đăng nhập Đăng ký

Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn

Người tìm đường và việc học của tôi

Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng

Nâng cấp

Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)

Bắt đầu từ đâu

Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi

Trình chỉnh sửa mã (Dùng thử)

Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình

Video

Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn

Mẫu

Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!

Web hosting

Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces

Tạo một máy chủ

Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.

Làm thế nào để

Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript

Khung CSS

Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi

Thống kê trình duyệt

Đọc xu hướng dài hạn của việc sử dụng trình duyệt

Tốc độ gõ

Kiểm tra tốc độ đánh máy của bạn

Đào tạo AWS

Tìm hiểu dịch vụ web của Amazon

Bộ chọn màu

Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau. Bánh xe màu hình tròn thể hiện sự chuyển màu trong quang phổ

Trò chơi mã

Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông Logo Lynx

Đặt mục tiêu

Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn

Bản tin

Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng

Việc làm

Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo

Lớp học

Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục

×
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP CÁCH W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS AN NINH MẠNG DỮ LIỆU KHOA HỌC

Hướng dẫn Django

Django Trang chủ Django Giới thiệu Django Bắt đầu Tạo môi trường ảo Cài đặt Django Django Tạo dự án Django Tạo ứng dụng Django Lượt xem Django URLs Mẫu Django Django Mô hình Django Chèn dữ liệu Cập nhật Django Dữ liệu Django Xóa dữ liệu Mô hình cập nhật Django

Hiển thị dữ liệu

Mẫu chuẩn bị và chế độ xem Thêm liên kết đến chi tiết Thêm mẫu chính Thêm trang chỉ mục chính Mẫu Django 404 Thêm chế độ xem thử nghiệm

Quản trị viên

Django Quản trị viên Tạo người dùng Bao gồm các mô hình Đặt danh sách Hiển thị Cập nhật thành viên Thêm thành viên Xóa thành viên

Cú pháp Django

Biến Django Thẻ Django Django If Else Django cho vòng lặp Django Bình luận Django Bao gồm

Bộ truy vấn

Giới thiệu Bộ truy vấn Bộ truy vấn Nhận Bộ truy vấn Lọc Thứ tự truy vấn theo

Tệp tĩnh

Thêm tệp tĩnh Cài đặt WhiteNoise Thu thập tệp tĩnh Thêm tệp tĩnh toàn cầu Thêm kiểu cho dự án

PostgreSQL

Giới thiệu PostgreSQL Tạo tài khoản AWS Tạo cơ sở dữ liệu trong RDS Kết nối với cơ sở dữ liệu Thêm thành viên

Triển khai Django

Elastic Beanstalk (EB) Tạo các yêu cầu.txt Tạo django.config Tạo tệp .zip Triển khai với Dự án cập nhật EB

Thêm Django

Thêm trường Slug Thêm Bootstrap 5

Tài liệu tham khảo Django

Tham chiếu thẻ mẫu Tham chiếu bộ lọc Tham chiếu trường tra cứu Tham chiếu

Bài tập Django

Trình biên dịch Django Bài tập Django Câu đố Django Máy chủ Django Chứng chỉ Django

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ụ »

×

Liên hệ bán hàng

Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Báo cáo lỗi

Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Example.com.vn được tối ưu hóa cho việc học tập và đào tạo. Các ví dụ có thể được đơn giản hóa để cải thiện khả năng đọc và học. Các hướng dẫn, tài liệu tham khảo và ví dụ liên tục được xem xét để tránh sai sót, nhưng chúng tôi không thể đảm bảo tính chính xác hoàn toàn của mọi nội dung. Khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng , chính sách cookie và quyền riêng tư của chúng tôi.

Bản quyền 1999-2024 của Refsnes Data. Đã đăng ký Bản quyền. Example.com.vn được cung cấp bởi W3.CSS .