1

我对 Pattern Lab 很陌生，但我觉得如果这不是一个功能，它应该是。

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

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

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

另一种选择可能是创建一堆伪模式，例如：

<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>

但是你必须嵌套你想使用的每个页面。

希望这会有所帮助并且是相关的。希望我只是错过了一些超级明目张胆的东西:)

4

2 回答 2

4

Brian - Pattern Lab Node 的维护者。总的来说，我会尽力为 Pattern Lab 说话，但我最熟悉的是node 版本。

是的，Pattern Lab 使用模板语言来构建分层模式，利用它打算支持的原子设计原则。然而，Pattern Lab 并不是一个成熟的模板引擎，它具有您提到的动态主体注入，比如 Jekyll 或 ASP.NET。

你对伪模式的评估并不完全，或者至少，不一定像你想象的那么复杂。如果您仔细查看该文档，您会发现单个.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交换的数据命名。希望能解释一下...

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

秘诀是利用模式导出（在文章中详细介绍）与 jeykll 包含一起工作。这是我的布局文件的摘录：

<body>

{% include organisms-header.html %}

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

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

所以，并不完美，但我相信我可以代表 Brad 和 Dave 说 Pattern Lab 并不是要成为生产站点的操作布局平台，它的动态内容交付适用于将 .json 文件替换为分层模板的上下文+ 部分集。

于 2015-12-11T18:05:03.893 回答
4

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

随着 PHP 和 Node 版本变得更加模块化，我认为我们会看到 Pattern Lab 的布局从支持本机的模板语言进入。例如，现在有一个Twig 版本的 PHP 版本的 Pattern Lab。它使用“扩展”作为处理布局的一种方式。抱歉，我没有足够的代表发布示例链接。

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

于 2015-12-14T18:46:35.950 回答