django开发简易博客（三）

　　一.静态文件的使用

　　首先，新建static目录，目录下分别建立css、js、img三个子目录

　　修改settings.py文件

STATICFILES_DIRS = (

    'F:/web/static',   #替换成自己的static 目录

)

　　修改web下的urls.py，添加以下内容

urlpatterns += patterns((''),

    (r'^static/(?P<path>.*)$', 'django.views.static.serve',

            {'document_root': 'F:/web/static'}

    ),

)

　　二.使用bootstrap美化界面

　　下载boostrap组件，将相应文件放到static目录中。然后修改base.html。在head中添加

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

<script src="/static/js/jquery-2.0.0.min.js"></script>

<script src="/static/js/bootstrap.min.js"></script>

　　重写base.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <script src="/static/js/jquery-2.0.0.min.js"></script>

    <script src="/static/js/bootstrap.min.js"></script>

    <title>

        {% block title %}

        {% endblock %}

    </title>

    {% block extra_head %}

    {% endblock %}

</head>

<body>

     {% block body %}

        {% block header %}

            {% block menu %}

            {% endblock %}

        {% endblock %}

        <div class="container main">

        {% block content %}

            <div class="container">

                <div class="row">

                    <div class="col-md-9">

                        {% block article %}

                            {% block article_title %}{% endblock %}

                            {% block article_content %}{% endblock %}

                        {% endblock %}

                        {% block article_menu %} {% endblock %}

                        {% block comments %} {% endblock %}

                        </div>

                        <div class="col-md-3">

                            {% block aside %}

                                {% block tags %}{% endblock %}

                            {% endblock %}

                        </div>

                    </div>

                </div>

            {% endblock %}

            {% block footer %}

                <p>Thanks for visiting my site! </p>

            {% endblock %}

        {% endblock %}

    </div>

</body>

</html>

　　创建新文件blog_base.html，在其中添加导航栏

{% extends "base.html" %}  

{% block header %}

    {% block menu %}

    <div class="container">

        <nav class="navbar navbar-default navbar-inverse">

            <div class="navbar-header">

                <a  href="{% url 'bloglist' %}" class="navbar-brand active">首页</a>

            </div>

            <div>

                <ul class="nav  navbar-nav">

                    <li><a href="#">Pyhton</a></li>

                    <li><a href="#">Django</a></li>

                    <li><a href="#">Html</a></li>

                    <li><a href="#">CSS</a></li>

                    <li><a href="#">Bootstrap</a></li>

                    <li><a href="#">JavaScript</a></li>

                    <li><a href="#">jQuery</a></li>

                    <li><a href="#">Linux</a></li>

                    <li><a href="#">关于</a></li>

                    <li><a href="#">联系</a></li>

                </ul>

            </div>

        </nav>

    </div>

    {% endblock %}

{% endblock %}

　　在blog的urls.py文件中添加

url(r'^blog/tag/(?P<id>\d+)/$','blog_filter',name='filterblog'),

　　在views.py中添加

def blog_filter(request,id=''):

    tags = Tag.objects.all()

    tag = Tag.objects.get(id=id)

    blogs = tag.blog_set.all()

    return render_to_response("blog_filter.html",{"blogs":blogs,"tag":tag,"tags":tags})

　　添加blog_filter.html文件

{% extends "base.html" %}

{% block title %} 标签: {{ tag.tag_name }} {% endblock %}

{% block article %}

<article class='content-main'>

    {% for blog in blogs %}

        <h3><a href="{% url 'detailblog' blog.id %}">{{ blog.caption }}</a></h3>

        <div class="row">

            <div class="col-md-3">

                <p class="muted">

                    <span  class="glyphicon glyphicon-tag"></span>

                    <small> {{ blog.publish_time }}</small>

                </p>

            </div>

            <div class="col-md-2 col-md-offset-7">

            </div>

        </div>

        <hr class="soften">

    {% empty %}

        <p class="text-info">no result!!</p>

    {% endfor %}

</article>

{% endblock %}

{% block aside %}

    {% block tags %}

        <div class="well">

            {% for tag in tags %}

            <span class="label"><a href="{% url 'filterblog' tag.id %}">{{ tag }}</a></span>

            {% endfor %}

        </div>

    {% endblock %}

{% endblock %}

　　重新编辑blog_list.html

{% extends "blog_base.html" %}

{% block title %} 博文列表 {% endblock %}

{% block article %}

<article class='content'>

    {% for blog in blogs %}

        <h4><a href="{% url 'detailblog' blog.id %}">{{blog.caption}}</a></h4>

        <p class="muted">

            {% for tag in blog.tags.all %}

                <span  class="glyphicon glyphicon-tag"></span><small>{{tag}}</small>

            {% endfor %}

        </p>

        <div class="row">

            <div class="col-md-3">

               <span  class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small>

            </div>

            <div class="col-md-2 col-md-offset-7">

            </div>

        </div>

        <hr>

    {% endfor %}

</article>

{% endblock %}

{% block aside %}

    {% block tags %}

         <div class="well">

            {% for tag in tags %}

                <span class="label"><a href="{% url 'filterblog' tag.id %}">{{tag}}</a></span>

            {% endfor %}

    </div>

    {% endblock %}

{% endblock %}

　　重新编辑blog_show.html

{% extends "blog_base.html" %}

{% block title %} {{ blog.caption }} {% endblock %}

{% block article %} 

