上节我们用模板弄出来第一个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,这时候我们再启动一下服务器会看到:
- 这样子看起来是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">
我们再运行一遍:
- 我们把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 %}
我们再访问一次,浏览器中显示的是: 暂时还没有发布的文章
好吧,我们应该从后台创建admin账号,进行文章的添加操作了。
二. admin后台用户的创建并发布文章
- 使用命令行:
python manage.py createsuperuser
这里我们可以暂时不填写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/
这时候:
输入完之后:
我们新建几篇文章试试:
到这里,我们在刷新一下服务器,就会出现我们刚刚写的文章标题作者什么的
ending...