blocks|key|3143108|text|您可以使用包含HTML的变量。像{{{variable}}}这样的“三重胡子”将返回未转义的超文本标记语言。它与模板扩展并不完全相同，但您可以呈现frontpage-content.html，然后将其输出放入传递给base.html的content变量中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3143109|(我在frontpage.html文件名中添加了-content，希望这样的命名模式有助于保持文件名的可管理性。)|3143110|entityMap^0|G|E|39|7|21|M|2Z|9|0|3|E|O|8|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|D]|$9|R|A|S|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|T|8|@$9|U|A|V|B|D]|$9|W|A|X|B|D]]|E|@]|F|$]]|$1|I|3|-4|5|6|7|Y|8|@]|E|@]|F|$]]]|J|$]]

You could use variables containing HTML. A "triple mustache" like <code>{{{variable}}}</code> will return unescaped HTML. It's not exactly the same as template extensions, but you could render frontpage-content.html and then put its output in a <code>content</code> variable that gets passed to base.html.

(I added -content to the frontpage.html filename with the expectation that such a naming pattern will help keep the filenames manageable.)

blocks|key|251251|text|最近，我发现自己也处于同样的境地，除了我来自mako的背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251252|Mustache不允许模板扩展/继承，但据我所知，您可以使用一些选项。|251253|，|251254|，你可以使用分词：|ordered-list-item|251255|251256|{{>header}}+Hello+{{name}}+{{>footer}}|251257|You可以将模板预处理函数插入到每个需要从其他页面继承的模板的上下文中：|unordered-list-item|251258|251259|{{#extendBase}}您好{{name}}+{{/extendBase}}|251260|哈希：|251261|{+"name"："Walden"，"extendBase"：function()+{+return+function(text)+{+return+"“%2B+render(text)+%2B+"”}|251262|准备并附加所需的超文本标记语言到控制器中的相关页面。|251263|
|251264|有一个布局模板ala：|251265|251266|{{>页眉}}{body}{{>页脚}}|251267|并在控制器中呈现主体，在加载模板的代码中将其作为名为body.|offset|length|style|CODE|251268|Implement模板继承的变量传递给布局模板。|251269|251270|然而，我不会使用三重胡子，因为我不想让未转义的HTML出现在任何地方，在我看来，这太冒险了。|251271|如果其他人对这个问题有更好的解决方案，我也很乐意听到，因为我还没有尝试过这些方向中的任何一个。|251272|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|Q|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1L|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1O|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1P|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1R|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1S|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1T|8|@]|9|@]|A|$]]|$1|V|3|W|5|N|7|1U|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Z|3|10|5|N|7|1W|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1Z|8|@$16|20|17|21|18|19]]|9|@]|A|$]]|$1|1A|3|1B|5|N|7|22|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|24|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|25|8|@]|9|@]|A|$]]|$1|1H|3|-4|5|6|7|26|8|@]|9|@]|A|$]]]|1I|$]]

I recently found myself in the same boat, except I came from a mako background. 

Mustache does not allow for template extension/inheritance but there are a few options available to you that I know of.

<ol>
<li>You could use partials:

<pre><code>{{&gt;header}}
 Hello {{name}}
{{&gt;footer}}
</code></pre></li>
<li>You could inject template pre-processing functions into the context for each template that needs to inherit from some other page: 

