html的继承　extends "_base.html"

最新推荐文章于 2024-05-01 14:34:30 发布

liu_yanna

最新推荐文章于 2024-05-01 14:34:30 发布

阅读量6.7k

点赞数 1

分类专栏：前端文章标签： html 继承

本文链接：https://blog.csdn.net/liu_yanna/article/details/50208505

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目中的规范化
()_base.html

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{% endblock %}</title>
  {% block styles %}{% endblock %}
  {% block pre-scripts %}{% endblock %}
</head>
<body>
  {% block header %}{% endblock %}
  {% block main %}{% endblock %}
  {% block footer %}{% endblock %}
  {% block scripts %}{% endblock %}
</body>
</html></span>

说明：整个项目中的结构框架说明，一般不作修改。
<pre-scripts>与<script>的区别：
<pre-scripts>在加载页面前加载脚本
　优点：放在head中，整洁
　缺点：占用时间，加载页面内容会过慢
<scripts>先加载页面内容再加载脚本

　缺点：放在<body>中结构不太清晰

现在<pre-script>有一个属性，可以在加载页面内容后再加载js,只有支持html5的才支持。
　
(2) index.html
继承自_base.html，作为首页

{% extends "_base.html" %}　
{% load staticfiles i18n %}
{% block title %}{% trans "title" %}{% endblock %}

{% block styles %}
    {% include "_styles.html" %}    
    <link href="{% static 'css/app.css' %}" rel="stylesheet">    
{% endblock %}            

{% block pre-scripts %}
    {% include "_pre-scripts.html" %}
{% endblock %}                 
        
{% block scripts %}
    {% include "_scripts.html" %}       
   <script>
       new gnMenu( document.getElementById( 'gn-menu' ) );
    </script>
{% endblock %}                 
    
{% block main %}               
    <div class="container">    
        {% include "_nav.html" %}       
        <header>               
 　　　　{% block mymain %}
            　　    <h1>hello,welcome</h1>
　　 　　{% endblock %}
        </header>
    </div>
{% endblock %}

(3)其它页面
继承自index.html，导航栏及整体风格与主页保持一致，主内容区可自由编辑

liu_yanna

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
html的继承　extends "_base.html"

项目中的规范化()_base.html {% block title %}{% endblock %} {% block styles %}{% endblock %} {% block pre-scripts %}{% endblock %} {% block header %}{% endblock %} {% block main %}{
复制链接

扫一扫