很多个页面共享页面模板,如何存放和引用模板文件比较好呢?
发布于 11小时前 作者 chapgaga 101 次浏览 来自 问答

1.不想在每个页面中放一份模板,这样有些太乱了,修改也麻烦.

  1. 模板存成3个文件, 每个页面使用 <script template="template1" src=".../template1.txt"> ,好像这样也是挺麻烦的,而且要发送三个http请求,如果模板数量有10个,这种方案好像也挺难接受的

有什么比较好的实现方式呢?

<script type="template1">

xxx
</script>
<script type="template2">

xxx2
</script>
<script type="template3">

xxx3
</script>
7 回复

楼主考虑一下用SSI? 一个include搞定。 npm install connect-ssi

@zlbbq 如果只是用http服务器呢?该如何组织文件呢?

@zlbbq 这个项目好像总的下载数还不到200,亲是怎么发现这个包的?

@chapgaga 这个包只是在我们开发和测试时使用，真正上线时前端顶的是Nginx，系统会转而使用nginx的ssi。就include指令来说，connect-ssi和Nginx SSI是兼容的，其他指令未测试。 如果你将Express直接作为HTTP服务器暴露给浏览器，请注意务必使用.shtml作为ssi文件后缀，将它与纯静态html区分开，因为我发现connect-ssi这家伙对可能有ssi指令的文件只会响应200，不会响应304。当然如果前面还有Nginx，Nginx会根据文件是否被修改过而响应200或304.

@zlbbq nginx是将多个文件通过一个连接发送么? 如果Http服务器不支持这种高级功能,该如何组织模板呢?

@chapgaga 楼主的问题通过SSI include可以解决， 在你的HTML的模板区(通常在body最底部)，可以这么定义： <!--# include file="/templates/template_collection_a.html" --> 然后在/templates/template_collection_a中定义页面模板： `

<textarea id='_xxxTemplate' style='display:none'> </textarea> <textarea id='_xxxTemplate' style='display:none'> </textarea> <textarea id='_xxxTemplate' style='display:none'> </textarea> ` 这样你的模板文件只有一份，不需要到处修改，而且不会有网页上的多余HTTP请求问题，因为SSI页面只有一次HTTP请求。 关于楼主提到的合并请求，通常应用于js和css的模块化，这些功能多数HTTP服务器不是原生支持的，需要自己写模块，相关资料请百度搜索 "nginx\_concat\_module”，这个模块是淘宝开源的nginx合并HTTP请求的模块。前端引用的时候，可以将多个js或css合并成一个请求下载： `<script src="a.js,b.js,c.js,d.js"></script>`，这样一个请求可以同时下载这四个js，css同理。 绝大多数HTTP服务器都支持SSI，可放心使用。

不会用markdown，快来吐槽我的排版。

回到顶部