<pre><code>{{#extendBase}} 
 Hello {{name}}
{{/extendBase}} 
</code></pre>

Hash:

<pre><code>{
 "name": "Walden",
 "extendBase": function() {
 return function(text) {
 return "&lt;html&gt;&lt;head&gt;&lt;/head&gt;" + render(text) + "&lt;/body&gt;&lt;/html&gt;"
 }
 }
}
</code></pre></li>
<li>Prepend and append the desired HTML to the relevant pages in your controller. </li>
<li>Have a layout template ala:

<pre><code>{{&gt;header}}
 {{{body}}}
{{&gt;footer}}
</code></pre>

And render the body in your controller, passing that to the layout template as a variable named <code>body</code>.</li>
<li>Implement template inheritance, pre-mustache, in your code that loads templates. </li>
</ol>

I wouldn't, however, use the triple mustache because I don't want unescaped HTML to be appearing anywhere, it's just too risky in my opinion.

If someone else has a better solution to this problem I'd love to hear it as well, since I haven't yet taken the plunge in any one of these directions.

blocks|key|249355|text|Mustache不做模板扩展。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249356|如果你真的想要模板扩展，那么你可能想要使用一个专门为你选择的语言/框架构建的库。|249357|249358|仅供参考，我使用的是Node.js/Express，所以我最终可能会使用https://github.com/fat/stache|offset|length|249359|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/fat/stache^0|0|0|0|10|T|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|S|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|T|8|@]|9|@$G|U|H|V|1|W]]|A|$]]|$1|I|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

Mustache doesn't do template extension. 

If you really want template extension then you may want to use a library purpose built with this functionality for you language/framework of choice.

<hr>

FYI, I'm using Node.js/Express, so I will probably end up using <a href="https://github.com/fat/stache" rel="nofollow">https://github.com/fat/stache</a>

blocks|key|3143214|text|如果你对服务器端的代码感到满意，可以参考django的Nun+is+a+Mustache-like+templating+system+with+extends+functionality+via+its+'template+overrides'+feature模型。然而，虽然它可以工作，但它的作者不再维护它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3143215|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/akaspin/nun^0|R|2W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you're happy with a server-side only code, <a href="https://github.com/akaspin/nun" rel="nofollow">Nun is a Mustache-like templating system with extends functionality via its 'template overrides' feature</a> - modelled on django. While it works, however, it is no longer maintained by its author.

blocks|key|3143231|text|我在这里对Mustache的规范提出了如下建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3143232|https://github.com/mustache/spec/issues/38|offset|length|3143233|目前mustache.java、hogan.js和phly_mustache都支持模板继承。|3143234|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

I've proposed this to the specification for Mustache here:

<a href="https://github.com/mustache/spec/issues/38">https://github.com/mustache/spec/issues/38</a>

Currently mustache.java, hogan.js and phly_mustache support template inheritance.

blocks|key|2928785|text|我现在正在Python中尝试这一点(注意，我是Mako的创建者)，添加一个捕获部分的动态上下文似乎做了正确的事情，尽管我需要对此进行更多的测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2928786|基本上我们使用的是lambda，其中"<“前缀表示”继承自该模板“(类似于https://github.com/mustache/spec/issues/38中讨论的语法)，而"$”前缀表示“这是一个继承的部分”。|offset|length|2928787|import+pystache

class+NameSpace(object):
++++def+__init__(self,+renderer,+vars_={}):
++++++++self.renderer+=+renderer
++++++++self._content+=+{}
++++++++self.vars+=+vars_

++++def+add_content(self,+name,+value):
++++++++self._content[name]+=+value

++++def+__getattr__(self,+key):
++++++++if+key+in+self.vars:
++++++++++++#+regular+symbol+in+the+vars+dictionary
++++++++++++return+self.vars[key]
++++++++elif+key.startswith("<"):
++++++++++++#+an+"inherit+from+this+template"+directive
++++++++++++name+=+key[1:]
++++++++++++return+inheritor(self,+name)
++++++++elif+key.startswith("$"):
++++++++++++#+a+"here's+a+replaceable+section"+directive
++++++++++++name+=+key[1:]
++++++++++++if+name+in+self._content:
++++++++++++++++#+if+we+have+this+section+collected,+return+the+rendered
++++++++++++++++#+version
++++++++++++++++return+sub_renderer(self,+name)
++++++++++++else:
++++++++++++++++#+else+render+it+here+and+collect+it
++++++++++++++++return+collector(self,+name)
++++++++else:
++++++++++++#+unknown+key.
++++++++++++raise+AttributeError(key)

def+sub_renderer(namespace,+key):
++++def+go():
++++++++def+render(nested):
++++++++++++return+namespace._content[key]
++++++++return+render
++++return+go


def+collector(namespace,+key):
++++def+go():
++++++++def+render(nested):
++++++++++++content+=+namespace.renderer.render(nested,+namespace)
++++++++++++namespace.add_content(key,+content)
++++++++++++return+content
++++++++return+render
++++return+go


def+inheritor(namespace,+name):
++++def+go():
++++++++def+render(nested):
++++++++++++namespace.renderer.render(nested,+namespace)
++++++++++++return+namespace.renderer.render_name(name,+namespace)
++++++++return+render
++++return+go|code-block|syntax|javascript|2928788|下面是一些模板。base.mustache：|2928789|<html>

{{#$header}}
++++default+header
{{/$header}}

{{#$body}}
++++default+body
{{/$body}}

{{#$footer}}
++++default+footer,+using+{{local+key}}
{{/$footer}}


</html>|2928790|hello.mustache：|2928791|{{#<base}}

{{#$header}}
++++new+header
{{/$header}}

{{#$body}}
++++new+body,+with+{{local+key}}
{{/$body}}

{{/<base}}|2928792|然后玩三个级别的深度，subhello.mustache：|2928793|{{#<hello}}

{{#$footer}}
++++im+some+new+footer
{{/$footer}}

{{/<hello}}|2928794|如下所示呈现hello.mustache：|2928795|renderer+=+pystache.Renderer(search_dirs=["./templates/"])

print+renderer.render_name("hello",
++++++++++++++++++++NameSpace(renderer,+{"local+key":+"some+local+key"}))|2928796|输出：|2928797|<html>

++++new+header

++++new+body,+with+some+local+key

++++default+footer,+using+some+local+key


</html>|2928798|渲染subhello.mustache：|2928799|print+renderer.render_name("subhello",
++++++++++++++++++++NameSpace(renderer,+{"local+key":+"some+local+key"}))|2928800|2928801|<html>

++++new+header

++++new+body,+with+some+local+key

++++im+some+new+footer


</html>|2928802|我只用了20分钟就写了这篇文章，而且我在过去只用了一点handlebars.js，并且刚刚第一次使用了pystache，所以整个“八字胡”的概念对我来说还不够深刻。但这似乎起作用了？|2928803|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mustache/spec/issues/38^0|0|11|16|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|F|3|G|5|H|7|1Q|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1R|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1S|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1U|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1V|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|1W|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|6|7|1X|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1Y|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|12|3|13|5|H|7|20|8|@]|9|@]|A|$I|J]]|$1|14|3|15|5|6|7|21|8|@]|9|@]|A|$]]|$1|16|3|17|5|H|7|22|8|@]|9|@]|A|$I|J]]|$1|18|3|11|5|6|7|23|8|@]|9|@]|A|$]]|$1|19|3|1A|5|H|7|24|8|@]|9|@]|A|$I|J]]|$1|1B|3|1C|5|6|7|25|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|26|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]]]

