Hướng dẫn Django - Python - Day 5: Static Files

tháng 1 02, 2019

Hướng dẫn Django - Python - Day 5: Static Files

- Trong bài trước ta đã dùng template để insert text vào page. Tuy nhiên, thực tế chúng ta cần import nhiều loại file như video, nhạc, ảnh...
- Trong bài trước ta đã tiếp xúc với cú pháp {{...}} nhằm sử dụng để gọi các đoạn text thuần túy, trong bài này ta sẽ có cú pháp {% ... %} để gọi các cấu trúc logic và phức tạp hơn.
- Tạo folder first_project/static: để lưu trữ static files
- Tạo thư mục con của static: static/images.
- Chỉnh sửa trong first_project/setting.py: Khai báo biến đường dẫn cho static folder.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

#Đây là phương thức để sử dụng template của mình cho người dùng khác

TEMPLATE_DIR = os.path.join(BASE_DIR, "templates")

STATIC_DIR = os.path.join(BASE_DIR, "static")

- Vẫn trong file setting, kéo xuống để tìm vị trí hướng dân #static file, và sửa như sau:

# Static files (CSS, JavaScript, Images)

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

STATIC_URL = '/static/'

STATICFILES_DIRS = [

STATIC_DIR

]

- Thêm một ảnh vào trong folder images và gõ đường dẫn: http://localhost:8000/static/images/ + tên file ảnh.
Ví dụ: http://localhost:8000/static/images/
Ta được kết quả như sau:

- Sửa lại file index.html trong template để hiện thị hình ảnh như sau:

<!DOCTYPE html>

{% load staticfiles %} <!-- Là đoạn cú pháp bắt buộc để gọi static file

bên dưới doctype và trên html tab-->

<html>

<head>

<meta charset="utf-8">

<title>This is the Django play guitar</title>

</head>

<body>

<h1>Hello, this is the picture of Django!</h1>

<!--Chèn hình ảnh với cú pháp-->

<img src="{% static "images/Django.jpg" %}" alt ="Opp! dont show!"/>

</body>

</html>

- Vào lại đường dẫn: http://localhost:8000/first_app/ và xem kết quả sau:

- Bây giờ chúng ta sẽ tạo file css cho project: Tại static tạo folder css
- Tại folder css tạo file mystyle.css: Sửa css cho thẻ <h1> như sau:

h1{

color: red;

}

- Thêm đường dẫn file css trong index.html. Bên trong thẻ <head>. Nhớ sử dụng đúng cú pháp

<head>

<meta charset="utf-8">

<title>This is the Django play guitar</title>

<link rel="stylesheet" href="{% static "css/mystyle.css" %}"/>

</head>