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 theme
Sau 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 settings
Hì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
https://docs.djangoproject.com/en/1.11/topics/settings/
For the full list of settings and their values, see
https://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 https://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
# https://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
# https://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
# https://docs.djangoproject.com/en/1.11/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
Sau đó, 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 tag
Bâ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 settings
0Bạ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 settings
1Là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 settings
2Tiế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 settings
3Bạ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 settings
4Tì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 settings
5Sau đó đặ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 settings
6Bạ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 settings
7Vui 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 settings
8Ok 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 Các thẻ con trăn ứng dụng django loạt Bài viết liên quan Django bài 3. Model - database cho site tin tứcNgày 22 Tháng 6, 2018 Django bài 2. Tạo theme cho websiteNgày 13 Tháng 6, 2018 Django bài 1. Cài đặt djangoNgà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 Shin14 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 Cường20 Tháng 6, 2018 Hồng Redis a. . ) Liên kết. Trả lời Shin20 Tháng 6, 2018 anh ơi chờ bài 3 như nhìn mẹ về anh ạ =]]] Liên kết. Trả lời Lê Đức Hòa18 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
| 
