一.静态文件的使用

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

　　修改settings.py文件

  1. STATICFILES_DIRS = (
  2.     'F:/web/static',   #替换成自己的static 目录
  3. )

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

  1. urlpatterns += patterns((''),
  2.     (r'^static/(?P<path>.*)$', 'django.views.static.serve',
  3.             {'document_root': 'F:/web/static'}
  4.     ),
  5. )
　　二.使用bootstrap美化界面

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

  1. <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  2. <script src="/static/js/jquery-2.0.0.min.js"></script>
  3. <script src="/static/js/bootstrap.min.js"></script>

　　重写base.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  6.     <script src="/static/js/jquery-2.0.0.min.js"></script>
  7.     <script src="/static/js/bootstrap.min.js"></script>
  8.     <title>
  9.         {% block title %}
  10.         {% endblock %}
  11.     </title>
  12.     {% block extra_head %}
  13.     {% endblock %}
  14. </head>
  15. <body>
  16.      {% block body %}
  17.         {% block header %}
  18.             {% block menu %}
  19.             {% endblock %}
  20.         {% endblock %}
  21.         <div class="container main">
  22.         {% block content %}
  23.             <div class="container">
  24.                 <div class="row">
  25.                     <div class="col-md-9">
  26.                         {% block article %}
  27.                             {% block article_title %}{% endblock %}
  28.                             {% block article_content %}{% endblock %}
  29.                         {% endblock %}
  30.  
  31.                         {% block article_menu %} {% endblock %}
  32.                         {% block comments %} {% endblock %}
  33.                         </div>
  34.                         <div class="col-md-3">
  35.                             {% block aside %}
  36.                                 {% block tags %}{% endblock %}
  37.                             {% endblock %}
  38.                         </div>
  39.                     </div>
  40.                 </div>
  41.             {% endblock %}
  42.             {% block footer %}
  43.                 <p>Thanks for visiting my site! </p>
  44.             {% endblock %}
  45.         {% endblock %}
  46.     </div>
  47. </body>
  48. </html>

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

  1. {% extends "base.html" %}  
  2.  
  3. {% block header %}
  4.     {% block menu %}
  5.     <div class="container">
  6.         <nav class="navbar navbar-default navbar-inverse">
  7.             <div class="navbar-header">
  8.                 <a  href="{% url 'bloglist' %}" class="navbar-brand active">首页</a>
  9.             </div>
  10.             <div>
  11.                 <ul class="nav  navbar-nav">
  12.                     <li><a href="#">Pyhton</a></li>
  13.                     <li><a href="#">Django</a></li>
  14.                     <li><a href="#">Html</a></li>
  15.                     <li><a href="#">CSS</a></li>
  16.                     <li><a href="#">Bootstrap</a></li>
  17.                     <li><a href="#">JavaScript</a></li>
  18.                     <li><a href="#">jQuery</a></li>
  19.                     <li><a href="#">Linux</a></li>
  20.                     <li><a href="#">关于</a></li>
  21.                     <li><a href="#">联系</a></li>
  22.                 </ul>
  23.             </div>
  24.         </nav>
  25.     </div>
  26.     {% endblock %}
  27. {% endblock %}

　　在blog的urls.py文件中添加

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

　　在views.py中添加

  1. def blog_filter(request,id=''):
  2.     tags = Tag.objects.all()
  3.     tag = Tag.objects.get(id=id)
  4.     blogs = tag.blog_set.all()
  5.     return render_to_response("blog_filter.html",{"blogs":blogs,"tag":tag,"tags":tags})

