2017-01-25 184 views
0

我正在使用Django構建我的博客網站,我無法在我的項目中添加模板。Django和擴展模板不工作?

我有兩個模板:

  1. base.html文件
  2. post.html

base.html文件是我父模板和post.html是我的孩子模板擴展base.html文件。

我無法讓Django擴展post.html。當我運行web服務器的base.html顯示,但沒有來自post.html的文本。

我已經閱讀了關於模板的Django文檔,以及如何擴展,我相信我必須正確的語法,但我不知道爲什麼它不工作?

我也在這個項目中使用Boostrap。

感謝你的幫助, Nermin

post.html

{% extends "post/base.html" %} 

{% block content %} 
    <div class="blog-post"> 
      <h2 class="blog-post-title">Sample blog post</h2> 
      <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> 

      <p>Blog text goes here.</p> 


    </div><!-- /.blog-post --> 
{% endblock %} 

輸入代碼在這裏

base.html文件

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <!-- load static files --> 
    {% load staticfiles %} 

    <title>Blog Title</title> 

    <!-- Bootstrap core CSS --> 
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="{% static 'css/blog.css' %}" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

    <div class="blog-masthead"> 
     <div class="container"> 
     <nav class="blog-nav"> 
      <a class="blog-nav-item active" href="#">Home</a> 
      <a class="blog-nav-item" href="#">About</a> 
     </nav> 
     </div> 
    </div> 

    <!-- blog post goes here --> 

    {% block content %} 
    {% endblock %} 


    <div class="container"> 

     <div class="blog-header"> 
     <h1 class="blog-title">Code'N Cofee Blog</h1> 
     <p class="lead blog-description">Live and write code. </p> 
     </div> 

     <div class="row"> 

     <div class="col-sm-8 blog-main"> 


      <nav> 
      <ul class="pager"> 
       <li><a href="#">Previous</a></li> 
       <li><a href="#">Next</a></li> 
      </ul> 
      </nav> 

     </div><!-- /.blog-main --> 

     <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> 
      <div class="sidebar-module sidebar-module-inset"> 
      <h4>About</h4> 
      <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> 
      </div> 
      <div class="sidebar-module"> 
      <h4>Archives</h4> 
      <ol class="list-unstyled"> 
       <li><a href="#">March 2014</a></li> 
       <li><a href="#">February 2014</a></li> 
       <li><a href="#">January 2014</a></li> 
       <li><a href="#">December 2013</a></li> 
       <li><a href="#">November 2013</a></li> 
       <li><a href="#">October 2013</a></li> 
       <li><a href="#">September 2013</a></li> 
       <li><a href="#">August 2013</a></li> 
       <li><a href="#">July 2013</a></li> 
       <li><a href="#">June 2013</a></li> 
       <li><a href="#">May 2013</a></li> 
       <li><a href="#">April 2013</a></li> 
      </ol> 
      </div> 
      <div class="sidebar-module"> 
      <h4>Elsewhere</h4> 
      <ol class="list-unstyled"> 
       <li><a href="#">GitHub</a></li> 
       <li><a href="#">Twitter</a></li> 
       <li><a href="#">Facebook</a></li> 
      </ol> 
      </div> 
     </div><!-- /.blog-sidebar --> 

     </div><!-- /.row --> 

    </div><!-- /.container --> 

    <footer class="blog-footer"> 
     <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> 
     <p> 
     <a href="#">Back to top</a> 
     </p> 
    </footer> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
    </body> 
</html> 

回答

0

我找到了解決辦法。問題不在於這兩個html文件,而是在我的views.py文件中。基本上在我的索引功能在views.py呈現base.html,因此沒有任何顯示在屏幕上post.html

鑑於post.html擴展base.html我需要編輯我的索引函數返回並渲染post.html像波紋管,這修復了代碼。

希望這可以幫助任何有類似問題的人。

這是我現在的指數函數查詢views.py

from django.shortcuts import render 
from django.http import HttpResponse 


def index(request): 
    return render(request, 'post/post.html', {'': ''}) 
方式