上节我们用模板弄出来第一个hello world ，这节课，我们把数据库里面真正的数据跟单篇文章的详情页显示出来
一. 模板的下载
- 这里的模板下载指的是，下载js和css文件， 一个网站想要变得漂亮，变得可以稍微好看点，这里我们使用是bootstrap，是facebook的一套模板？适配了手机，平板，移动端。我也是因为学这个才了解到的这套框架，不过据公司前端小哥哥说，现在已经是算过时了，有很多vue,angular,react框架，不过我们现在用一下还是可以行得通的。
下面说下模板使用步骤：
1 . https://github.com/zmrenwu/django-blog-tutorial-templates(用的追梦大哥的，这套学习系列也是基于这个自己做一个更深刻的总结)
-
下载完后，我们在blog/下新建一个static文件夹，在static下再新建一个blog文件夹，我们这样子写是按照功能static下的blog是以后还会有其他功能，或者是comments功能之类的，工作经验会让你懂得这是为什么的，
-
这时候我们把css，js文件夹都拷到static/blog下，把模板中的index.html 替换掉我们之前写的index.html,这时候我们再启动一下服务器会看到：
模板未做修改的index.html.png
- 这样子看起来是js和css 没有起到作用的，我们需要在index.html中head标签中进行重新修改一下
：
<head>
<title>Black & White</title>
<!-- meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- css -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">
<!-- js -->
<script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/js/pace.min.js' %}"></script>
<script src="{% static 'blog/js/modernizr.custom.js' %}"></script>
</head>
还有这里的：
<!-- Mobile Menu -->
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="full-width.html">博客</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
</div>
<script src="{% static 'blog/js/script.js' %}"></script>
</body>
</html>
说明一下：主要用模板代码引入，加入了{% static 'blog 和%}
这里的<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}"> 代码在浏览器中运行被替换成了：
<link rel="stylesheet" href="/static/blog/css/pace.css">
我们再运行一遍：
正常引用js，css样式的index.html.png
- 我们把index.html的数据完善一下，因为现在有多个article标签，我们这里只需要一个就可以了，然后写上代码：
templates/blog/index.html
{% for post in post_list %}
<article class="post post-{{ post.pk }}">
...
</article>
{% empty %}
<div class="no-post">暂时还没有发布的文章！</div>
{% endfor %}
这里的post_list 是从blog/views.py index方法传的post_list,模板代码用for 循环取出每一个post文章，
我们再在article标签中把内容填一下：
{% for post in post_list %}
<article class="post post-{{ post.pk }}">
<header class="entry-header">
<h1 class="entry-title">
<a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
</h1>
<div class="entry-meta">
<span class="post-category"><a href="#">{{ post.category.name }}</a></span>
<span class="post-date"><a href="#"><time class="entry-date"
datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
<span class="post-author"><a href="#">{{ post.author }}</a></span>
<span class="comments-link"><a href="#">4 评论</a></span>
<span class="views-count"><a href="#">588 阅读</a></span>
</div>
</header>
<div class="entry-content clearfix">
<p>{{ post.excerpt }}</p>
<div class="read-more cl-effect-14">
<a href="{{ post.get_absolute_url }}" class="more-link">继续阅读 <span class="meta-nav">→</span></a>
</div>
</div>
</article>
{% empty %}
<div class="no-post">暂时还没有发布的文章！</div>
{% endfor %}
image.png
我们再访问一次，浏览器中显示的是： 暂时还没有发布的文章
暂时还没有发布的文章.png
好吧，我们应该从后台创建admin账号，进行文章的添加操作了。
二. admin后台用户的创建并发布文章
- 使用命令行：
python manage.py createsuperuser
创建admin后台管理账户.png
这里我们可以暂时不填写email address,在填写密码时是看不出你填的什么的
- 我们创建好账户了，现在需要在后台注册我们自己创建的几个模型
Django 快速搭建博客 第三节
这里有说道，在blog/admin.py 下写上上面的代码：
from django.contrib import admin
from .models import Post,Category,Tag
# Register your models here.
#希望能看到文章的更多信息，而不仅仅是文章
class PostAdmin(admin.ModelAdmin):
list_display = ['title','category','created_time','modified_time','author']
# 把新注册的PostAdmin也注册进来
admin.site.register(Post,PostAdmin)
admin.site.register(Category)
admin.site.register(Tag)
这里写了个class类是为了在后台能看清楚post(文章)的具体信息，标题，标签，时间,etc
现在我们在服务器运行，输入：http://127.0.0.1:8000/admin/
这时候：
输入账号密码界面.png
输入完之后：
admin管理站点.png
我们新建几篇文章试试：
admin新建文章.png
到这里，我们在刷新一下服务器，就会出现我们刚刚写的文章标题作者什么的
ending...
网友评论