I'm playing around with this right now in Python (note I'm the creator of Mako), adding in a dynamic context that captures sections seems to be doing the right thing, though I'd need to test this a lot more.

Basically we are using lambdas, where a "&lt;" prefix indicates "inherit from this template" (similar to the syntax discussed at <a href="https://github.com/mustache/spec/issues/38" rel="nofollow">https://github.com/mustache/spec/issues/38</a>) and a "$" prefix indicates "this is an inherited section".

<pre><code>import pystache

class NameSpace(object):
 def __init__(self, renderer, vars_={}):
 self.renderer = renderer
 self._content = {}
 self.vars = vars_

 def add_content(self, name, value):
 self._content[name] = value

 def __getattr__(self, key):
 if key in self.vars:
 # regular symbol in the vars dictionary
 return self.vars[key]
 elif key.startswith("&lt;"):
 # an "inherit from this template" directive
 name = key[1:]
 return inheritor(self, name)
 elif key.startswith("$"):
 # a "here's a replaceable section" directive
 name = key[1:]
 if name in self._content:
 # if we have this section collected, return the rendered
 # version
 return sub_renderer(self, name)
 else:
 # else render it here and collect it
 return collector(self, name)
 else:
 # unknown key.
 raise AttributeError(key)

def sub_renderer(namespace, key):
 def go():
 def render(nested):
 return namespace._content[key]
 return render
 return go


def collector(namespace, key):
 def go():
 def render(nested):
 content = namespace.renderer.render(nested, namespace)
 namespace.add_content(key, content)
 return content
 return render
 return go


def inheritor(namespace, name):
 def go():
 def render(nested):
 namespace.renderer.render(nested, namespace)
 return namespace.renderer.render_name(name, namespace)
 return render
 return go
</code></pre>

So here's some templates. base.mustache:

<pre><code>&lt;html&gt;

{{#$header}}
 default header
{{/$header}}

{{#$body}}
 default body
{{/$body}}

{{#$footer}}
 default footer, using {{local key}}
{{/$footer}}


&lt;/html&gt;
</code></pre>

hello.mustache:

<pre><code>{{#&lt;base}}

{{#$header}}
 new header
{{/$header}}

{{#$body}}
 new body, with {{local key}}
{{/$body}}

{{/&lt;base}}
</code></pre>

and then to play with three levels deep, subhello.mustache:

<pre><code>{{#&lt;hello}}

{{#$footer}}
 im some new footer
{{/$footer}}

{{/&lt;hello}}
</code></pre>

Rendering hello.mustache like this:

<pre><code>renderer = pystache.Renderer(search_dirs=["./templates/"])

print renderer.render_name("hello",
 NameSpace(renderer, {"local key": "some local key"}))
</code></pre>

output:

<pre><code>&lt;html&gt;

 new header

 new body, with some local key

 default footer, using some local key


&lt;/html&gt;
</code></pre>

Rendering subhello.mustache:

<pre><code>print renderer.render_name("subhello",
 NameSpace(renderer, {"local key": "some local key"}))
</code></pre>

output:

<pre><code>&lt;html&gt;

 new header

 new body, with some local key

 im some new footer


&lt;/html&gt;
</code></pre>

I just wrote this in twenty minutes, and I've only used handlebars.js a little bit in the past and pystache for the first time just now so the whole "mustache" idea is not deep for me yet. But this seems to work ?

blocks|key|251339|text|在mustache+php中，模板继承是从2.7.0版本开始支持的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251340|https://github.com/bobthecow/mustache.php/wiki/BLOCKS-pragma|offset|length|251341|您可以从文件Mustache/Engine.php中找出当前版本，然后搜索包含以下内容的行：|251342|class+Mustache_Engine
{
++++const+VERSION++++++++=+'2.8.0';
++++...|code-block|syntax|javascript|251343|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

In mustache php, template inheritance is supported since version 2.7.0.

<a href="https://github.com/bobthecow/mustache.php/wiki/BLOCKS-pragma" rel="nofollow">https://github.com/bobthecow/mustache.php/wiki/BLOCKS-pragma</a>

You can figure out your current version from the file Mustache/Engine.php and search for the line containing:

<pre><code>class Mustache_Engine
{
 const VERSION = '2.8.0';
 ...
</code></pre>

blocks|key|3143301|text|在node.js中，你可以使用express-handlebars或hogan-express在胡子模板中设置布局，但它们的处理方式是不同的，它们都不是在模板本身设置布局，布局是在你的应用代码中注册的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3143302|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ericf/express-handlebars|1|https://github.com/vol4ok/hogan-express^0|F|I|0|Y|D|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

In node.js you can use <a href="https://github.com/ericf/express-handlebars" rel="nofollow">express-handlebars</a> or <a href="https://github.com/vol4ok/hogan-express" rel="nofollow">hogan-express</a> to have layouts inna mustache templates, but the way they do things is different, in none of them you set the layout at the template itself, layouts are registered in your app code.

blocks|key|252859|text|我写了一个简短的代码来启用扩展和创建布局。。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|252860|如果您不想复制/粘贴页眉/页脚，或者复制/粘贴在所有管理子部分中重复的菜单栏，那么每次呈现页面/视图时，只需使用以下类的函数：build，您可以将其用作utils模块|offset|length|style|CODE|252861|class+MustacheLayout+{
++constructor()+{
++++if+(!MustacheLayout.instance)+{
++++++MustacheLayout.instance+=+this;
++++}
++++return+MustacheLayout.instance;
++}

++async+build(...layers)+{
++++let+previousLayer+=+'';
++++let+combinedLayout+=+'';
++++for+(const+layer+of+layers)+{
++++++const+{+name:+layerName+}+=+layer;
++++++let+{+data:+layerData+}+=+layer;
++++++if+(!layerData)+layerData+=+{};
++++++layerData.child+=+previousLayer;
++++++combinedLayout+=+await+this.renderHtml(layerName,+layerData);
++++++previousLayer+=+combinedLayout;
++++}
++++return+combinedLayout;
++}

++renderHtml(viewName,+data)+{
++++return+new+Promise((resolve,+reject)+=>+{
++++++this.app.render(viewName,+data,+(error,+html)+=>+{
++++++++if+(error)+reject(error);
++++++++resolve(html);
++++++});
++++});
++}

++setExpressApp(expressApp)+{
++++this.app+=+expressApp;
++}
}

module.exports+=+new+MustacheLayout();|code-block|syntax|javascript|252862|252863|在express应用程序的server.js/|unordered-list-item|252864|文件中，将应用程序实例添加到我们的类中。|252865|252866|//import+the+class+const+mustacheLayout+=+require('')+//
const+app+=+express();;
mustacheLayout.setExpressApp(app);|252867|控制器|252868|将build函数中的所有层作为参数，|252869|252870|+warning：-您需要遵守顺序，从最小的布局到最大的(base.html)+-数据属性的命名方式应与视图中的名称相同|blockquote|BOLD|252871|252872|252873|const+layout+=+require('mustache-layout');

router.get('/edit',+async+(_,+res)+=>+{
++++const+user+=+'admin'
++++const+html+=+await+layout.build(
++++++++{+name:+'admin/edition/editor.view.html',+data:+{+user+}+},
++++++++{+name:'layout/base.view.html'+}
++++)
++++return+res.send(html);
});|252874|视图|252875|252876|+warning您需要在布局视图页面中使用关键字child。别忘了三花括号{}|252877|252878|252879|在这里使用你传递的数据|252880|
<div>+{{+user+}}+</div>|252881|
<!DOCTYPE+html>
<html+lang="en">
<body>
++++{{+>+layout/header.view+}}
++++<div+class="main">
++++++++<div+class="layout-content">
++++++++++++{{{+child+}}}
++++++++</div>
++++</div>
++++{{+>+layout/footer.view+}}
</body>
</html>|252882|如果您需要此代码的包版本，请查看mustache-layout-s|252883|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/mustache-layout-s^0|0|1R|5|0|0|0|0|0|0|0|0|0|0|1|7|0|0|0|0|0|0|1|7|O|5|0|0|0|0|0|0|G|H|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|21|8|@]|9|@]|A|$]]|$1|Q|3|R|5|P|7|22|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|T|3|U|5|J|7|24|8|@]|9|@]|A|$K|L]]|$1|V|3|W|5|6|7|25|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|26|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|28|8|@$D|29|E|2A|F|13]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|16|3|17|5|J|7|2D|8|@]|9|@]|A|$K|L]]|$1|18|3|19|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|12|7|2G|8|@$D|2H|E|2I|F|13]|$D|2J|E|2K|F|G]]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|J|7|2O|8|@]|9|@]|A|$K|L]]|$1|1J|3|1K|5|J|7|2P|8|@]|9|@]|A|$K|L]]|$1|1L|3|1M|5|6|7|2Q|8|@]|9|@$D|2R|E|2S|1|2T]]|A|$]]|$1|1N|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]]|1O|$1P|$5|1Q|1R|1S|A|$1T|1U]]]]