<div class="content">

    <article class="content-main">

    {% block article_title %}

        <h2>{{ blog.caption }}</h2>

    {% endblock %}

    <p class="muted">

           <span  class="glyphicon glyphicon-user"></span><small> {{ blog.author }}</small>

        <span  class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small>

    </p>

        <section>

            <div class="blog-content">

                    {% block article_content %}

                    {{ blog.content }}

                {% endblock %}

            </div>

        </section>

        <section>

            <div class="row">

                <div class="col-md-3">

                         <p>

                             <span  class="glyphicon glyphicon-tag"></span>

                        {% for tag in blog.tags.all %}

                             <small class="muted"> {{ tag }} </small>

                        {% endfor %}

                    </p>

                </div>

                <div class="col-md-2 col-md-offset-7">

                   </div>

            </div>

        </section>

    </article>

    <hr>

</div>

{% endblock %}

　　这样，一个简单的经过bootstrap美化的blog页面就出现了，但是现在还只能展示，不能自己提交blog。

django开发简易博客（三）的更多相关文章

django开发简易博客（一）
这几篇博客是根据GoodSpeed的博客该写的,看了他的博客收获很大,但是他的博客从第三篇开始,条理很不清晰,加之又是几年之前写的,编写环境发生很大改变,所以对他的博客进行了一个整理,加入了一些自己的 ...
django开发简易博客（四）
上一节,我们讲述了怎么使用静态文件,并使用bootstrap对页面进行了美化,这一节我们将增强我们blog的功能,添加发表博客,删除博客的功能. 一.表单的使用要实现添加blog的功能,就得使用表单 ...
django 开发简易博客（二）
这一节我们来了解模板和视图.URL的使用. 一.使用模板在blog目录中新建templates文件夹,在templates文件夹下新建base.html文件.目录结构如下 templates/ ba ...
django开发简易博客（五）
这一节将讲述如何添加comments库与ajax的支持. 一.添加comments库 comments库是是django框架内置的一个评论库,可以快速的搭建岀一个评论系统,不过再自定义方面有些麻烦,不 ...
Django搭建简易博客
Django简易博客,主要实现了以下功能连接数据库创建超级用户与后台管理利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...
Django开发个人博客入门学习经验贴
[写在前面] 入门学习搭建个人博客系统首先还是参考大佬们的经验,记得刚入手Django的时候,一篇博客大佬说过一句话,做技术的不要一开始就扎头于细节中,先把握整体框架,了解这个对象之后再去了解细节,进 ...
Django 搭建简易博客
新增一个 APP 博客算是一个功能集,因此我们应将其体现为一个模块.这表现在 Django 应用里则是为其创建一个 APP Package.现在让 manage.py 中的 startapp 闪亮登场 ...
实战Django：简易博客Part1
舍得学习新技能的时候,通常不喜欢傻读书--捧着一本阐述该项技能的书籍,然后傻看,一路看下来,脑子里塞满了新的概念.知识点,头是越来越大,但技能却几乎没掌握半分. 多年来,舍得养成了用做实例来学习新技能 ...
Django开发简单博客流程
什么是Django? Django是一个基于python的高级web开发框架它能够让开发人员进行高效且快速的开发高度集成(不用自己造轮子), 免费并且开源当前路径创建工程 django-admi ...

随机推荐

android小知识之EditText输入框之值监控以及类型限制（数字，英语字母，下划线，是否为星号密码）
1.设置EditText的值监听事件 . <span style="font-size:14px;color:#990000;"> EditText ed=new Ed ...
有关Gcd,Lcm的一点小结论
先介绍两个: 大数的Gcd Stein+欧几里德 function stein(a,b:int64):int64; begin if a<b then exit(stein(b,a)); the ...
o怎么样racle输入dmp数据库文件
Oracle进出口数据imp/exp等价物oracle数据恢复和备份. exp命令可以从远程数据库传输数据server出到本地的dmp文件,imp命令能够把dmp文件从本地导入到远处的数据库serve ...
IE7下浮动元素的内容自动换行的BUG解决方法
有时候我们想写个浮动得到这样的效果: 代码: <!doctype html> <html> <head> <meta charset="utf-8& ...
【微信公众号】WeixinJSBridge.call('closeWindow')无效
公众号上面使用iframe嵌套子页面,然而子页面无法使用WeixinJSBridge.call('closeWindow') 这时候必须在函数前面加上parent.,比如parent.WeixinJS ...
objective-C学习笔记（六）继承与多态
封装 encapsulation 隐藏对象内部实现细节,对外仅提供公共接口访问. (说白了就是属性啊,方法啊全都写在类内,对外只提供访问,不需要了解细节) 继承 inheritance 一个类 ...
objective-C学习笔记（五）函数成员：初始化器和析构器
初始化器:init 对象初始化器: -(id)init 可以重载多个. 类型初始化器: +(id)initialize只能有一个. 对象初始化器: 初始化对象实例时,init通常和alloc(手动内存 ...
转帖Jmeter中的几个重要测试指标释义
Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”.今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下,以备大家查阅. 如果 ...
JS学习之事件冒泡
(1)什么是事件起泡首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
Nmon的安装及使用
1.安装软件 1) 用root用户登录系统,建立目录:#mkdir /nmon 2) 通过FTP将下载的nmon工具上传至服务器 192.168.40.212目录/nmon下. 3) 修改tar包权 ...

django开发简易博客（三）

一.静态文件的使用

二.使用bootstrap美化界面

django开发简易博客（三）的更多相关文章

随机推荐

热门专题

　　一.静态文件的使用

　　二.使用bootstrap美化界面