zoukankan      html  css  js  c++  java
  • 【3.3】使用模板系统渲染博客页面

    1.首先对静态页面进行修改

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Django入门</title>
     6     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     7     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     8     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     9     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    10 </head>
    11 <body>
    12     <div class="container page-header">
    13         <h1>好文欣赏
    14             <small>-- by zy </small>
    15         </h1>
    16     </div>
    17     <div class="container page-body">
    18         <div class="col-md-9" role="main">
    19             <div class="body-main">
    20                 {% for article in article_list %}
    21                 <div>
    22                     <h2>{{ article.title }}</h2>
    23                     <p>
    24                         {{ article.brief_content }}
    25                     </p>
    26                 </div>
    27                 {% endfor %}
    28             </div>
    29         </div>
    30         <div class="col-md-3" role="complementary ">
    31             <div>
    32                 <h2>最新文章</h2>
    33                 {% for article in article_list %}
    34                 <h4><a href="#">{{ article.title }}</a></h4>
    35                 {% endfor %}
    36             </div>
    37         </div>
    38 
    39     </div>
    40 </body>
    41 </html>

    2.然后编写视图函数

    1 def get_index_page(request):
    2     all_article = Article.objects.all()
    3     # render 把模板系统和数据进行渲染然后返回 render(request, 路径, 传递的值)
    4     return render(request, 'blog/index.html', {'article_list': all_article})

    3.设置路由

    1 path('index', blog.views.get_index_page),
  • 相关阅读:
    楼宇监控说明
    数字音视频监控系统说明
    图书管理系统详细设计说明
    超邃视频远程监控系统说明
    单点登录系统(SSO)详细设计说明
    视频监控系统的作用何在
    视频监控技术与应用
    HTML--CSS样式表--基本概念(超链接的状态)
    HTML静态网页--框架
    HTML--表格与表单
  • 原文地址:https://www.cnblogs.com/zydeboke/p/11447470.html
Copyright © 2011-2022 走看看