Django bài 2: Tạo theme cho website
Theme của website là bộ mặt của website một doanh nghiệp/cá nhân. Khi một người dùng vào một trang website 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 nhiều hơn là một trang website nhiều chức năng nhưng layout đơn giản với xanh đỏ tím vàng.
Để tạo theme trên django chúng ta có rất nhiều cách, bằng cách tạo app mới, hoặc tạo folder template và chỉ định trong file settings.py. Trong project này mình sẽ chọn cách tạo app mới để tạo theme. Bạn hãy bắt đầu bằng command sau
$ ./manage.py startapp themeSau khi tạo xong app category bạn cần phải thêm app vào INSTALLED_APPS trong settings.py. Các bạn cần lưu ý rằng, theme app phải được đặt trên tất cả app khác trong INTALLED_APPS để có thể override tất cả template.
Hầu hết các app 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 settings.py và các thiết lập kèm app đó 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à folder app category được tự động tạo thông qua manage.py startapp. Tất cả app được tạo thông qua startapp đều có cấu trúc như hình trên, bạn hãy xóa file test.py đi, chúng ta không cần sử dụng file này.
- folder migrations: Migrations là cách mà django thực hiện các thay đổi cho model (thêm field, xóa model..) đến schema database. Hầu hết các file migration được tạo ra tự động bằng command makemigration và migrate để thực hiện thay đổi. Bạn cũng có thể tự viết một file migration để thực hiện migrate (thường dùng trong trường hợp thêm các data mặc định cho model đó). Xem thêm chi tiết tại đây.
- admin.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 admin. Django sẽ đọc các metadata từ model để tạo và cấp permission cho users quyền truy cập vào model đó. Và file admin.py sẽ hook giữa models.py với giao diện admin. Xem thêm chi tiết tại đây.
- apps.py: là file chứa các config khai báo app. Xem thêm chi tiết tại đây.
- models.py: là file chứa các models của app mà bạn tạo ra. Nó cũng định nghĩa các field và dùng để đồng bộ lên database. Xem thêm chi tiết tại đây.
- views.py: là file chứa views của django. Nói đơn giản thì views.py sẽ nhận vào request và trả về Web response. Response này có thể là nội dung html của website, redirect đến views hoặc link 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 hãy tạo một folder mới trong folder theme tên là templates, và tạo file base.html trong folder 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>
Để hiển thị nội dung của base.html lên trang chủ, bạn hãy mở file theme/views.py và tạo function homepage
from django.template.response import TemplateResponse
# Create your views here.
def homepage(request):
return TemplateResponse(request, 'base.html')
- TemplateResponse(request, 'base.html'): sẽ chỉ định template nào để hiển thị ra. Tại thời điểm này ta chỉ có base.html để hiển thị, mình sẽ xây dựng từ từ ở bắt đầu từ file này cùng với các bạn.
Sau khi có template, views, tiếp theo bạn cần tạo routes cho trang chủ. Bạn mở 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)
]File urls.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
]
- Import view homepage để thêm vào routes
- admin.site.urls là các url admin của django, bạn có thể thay đổi đường dẫn admin cho bảo mật bằng cách thay đổi pattern ^admin/ thành đường dẫn bạn muốn.
- Route của trang chủ, pattern ^$ sẽ là http://yourdomain.com/
Bây giờ ta hãy vào 127.0.0.1:8000 để xem nội dung đã thay đổi chưa
Tới đây là bạn thành công setup theme rồi. Tiếp theo ta sẽ cần một template reponsive hoàn hảo cho website của chúng ta. Bạn hãy download template này về và giải nén ra
Link download: https://mega.nz/#!lE5VkCLa!ETFLC5x_iqOwxYJTYtBKP2loE5UC4OGFWQMJM9-2Bx4
Sau khi giải nén ra, bạn hãy tạo folder static trong newsproject/theme/static, và copy 4 folders css, fonts, images, js vào folder statics
Những file css. images, fonts, js chúng ta sẽ đặt cùng trong một folder là static, django sẽ đọc và load những file này bằng template tag trong jinja2. Nhưng bạn phải config để django hiểu và đọc được những folder này. Bạn hãy mở file newsproject/settings.py tìm 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 đến file setting.py
- Gán đường dẫn đến project vào 2 biến PROJECT_ROOT và BASE_DIR
- Gán route url cho các file statics
- Đường dẫn đến folder static
- Đường dẫn đến folder các file static sau khi chạy command collectstatic
- Gán route /media/: Đây là thư mục chứa hình ảnh các file được upload
- Đường dẫn đến folder media
- Thiết lập đường dẫn đến folder template
File settings.py sẽ như sau
"""
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 command này để copy các file static đến folder skin
$ ./manage.py collectstaticBạn chú ý là mỗi khi update file trong static hoặc add file mới thì phải chạy command này để update file
Tiếp theo bạn hãy mở file base.html lên và copy toàn bộ nội dung từ index.html trong folder giao diện ta tải trước đó vào. Tại dòng trên cùng của base.html bạn hãy load staticfiles vào
{% load staticfiles %}
## other html tagBây giờ bạn hãy tìm những chỗ có css, js, images và dùng template tag sau thay vào
{% static '/path/to/file' %}Bạ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
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Express News a Entertainment Category Flat Bootstarp responsive Website Template | Home :: w3layouts</title>
<link href="{% static 'css/bootstrap.css' %}" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- Custom Theme files -->
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Express News Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- for bootstrap working -->
<script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
<!-- //for bootstrap working -->
<!-- web-fonts -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="{% static 'js/responsiveslides.min.js' %}"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<script type="text/javascript" src="{% static 'js/move-top.js' %}"></script>
<script type="text/javascript" src="{% static 'js/easing.js' %}"></script>
<!--/script-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<!-- header-section-starts-here -->
<div class="header">
<div class="header-top">
<div class="wrap">
<div class="top-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="num">
<p> Call us : 032 2352 782</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="header-bottom">
<div class="logo text-center">
<a href="index.html"><img src="{% static 'images/logo.jpg' %}" alt="" /></a>
</div>
<div class="navigation">
<nav class="navbar navbar-default" role="navigation">
<div class="wrap">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="sports.html">Sports</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Entertainment<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="entertainment.html">Movies</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Another action</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Articles</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">celebrity</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">One more separated link</a></li>
</ul>
</li>
<li><a href="shortcodes.html">Health</a></li>
<li><a href="fashion.html">Fashion</a></li>
<li class="dropdown">
<a href="business.html" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="business.html">Action</a></li>
<li class="divider"></li>
<li><a href="business.html">bulls</a></li>
<li class="divider"></li>
<li><a href="business.html">markets</a></li>
<li class="divider"></li>
<li><a href="business.html">Reviews</a></li>
<li class="divider"></li>
<li><a href="shortcodes.html">Short codes</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="business.html">features</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Movies</a></li>
<li class="divider"></li>
<li><a href="sports.html">sports</a></li>
<li class="divider"></li>
<li><a href="business.html">Reviews</a></li>
<li class="divider"></li>
<li><a href="business.html">Stock</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="technology.html">Technology</a></li>
<div class="clearfix"></div>
</ul>
<div class="search">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!-- search-scripts -->
<script src="{% static 'js/classie.js' %}"></script>
<script src="{% static 'js/uisearch.js' %}"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<!-- //search-scripts -->
</div>
<div class="clearfix"></div>
</div>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- header-section-ends-here -->
<div class="wrap">
<div class="move-text">
<div class="breaking_news">
<h2>Breaking News</h2>
</div>
<div class="marquee">
<div class="marquee1"><a class="breaking" href="single.html">>>The standard chunk of Lorem Ipsum used since the 1500s is reproduced..</a></div>
<div class="marquee2"><a class="breaking" href="single.html">>>At vero eos et accusamus et iusto qui blanditiis praesentium voluptatum deleniti atque..</a></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<script type="text/javascript" src="{% static 'js/jquery.marquee.min.js' %}"></script>
<script>
$('.marquee').marquee({ pauseOnHover: true });
//@ sourceURL=pen.js
</script>
</div>
</div>
<!-- content-section-starts-here -->
<div class="main-body">
<div class="wrap">
<div class="col-md-8 content-left">
<div class="slider">
<div class="callbacks_wrap">
<ul class="rslides" id="slider">
<li>
<img src="{% static 'images/3.jpg' %}" alt="">
<div class="caption">
<a href="single.html">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
</div>
</li>
<li>
<img src="{% static 'images/2.jpg' %}" alt="">
<div class="caption">
<a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</a>
</div>
</li>
<li>
<img src="{% static 'images/1.jpg' %}" alt="">
<div class="caption">
<a href="single.html">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</a>
</div>
</li>
</ul>
</div>
</div>
<div class="articles">
<header>
<h3 class="title-head">All around the world</h3>
</header>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article1.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Feb 25, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>104 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>52</a></p>
<a class="title" href="single.html"> The section of the mass media industry that focuses on presenting</a>
</div>
<div class="article-text">
<p>The standard chunk of Lorem Ipsum used since the 1500s. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" exact original.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<iframe width="100%" src="https://www.youtube.com/embed/mbDg4OG7z4Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="article-right">
<div class="article-title">
<p>On Apr 11, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>54 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>18</a></p>
<a class="title" href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random</a>
</div>
<div class="article-text">
<p>It is a long established fact that a reader will be distracted by the readable.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article3.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Jun 21, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>181 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>89</a></p>
<a class="title" href="single.html">There are many variations that focuses on presenting</a>
</div>
<div class="article-text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article4.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Jan 17, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>144 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>74</a></p>
<a class="title" href="single.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="article-text">
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<iframe width="100%" src="https://www.youtube.com/embed/GxXxvJYUpxk" frameborder="0" allowfullscreen></iframe>
</div>
<div class="article-right">
<div class="article-title">
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
<a class="title" href="single.html">On the other hand, we denounce with righteous indignation</a>
</div>
<div class="article-text">
<p>It is a long established fact that a reader will be distracted by the readable.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="life-style">
<header>
<h3 class="title-head">Life Style</h3>
</header>
<div class="life-style-grids">
<div class="life-style-left-grid">
<a href="single.html"><img src="{% static 'images/l1.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted.</a>
</div>
<div class="life-style-right-grid">
<a href="single.html"><img src="{% static 'images/l2.jpg' %}" alt="" /></a>
<a class="title" href="single.html">There are many variations of passages of Lorem Ipsum available.</a>
</div>
<div class="clearfix"></div>
</div>
<div class="life-style-grids">
<div class="life-style-left-grid">
<a href="single.html"><img src="{% static 'images/l3.jpg' %}" alt="" /></a>
<a class="title" href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random text.</a>
</div>
<div class="life-style-right-grid">
<a href="single.html"><img src="{% static 'images/l4.jpg' %}" alt="" /></a>
<a class="title" href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="sports-top">
<div class="s-grid-left">
<div class="cricket">
<header>
<h3 class="title-head">Business</h3>
</header>
<div class="c-sports-main">
<div class="c-image">
<a href="single.html"><img src="{% static 'images/bus1.jpg' %}" alt="" /></a>
</div>
<div class="c-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Feb 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus2.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Mar 21, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus3.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jan 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus4.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jul 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="s-grid-right">
<div class="cricket">
<header>
<h3 class="title-popular">Technology</h3>
</header>
<div class="c-sports-main">
<div class="c-image">
<a href="single.html"><img src="{% static 'images/tec1.jpg' %}" alt="" /></a>
</div>
<div class="c-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Apr 22, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec2.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jan 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec3.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jun 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec4.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jul 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 side-bar">
<div class="first_half">
<div class="newsletter">
<h1 class="side-title-head">Newsletter</h1>
<p class="sign">Sign up to receive our free newsletters!</p>
<form>
<input type="text" class="text" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">
<input type="submit" value="submit">
</form>
</div>
<div class="list_vertical">
<section class="accordation_menu">
<div>
<input id="label-1" name="lida" type="radio" checked/>
<label for="label-1" id="item1"><i class="ferme"> </i>Popular Posts<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a1">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="popular-post-grids">
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus2.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> The section of the mass media industry</a>
<p>On Feb 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>3 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus1.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> Lorem Ipsum is simply dummy text printing</a>
<p>On Apr 14 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus3.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">There are many variations of Lorem</a>
<p>On Jun 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus4.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">Sed ut perspiciatis unde omnis iste natus</a>
<p>On Jan 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input id="label-2" name="lida" type="radio"/>
<label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>Recent Posts<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a2">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="popular-post-grids">
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec2.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> The section of the mass media industry</a>
<p>On Feb 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>3 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec1.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> Lorem Ipsum is simply dummy text printing</a>
<p>On Apr 14 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec3.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">There are many variations of Lorem</a>
<p>On Jun 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec4.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">Sed ut perspiciatis unde omnis iste natus</a>
<p>On Jan 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input id="label-3" name="lida" type="radio"/>
<label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>Comments<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a3">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="response">
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 21, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 26, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MAY 25, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>FEB 13, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>JAN 28, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>APR 18, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>DEC 25, 2014</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="side-bar-articles">
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random text</a>
</div>
</div>
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai2.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">There are many variations of passages of Lorem</a>
</div>
</div>
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai3.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</a>
</div>
</div>
</div>
</div>
<div class="secound_half">
<div class="tags">
<header>
<h3 class="title-head">Tags</h3>
</header>
<p>
<a class="tag1" href="single.html">At vero eos</a>
<a class="tag2" href="single.html">doloremque</a>
<a class="tag3" href="single.html">On the other</a>
<a class="tag4" href="single.html">pain was</a>
<a class="tag5" href="single.html">rationally encounter</a>
<a class="tag6" href="single.html">praesentium voluptatum</a>
<a class="tag7" href="single.html">est, omnis</a>
<a class="tag8" href="single.html">who are so beguiled</a>
<a class="tag9" href="single.html">when nothing</a>
<a class="tag10" href="single.html">owing to the</a>
<a class="tag11" href="single.html">pains to avoid</a>
<a class="tag12" href="single.html">tempora incidunt</a>
<a class="tag13" href="single.html">pursues or desires</a>
<a class="tag14" href="single.html">Bonorum et</a>
<a class="tag15" href="single.html">written by Cicero</a>
<a class="tag16" href="single.html">Ipsum passage</a>
<a class="tag17" href="single.html">exercitationem ullam</a>
<a class="tag18" href="single.html">mistaken idea</a>
<a class="tag19" href="single.html">ducimus qui</a>
<a class="tag20" href="single.html">holds in these</a>
</p>
</div>
<div class="popular-news">
<header>
<h3 class="title-popular">popular News</h3>
</header>
<div class="popular-grids">
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-4.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Aug 31, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-1.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<iframe width="100%" src="https://www.youtube.com/embed/LGMn_yi_62k" frameborder="0" allowfullscreen></iframe>
<a class="title" href="single.html">Aishwarya Rai Bachchan's Latest SHOCKING News For Ex Salman Khan</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-3.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- content-section-ends-here -->
<!-- footer-section-starts-here -->
<div class="footer">
<div class="footer-top">
<div class="wrap">
<div class="col-md-3 col-xs-6 col-sm-4 footer-grid">
<h4 class="footer-head">About Us</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
</div>
<div class="col-md-2 col-xs-6 col-sm-2 footer-grid">
<h4 class="footer-head">Categories</h4>
<ul class="cat">
<li><a href="business.html">Business</a></li>
<li><a href="technology.html">Technology</a></li>
<li><a href="entertainment.html">Entertainment</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="shortcodes.html">Health</a></li>
<li><a href="fashion.html">Fashion</a></li>
</ul>
</div>
<div class="col-md-4 col-xs-6 col-sm-6 footer-grid">
<h4 class="footer-head">Flickr Feed</h4>
<ul class="flickr">
<li><a href="#"><img src="{% static 'images/bus4.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus3.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec4.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec3.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus3.jpg' %}"></a></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-3 col-xs-12 footer-grid">
<h4 class="footer-head">Contact Us</h4>
<span class="hq">Our headquaters</span>
<address>
<ul class="location">
<li><span class="glyphicon glyphicon-map-marker"></span></li>
<li>CENTER FOR FINANCIAL ASSISTANCE TO DEPOSED NIGERIAN ROYALTY</li>
<div class="clearfix"></div>
</ul>
<ul class="location">
<li><span class="glyphicon glyphicon-earphone"></span></li>
<li>+0 561 111 235</li>
<div class="clearfix"></div>
</ul>
<ul class="location">
<li><span class="glyphicon glyphicon-envelope"></span></li>
<li><a href="mailto:info@example.com">mail@example.com</a></li>
<div class="clearfix"></div>
</ul>
</address>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="wrap">
<div class="copyrights col-md-6">
<p> © 2015 Express News. All Rights Reserved | Design by <a href="http://w3layouts.com/"> W3layouts</a></p>
</div>
<div class="footer-social-icons col-md-6">
<ul>
<li><a class="facebook" href="#"></a></li>
<li><a class="twitter" href="#"></a></li>
<li><a class="flickr" href="#"></a></li>
<li><a class="googleplus" href="#"></a></li>
<li><a class="dribbble" href="#"></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- footer-section-ends-here -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
wrapID: 'toTop', // fading element id
wrapHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!---->
</body>
</html>Refresh lại homepage để xem kết quả nào
Nếu bạn hiển thị được tới đây thì xem như ổn rồi đấy :d. Tiếp theo ta cần xây dựng giao diện theo kiểu jinja2 thật sự. Chúng ta sẽ đặt block title, block css, block js, block content...
Bây giờ bạn hãy file index.html ngang hàng với base.html và định nghĩa đây là file mở rộng của base.html
{% extends "base.html" %}
{% load staticfiles %}Tiếp theo là tách phần content chính trong base.html qua index.html. Để làm được điều này bạn cần chút khả năng phân tích và đọc source code. Đầu tiên ta phải xác định đây là website dạng gì.
Mình sẽ vẽ lại layout của template này cho các bạn rõ hơn
Như các bạn thấy đây là dạng layout website cơ bản gồm có header trên cùng, cột 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 index.html.
Bạn hãy tạo hai block tên title và content trong index.html
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Trang chủ{% endblock %}
{% block content-left %}
{% endblock %}
Bạn hãy tìm col-md-8 content-left trong base.html và copy vào block content-left trong index.html
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Trang chủ{% endblock %}
{% block content-left %}
<div class="slider">
<div class="callbacks_wrap">
<ul class="rslides" id="slider">
<li>
<img src="{% static 'images/3.jpg' %}" alt="">
<div class="caption">
<a href="single.html">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
</div>
</li>
<li>
<img src="{% static 'images/2.jpg' %}" alt="">
<div class="caption">
<a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</a>
</div>
</li>
<li>
<img src="{% static 'images/1.jpg' %}" alt="">
<div class="caption">
<a href="single.html">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</a>
</div>
</li>
</ul>
</div>
</div>
<div class="articles">
<header>
<h3 class="title-head">All around the world</h3>
</header>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article1.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Feb 25, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>104 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>52</a></p>
<a class="title" href="single.html"> The section of the mass media industry that focuses on presenting</a>
</div>
<div class="article-text">
<p>The standard chunk of Lorem Ipsum used since the 1500s. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" exact original.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<iframe width="100%" src="https://www.youtube.com/embed/mbDg4OG7z4Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="article-right">
<div class="article-title">
<p>On Apr 11, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>54 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>18</a></p>
<a class="title" href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random</a>
</div>
<div class="article-text">
<p>It is a long established fact that a reader will be distracted by the readable.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article3.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Jun 21, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>181 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>89</a></p>
<a class="title" href="single.html">There are many variations that focuses on presenting</a>
</div>
<div class="article-text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<a href="single.html"><img src="{% static 'images/article4.jpg' %}"></a>
</div>
<div class="article-right">
<div class="article-title">
<p>On Jan 17, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>144 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>74</a></p>
<a class="title" href="single.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="article-text">
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="article">
<div class="article-left">
<iframe width="100%" src="https://www.youtube.com/embed/GxXxvJYUpxk" frameborder="0" allowfullscreen></iframe>
</div>
<div class="article-right">
<div class="article-title">
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
<a class="title" href="single.html">On the other hand, we denounce with righteous indignation</a>
</div>
<div class="article-text">
<p>It is a long established fact that a reader will be distracted by the readable.....</p>
<a href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="life-style">
<header>
<h3 class="title-head">Life Style</h3>
</header>
<div class="life-style-grids">
<div class="life-style-left-grid">
<a href="single.html"><img src="{% static 'images/l1.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted.</a>
</div>
<div class="life-style-right-grid">
<a href="single.html"><img src="{% static 'images/l2.jpg' %}" alt="" /></a>
<a class="title" href="single.html">There are many variations of passages of Lorem Ipsum available.</a>
</div>
<div class="clearfix"></div>
</div>
<div class="life-style-grids">
<div class="life-style-left-grid">
<a href="single.html"><img src="{% static 'images/l3.jpg' %}" alt="" /></a>
<a class="title" href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random text.</a>
</div>
<div class="life-style-right-grid">
<a href="single.html"><img src="{% static 'images/l4.jpg' %}" alt="" /></a>
<a class="title" href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="sports-top">
<div class="s-grid-left">
<div class="cricket">
<header>
<h3 class="title-head">Business</h3>
</header>
<div class="c-sports-main">
<div class="c-image">
<a href="single.html"><img src="{% static 'images/bus1.jpg' %}" alt="" /></a>
</div>
<div class="c-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Feb 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus2.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Mar 21, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus3.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jan 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/bus4.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jul 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="s-grid-right">
<div class="cricket">
<header>
<h3 class="title-popular">Technology</h3>
</header>
<div class="c-sports-main">
<div class="c-image">
<a href="single.html"><img src="{% static 'images/tec1.jpg' %}" alt="" /></a>
</div>
<div class="c-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Apr 22, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec2.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jan 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec3.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jun 25, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="s-grid-small">
<div class="sc-image">
<a href="single.html"><img src="{% static 'images/tec4.jpg' %}" alt="" /></a>
</div>
<div class="sc-text">
<h6>Lorem Ipsum</h6>
<a class="power" href="single.html">It is a long established fact that a reader</a>
<p class="date">On Jul 19, 2015</p>
<a class="reu" href="single.html"><img src="{% static 'images/more.png' %}" alt="" /></a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
{% endblock %}Tìm class col-md-4 side-bar và copy nội dung div vào file sidebar.html
{% load staticfiles %}
<div class="first_half">
<div class="newsletter">
<h1 class="side-title-head">Newsletter</h1>
<p class="sign">Sign up to receive our free newsletters!</p>
<form>
<input type="text" class="text" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">
<input type="submit" value="submit">
</form>
</div>
<div class="list_vertical">
<section class="accordation_menu">
<div>
<input id="label-1" name="lida" type="radio" checked/>
<label for="label-1" id="item1"><i class="ferme"> </i>Popular Posts<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a1">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="popular-post-grids">
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus2.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> The section of the mass media industry</a>
<p>On Feb 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>3 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus1.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> Lorem Ipsum is simply dummy text printing</a>
<p>On Apr 14 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus3.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">There are many variations of Lorem</a>
<p>On Jun 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/bus4.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">Sed ut perspiciatis unde omnis iste natus</a>
<p>On Jan 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input id="label-2" name="lida" type="radio"/>
<label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>Recent Posts<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a2">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="popular-post-grids">
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec2.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> The section of the mass media industry</a>
<p>On Feb 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>3 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec1.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html"> Lorem Ipsum is simply dummy text printing</a>
<p>On Apr 14 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>2 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec3.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">There are many variations of Lorem</a>
<p>On Jun 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="popular-post-grid">
<div class="post-img">
<a href="single.html"><img src="{% static 'images/tec4.jpg' %}" alt="" /></a>
</div>
<div class="post-text">
<a class="pp-title" href="single.html">Sed ut perspiciatis unde omnis iste natus</a>
<p>On Jan 25 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>1 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>56 </a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input id="label-3" name="lida" type="radio"/>
<label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>Comments<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a3">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<div class="response">
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 21, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MARCH 26, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>MAY 25, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>FEB 13, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>JAN 28, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>APR 18, 2015</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="media response-info">
<div class="media-left response-text-left">
<a href="#">
<img class="media-object" src="{% static 'images/icon1.png' %}" alt="" />
</a>
<h5><a href="#">Username</a></h5>
</div>
<div class="media-body response-text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,There are many variations of passages of Lorem Ipsum available,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>DEC 25, 2014</li>
<li><a href="single.html">Reply</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="side-bar-articles">
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">Contrary to popular belief, Lorem Ipsum is not simply random text</a>
</div>
</div>
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai2.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">There are many variations of passages of Lorem</a>
</div>
</div>
<div class="side-bar-article">
<a href="single.html"><img src="{% static 'images/sai3.jpg' %}" alt="" /></a>
<div class="side-bar-article-title">
<a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</a>
</div>
</div>
</div>
</div>
<div class="secound_half">
<div class="tags">
<header>
<h3 class="title-head">Tags</h3>
</header>
<p>
<a class="tag1" href="single.html">At vero eos</a>
<a class="tag2" href="single.html">doloremque</a>
<a class="tag3" href="single.html">On the other</a>
<a class="tag4" href="single.html">pain was</a>
<a class="tag5" href="single.html">rationally encounter</a>
<a class="tag6" href="single.html">praesentium voluptatum</a>
<a class="tag7" href="single.html">est, omnis</a>
<a class="tag8" href="single.html">who are so beguiled</a>
<a class="tag9" href="single.html">when nothing</a>
<a class="tag10" href="single.html">owing to the</a>
<a class="tag11" href="single.html">pains to avoid</a>
<a class="tag12" href="single.html">tempora incidunt</a>
<a class="tag13" href="single.html">pursues or desires</a>
<a class="tag14" href="single.html">Bonorum et</a>
<a class="tag15" href="single.html">written by Cicero</a>
<a class="tag16" href="single.html">Ipsum passage</a>
<a class="tag17" href="single.html">exercitationem ullam</a>
<a class="tag18" href="single.html">mistaken idea</a>
<a class="tag19" href="single.html">ducimus qui</a>
<a class="tag20" href="single.html">holds in these</a>
</p>
</div>
<div class="popular-news">
<header>
<h3 class="title-popular">popular News</h3>
</header>
<div class="popular-grids">
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-4.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Aug 31, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-1.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<iframe width="100%" src="https://www.youtube.com/embed/LGMn_yi_62k" frameborder="0" allowfullscreen></iframe>
<a class="title" href="single.html">Aishwarya Rai Bachchan's Latest SHOCKING News For Ex Salman Khan</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
<div class="popular-grid">
<a href="single.html"><img src="{% static 'images/popular-3.jpg' %}" alt="" /></a>
<a class="title" href="single.html">It is a long established fact that a reader will be distracted</a>
<p>On Mar 14, 2015 <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>0 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-eye-open"></span>250 </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>68</a></p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>Sau đó đặt ba block này vào base.html để index.html có thể override / show content ở các block tương ứng trong base.html
// other html tag
<title>{% block title %}{% endblock %} | Site tin tức Django</title>
// other html tag
{% block content %}
<div class="col-md-8 content-left">
{% block content-left %}
{% endblock %}
</div>
{% endblock content %}
{% block sidebar %}
<div class="col-md-4 side-bar">
{% include 'includes/sidebar.html' %}
</div>
{% endblock %}Bạ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ó page nào cần full trang mình sẽ override trực tiếp block content. Block sidebar mình chỉ include file sidebar.html vào và có một block bao ngoài được sử dụng như block content.
Ok bây giờ ta sẽ group các file js và css lại, và thêm 2 block extracss và extrajs để có page nào cần sử dụng js hoặc css đặc biệt. Bạn có thể không group các file css và js lại, nhưng cá nhân mình thì muốn group lại để dễ quản lý, và sau này tiện triển khai compress css, js. Bây giờ sau khi thêm các block file base.html sẽ như sau
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} | Site tin tức Django</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Express News Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
{% block sitecss %}
<link href="{% static 'css/bootstrap.css' %}" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
{% endblock %}
{% block sitejs %}
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- for bootstrap working -->
<script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
<!-- //for bootstrap working -->
<!-- web-fonts -->
<script src="{% static 'js/responsiveslides.min.js' %}"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<script type="text/javascript" src="{% static 'js/move-top.js' %}"></script>
<script type="text/javascript" src="{% static 'js/easing.js' %}"></script>
<!--/script-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
{% endblock %}
{% block extracss %}
{% endblock %}
{% block extrajs %}
{% endblock %}
</head>
<body>
<!-- header-section-starts-here -->
<div class="header">
<div class="header-top">
<div class="wrap">
<div class="top-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="num">
<p> Call us : 032 2352 782</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="header-bottom">
<div class="logo text-center">
<a href="index.html"><img src="{% static 'images/logo.jpg' %}" alt="" /></a>
</div>
<div class="navigation">
<nav class="navbar navbar-default" role="navigation">
<div class="wrap">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="sports.html">Sports</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Entertainment<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="entertainment.html">Movies</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Another action</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Articles</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">celebrity</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">One more separated link</a></li>
</ul>
</li>
<li><a href="shortcodes.html">Health</a></li>
<li><a href="fashion.html">Fashion</a></li>
<li class="dropdown">
<a href="business.html" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="business.html">Action</a></li>
<li class="divider"></li>
<li><a href="business.html">bulls</a></li>
<li class="divider"></li>
<li><a href="business.html">markets</a></li>
<li class="divider"></li>
<li><a href="business.html">Reviews</a></li>
<li class="divider"></li>
<li><a href="shortcodes.html">Short codes</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="business.html">features</a></li>
<li class="divider"></li>
<li><a href="entertainment.html">Movies</a></li>
<li class="divider"></li>
<li><a href="sports.html">sports</a></li>
<li class="divider"></li>
<li><a href="business.html">Reviews</a></li>
<li class="divider"></li>
<li><a href="business.html">Stock</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="technology.html">Technology</a></li>
<div class="clearfix"></div>
</ul>
<div class="search">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!-- search-scripts -->
<script src="{% static 'js/classie.js' %}"></script>
<script src="{% static 'js/uisearch.js' %}"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<!-- //search-scripts -->
</div>
<div class="clearfix"></div>
</div>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- header-section-ends-here -->
<div class="wrap">
<div class="move-text">
<div class="breaking_news">
<h2>Breaking News</h2>
</div>
<div class="marquee">
<div class="marquee1"><a class="breaking" href="single.html">>>The standard chunk of Lorem Ipsum used since the 1500s is reproduced..</a></div>
<div class="marquee2"><a class="breaking" href="single.html">>>At vero eos et accusamus et iusto qui blanditiis praesentium voluptatum deleniti atque..</a></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<script type="text/javascript" src="{% static 'js/jquery.marquee.min.js' %}"></script>
<script>
$('.marquee').marquee({ pauseOnHover: true });
//@ sourceURL=pen.js
</script>
</div>
</div>
<!-- content-section-starts-here -->
<div class="main-body">
<div class="wrap">
{% block content %}
<div class="col-md-8 content-left">
{% block content-left %}
{% endblock %}
</div>
{% endblock content %}
{% block sidebar %}
<div class="col-md-4 side-bar">
{% include 'includes/sidebar.html' %}
</div>
{% endblock %}
<div class="clearfix"></div>
</div>
</div>
<!-- content-section-ends-here -->
<!-- footer-section-starts-here -->
<div class="footer">
<div class="footer-top">
<div class="wrap">
<div class="col-md-3 col-xs-6 col-sm-4 footer-grid">
<h4 class="footer-head">About Us</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
</div>
<div class="col-md-2 col-xs-6 col-sm-2 footer-grid">
<h4 class="footer-head">Categories</h4>
<ul class="cat">
<li><a href="business.html">Business</a></li>
<li><a href="technology.html">Technology</a></li>
<li><a href="entertainment.html">Entertainment</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="shortcodes.html">Health</a></li>
<li><a href="fashion.html">Fashion</a></li>
</ul>
</div>
<div class="col-md-4 col-xs-6 col-sm-6 footer-grid">
<h4 class="footer-head">Flickr Feed</h4>
<ul class="flickr">
<li><a href="#"><img src="{% static 'images/bus4.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus3.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec4.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/tec3.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus2.jpg' %}"></a></li>
<li><a href="#"><img src="{% static 'images/bus3.jpg' %}"></a></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-3 col-xs-12 footer-grid">
<h4 class="footer-head">Contact Us</h4>
<span class="hq">Our headquaters</span>
<address>
<ul class="location">
<li><span class="glyphicon glyphicon-map-marker"></span></li>
<li>CENTER FOR FINANCIAL ASSISTANCE TO DEPOSED NIGERIAN ROYALTY</li>
<div class="clearfix"></div>
</ul>
<ul class="location">
<li><span class="glyphicon glyphicon-earphone"></span></li>
<li>+0 561 111 235</li>
<div class="clearfix"></div>
</ul>
<ul class="location">
<li><span class="glyphicon glyphicon-envelope"></span></li>
<li><a href="mailto:info@example.com">mail@example.com</a></li>
<div class="clearfix"></div>
</ul>
</address>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="wrap">
<div class="copyrights col-md-6">
<p> © 2015 Express News. All Rights Reserved | Design by <a href="http://w3layouts.com/"> W3layouts</a></p>
</div>
<div class="footer-social-icons col-md-6">
<ul>
<li><a class="facebook" href="#"></a></li>
<li><a class="twitter" href="#"></a></li>
<li><a class="flickr" href="#"></a></li>
<li><a class="googleplus" href="#"></a></li>
<li><a class="dribbble" href="#"></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- footer-section-ends-here -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
wrapID: 'toTop', // fading element id
wrapHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!---->
</body>
</html>Hãy reload page để xem kết quả nào
Hơ... Sao title nó trống trơn, nội dung cũng đâu mất rồi :((
Đùa chút thôi, chúng ta vẫn làm đúng đấy, bạn còn nhớ view homepage ở theme/views.py chứ. Chúng ta cần phải set template homepage sang index.html thì nội dung mới show ra được
from django.template.response import TemplateResponse
# Create your views here.
def homepage(request):
return TemplateResponse(request, 'index.html')
Ok reload homepage lại phát nữa nào :d
Homepage của chúng ta lại show content đẹp như demo rồi :))
Bài 2 trong series django đến đây là kết thúc. Mọi ý kiến góp ý của các bạn mình rất hoan nghênh. 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 Python Community Viet 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ể join group telegram để tiện trao đổi nha: https://t.me/joinchat/CZonIg9l9VX3WbbVChHRnQ
Các thẻ
Shin
hay quá anh ơi, phần 3 là làm db chưa anh
Từ Anh Vũ
Phần 3 sẽ đi chi tiết về các model tin tức, loại tin, cũng như database nha em :d
Cuong
hong Redis a. :)
Anh Vũ Từ
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
Shin
anh ơi đợi bài 3 như trông mẹ về anh ạ =]]]
Từ Anh Vũ
hì, anh đang viết tiếp phần 3. Nhưng có nhiều lỗi cần fix với mongodb quá. Anh sẽ đề cập chi tiết trong bài 3 và cách fix luôn.
Lê Đức Hòa
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 ạ!!
Anh Vũ Từ
Chào bạn, để tiện cho việc trao đổi và debug, bạn hãy liên lạc qua telegram với mình tại https://t.me/YuKusanagi , hoặc trong group chat tại https://t.me/joinchat/CZonIg9l9VX3WbbVChHRnQ
phùng thế hiển
Chung sở thích teakwondo, võ thuật, đam mê lập trình, mong được học hỏi , kết bạn cùng anh
phúc
Anh có thể hướng dẫn lập trình web với django 3.1 được không.
Hiện tại mình đang sử dụng django 3.1 nếu làm theo hướng dẫn của bạn, thì đến phần liên quan tới static (đoạn bạn nói tải css, html, js ....) không làm được.
Hi vọng bạn giúp mình. Cảm ơn nhé.