问题标签 [patternlab.io]

我们正在使用Pattern Lab的节点版本为我们的新站点构建生成样式指南，我们还希望在我们的电子商务平台模板中利用 Pattern Lab 生成的模板文件。

有没有办法在编译后不出现生成的标记和节点标签的情况下创建另一个版本的 Pattern Lab 模板？

例如，我们有一个名为 main.mustache 的 PL 模板。当我们的 PL grunt watch 任务运行时，生成的模板最终以 html 文件的形式出现在 patternlab\public\patterns\30-templates-main-main 文件夹中，内容如下......

有一个没有附加标记的版本会很棒（参见上面的“删除这个”注释），所以我们只剩下生成的模板 html，它是使用我们的有机体、分子和原子等构建的。

我有兴趣在 Pattern Lab 中添加首页。我不想从“Atoms”中的内容开始（见图），而是从样式指南开始。

我尝试在带有小胡子文件的“Atoms”之前添加一个文件夹“Main”，但是（1）我无法在“Main”中打开该文件，并且（2）“Atoms”中的内容仍在显示，但它不再有样式。我还尝试在“Atoms”文件夹之前添加胡子文件，但无法在实时预览页面上查看或访问它们。

是否有可能创建这个首页？这是 Pattern Lab 提供的功能，还是我可以使用扩展来生成此页面？

默认首页：“Atoms”文件夹中的内容。截图取自 demo.patternlab.io。

我已经成功安装并运行了 Pattern Lab 的 mustache 版本。

现在我想安装瘦版，我使用composer安装了Pattern Lan的瘦版，命令如下：

它创建了文件和文件夹结构。我现在正在尝试使用以下内容生成模式：

但我得到以下回复：

即使我使用 Pattern Lab Thin Edition 的捆绑版本，也没有 core > scripts 文件夹，也没有 installPatternLab.command 文件。

我错过了什么？

brgds-索海尔

我试图在新升级后生成 Pattern Lab 站点，但是，在我下载所有依赖项后，它一直抱怨我的样式指南不会呈现，因为在 patternlab-php-master\vendor/ 找不到样式指南文件pattern-lab/styleguidekit-mustache-default，它建议我通过编辑 styleguideKitPath 在 ./config/config.yml 中修复此问题...我检查了 ./config/config.yml 文件，路径似乎与文件夹匹配存储样式指南文件的位置。我不知道出了什么问题，还有什么是样式文件？因为当我查看 styleguidekit-mustache-default 时，我得到了下图所示的内容，但我不知道它们是否是所需要的。如果有人对新版本的 Pattern Labs 有经验或知道如何解决这个问题，请告诉我。谢谢！ styleguidekit-mustache-default 内容

作为一名交互设计师，我正在寻找更好的方式与开发人员协作，我尝试将 Pattern Lab 介绍给我当前的客户。然而，前端框架的首席开发人员却退缩了。他的论点的主要要点：

我们的工具包有复杂的组件，除了 HTML/CSS 之外还需要 JavaScript 或 JS 库。这不会与 Pattern Lab 中的 Mustache 或 Handlebars 模板很好地混合。因此，我们使用 Angular JS，这是我们编写组件的框架。

我试图寻找讨论这个话题的文章。据我所知，这里没有任何内容。在 SO 之外，我只找到了几篇文章（示例），但除了两年前解决的解析问题外，没有任何关于 Pattern Lab 与 Angular（缺乏）兼容性的主题。

作为一名非程序员，我没有必要的影响力来影响我的开发人员同行。如果有经验的人能详细说明一下就好了。

我认为这可能是一个相当普遍的问题，但不知何故很难找到合适的答案。

背景 我目前正在研究如何加快Patternlab的节点变体。它基本上是一个系统，您可以在其中创建包含一些基本元素（称为原子）的 HTML 模板文件，如标题、段落等，并将它们组合成更大的东西（分子），然后组合多个分子，直到您拥有完整的网页。模板文件由能够引用和包含其他模板文件的模板引擎处理。Patternlab 现在将读取所有文件并构建每个文件的前身和祖先的图表。

