创建预先编译模板的页面 [英] Create pages with pre-compiling the templates
问题描述
在我目前的项目中，我的工作只有使用html和css（ HTML skinning ）。有很多页面有重复的部分，如页眉，页脚，共享链接等。
In my current project, my work is only with html and css (HTML skinning). There are many pages which have repeated sections like Header, footer, sharing links etc.
我不想在每一页重复这个公共部分。我希望这些重复的部分可以使用gulp或任何其他任务运行器以某种方式调用。
I don't want to repeat this common sections again and again in each page. I want these repeated sections to call somehow using gulp or any other task runner.
这样的例子（使用lodash ）
<!Doctype html>
<html>
<%= _.template(templates['head'])() %>
<body>
<%= _.template(templates['header'])() %>
<!-- some unique content here -->
<%= _.template(templates['footer'])() %>
</body>
</html>
，然后使用 gulp-template 在每个页面中渲染它。我更喜欢lodash，因为我已经使用它。
and then using gulp-template rendering it in each page. I am preferring lodash because I had already worked with it.
正如你可以看到，我假设如果我不知道如何保持重复的部分在一个javascript对象（ with name templates ），我可以在一行代码中调用它。然后，如果我改变那个重复部分的内容，所有的页面都会发生改变。
As you can see, I am assuming that if somehow I keep the repeating sections in a javascript object (with name templates), I can call it in one line code. And then if I change something in that repeating section, the change will occur in all pages.
为了做到这一点，首先我需要生成javascript对象html作为字符串。
To make this possible, first I need to generate the javascript object with that repeating html as string in it.
有人可以告诉我怎么做吗？
Can someone please tell me how to do this? or is there any better way to do this?
推荐答案
您可以使用 Jade - 节点模板引擎
You can use Jade - node template engine
它可以选择 include 外部jade文件，其中允许您将一个jade文件的内容插入另一个
It gives option to include external jade files, where in it allows you to insert the contents of one jade file into another
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head.jade
head.jade
//- includes/head.jade
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
foot.jade
foot.jade
//- includes/foot.jade
#footer
p Copyright (c) foobar
编译为：
index.html
Compiles to:
index.html
<!doctype html>
<html>
<head>
<title>My Site</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javascripts/app.js'></script>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
这篇关于创建预先编译模板的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
