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

Question

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

这是我的想法：

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

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

将模板和 Rendering/Insertion 代码放入 render_template.js 文件
将页面内容放入site_content.html文件
调用呈现和插入功能，同时从实际 site.html

有没有办法将内容 HTML 放入实际的 site.html 并用于呈现模板？

Answer 1

我不认为这是小胡子的目的。 MustacheJs 应用于创建由 js 对象的变量值完成的元素模板，而不是完整的 html 页面（例如，模板是用户详细信息页面的 html 结构和变量由 mustache 插入的是特定于用户的信息，如 first-name、last-name、...在这种情况下，我们可以 re-use 相同的模板来显示不同的用户）。

在你的情况下，如果你不能使用动态语言（比如 php、python 或其他），我会做一些不同的事情。

我会为页面的每个冗余部分（例如：页眉、导航栏、页脚）制作单独的 html 页面。然后我会制作您所有的内容页面，您将在其中让构建过程包含冗余部分（例如，对于 GruntJS，您可以使用此插件：https://github.com/vanetix/grunt-includes）

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

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

Using mustache.js to add a content-container for all pages of a static website

html

javascript

mustache