Question

我想构建一个静态网站，其中每个页面的内容都被相同的内容容器（导航栏，页脚等）包围。为此，我想使用像mustache.js这样的模板引擎来定义我的内容容器，然后使用插入到模板内容区域中的页面内容来呈现模板。

这就是我的想法：

// Template
<h1>Website</h1>
<p>Navbar here</p>
<div class="content-area">{{{content_html}}}</div>
<p>Footer here</p>

我遇到的问题是在哪里放置不同的部分。我想到的唯一解决方案是：

将模板和渲染/插入代码放入render_template.js文件
将页面内容放入site_content.html文件
在从实际site.html

有没有办法将内容HTML放到实际的site.html中并用它来渲染模板？

Answer 1

我不认为这是小胡子的目的。 MustacheJs应该用于创建元素模板，这些元素模板由来自js对象的变量值完成，而不是由完整的html页面完成（例如，模板是用户详细信息页面的html结构，而胡子插入的变量是特定于信息的信息对于像first-name，last-name，...这样的用户，我们可以重复使用相同的模板来显示不同的用户。）

在你的情况下，如果你不能使用动态语言（如php，python或其他），我会这样做有点不同。

我会为你页面的每个redondant部分制作单独的html页面（例如：header，navbar，footer）。然后，我将制作所有内容页面，让构建过程包含重新加密的部分（例如，使用GruntJS，您可以使用此插件：https://github.com/vanetix/grunt-includes）

另一种方法是使用一个处理组件模板和包含的js框架，但如果你只需要在页面中包含一些html部分，这似乎非常复杂。

使用mustache.js为静态网站的所有页面添加内容容器

1 个答案: