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

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

时间： 2024-12-13 23:34:31

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

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

目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ post_list }} {% for post in post_list %} <article class="post post-{{ post.pk }}"> <header class="entry-header"> <h1 clas

[python][django学习篇]后台admin用户编写博客文章

1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型 from django.contrib import admin from .models import Post, Category, Tag admin.site.register(Post) admin.site.register(Category) admin.site.register(Tag) 3 超级用户登录admin 后台 激活虚拟环境,运行开发

[python][django学习篇][4]django完成数据库代码翻译：迁移数据库(migration)

上一篇我们已经完成数据库的设计,但是仅仅是python语言,并没有真正创建了数据库表.翻译成数据库语言,真正创建数据库表由django manage.py来实现,这一过程专业术语:迁移数据库 切换到manage.py所在目录,分别执行命令:python manage.py makemigrations , python manage.py migrate 执行python manage.py makemigrations结果 F:\pythoncode\django\workspace\blog

[python][django学习篇[13]]增加markdown_1

1 进入虚拟环境,安装markdwon  python install markdown 2 修改视图函数detail def detail(request, pk): # get_object_or_404当传入的pk对应的post数据存在时,就会返回post数据否则返回404 # 需要导入 import markdwon post = get_object_or_404(Post, pk=pk) post.body = markdown.markdown(post.body, extensi

[python][django学习篇][搭建简单的django开发环境]---暂时不搭建mysql

http://zmrenwu.com/post/3/ 1 搭建Python的虚拟环境: 安装virtualenv (前提是已经安装好Python和Pip)      pip install virtualenv 电脑新建目录:D:\software\python_virtual_envs\djanoproject_env 执行命令virtualenv D:\software\python_virtual_envs\djanoproject_env 执行虚拟环境:运行D:\software\pyt

[python][django学习篇][6]操作数据库

查询(取)数据 >>> Category.objects.all() <QuerySet [<Category: Category object>]> >>> Tag.objects.all() <QuerySet [<Tag: Tag object>]> >>> Post.objects.all() <QuerySet [<Post: Post object>]> >>

[python][django学习篇][14]markdown 代码高亮

1 修改detail视图函数,渲染文件的时候,增加codehight拓展 post.body = markdown.markdown(post.body, extensions=[ 'markdown.extensions.extra', 'markdown.extensions.codehilite', 'markdown.extensions.toc', ]) 2 安装Pygments 进入虚拟环境, pip install Pygments 3 修改base.html, 增加代码高亮的样式

Python一日一练102----创建简易博客（下）

继续改博客 接着上一篇继续改咱的博客. 母语不是英语肿么办,博客上面英语好多啊! 更改很简单. 你可以做一个快速更改来观察Django管理工具是否被翻译成你想要的语言. 仅需在settings.py添加'django.middleware.locale.LocaleMiddleware' 到MIDDLEWARE_CLASSES设置中,并确保它在'django.contrib.sessions.middleware.SessionMiddleware'之后就可以了. 建立博客的前台部分 创建模版

第一篇无关技术的博客

光阴似高铁,岁月如动车.弹指一瞬间,开通博客园已经一年又七个月了,在这段时间里园子里的各种大神博客倒是浏览,学习了不少.然而自己的博客基本没怎么写过,不,应该是一篇都没写,说来惭愧.在5个月前,准备写一篇关于WebRTC的文章,然而两个小时过去了,绞尽脑汁仅仅写了个引言和第一段,第一次写博客确实难以下笔,不同于上学时期的写作文,提笔就写,这算是自己真正意义上的第一篇博客吧,无关技术,既然打算开始写博客了,就单单词从几个方面谈谈对于写博客这件事的理解吧. 通过这几个月的工作的一些总结与思考,自己觉