Question

我是Pattern Lab的新手，但我觉得如果这不是一个功能，它应该是。

基本上，我想在真实网站之后模拟Pattern Labs。在大多数（或许多）真实站点中，使用模板引擎是很常见的。对于我使用的任何主流技术（rails，django，ASP.Net或带有把手的节点）来管理视图层都是如此。我将在此示例中使用把手，因为它最接近于模式实验室胡子语法。

模板引擎的一大功能是构建基本布局，其中可能包括<html>，<head>，<meta>，<body>，{{> header }}，和{{> footer }}。然后，您拥有动态内容块，例如{{{ body }}}或{{ title }}。

Pattern Lab在使用{{ title }}，页面特定的json或参数处理动态_data.json变量方面做得非常好。但是，为了使身体的整个内容动态化，您必须在json文件中编写所有内容，或者通过pattern parameters传递它。但这会限制您的内容，因为您不能将其他部分作为参数传递或将它们存储在json中。

另一种选择可能是创建一堆pseudo patterns，例如：

<div class="main-container">
{{> organisms-header }}
    <div class="page-content">
        {{# first }}
            {{> organisms-first-page }}
        {{/ first }}
        {{# second }}
            {{> organisms-second-page }}
        {{/ second }}
        {{# third }}
            {{> organisms-third-page }}
        {{/ third }}
    </div>
{{> organisms-footer }}
</div>

但是你必须嵌套你想要使用的每一页。

希望这有帮助并且相关。希望我只是缺少一些超级明显的东西：）

Answer 1

Brian - Pattern Lab Node的维护者。我会尽力为模式实验室发言，但我最熟悉的是node version。

模式实验室利用模板语言，建立分层模式，利用它原本支持的原子设计原理。然而，Pattern Lab并不是一个成熟的模板引擎，它具有你提到的动态身体注射，ala Jekyll或ASP.NET。

您对peudo-patterns的评估并不完全，或者至少不一定像您所做的那样复杂。如果仔细查看该文档，您会发现单个.json文件变体会创建相同模板或页面的单独实例。

所以而不是

   {{# first }}
        {{> organisms-first-page }}
    {{/ first }}
    {{# second }}
        {{> organisms-second-page }}
    {{/ second }}
    {{# third }}
        {{> organisms-third-page }}
    {{/ third }}

你可以做到

        {{> organisms-page }}

然后动态交换各个页面的日期。但同样，这实际上是设计和开发，而不是生产配置，除非您设计一些东西以您喜欢的方式提供这些结果。想象一下，如果像https://github.com/pattern-lab/patternlab-node/blob/master/source/_patterns/04-pages/01-blog.json这样的文件是一个真正的博客文章，任何兄弟博客帖子都类似地命名为123-blog-post-name.json，其中的数据与the blog template交换掉了。希望能解释一下......

最后一点 我已经概述了我如何使用Pattern Lab在这里设计，构建和维护一个生产Jekyll网站：http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/。它成功地将Pattern Lab的设计/模块化优势与Jekyll / Github Pages的执行结合起来。

秘诀是使用模式导出（在文章中详述）与jeykll包含。这是我layout file的摘录：

<body>

{% include organisms-header.html %}

<main role="main">
  {{ content }}
</main>

<footer>
  {% include organisms-footer.html %}
</footer>
...
</body>

所以，并不完美，但我相信我可以代表布拉德和戴夫说，模式实验室并不是生产网站的运营布局平台，它的动态内容交付与上下文有关。将.json文件替换为分层模板+部分集。

Answer 2

这是Mustache的一个问题，而不是Pattern Lab。 PHP和Node版本分别只为每种语言使用Mustache库。不幸的是，在official spec中没有布局概念。模式参数在Mustache本身之外实现。

随着PHP和Node版本变得更加模块化，我认为我们会看到模板实验室的布局来自本地支持它的模板语言。例如，现在有一个Twig edition的PHP版本的Pattern Lab。它使用＆＃34; extends＆＃34;作为一种处理布局的方式。抱歉，我没有足够的代表发布一个示例链接。

从某种意义上说，它是一个即将到来的功能，但它不是由模式实验室团队直接实现的。 FWIW，我认为以这种方式实现的布局违背了支持Pattern Lab的原则，但是由开发人员决定如何最好地使用该工具。

模式实验室模板

2 个答案: