django的html繼承

lm_y發表於2017-09-04
DjangoHTML繼承

在正常的做網站時，我們都需要編寫很多的html程式碼，但你會發現，你會重複很多程式碼，而每次，這寫程式碼基本上都是

複製，然後貼上，現在有兩種解決方法：

          1.使用include標記來引入重複的檔案的部分

          2.使用Django中的模板的繼承特性

第一種：

           這種方法，只需要把不變的部分分為幾個檔案儲存，然後分別匯入就ok了，如:

header.html:

[html] view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  2. <html lang="en">  
  3. <head>  

footer.html:
[html] view plain copy
  1.     <hr>  
  2.     <p>Thanks for visiting my site.</p>  
  3. </body>  
  4. </html>  

然後在index.html中匯入兩個檔案

content.html

[python] view plain copy
  1. {% include 'header.html' %}  
  2.   
  3. this is some text of index  
  4.   
  5. {% include 'footer.html' %}  


對於以上的這種做法，在其他網站技術的開發中也是這麼引用，但Django提供了更好的解決方案

第二種：

         這是Django的template的繼承方法，看例子：

base.html


[python] view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  2. <html lang="en">  
  3. <head>  
  4.     <title>{% block title %}{% endblock %}</title>  
  5. </head>  
  6. <body>  
  7.     <h1>My helpful timestamp site</h1>  
  8.     {% block content %}{% endblock %}  
  9.     {% block footer %}  
  10.     <hr>  
  11.     <p>Thanks for visiting my site.</p>  
  12.     {% endblock %}  
  13. </body>  
  14. </html>  

subfile.html
[python] view plain copy
  1. {% extends "base.html" %}  
  2.   
  3. {% block title %}The current time{% endblock %}  
  4.   
  5. {% block content %}  
  6. <p>It is now {{ current_date }}.</p>  
  7. {% endblock %}  

看一下這兩個檔案，第二個使用extends標記繼承了base.html，這樣就可以直接將base.html中的內容全部“copy”過來，

然後，子檔案，可以重寫需要修改的部分，看上面，這修改了兩個部分，這樣就達到了非常高效的程式碼複用了。

相關文章