django 动态模板继承_java

django 动态模板继承

- 1.模板分离技术
- 2.模板分离实例
- 3.模板继承

1.模板分离技术

django中提供了{% include "模板文件名" %}标签模板分离技术

2.模板分离实例

nav导航-toolsnav.html

DOCTYPE html>
{% load static %}
<head>
<meta charset="utf-8">
    <title>自研军火库navtitle>
    <link rel="stylesheet" type="text/css" href="{% static 'css/nav.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'fonts/iconfont.css' %}">
    <script src="{% static 'js/jquery-1.10.2.js' %}">script>
    <script type="text/javascript" src="{% static 'js/nav.js' %}">script>
head>
<body>
    <div class="nav">
        <div class="nav-top">
            <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="{% static 'images/mini.png' %}" >div>
        div>
        <ul>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_1">i><span>网站配置span><i class="my-icon nav-more">i>a>
                <ul>
                    <li><a href="javascript:;"><span>网站设置span>a>li>
                    <li><a href="javascript:;"><span>友情链接span>a>li>
                    <li><a href="javascript:;"><span>分类管理span>a>li>
                    <li><a href="javascript:;"><span>系统日志span>a>li>
                ul>
            li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_2">i><span>文章管理span><i class="my-icon nav-more">i>a>
                <ul>
                    <li><a href="javascript:;"><span>站内新闻span>a>li>
                    <li><a href="javascript:;"><span>站内公告span>a>li>
                    <li><a href="javascript:;"><span>登录日志span>a>li>
                ul>
            li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_3">i><span>订单管理span><i class="my-icon nav-more">i>a>
                <ul>
                    <li><a href="javascript:;"><span>订单列表span>a>li>
                    <li><a href="javascript:;"><span>打个酱油span>a>li>
                    <li><a href="javascript:;"><span>也打酱油span>a>li>
                ul>
            li>
        ul>
    div>
body>
html>

引入模板文件：

DOCTYPE html>
{% load static %}
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>自研库 - IMUSTCTFtitle>
    
    <link rel="shortcut icon" href="{% static 'images/logo.png' %}">
head>
<body>
{% include "toolsnav.html" %}
你好我的世界
body>
html>

结果：

引入的模板文件中并未出现“你好我的世界”，如果您希望显示它，需要使用模板继承

3.模板继承

被继承模板：

DOCTYPE html>
{% load static %}
<head>
    <meta charset="utf-8">
    <title>自研库 - IMUSTCTFtitle>
    
    <link rel="shortcut icon" href="{% static 'images/logo.png' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/nav.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'fonts/iconfont.css' %}">
    <script src="{% static 'js/jquery-1.10.2.js' %}">script>
    <script type="text/javascript" src="{% static 'js/nav.js' %}">script>
head>
<body>
<div class="nav">
    <div class="nav-top">
        <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="{% static 'images/mini.png' %}">
        div>
    div>
    <ul>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_1">i><span>网站配置span><i
                    class="my-icon nav-more">i>a>
            <ul>
                <li><a href="https://www.baidu.com/"><span>网站设置span>a>li>
                <li><a href="#34"><span>友情链接span>a>li>
                <li><a href="#45"><span>分类管理span>a>li>
                <li><a href="#56"><span>系统日志span>a>li>
            ul>
        li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_2">i><span>文章管理span><i
                    class="my-icon nav-more">i>a>
            <ul>
                <li><a href="javascript:;"><span>站内新闻span>a>li>
                <li><a href="javascript:;"><span>站内公告span>a>li>
                <li><a href="javascript:;"><span>登录日志span>a>li>
            ul>
        li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_3">i><span>订单管理span><i
                    class="my-icon nav-more">i>a>
            <ul>
                <li><a href="javascript:;"><span>订单列表span>a>li>
                <li><a href="javascript:;"><span>打个酱油span>a>li>
                <li><a href="javascript:;"><span>也打酱油span>a>li>
            ul>
        li>
    ul>
div>


{% block main %}
{% endblock %}
body>
html>

继承模板：

{% extends "toolsnav.html" %}

{% block main %}

hhhhhhhhhhhhhhhhhhhhhhh

{% endblock %}

效果如下：

大功告成！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/797299.html

django 动态模板继承

发表评论

评论列表（0条）