### **第一步：制作相关的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>
~~~