　　添加blog_filter.html文件

  1. {% extends "base.html" %}
  2.  
  3. {% block title %} 标签: {{ tag.tag_name }} {% endblock %}
  4.  
  5. {% block article %}
  6. <article class='content-main'>
  7.     {% for blog in blogs %}
  8.         <h3><a href="{% url 'detailblog' blog.id %}">{{ blog.caption }}</a></h3>
  9.         <div class="row">
  10.             <div class="col-md-3">
  11.                 <p class="muted">
  12.                     <span  class="glyphicon glyphicon-tag"></span>
  13.                     <small> {{ blog.publish_time }}</small>
  14.                 </p>
  15.             </div>
  16.             <div class="col-md-2 col-md-offset-7">
  17.             </div>
  18.         </div>
  19.         <hr class="soften">
  20.     {% empty %}
  21.         <p class="text-info">no result!!</p>
  22.     {% endfor %}
  23. </article>
  24. {% endblock %}
  25.  
  26. {% block aside %}
  27.     {% block tags %}
  28.         <div class="well">
  29.             {% for tag in tags %}
  30.             <span class="label"><a href="{% url 'filterblog' tag.id %}">{{ tag }}</a></span>
  31.             {% endfor %}
  32.         </div>
  33.     {% endblock %}
  34. {% endblock %}

　　重新编辑blog_list.html

  1. {% extends "blog_base.html" %}
  2.  
  3. {% block title %} 博文列表 {% endblock %}
  4.  
  5. {% block article %}
  6. <article class='content'>
  7.     {% for blog in blogs %}
  8.         <h4><a href="{% url 'detailblog' blog.id %}">{{blog.caption}}</a></h4>
  9.         <p class="muted">
  10.             {% for tag in blog.tags.all %}
  11.                 <span  class="glyphicon glyphicon-tag"></span><small>{{tag}}</small>
  12.             {% endfor %}
  13.         </p>
  14.         <div class="row">
  15.             <div class="col-md-3">
  16.                <span  class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small>
  17.             </div>
  18.             <div class="col-md-2 col-md-offset-7">
  19.             </div>
  20.         </div>
  21.         <hr>
  22.     {% endfor %}
  23. </article>
  24. {% endblock %}
  25. {% block aside %}
  26.     {% block tags %}
  27.          <div class="well">
  28.             {% for tag in tags %}
  29.                 <span class="label"><a href="{% url 'filterblog' tag.id %}">{{tag}}</a></span>
  30.             {% endfor %}
  31.     </div>
  32.     {% endblock %}
  33. {% endblock %}

　　重新编辑blog_show.html

  1. {% extends "blog_base.html" %}
  2.  
  3. {% block title %} {{ blog.caption }} {% endblock %}
  4.  
  5. {% block article %} 
  6.  
  7. <div class="content">
  8.     <article class="content-main">
  9.     {% block article_title %}
  10.         <h2>{{ blog.caption }}</h2>
  11.     {% endblock %}
  12.     <p class="muted">
  13.            <span  class="glyphicon glyphicon-user"></span><small> {{ blog.author }}</small>
  14.         <span  class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small>
  15.     </p>
  16.         <section>
  17.             <div class="blog-content">
  18.                     {% block article_content %}
  19.                     {{ blog.content }}
  20.                 {% endblock %}
  21.             </div>
  22.         </section>
  23.         <section>
  24.             <div class="row">
  25.                 <div class="col-md-3">
  26.                          <p>
  27.                              <span  class="glyphicon glyphicon-tag"></span>
  28.                         {% for tag in blog.tags.all %}
  29.                              <small class="muted"> {{ tag }} </small>
  30.                         {% endfor %}
  31.                     </p>
  32.                 </div>
  33.                 <div class="col-md-2 col-md-offset-7">
  34.  
  35.                    </div>
  36.             </div>
  37.         </section>
  38.     </article>
  39.     <hr>
  40. </div>
  41. {% endblock %}

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

　　

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

  1. django开发简易博客（一）

    这几篇博客是根据GoodSpeed的博客该写的,看了他的博客收获很大,但是他的博客从第三篇开始,条理很不清晰,加之又是几年之前写的,编写环境发生很大改变,所以对他的博客进行了一个整理,加入了一些自己的 ...

  2. django开发简易博客（四）

    上一节,我们讲述了怎么使用静态文件,并使用bootstrap对页面进行了美化,这一节我们将增强我们blog的功能,添加发表博客,删除博客的功能. 一.表单的使用 要实现添加blog的功能,就得使用表单 ...

  3. django 开发简易博客（二）

    这一节我们来了解模板和视图.URL的使用. 一.使用模板 在blog目录中新建templates文件夹,在templates文件夹下新建base.html文件.目录结构如下 templates/ ba ...

  4. django开发简易博客（五）

    这一节将讲述如何添加comments库与ajax的支持. 一.添加comments库 comments库是是django框架内置的一个评论库,可以快速的搭建岀一个评论系统,不过再自定义方面有些麻烦,不 ...

  5. Django搭建简易博客

    Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...

  6. Django开发个人博客入门学习经验贴

    [写在前面] 入门学习搭建个人博客系统首先还是参考大佬们的经验,记得刚入手Django的时候,一篇博客大佬说过一句话,做技术的不要一开始就扎头于细节中,先把握整体框架,了解这个对象之后再去了解细节,进 ...

  7. Django 搭建简易博客

    新增一个 APP 博客算是一个功能集,因此我们应将其体现为一个模块.这表现在 Django 应用里则是为其创建一个 APP Package.现在让 manage.py 中的 startapp 闪亮登场 ...

  8. 实战Django：简易博客Part1

    舍得学习新技能的时候,通常不喜欢傻读书--捧着一本阐述该项技能的书籍,然后傻看,一路看下来,脑子里塞满了新的概念.知识点,头是越来越大,但技能却几乎没掌握半分. 多年来,舍得养成了用做实例来学习新技能 ...

  9. Django开发简单博客流程

    什么是Django? Django是一个基于python的高级web开发框架 它能够让开发人员进行高效且快速的开发 高度集成(不用自己造轮子), 免费并且开源 当前路径创建工程 django-admi ...