问题是，模板目录中的所有文件都被读取、处理，模板引擎的编译输出被写入某处，完成。对于 10-20 MB 的 HTML 模板，这大约需要 1 分钟（例如 Mustache）。有差异更新会好得多。

一般问题 给定文件（节点）的有向无环图，f并且f1→ f2forf1包含f2在其内容中。当在f1→中f2也需要重新编译时（即编译顺序应该是f2，f1），当可能存在包含多个更改文件的路径和节点取决于多条路径？

给定两个并行路径（即f1→ f2→f5和f1→ f4→ f5），如何以最小长度找到并行编译的最佳路径集（即通过路径的总长度）l？

注意事项 那么如何做到这一点呢？我们只需要观察事件的模板目录create，modify和delete。这可以通过从内核收集文件系统事件来完成。

请记住，对于任何文件，我们还可以接收“最后修改”时间戳 ( mtime)。

第一步，构建初始图已经由 patternlab 完成。图的每个节点包括：

• 源文件路径和mtime
• 目标文件路径和mtime
• 文件的一组参数（即用户名、页面标题等）
• 一个changed标志，指示文件是否通过检查被修改mtimes（见下文）。这总是反映当前的文件系统状态（简单得多）。

即有一个“影子”图编译最新的编译输出。这导致了这些情况：

1. source.mtime <= target.mtime：源代码已编译，之后未修改。如果在构建图形后更改了源文件，
2. source.mtime > target.mtime：在构建图之前更改了源，必须重新编译

现在的想法是，如果设置了更改的标志，则重新编译每个节点，否则返回目标文件的内容。

• 当一个文件被编译时，所有引用这个文件的文件（例如，所有带有节点传入边的节点）也必须重新编译。
• 考虑当源 hsa 被编译到目标时，标志变为 false，因此它不会被编译两次。再次访问时返回目标内容是可以的。
• 有多个根节点（只有传出边，即页面），一些是“叶子”（只有传入边，即分子），还有没有
• 假设patternlab 不能并行运行，即有一个“忙”标志阻止并发整体运行。
• 然而，使用所有 CPU 内核更快地编译模板并为未修改的模板使用内容缓存可能是有益的。
• 如果一个文件f1包含另外两个文件和f2，两者都有需要重新编译的文件作为后继文件，则必须先等待所有路径重新编译。f3f2f3f1

例如（c = 已更改）

我试图在胡须中循环 json 时得到这个结果

这是我唯一知道该怎么做的事

ps - 我正在使用模式实验室

在模式实验室Maximum call stack size exceeded错误，我不知道为什么。我没有做任何我以前没有做过的事情。

在01-molecules/02-cart/cart.mustache我有这个代码

该数据来自01-molecules/02-cart/cart.json. 它工作正常。

然后我有02-organisms/mini-cart.mustache，代码是

来自上面的cart分子，数据来自02-organisms/mini-cart.json。是一些带有更多对象的 json 代码。

这{{> cart}}会引发Maximum call stack size exceeded 错误。如果我删除那行代码并用任何东西替换它，就像{{title}}代码一样。

可能是什么问题？

要运行模式实验室，我正在运行这个

从谷歌搜索我试过这个

但结果是一样的。

对于我所做的每一项更改，我都需要等待文件重建。构建需要 80 毫秒到 1.30 分钟。

有没有办法加快这个速度？

是否有任何注意事项，或者这是无论如何都需要多长时间。

我知道可能是由于许多模板渲染请求（{{> these}}），但 1.30 分钟仍然太长，无法取得任何实际进展。

I am using twig Pattern Lab includes with the longhand syntax (needed for integration reasons), aka {% include "@atoms/path/to/pattern.twig" %}.

If I have variables defined in a pattern, and then include that pattern in another pattern, the included pattern's variables are set to null, unless I pass in a new context with with.

For example:

my-atom

my-molecule

I would expect the variables from the molecule to flow down to the atom, falling back to the atom's values if the variable isn't defined in the molecule, similar to how the short hand syntax works (aka, {% include "atoms-my-atom" %}).

Is this a feature? A bug? Is there something I'm missing?

Thanks so much in advance!