Chủ đề của website là bộ mặt của website doanh nghiệp/cá nhân. Khi người dùng vào một trang web có theme hiệu ứng đẹp, màu sắc hài hòa thì người dùng sẽ ở lại và đọc nội dung hơn là một trang web nhiều chức năng nhưng bố cục đơn giản với màu xanh đỏ tím vàng
Để tạo chủ đề trên django chúng ta có rất nhiều cách, bằng cách tạo ứng dụng mới hoặc tạo mẫu thư mục và chỉ định trong cài đặt tệp. py. Trong project này mình sẽ chọn cách tạo app mới để tạo theme. You please started by command after
$ ./manage.py startapp themeSau khi tạo xong danh mục ứng dụng, bạn phải thêm ứng dụng vào INSTALLED_APPS trong cài đặt. py. Các bạn cần lưu ý rằng, ứng dụng chủ đề phải được đặt trên tất cả các ứng dụng khác trong INTALLED_APPS để có thể ghi đè lên tất cả các mẫu
Hầu hết các ứng dụng khi bạn tạo mới hoặc cài đặt thêm đều phải khai báo vào INSTALLED_APPS trong cài đặt. py và các thiết lập kèm theo ứng dụng đó theo (nếu có) để có thể sử dụng trên django
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settingsHình trên là danh mục ứng dụng thư mục được tự động tạo thông qua quản lý. ứng dụng khởi động py. Tất cả các ứng dụng được tạo thông qua startapp đều có cấu trúc như hình trên, bạn hãy xóa tệp kiểm tra. py đi, chúng ta không cần sử dụng tệp này
- di chuyển thư mục. Di chuyển là cách mà django thực hiện các thay đổi cho mô hình (thêm trường, xóa mô hình. ) đến cơ sở dữ liệu lược đồ. Hầu hết các tệp di chuyển được tạo ra tự động bằng lệnh makemigration và di chuyển để thực hiện thay đổi. Bạn cũng có thể tự viết di chuyển tệp để thực hiện di chuyển (thường sử dụng trong trường hợp thêm dữ liệu mặc định cho mô hình đó). Xem thêm chi tiết tại đây
- quản trị viên. py. Một trong những tính năng mình thích ở django là khả năng tự động tạo giao diện quản trị viên. Django sẽ đọc các siêu dữ liệu từ mô hình để tạo và cấp quyền cho người dùng truy cập vào mô hình đó. And file admin. py sẽ nối giữa các mô hình. py with admin interface. Xem thêm chi tiết tại đây
- ứng dụng. py. là tập tin chứa các cấu hình khai báo ứng dụng. Xem thêm chi tiết tại đây
- người mẫu. py. là tệp chứa các mô hình của ứng dụng mà bạn tạo ra. Nó cũng định nghĩa các trường và dùng để đồng bộ lên cơ sở dữ liệu. Xem thêm chi tiết tại đây
- lượt xem. py. là tập tin chứa các lượt xem của django. Nói đơn giản thì lượt xem. py sẽ nhận vào yêu cầu và trả về Web phản hồi. Phản hồi này có thể là nội dung html của trang web, chuyển hướng đến lượt xem hoặc liên kết khác, trả về lỗi 404, xml hoặc json. Xem thêm chi tiết tại đây
Bây giờ, ta sẽ tạo trang chủ của website. Bạn đã tạo một thư mục mới trong chủ đề thư mục, hãy đặt tên là mẫu và tạo tệp cơ sở. html trong thư mục vừa tạo với nội dung như sau
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Trang chủ</title> </head> <body> Đây là trang chủ </body> </html>To show content of base. html lên trang chủ, bạn mở file theme/views. py và chức năng tạo trang chủ
from django.template.response import TemplateResponse # Create your views here. def homepage(request): return TemplateResponse(request, 'base.html')- TemplateResponse(yêu cầu, 'cơ sở. html'). will only any template to display ra. Tại thời điểm này ta chỉ có cơ sở. html to show, mình will build from the start from this file same with you
Sau khi có template, views, tiếp theo bạn cần tạo route cho trang chủ. You open file newsproject/urls. py thêm các dòng như sau
#other import from theme.views import homepage urlpatterns = [ #other urls url(r'^$', homepage) ]url tệp. py hoàn chỉnh sẽ như sau
from django.conf.urls import url from django.contrib import admin from theme.views import homepage #1 urlpatterns = [ url(r'^admin/', admin.site.urls), #2 url(r'^$', homepage) #3 ]- Nhập xem trang chủ để thêm vào các tuyến đường
- quản trị viên. Địa điểm. url là quản trị viên url của django, bạn có thể thay đổi đường dẫn quản trị để bảo mật bằng cách thay đổi mẫu ^admin/ thành đường dẫn bạn muốn
- Lộ trình của trang chủ, mẫu ^$ sẽ là http. //tên miền của bạn. com/
Bây giờ ta hãy vào 127. 0. 0. 1. 8000 to see content has been change
Tới đây là bạn setup theme thành công rồi. Tiếp theo ta sẽ cần một mẫu reponsive hoàn hảo cho trang web của chúng ta. Bạn hãy tải mẫu này về và giải nén ra
Liên kết tải xuống. https. //siêu cấp. nz/#. lE5VkCLa. ETFLC5x_iqOwxYJTYtBKP2loE5UC4OGFWQMJM9-2Bx4
Sau khi giải nén ra, bạn hãy tạo thư mục static trong newsproject/theme/static, và copy 4 thư mục css, fonts, images, js vào thư mục statics
Những tập tin css. hình ảnh, phông chữ, js chúng ta sẽ đặt giống nhau trong một thư mục là tĩnh, django sẽ đọc và tải những tệp này bằng thẻ mẫu trong jinja2. Nhưng bạn phải config để django hiểu và đọc được những thư mục này. You please open file newsproject/settings. py find STATIC_URL, BASE_DIR xóa đi và thêm đoạn sau vào
#other settings # Full filesystem path to the project. PROJECT_APP_PATH = os.path.dirname(os.path.abspath(__file__)) #1 PROJECT_ROOT = BASE_DIR = os.path.dirname(PROJECT_APP_PATH) #2 STATIC_URL = '/skin/' #3 STATICFILES_DIRS = (os.path.join(PROJECT_ROOT, "static"),) #4 STATIC_ROOT = os.path.join(PROJECT_ROOT, STATIC_URL.strip("/")) #5 MEDIA_URL = "/media/" #6 MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'static', *MEDIA_URL.strip("/").split("/")) #7 ## ## TEMPLATES = [ { ##... "DIRS": [ os.path.join(PROJECT_ROOT, "templates") #8 ], ##... }, ]- Tìm đường dẫn tuyệt đối cho cài đặt tệp. py
- Gán đường dẫn đến dự án vào 2 biến PROJECT_ROOT và BASE_DIR
- Gán route url cho các file thống kê
- Đường dẫn đến thư mục tĩnh
- Đường dẫn đến thư mục chứa các tập tin tĩnh sau khi chạy lệnh collstatic
- Gán route /media/. Đây là thư mục chứa các tập tin hình ảnh được tải lên
- Đường dẫn đến thư mục media
- Thiết lập đường dẫn đến mẫu thư mục
Cài đặt tệp. py will like after
""" Django settings for newsproject project. Generated by 'django-admin startproject' using Django 1.11. For more information on this file, see //docs.djangoproject.com/en/1.11/topics/settings/ For the full list of settings and their values, see //docs.djangoproject.com/en/1.11/ref/settings/ """ import os ######### # PATHS # ######### # Full filesystem path to the project. PROJECT_APP_PATH = os.path.dirname(os.path.abspath(__file__)) PROJECT_ROOT = BASE_DIR = os.path.dirname(PROJECT_APP_PATH) STATIC_URL = '/skin/' STATICFILES_DIRS = (os.path.join(PROJECT_ROOT, "static"),) STATIC_ROOT = os.path.join(PROJECT_ROOT, STATIC_URL.strip("/")) MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'static', *MEDIA_URL.strip("/").split("/")) # Quick-start development settings - unsuitable for production # See //docs.djangoproject.com/en/1.11/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = '4bgs5cx!k#hdwwd_5owg31#_!93&u1+2^rfgyr!sper3digml2' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = ['127.0.0.1', ] SITE_ID = 1 # Application definition INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] ROOT_URLCONF = 'newsproject.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.path.join(PROJECT_ROOT, "templates") ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] WSGI_APPLICATION = 'newsproject.wsgi.application' # Database # //docs.djangoproject.com/en/1.11/ref/settings/#databases DATABASES = { 'default': { 'ENGINE': 'djongo', 'NAME': 'django_newsproject', # 'USER': 'admin', # 'PASSWORD': 'abc#123', # 'HOST': '127.0.0.1', # 'PORT': 27017, } } # Password validation # //docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', }, ] # Internationalization # //docs.djangoproject.com/en/1.11/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = TrueSau đó, bạn chạy lệnh này để sao chép các tệp tĩnh vào thư mục skin
________số 8Các bạn chú ý là mỗi khi update file tĩnh hoặc add file mới thì phải chạy lệnh này để cập nhật file
Tiếp theo bạn hãy mở file base. html up và copy toàn bộ nội dung từ index. html trong thư mục giao diện ta tải trước đó vào. In line on the same of base. html bạn hãy tải các tệp tĩnh vào
{% load staticfiles %} ## other html tagBây giờ bạn hãy tìm những chỗ có css, js, hình ảnh và sử dụng thẻ mẫu sau khi thay thế
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings0Bạn nào muốn tiết kiệm thời gian thì copy nội dung bên dưới vào file base. html nha
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings1Làm mới lại trang chủ để xem kết quả nào
If you show are to here, see as ổn rồi đấy. d. Tiếp theo ta cần xây dựng giao diện theo kiểu jinja2 thật. Chúng ta sẽ đặt tiêu đề chặn, chặn css, chặn js, chặn nội dung
Bây giờ bạn hãy lập chỉ mục tệp. html vertical row with base. html và định nghĩa đây là phần mở rộng tệp của cơ sở. html
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings2Tiếp theo là cắt phần nội dung chính trong cơ sở. html qua chỉ mục. html. Để làm được điều này, bạn cần có một chút khả năng phân tích và đọc mã nguồn. Đầu tiên ta phải xác định đây là trang web dạng gì
Mình sẽ vẽ lại bố cục của mẫu này cho các bạn biết rõ hơn
Như các bạn thấy đây là dạng website bố cục cơ bản bao gồm header trên cùng, cột bên trái chứa nội dung, cột phải chứa sidebar và footer. Bây giờ ta sẽ tách phần nội dung bên trái vào chỉ mục. html
Bạn hãy tạo hai khối tiêu đề và nội dung trong chỉ mục. html
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings3Bạn hãy tìm col-md-8 content-left trong base. html và copy vào block content-left trong index. html
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings4Tìm class col-md-4 side-bar và copy nội dung div vào file sidebar. html
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings5Sau đó đặt ba khối này vào cơ sở. html to index. html can to override/show content at the blocks compatible in base. html
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings6Bạn sẽ để ý thấy mình có bao 1 block content bên ngoài block content-left. Mục đích mình làm vậy là để có trang nào cần đầy đủ mình sẽ ghi đè trực tiếp chặn nội dung. Chặn thanh bên mình chỉ bao gồm thanh bên tệp. html vào và có một khối bao bên ngoài được sử dụng như khối nội dung
Ok bây giờ ta sẽ nhóm các file js và css lại, đồng thời thêm 2 block extracss và extrajs để có trang nào cần dùng js hoặc css đặc biệt. Bạn không thể nhóm các file css và js lại, nhưng cá nhân mình thì muốn nhóm lại để dễ quản lý, và sau này tiện ích khai triển nén css, js. Bây giờ sau khi thêm các khối tập tin cơ sở. html will like after
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings7Vui lòng tải lại trang để xem kết quả nào
Hơ. Sao title nó trống trơn, nội dung cũng mất đâu rồi. ((
Đi hơi thôi, chúng ta vẫn làm đúng đấy, bạn còn nhớ xem trang chủ tại theme/views. py chứ. Chúng ta cần phải thiết lập trang chủ mẫu sang chỉ mục. html thì nội dung mới hiển thị ra được
# other settings INSTALLED_APPS = [ 'theme', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles' ] # other settings8Ok tải lại trang chủ phát lại nào. d
Homepage của chúng ta lại show nội dung đẹp như demo rồi. ))
Bài 2 trong series django đến đây là kết thúc. Mọi ý kiến đóng góp của các bạn mình rất hoan hỉ. Các bạn thắc mắc có thể hỏi mình bằng cách comment tại bài viết này hoặc trên group Cộng đồng Python Việt Nam. Chúc các bạn tự học python thành công
p/s. Các bạn muốn trao đổi thảo luận nhanh có thể tham gia nhóm telegram để tiện trao đổi nha. https. //t. tôi/tham gia trò chuyện/CZonIg9l9VX3WbbVChHRnQ
- ← Bài trước
- Bài kế tiếp →
Các thẻ
con trăn
ứng dụng
django
loạt
Bài viết liên quan
Ngày 22 Tháng 6, 2018
Ngày 13 Tháng 6, 2018
Ngày 08 Tháng 6, 2018
ĐƯỢC VIẾT BỞI
Từ Anh Vũ
Ngoài công việc chính là viết mã, môn thể thao yêu thích của tôi là taekwondo. Các bạn cùng sở thích code hoặc đam mê taekwondo với tôi có thể liên hệ với tôi để cùng giao lưu trao đổi kiến thức
11 nhận xét
Liên kết. Trả lời
Shin
14 Tháng 6, 2018
hay quá anh ơi, phần 3 là làm db chưa anh
Liên kết. Trả lời
Từ Anh Vũ
14 Tháng 6, 2018
Phần 3 sẽ đi chi tiết về các model tin tức, loại tin, cũng như cơ sở dữ liệu nha em. d
Liên kết. Trả lời
Cường
20 Tháng 6, 2018
Hồng Redis a. . )
Liên kết. Trả lời
Anh Vũ Từ
21 Tháng 6, 2018
Redis cũng đơn giản mà em, nếu muốn website chạy nhanh thì không chỉ cache với redis thôi mà mình còn kết hợp với nhiều kỹ thuật khác nữa. d
Liên kết. Trả lời
Shin
20 Tháng 6, 2018
anh ơi chờ bài 3 như nhìn mẹ về anh ạ =]]]
Liên kết. Trả lời
Từ Anh Vũ
21 Tháng 6, 2018
thì anh đang viết tiếp phần 3. Nhưng có nhiều lỗi cần sửa với mongodb quá. Anh sẽ đề cập chi tiết trong bài 3 và cách khắc phục luôn
Liên kết. Trả lời
Lê Đức Hòa
18 Tháng 9, 2018
e bị lỗi k load css thì làm sao ạ.
mới tìm hiểu django nên cần ảnh giải đáp ạ.Liên kết. Trả lời
Anh Vũ Từ
19 Tháng 9, 2018
Chào bạn, để tiện cho việc trao đổi và gỡ lỗi, bạn hãy liên lạc qua telegram với mình tại https. //t. me/YuKusanagi , hoặc trong trò chuyện nhóm tại https. //t. tôi/tham gia trò chuyện/CZonIg9l9VX3WbbVChHRnQ