随机推荐

  1. oracle 两表数据对比---minus

        1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传递一天中变更(新增.修改.删除)的数据.实现的方式有多种,如编程存储过程返回游标,在存储过程中对两批数据进 ...

  2. HDU 5765 Bonds（状压DP）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5765 [题目大意] 给出一张图,求每条边在所有边割集中出现的次数. [题解] 利用状压DP,计算不 ...

  3. HTML5 RPG游戏示例

    演示地址 点击打开链接

  4. 3. 表单输入框 在 IE 中 会有 “X” 和 类似wifi图标的图标出现

    原因: IE 自动给 input加了伪类 ::ms-clear 和 ::ms-reveal 解决: input::ms-clear, input::ms-reveal { display: none; ...

  5. 枚举与define的区别

    1.枚举enum的用途浅例      写程序时,我们常常需要为某个对象关联一组可选alternative属性.例如,学生的成绩分A,B,C,D等,天气分sunny, cloudy, rainy等等.  ...

  6. PHP将Excel导入数据库以及数据库数据导出至Excel

    一.导入 导入需要使用能读取Excel的组件,网上也有比较好的组件,这里分享我使用的:下载  提取码:vxyn.(注意两个文件有引用关系) <?php //传入要导入的Excel的文件名 fun ...

  7. mybatis日记配置Log4j

    拷贝log4j-1.2.16.jar到项目lib下 方式一是在src下新建一个log4j.xml文件,其具体内容如下 <?xml version="1.0" encoding ...

  8. 从基因组可视化工具——circos说起，circos安装

      这是博客改版的第一篇博文,选择最近使用的生物信息学软件——circos开始写起.circos是用perl写的生物软件,从发表的文章来看 学习circos主要是熟悉配置文件的编辑方法,搞清楚其中的标 ...

  9. 转:在控制台中调试AngularJS应用

    在控制台中调试AngularJS应用 在创建AngularJS应用时,一个很棘手的问题是如何在Chrome,Firefox,以及IE的JavaScript控制台中访问深藏在应用中的数据和服务.本文将会 ...

  10. 基于Visual C++2013拆解世界五百强面试题--题13-找最大公共子字符串

    编程实现:找出两个字符串中最大公共子字符串,如"abccade"和"dgcadde"的最大子字符串为"cad". 如果不考虑效率的话直接比较 ...