django模板调用和继承

最新推荐文章于 2023-08-22 01:47:20 发布

qq_16853655

最新推荐文章于 2023-08-22 01:47:20 发布

阅读量141

点赞数

文章标签： python django html

本文链接：https://blog.csdn.net/qq_16853655/article/details/103878662

版权

django中为了不重复写前端的代码，可以采用调用和继承的方式，来让不同的页面，通过提取相同的内容，以及各自补充自己的内容，来实现效率，有两个方法：

首先：应提取相同的内容，写成一个base.html（文件名任意），将待填充的部分，用{% block name %} {% endblock %}标记出来，等待填充
例如：

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8"/>
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
  。。。。。。
  {% block content %} {% endblock %}
  </body>
</html>

1. {% extends ‘blog/base.html’ %}，模板继承：
针对希望继承base.html的页面，***在html文件页面开头第一行，写上{% extends ‘base.html’ %}***，然后，将准备填充到模板的内容，写到{% block name %} {% endblock %}中，例如：

 {% extends 'blog/base.html' %}
{% load static %}
{% block title %}Guitarcoder-post{% endblock %}

{% block content %}
<!-- START: Hero-->
    <div class="hero">
      <div class="carousel carousel-list">
        <div style="background-image: url(static/blog/img/hero-list.jpg);" class="slide">
          <div class="slide-info">
            <h3 class="category"><a href="#">Lifestyle</a></h3>
            <h2 class="heading"><a href="#">Why you should not waste your time on someone else`s dreams</a></h2>
            <h3 class="date"><a href="#">27 March 2016</a></h3>
          </div>
        </div>
      </div>
    </div>
{% endblock %}

注意：

base.htm
extends后的文件，需要根据相对于templates文件夹下的路径来写，如，templates文件夹下，存在blog文件，blog文件夹存在mubanbase.html，而准备继承的文件，post.html文件存在于blog下，则在post.html的继承时，应该写 {% extends ‘blog/base.html’ %}
继承模板后，CSS样式与预想的不一致
可能会有继承后，合并渲染后，样式与预期不一致问题，如可能会有位置错乱等，这是，可以调节{% block name %} {% endblock %}和错乱位置在base.html中的前后位置，可能会收到正确的效果

2.{% include ‘xxx.html’ %}
存在一个主页面，base.html，想在该页面中引入一个xxx.html页面中的内容，可以在base.html中相应的位置这么写：

{% include 'xxx.html' %}

必要时候，应该在以上代码中，写入xxx.html的路径

qq_16853655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django模板调用和继承

django中为了不重复写前端的代码，可以采用调用和继承的方式，来让不同的页面，通过提取相同的内容，以及各自补充自己的内容，来实现效率，有两个方法：首先：应提取相同的内容，写成一个base.html（文件名任意），将待填充的部分，用{% block name %} {% endblock %}标记出来，等待填充例如：{% load static %}<!DOCTYPE html&gt...
复制链接

扫一扫