Django 快速搭建博客 第六节

上节我们用模板弄出来第一个hello world ,这节课,我们把数据库里面真正的数据跟单篇文章的详情页显示出来

一. 模板的下载

  1. 这里的模板下载指的是,下载js和css文件, 一个网站想要变得漂亮,变得可以稍微好看点,这里我们使用是bootstrap,是facebook的一套模板?适配了手机,平板,移动端。我也是因为学这个才了解到的这套框架,不过据公司前端小哥哥说,现在已经是算过时了,有很多vue,angular,react框架,不过我们现在用一下还是可以行得通的。
    下面说下模板使用步骤:

1 . https://github.com/zmrenwu/django-blog-tutorial-templates(用的追梦大哥的,这套学习系列也是基于这个自己做一个更深刻的总结)

  1. 下载完后,我们在blog/下新建一个static文件夹,在static下再新建一个blog文件夹,我们这样子写是按照功能static下的blog是以后还会有其他功能,或者是comments功能之类的,工作经验会让你懂得这是为什么的,

  2. 这时候我们把css,js文件夹都拷到static/blog下,把模板中的index.html 替换掉我们之前写的index.html,这时候我们再启动一下服务器会看到:

模板未做修改的index.html.png
  1. 这样子看起来是js和css 没有起到作用的,我们需要在index.html中head标签中进行重新修改一下
<head>
    <title>Black &amp; 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
  1. 我们把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后台用户的创建并发布文章

  1. 使用命令行:python manage.py createsuperuser
创建admin后台管理账户.png

这里我们可以暂时不填写email address,在填写密码时是看不出你填的什么的

  1. 我们创建好账户了,现在需要在后台注册我们自己创建的几个模型
    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...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容