如何在项目中使用 Pattern Lab 生成的模板？

Question

我们正在使用 node version of Pattern Lab 为我们的新网站构建生成样式指南，我们也希望在我们的电子商务平台模板中使用 Pattern Lab 生成的模板文件。

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

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

<!-- Start: REMOVE THIS -->
<!DOCTYPE html>
<html class="pl">
<head>
    <title>My Component Library</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />

    <!--<link rel="stylesheet" href="../../css/style.css?1462369182849" media="all" />-->

    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    <!-- never cache patterns -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <link rel="stylesheet" href="../../styleguide/css/styleguide.css?1462369182849" media="all">
    <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?1462369182849" media="all" />

    <!-- End Pattern Lab -->

</head>
<body class="body">
<!-- End: REMOVE THIS -->

**[ TEMPLATE CONTENT CODE IS HERE WHICH I WANT... ]**

<!-- Start: REMOVE THIS -->
<!--DO NOT REMOVE-->

<!-- DO NOT MODIFY -->
<script>
  // handle injection of items from Node
  var patternPartial = "templates-main";
  var lineage = [{lineagePattern:"organisms-messages",lineagePath:"../../patterns/20-organisms-global-messages/20-organisms-global-messages.html"},{lineagePattern:"organisms-header",lineagePath:"../../patterns/20-organisms-global-header/20-organisms-global-header.html"},{lineagePattern:"organisms-promotion-messages",lineagePath:"../../patterns/20-organisms-global-promotion-messages/20-organisms-global-promotion-messages.html"},{lineagePattern:"molecules-search",lineagePath:"../../patterns/10-molecules-forms-search/10-molecules-forms-search.html"},{lineagePattern:"organisms-footer",lineagePath:"../../patterns/20-organisms-global-footer/20-organisms-global-footer.html"}];
  var lineageR = [{lineagePattern:"pages-main",lineagePath:"../../patterns/40-pages-main/40-pages-main.html"}];
  var patternState = "";
  var baseurl = "";
  var cssEnabled = false; //TODO
</script>

<script type="text/html" id="sg-pattern-html">
  {% patternHTML %}
</script>

<script type="text/html" id="sg-pattern-css">
  {% patternCSS %}
</script>

    <script src="../../styleguide/js/vendor/jwerty.js?1462369182849"></script>
    <script src="../../styleguide/js/postmessage.js?1462369182849"></script>
    <script src="../../data/annotations.js?1462369182849"></script>
    <script src="../../styleguide/js/annotations-pattern.js?1462369182849"></script>
    <script src="../../styleguide/js/code-pattern.js?1462369182849"></script>


</body>
</html>
<!-- End: REMOVE THIS -->

最好有一个没有附加标记的版本（见上面的 'REMOVE THIS' 评论）所以我们只剩下生成的模板 html，它是使用我们的有机体构建的, 分子和原子等

Answer 1

在同一文件夹中始终生成代码段的转义版本。对于你的例子 patternlab\public\patterns-templates-main-main 将包含：

30-templates-main-main.html - 您的带有附加标记的代码段（页眉 + 页脚）
30-templates-main-main.mustache - 转义 .mustache（带有变量），没有额外的标记
30-templates-main-main.escaped.html - 转义 HTML，无额外标记

.mustache 和 .escaped.html 都将只包含片段内容，没有额外的标记。请注意，这两个文件都包含转义的 HTML，因此在进一步使用之前不要忘记对 HTML 进行反转义。这可以通过多种方式完成，具体取决于您的语言，即有一个 NPM 模块可以从转义文本中解码 HTML：https://www.npmjs.com/package/html-entities

如何在项目中使用 Pattern Lab 生成的模板？

How to use Pattern Lab generated templates in a project?

templates

node.js

mustache

patternlab.io