码迷,mamicode.com
首页 > 编程语言 > 详细

[python][django学习篇][9]设计正在博客视图(3)

时间:2017-08-10 19:43:35      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:tom   cal   tle   样式   成功   ionic   hit   rtc   frame   

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

标签:tom   cal   tle   样式   成功   ionic   hit   rtc   frame   

原文地址:http://www.cnblogs.com/liuzhipenglove/p/7340660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!