需求: 真正的首页视图函数,当用户访问我们的博客首页时,他将看到我们发表的博客文章列表,就像 演示项目 里展示的这样。t

https://docs.djangoproject.com/en/1.10/howto/static-files/

  1. 编写博客视图函数

    • 从数据库获取文章的标题,将其作为模板变量传递到模板,所以视图函数

      • # coding=utf8
        
        from django.shortcuts import render
        from django.http import HttpResponse
        from .models import Post # Create your views here. def index(request):
        post_list = Post.objects.all().order_by('-create_time')
        return render(request, 'blog/index.html', context={'post_list': post_list})

        Post.objects.all()返回的是QuerySet,一个类似列表的对象,存储所有文章。 order_by排序, -表示逆序表示先显示最近编写的文章(注意要修改index.html)

  2. 处理静态文件(使用网上模板:点我下载
    • 静态文件的存储文件夹:应用blog目录下static文件夹,在static创建一个blog目录,里面有css 和js两个文件夹,拷贝网上模板代替html加载css 和javaScript文件
    • 暂时使用网上模板的index.html代替原来的template/blog/index.html, 打开网址可以看到首页显示非常混乱,这是因为没有加载css文件成功需要以 Django 的方式来正确地处理 CSS 和 JavaScript 等静态文件的加载路径。CSS 样式文件通常在 HTML 文档的 head 标签里引入
    • 打开网上的index.html 中的<head>标签如下:  
      • <!DOCTYPE html>
        <html>
        <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="css/bootstrap.min.css">
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" href="css/pace.css">
        <link rel="stylesheet" href="css/custom.css"> <!-- js -->
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/modernizr.custom.js"></script>
        </head>

        可以看到css文件都在link 的href属性里面,可以看到诸如 `href="css/bootstrap.min.css" 或者 src="js/jquery-2.1.3.min.js" 这样的引用,由于引用文件的路径不对,所以浏览器引入这些文件失败。我们需要把它们改成正确的路径

      • 修改后的Html,
        templates/blog/index.html
        
        + {% load staticfiles %}
        <!DOCTYPE html>
        <html>
        <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="css/bootstrap.min.css">
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        - <link rel="stylesheet" href="css/pace.css">
        - <link rel="stylesheet" href="css/custom.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="js/jquery-2.1.3.min.js"></script>
        - <script src="js/bootstrap.min.js"></script>
        - <script src="js/pace.min.js"></script>
        - <script src="js/modernizr.custom.js"></script>
        + <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>
        <body>
        <!-- 其它内容 -->
        - <script src="js/script.js' %}"></script>
        + <script src="{% static 'blog/js/script.js' %}"></script>
        </body>
        </html>

        为了能在模板中使用 {% static %} 模板标签,别忘了在最顶部 {% load staticfiles %} 。static 模板标签位于 staticfiles 模块中,只有通过 load 模板标签将该模块引入后,才能在模板中使用 {% static %} 标签。

[python][django学习篇][9]设计正在博客视图(3)的更多相关文章

  1. [python][django学习篇][10]再次修改博客首页模板

    目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...

  2. [python][django学习篇][7]设计博客视图(1)

    1上网的流程: 打开浏览器,输入网址(http://zmrenwu.com/) 浏览器根据输入网址,完成以下几件事:1识别服务器地址,2将用户的浏览意图打包成一个http请求,发送给服务器,等待服务器 ...

  3. [python][django学习篇][11]后台admin用户登录博客,添加文章---这一章和博客首页设计没有关系

    1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型(如果没有这一步,登录http://127.0.0.1:8000/ ...

  4. [python][django学习篇][15]博客侧栏--自定义模板标签

    我们的博客侧边栏有四项内容:最新文章.归档.分类和标签云. 这些内容相对比较固定,且在各个页面都会显示,如果像文章列表或者文章详情一样,从视图函数中获取然后传递给模板,则每个页面对应的视图函数里都要写 ...

  5. [python][django学习篇][3]创建django web的数据库模型

    推荐学习博客:http://pythonzh.cn/post/8/ 博客或者web界面向用户展示内容,它需要从某个地方获取博客内容或者web界面内容,才能够展示出来.通常来说:某个地方指的就是数据库 ...

  6. [python][django学习篇][5]选择数据库版本(默认SQLite3) 与操作数据库

    推荐学习博客:http://zmrenwu.com/post/6/ 选择数据库版本(SQLite3) 如果想选择MySQL等版本数据库,请先安装MySQL并且安装python mysql驱动,这里不做 ...

  7. [python][django学习篇][2]创建django app

    推荐学校django博客:http://pythonzh.cn/post/8/ django app 可以理解为一个文件夹: 里面包含了相关功能的代码.通过manage.py来创建 web app 激 ...

  8. [python][django学习篇][8]django 视图(2) --简单模板

    在视图函数里返回的是一个 HttpResponse 类的实例,我们给它传入了一个希望显示在用户浏览器上的字符串.但是我们的博客不可能只显示这么一句话,它有可能会显示很长很长的内容.比如我们发布的博客文 ...

  9. [python][django学习篇][12]继续设计博客首页,点击博客标题能显示文章的详情

    回顾一下开发流程:配置url, 编写视图函数,编写对应模板 配置URL 首页视图匹配的 URL 去掉域名后,是一个空的字符串.每篇文章的详情有着不同的 URL,因此可以设计文章详情页面URl:< ...

随机推荐

  1. cms-帖子静态化

    实现帖子静态化和实现友情链接静态化一致, 1.首先建立帖子类别的实体类: package com.open1111.entity; /** * 帖子类别实体 * @author user * */pu ...

  2. Python 随笔之Redis

    Python学习记录 ——redis 2018-03-07 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从 ...

  3. C语言异常处理编程的三个境界

    http://blog.csdn.net/treefish2012/article/details/17466487 这是上一次看完Herb Sutter的<Exceptional C++> ...

  4. 【BZOJ1064】[NOI2008] 假面舞会(图上DFS)

    点此看题面 大致题意:有\(k\)种面具(\(k\)是一个未知数且\(k≥3\),每种面具可能有多个),已知戴第\(i\)种面具的人能看到第\(i+1\)种面具上的编号,特殊的,戴第\(k\)种面具的 ...

  5. 2018. 2.4 Java中集合嵌套集合的练习

    创建学生类有姓名学校和年龄 覆盖toString() 1.创建三个学生对象,放到集合ArrayList 2.输出第2名学生的信息 3.删除第1个学生对象 4.在第2个位置插入1个新学生信息 5.判断刘 ...

  6. 剑指Offer的学习笔记(C#篇)-- 和为S的连续正数序列

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  7. 如何利用WordPress的菜单功能实现友情链接功能?

    导语:对于wordpress网站的友情链接,有很多种方法可以实现,例如我们可以利用WordPress的链接功能,或者利用WordPress的菜单功能.本文章介绍的是如何利用菜单功能来实现友情链接. 前 ...

  8. primeng 中 pickList组件的使用

    primeng 是为angular 开发的一个强大的组建库,有很多强大的功能,拿来即用.但要真正满足自己的业务需求,就是按自己的需求进行修改,比如默认的样式等等. 进入正题. pickList 组件的 ...

  9. NopCommerce(Core)学习目录

    1.NopCommerce下载运行 2.登录及权限 3.日志 4.依赖注入使用autofac 5.插件实现 ...

  10. 转 Laravel 的核心 —— 服务容器

    具体内容请参考 1.laravel 学习笔记 —— 神奇的服务容器 - 灵感 - 来自生活的馈赠https://www.insp.top/article/learn-laravel-container ...