设置网页统一布局和导航栏
使用{% block name%}和{% endblock%}在根网页的html文件中，为子网页预留空间，进行语句插入。
使用{% extends 'base.html' %} 在子网页的html中进行继承，从而利用{% block name%}和{% endblock%}在根网页对应位置进行插入。
一、根网页模板
<!DOCTYPE html>
<html lang="en">
<head>
{% block metas %}{% endblock %}
<title>{% block title %}base{% endblock %}</title>
{% block scripts %}{% endblock %}
<style type="text/css">:root{}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #065279;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav pnote{
margin-right :50px;
float:right;
color: #f2f2f2;
text-align: center;
font-size:20px;
}
.topnav a1 {
margin-right :50px;
float:right;
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
</style>
{% block styles %}{% endblock %}
</head>
<body>
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
</div>
<div class="app app--loaded" style="--alpha:0; --beta:0; --gamma:0;">
<div class="app__content">
<!-- //添加路由到导航栏中-->
<div class="topnav" >
<a href={% url 'home' %}>Home</a>
<a href={% url 'A' %}>A</a>
<a href={% url 'C' %}>C</a>
<br>
<!-- //添加用户信息到导航栏中-->
<a href="/login/logout/" style="float:right; padding: 0px 0px;margin-right :50px;">Logout</a>
<a1 href="#">Welcome：{{ request.session.user_name }}</a1>
</div>
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
二、子网页模板
{% extends 'home/base.html' %}
{% block title %}Creation{% endblock %}
{% block styles %}
<style type="text/css">:root{}
/* General Buttons */
button {
width: 180px;
height: 30px;
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
cursor: pointer;
/* Just for presentation */
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
</style>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
var numFlag = 0;
function outMess(){
/* alert(DATA.user_rule); */
$.ajax
({
url:'/creation/outMess/',
type:'POST',
data:{},
success:function(data)
{
var processNum = document.getElementById("processNum");
if(numFlag == 3){
processNum.style.color = '#c32136';
}
processNum.innerHTML = numFlag;
for(i = 0; i < numFlag; i++){
var runTip = document.getElementById(tipName[i]);
runTip.innerHTML = data.runTip[i];
}
//download下拉菜单刷新
downRefresh();
}
});
}
//下载列表刷新
function downRefresh()
{
/* alert(DATA.user_rule); */
$.ajax
({
url:'/creation/downRefresh/',
type:'POST',
data:{},
success:function(data)
{
nums = data.outList.length;
if(outNum != nums)
{
outNum = nums;
var outList = document.getElementById("outfile");
//先将下拉菜单清空
var childArray = outList.children;
var t_len = childArray.length;
while(t_len > 0){
t_len--; //索引位置从0开始
outList.removeChild(childArray[t_len]);
}
//再将后端读入的列表放入下拉列表
nums = data.outList.length;
for (var i = 0; i < nums; i++) {
var op=document.createElement("option");
op.setAttribute("label",data.outList[i]);
op.setAttribute("value",data.outList[i]);
outList.appendChild(op);
}
}
}
});
}
//主函数，命令行生成，压缩
function trigger(action)
{
var binfile = document.getElementById("binfileFa").value;
var bitrate = document.getElementById("bitrateFa").value;
if (action == 'Generation')
{
var DATA = {"action":action, "codec":codec, "yuvfile": yuvfile, "h":h, "w":w, "binfile":binfile, "bitrate":bitrate};
/* alert(DATA.user_rule); */
$.ajax
({
url:'/creation/ajax/',
type:'POST',
data:DATA,
success:function(data)
{
var textareaComandline = document.getElementById("b12");
textareaComandline.innerHTML = data.commandLineshow;
}
});
}
else if(action == "Submit" )
{
updateGlobalVar();
if(numFlag == 2){
var start = document.getElementById("start");
start.disabled = true; //按键失能
start.style.color='#483D8B';
}
var Comandline = document.getElementById("b12").value;
var DATA = {"action":action, "Comandline":Comandline};
var timer = setInterval(outMess,1000); // 启动定时器，定时刷新输出信息到前端
/* alert(DATA.user_rule); */
$.ajax
({
url:'/creation/ajax/',
type:'POST',
data:DATA,
success:function(data)
{
<!-- clearInterval(timer); //压缩结束后，关闭定时器，不再刷新输出信息-->
var runTip = document.getElementById(tipName[numFlag-1]);
runTip.innerHTML = data.runTip[numFlag-1];
var outList = document.getElementById("outfile");
//先将下拉菜单清空
var childArray = outList.children;
var t_len = childArray.length;
while(t_len > 0){
t_len--; //索引位置从0开始
outList.removeChild(childArray[t_len]);
}
//再将后端读入的列表放入下拉列表
nums = data.outList.length;
for (var i = 0; i < nums; i++) {
var op=document.createElement("option");
op.setAttribute("label",data.outList[i]);
op.setAttribute("value",data.outList[i]);
outList.appendChild(op);
}
}
});
}
else if(action == "uploadYUV")
{
var myfile = document.getElementById("myfile").files;
var DATA = {"action":action, "myfile":myfile[0]};
var formdata = new FormData();
formdata.append("myfile",myfile[0])
formdata.append("action",action,)
/* alert(DATA.user_rule); */
$.ajax
({
url:'/creation/ajax/',
type:'POST',
data:formdata,
contentType:false, //- 必须false才会自动加上正确的Content-Type
processData: false,//- 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
success:function(data)
{
var infor_YuvLoad = document.getElementById("infor_YuvLoad");
infor_YuvLoad.innerHTML = data.infor_YuvLoad;
var yuvList = document.getElementById("yuvfile");
//先将下拉菜单清空
var childArray = yuvList.children;
var t_len = childArray.length;
while(t_len > 0){
t_len--; //索引位置从0开始
yuvList.removeChild(childArray[t_len]);
}
//再将后端读入的列表放入下拉列表
nums = data.yuvList.length;
for (var i = 0; i < nums; i++) {
var op=document.createElement("option");
op.setAttribute("label",data.yuvList[i]);
op.setAttribute("value",data.yuvList[i]);
yuvList.appendChild(op);
}
}
});
}
}
</script>
{% endblock %}
{% block content %}
{% endblock %}
扫一扫
2482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
