Avoid repeated HTML
I have two HTML pages. I would like to avoid repeating markup, like head, navigation, etc. For example, here is one page:
Los Pollos
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5408099190056760"
data-ad-slot="7305827575"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div class="relativetags">
相关标签:
</div>
</div>
<div class="fly-panel detail-box" id="flyReply">
<fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
<legend>6条回答</legend> </fieldset>
<ul class="jieda" id="jieda">
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-135.html">
<img src="https://www.e-learn.cn/qa//static/css/default/avatar.gif" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-135.html" class="fly-link">
<cite>不思量自难忘° </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:28</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>In ASP.Net you can use what's called a Master Page. In ASP.Net MVC, a similar concept using Layout pages. You define all this content in the master, and set a tag showing where the "changing" content would show up. Then other files (pages) define what shows in those defined spots in the template. </p>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784562'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784562">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784562">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784562">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-96.html">
<img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000096.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-96.html" class="fly-link">
<cite>自闭症患者 </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:35</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>It depends on the language you are using. If you want to do this strictly in HTML, see if your server supports shtml. If it does, you can use includes to read the file into another file. </p>
<pre><code><!--#include FILE="filename.html"-->
</code></pre>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784557'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784557">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784557">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784557">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-44.html">
<img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000044.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-44.html" class="fly-link">
<cite>萌比男神i </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:43</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>you can't directly from html, but it's pretty simple if you're using php or asp or something like that to generate the html. check for include if php, for example</p>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784559'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784559">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784559">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784559">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-20.html">
<img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000020.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-20.html" class="fly-link">
<cite>旧时难觅i </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:44</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>A classic approach is to have a layout that contains footer and header. Then you decorate your pages with your layout like this:</p>
<pre><code>_________layout________
| ________________ |
| | header | |
| |_______________| |
| _________________ |
| | | |
| | specific | |
| | page | |
| | | |
| |_______________| |
| ________________ |
| | footer | |
| |_______________| |
|_____________________|
</code></pre>
<p>This is what most web frameworks do.</p>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784561'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784561">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784561">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784561">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-39.html">
<img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000039.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-39.html" class="fly-link">
<cite>佛祖请我去吃肉 </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:47</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>Use a template language. The specific one you choose will depend on what your server supports and your personal preferences.</p>
<p>All else being equal, I would use Template Toolkit since it can be used by itself at <strong>build time</strong> (i.e. before you upload it and with no need for the server to support anything beyond static files) thanks to ttree and can be used at <strong>runtime</strong> from Perl.</p>
<p>There is a good introductory tutorial for using TT to generate web content.</p>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784558'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784558">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784558">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784558">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<li data-id="111">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="https://www.e-learn.cn/qa/u-121.html">
<img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000121.jpg" alt=" ">
</a>
<div class="fly-detail-user">
<a href="https://www.e-learn.cn/qa/u-121.html" class="fly-link">
<cite>无人共我 </cite>
</a>
</div>
<div class="detail-hits">
<span>2020-12-04 04:50</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p>You can place your common code in a .tpl file and include that link in the page. For example</p>
<pre><code><!--#include virtual="../_tpl/header.tpl" -->
<div class="content">
some code goes here...
</div>
</code></pre>
<p>and in header template you place all your common code like </p>
<p>
</p>
<pre><code><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PAGETITLE</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="all" href="..." />
<script type="text/javascript" src="....."></script>
</head>
</code></pre>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='784560'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="784560">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_784560">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="784560">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
<style>
.laypage-main a, .laypage-main span {
display: inline-block;
}
</style> </ul>
<div class="layui-form layui-form-pane">
<form id="huidaform" name="answerForm" method="post">
<div class="layui-form-item layui-form-text">
<a name="comment"></a>
<div class="layui-input-block">
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script>
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script>
<script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script>
<script type="text/javascript">
var isueditor=1;
var editor = UE.getEditor('editor',{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
initialContent:'',
//关闭字数统计
wordCount:false,
zIndex:2,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:250
//更多其他参数，请参考ueditor.config.js中的配置项
//更多其他参数，请参考ueditor.config.js中的配置项
});
editor.ready(function() {
editor.setDisabled();
});
$("#editor").find("*").css("max-width","362px");
</script> </div>
</div>
<div class="layui-form-item">
<label for="L_vercode" class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">
<span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span>
</div>
</div>
<div class="layui-form-item">
<input type="hidden" value="226075" id="ans_qid" name="qid">
<input type="hidden" id="tokenkey" name="tokenkey" value=''/>
<input type="hidden" value="Avoid repeated HTML" id="ans_title" name="title">
<div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div>
</div>
</form>
</div>
</div>
<input type="hidden" value="226075" id="adopt_qid" name="qid" />
<input type="hidden" id="adopt_answer" value="0" name="aid" />
</div>
<div class="layui-col-md4">
<!-- 热门讨论问题 -->
<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">热议问题</dt>
<!-- 本周热门讨论问题显示10条-->