模式实验室模板

Question

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

本质上，我想在真实站点之后模拟 Pattern Labs。在大多数（或许多）真实站点中，使用模板引擎是很常见的。这适用于我使用过的任何主流技术（rails、django、ASP.Net 或带把手的节点）来管理视图层。我将在这个例子中使用 handlebars，因为它最接近于 Pattern Lab mustache 语法。

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

Pattern Lab 在使用 _data.json、页面特定 json 或参数处理动态 {{ title }} 变量方面做得非常好。但是，为了使正文的全部内容动态化，您必须将所有内容写入 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 的维护者。我会尽力代表 Pattern Lab 大体上发言，但我最熟悉的是 node version.

Pattern Lab 是的，利用模板语言来构建分层模式，利用它旨在支持的原子设计原则。然而，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 was an actual blog post, with any sibling blog posts similarly named 123-blog-post-name.json with data swapped out against the blog template。希望解释一下...

最后的说明 我在此处概述了我如何使用 Pattern Lab 来设计、构建和维护生产 Jekyll 站点：http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/。它成功地将 Pattern Lab 的 design/modularity 优势与 Jekyll/Github 页的执行相结合。

秘诀是利用模式导出（在文章中有详细介绍）与 jeykll include 一起工作。这是我的 layout file:

的摘录

<body>

{% include organisms-header.html %}

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

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

所以，并不完美，但我相信我可以代表 Brad 和 Dave 说 Pattern Lab 并不意味着成为生产站点的操作布局平台，它的动态内容交付在替换的上下文中工作。 json 个针对分层模板的文件 + 部分集。

Answer 2

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

随着 PHP 和 Node 版本变得更加模块化，我认为我们会看到布局从本机支持的模板语言进入模式实验室。例如，Pattern Lab 现在有 PHP 版本的 Twig edition。它使用 "extends" 作为处理布局的方式。抱歉，我没有足够的代表 post 举个例子 link。

所以从某种意义上说，这是一个即将到来的功能，但它不是由 Pattern Lab 团队直接实现的功能。 FWIW，我认为以这种方式实现的布局违背了支撑 Pattern Lab 的原则，但开发人员需要弄清楚他们最想如何使用该工具。

模式实验室模板

Pattern Lab Templates

mustache

patternlab.io