python web-Django html模板特殊符号冲突
模板
作为Python Web 框架,Django 需要一种很便利的方法以动态地生成HTML,最常见的做法是使用模板。模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。
Django 项目可以配置一个或多个模板引擎。Django 的模板系统自带内建的后台-称为Django 模板语言(DTL),以及另外一种流行的Jinja2。其他的模板语言的后端,可查找第三方库。
问题
在使用layui的时候,需要使用到layui数据表格的模板,这时候就遇到{{}}转义的问题。在django中{{}}是获取变量值,这就跟前段的layui的模板冲突了,这时候就需要django不转译指定的内容。
<table class="layui-table" lay-data="{width: 'auto', height:'auto', url:'/auto_tasks/task_view/', page:true, id:'autotaskviews'}"
lay-filter="autotaskviews_table" lay-size="xm">
<thead>
<tr>
<th lay-data="{field:'id',sort: true, fixed: true,width:'80'}">编号</th>
<th lay-data="{field:'name', sort: true,width: '180'}">任务名称</th>
<th lay-data="{field:'task_type' , sort: true,width: 140}">任务类型</th>
<th lay-data="{field:'task_custom_parameter' ,sort: true,width: '200'}">自定义参数</th>
<th lay-data="{field:'username' ,sort: true,width: '120'}">创建者</th>
<th lay-data="{field:'status_label' ,sort: true,width: '100'}">执行状态</th>
<th lay-data="{field:'create_time' ,sort: true,width: '190'}">创建时间</th>
<th lay-data="{field:'exec_time' ,sort: true,width: '190'}">执行时间</th>
<th lay-data="{field:'detail_result' ,sort: true,width: '200'}">执行结果</th>
<th lay-data="{fixed: 'right', align:'center',width: '180', toolbar: '#barDemo' }">查看详情</th>
</tr>
</thead>
</table>
<script type="text/html" id="barDemo"> {{# if(d.status == 'Y'){ }}
<button class="layui-btn layui-btn-disabled layui-btn-xs">已执行</button>
{{# } else if(d.status == 'N') { }}
<a class="layui-btn layui-btn-xs" lay-event="exec">执行</a>
{{# } else if(d.status == 'R') { }}
<span class="layui-badge layui-bg-orange layui-btn-xs">执行中</span>
{{# } }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
解决方法
从Django 1.5开始,支持{% verbatim %}标签(verbatim的意思是逐字翻译的,字面意思的),Django不会渲染verbatim标签包裹的内容,因此修改内容为:
<script type="text/html" id="barDemo">{% verbatim %} {{# if(d.status == 'Y'){ }}
<button class="layui-btn layui-btn-disabled layui-btn-xs">已执行</button>
{{# } else if(d.status == 'N') { }}
<a class="layui-btn layui-btn-xs" lay-event="exec">执行</a>
{{# } else if(d.status == 'R') { }}
<span class="layui-badge layui-bg-orange layui-btn-xs">执行中</span>
{{# } }} {% endverbatim %}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>