I wrote a short code to enable extend and create layouts.
.

If you don't want to copy/paste the header/footer, or maybe an menu bar that is repeated in all admin sub sections,
each time you render a page/view, you just need to use the function: <code>build</code> of the followed class, that you can use as utils module

<pre class="lang-js prettyprint-override"><code>class MustacheLayout {
 constructor() {
 if (!MustacheLayout.instance) {
 MustacheLayout.instance = this;
 }
 return MustacheLayout.instance;
 }

 async build(...layers) {
 let previousLayer = '';
 let combinedLayout = '';
 for (const layer of layers) {
 const { name: layerName } = layer;
 let { data: layerData } = layer;
 if (!layerData) layerData = {};
 layerData.child = previousLayer;
 combinedLayout = await this.renderHtml(layerName, layerData);
 previousLayer = combinedLayout;
 }
 return combinedLayout;
 }

 renderHtml(viewName, data) {
 return new Promise((resolve, reject) =&gt; {
 this.app.render(viewName, data, (error, html) =&gt; {
 if (error) reject(error);
 resolve(html);
 });
 });
 }

 setExpressApp(expressApp) {
 this.app = expressApp;
 }
}

module.exports = new MustacheLayout();
</code></pre>

<ul>
<li>In your server.js/index file of express app, add the app instance to our class.</li>
</ul>

