### **第一步：制作相關的Model**
頻道欄目的Model代碼：
~~~
class Category(models.Model):
title=models.CharField('名稱',max_length=50)
idx=models.IntegerField('排序',default=0)
def __str__(self):
return self.title
class Meta:
verbose_name='欄目'
verbose_name_plural=verbose_name
~~~
文章內容的Model代碼
~~~
class Article(models.Model):
title=models.CharField('標題',max_length=100)
category=models.ForeignKey(Category,'文章分類')
intro=models.TextField('正文')
recommend=models.BooleanField('是否推薦',default=False)
def __str__(self):
return self.title
class Meta:
verbose_name='博文'
verbose_name_plural=verbose_name
~~~
### **第二步：在settings中的INSTALLED_APPS添加我們目前的app名稱**
上一節我已經在里面添加了blogs這個了，這節略節，如果不知道的，可以看上一節“制作輪播圖”
~~~
INSTALLED_APPS = [
'polls.apps.PollsConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blogs',
]
~~~
### **第二步：生成上述的Model**
在命令提示符中輸入
~~~
python manage.py makemigrations
~~~
### **第三步：生成對應的數據庫**
在命令提示符中輸入
~~~
python manage.py migrate
~~~
### **第四步：注冊管理后臺**
在admin.py中輸入
~~~
from django.contrib import admin
from blogs.models import Banner
from blogs.models import *
admin.site.register(Banner)
admin.site.register(Category)
admin.site.register(Article)
~~~
### **第五步：在管理后臺添加測試的頻道及文章**
此處略過
### **第六步：寫路由**
假設
> 首頁（包括文章列表）網址是127.0.0.1:8000
> 文章詳情頁網址是127.0.0.1:8000/article/1/
那么路由就是在urls.py中寫入
~~~
from django.contrib import admin
from django.urls import path
from django.urls.conf import include
from blogs.views import index,article
#這里是引入views中的首頁及文章詳情頁的視圖，這兩個視圖下面會介紹
urlpatterns = [
path('admin/', admin.site.urls),
path('',index),
path('article/<int:id>/',article,name='article'),
]
~~~
### **第七步：寫視頻文件，在views.py中寫入**
先寫首頁，我們在首頁中獲取所有的文章列表，代碼如下：
~~~
def index(request):
banner_list=Banner.objects.all()
article_list=Article.objects.all()
ctx={
'banner_list':banner_list,
'article_list':article_list
}
return render(request,'index.html',ctx)
~~~
接下來寫詳情頁
經過第六步，我們已經把文章的ID傳入到視頻的article方法中
~~~
def article(request,id):
info=Article.objects.get(id=id)
ctx={
'info':info
}
return render(request, 'article.html', ctx)
~~~
### **第八步：寫靜態頁模板，在templates文件夾下面，新建index.html和article.html兩個文件**
其中index.html代碼如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客首頁</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/nifty.min.css" rel="stylesheet">
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/nifty.min.js"></script>
</head>
<body>
<div id="banners" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators square out">
{% for v in banner_list %}
{% if v.is_active %}
<li class="active" data-slide-to="{{v.idx}}" data-target="#banners"></li>
{% else %}
<li data-slide-to="{{v.idx}}" data-target="#banners" class=""></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner text-center">
{% for v in banner_list %}
{% if v.is_active %}
<div class="item active">
<a href="{{v.link_url}}">
<img src="{{v.pic}}" alt="{{v.title}}" class="img-responsive" />
</a>
</div>
{% else %}
<div class="item">
<a href="{{v.link_url}}">
<img src="{{v.pic}}" alt="{{v.title}}" class="img-responsive" />
</a>
</div>
{% endif %}
{% endfor %}
</div>
<a class="carousel-control left" data-slide="prev" href="#banners"><i class="demo-pli-arrow-left icon-2x"></i></a>
<a class="carousel-control right" data-slide="next" href="#banners"><i class="demo-pli-arrow-right icon-2x"></i></a>
</div>
{% for v in article_list %}
<p class="pad-all mar-all">
<a href="article/{{v.id}}">{{v.title}}</a>
</p>
{% endfor %}
</body>
</html>
~~~
文章詳情頁article.html的代碼如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客首頁</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/nifty.min.css" rel="stylesheet">
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/nifty.min.js"></script>
</head>
<body>
<div class="panel panel-trans text-center">
<div class="panel-heading">
<h3 class="panel-title">{{info.title}}</h3>
</div>
<div class="panel-body">
{{info.intro}}
</div>
</div>
</body>
</html>
~~~
