码迷,mamicode.com
首页 > Web开发 > 详细

Django-website 程序案例系列-6 html模板文件详解

时间:2017-11-25 17:24:59      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:模板文件   文件   添加   jquery   shel   mon   ati   meta   src   

主模板:master.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>    #替换位置加{% block title %}{% endblock %}
    <link rel="stylesheet" href="/static/commons.css">
    <style>        #全局css
        .pg-header{
            height: 48px;
            background-color: seashell;
            color: green;
        }
    </style>
{% block css %} {% endblock%} #自定义css 由继承模板时加入 </head> <body> <div class="pg-header">管理界面</div> {% block content %} {% endblock %} #替换位置 <script src="/static/jquery.js"></script> #全局js
{% block js %} {% endblock %} #自定义js 由继承模板时加入 </body> </html>

 

# 继承模板:

{% extends ‘master.html‘ %}      #继承模板需要添加,继承的模板来自master.html
{% block title %}用户管理{% endblock %}   #替换模板中title的位置
{% block css %}<style>...</style>{% endblock %} #自定义css
{% block content %}     #替换模板中content的位置
    <h1>用户管理</h1>
    <ul>
        {% for u in user_list %}
            <li>{{ u }}</li>
        {% endfor %}
    </ul>
{% endblock %}
{% block js %}<script src="..."></script>{% endblock %} #自定义js

  

 

Django-website 程序案例系列-6 html模板文件详解

标签:模板文件   文件   添加   jquery   shel   mon   ati   meta   src   

原文地址:http://www.cnblogs.com/kuku0223/p/7895513.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!