<pre class="lang-js prettyprint-override"><code>//import the class const mustacheLayout = require('') //
const app = express();;
mustacheLayout.setExpressApp(app);
</code></pre>

<h3>Controller</h3>

Put all the layer in the build function as parameters, 

<blockquote>
 warning: 
 - you need to respect order, from the smallest layout to the biggest (base.html)
 - data properties should be named as in the view
</blockquote>

<pre class="lang-js prettyprint-override"><code>const layout = require('mustache-layout');

router.get('/edit', async (_, res) =&gt; {
 const user = 'admin'
 const html = await layout.build(
 { name: 'admin/edition/editor.view.html', data: { user } },
 { name:'layout/base.view.html' }
 )
 return res.send(html);
});
</code></pre>

<h3>View</h3>

<blockquote>
 warning You need to use the keyword <code>child</code> in layout view pages.
 don't forget triple braces {{{ }}}
</blockquote>

Use your passed data here

<pre class="lang-html prettyprint-override"><code>&lt;!-- ditor.view.html --&gt;
&lt;div&gt; {{ user }} &lt;/div&gt;
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;!-- base.view.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;body&gt;
 {{ &gt; layout/header.view }}
 &lt;div class="main"&gt;
 &lt;div class="layout-content"&gt;
 {{{ child }}}
 &lt;/div&gt;
 &lt;/div&gt;
 {{ &gt; layout/footer.view }}
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

If you need the package version of this code check <a href="https://www.npmjs.com/package/mustache-layout-s" rel="nofollow noreferrer">mustache-layout-s</a>

I'm new to Mustache.

Many templating languages (e.g., Django / Jinja) will let you extend a "parent" template like so...

<h3>base.html</h3>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 {% block content %}{% endblock %}
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3>frontpage.html</h3>

<pre><code>{% extends "base.html" %}
{% block content %}&lt;h1&gt;Foobar!&lt;/h1&gt;{% endblock %}
</code></pre>

<h3>rendered frontpage.html</h3>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Foobar!&lt;/h1&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

I'm aware of Mustache's partials (e.g., <code>{{&gt;content}}</code>), but those seem to be just includes.

Does template extension exist for Mustache? Or, failing that, is there at least some design pattern that effectively turns includes into template extension equivalents.

Can Mustache Templates do template extension?

服务器

Django

Python

我是新来的小胡子。许多模板语言(例如，Django /Django)可以让你像这样扩展“父”模板……base.html<html><head></head> <body> {% block content %}{% endblock %} </body></html>frontpage.html{% ...

问Mustache模板可以做模板扩展吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mustache模板可以做模板扩展吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mustache模板可以做模板扩展吗？
EN