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

我們使用node版本的Pattern Lab爲我們的新網站構建生成styleguide，我們也希望在我們的電子商務平臺的模板中使用Pattern Lab生成的模板文件。如何在項目中使用Pattern Lab生成的模板？

有沒有辦法創建另一版本的Pattern Lab模板，而不會在編譯後出現生成的標記和節點標記？

作爲一個例子，我們有一個名爲main.mustache的PL模板。當我們的PL咕嚕手錶任務運行時，生成的模板的patternlab \ PUBLIC \模式\ 30模板 - 主 - 主文件夾與像這樣內容的HTML文件中結束了......

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

它會非常好的版本沒有額外的標記（參見上面的'刪除這個'註釋），所以我們只剩下生成的模板html，它是使用我們的生物體，分子和原子等構建的。

來源

2016-05-04 Damodog

總有在同一文件夾中生成的代碼段的轉義版本。對於你的榜樣 patternlab\public\patterns\30-templates-main-main將包含：

30-templates-main-main.html - 逃脫.mustache（與變量），不需要額外的標記
30-templates-main-main.escaped.html - - 使用額外的標記（頭+頁腳）
30-templates-main-main.mustache您的片斷轉義HTML，沒有額外的標記

.mustache和.escaped.html將只包含片段內容，沒有額外的標記。請注意，這兩個文件都包含轉義的HTML，所以不要忘記在進一步使用HTML之前先回退HTML。這可以通過幾種方式完成，具體取決於您的語言，也就是說有一個NPM模塊可以從轉義文本中解碼HTML：https://www.npmjs.com/package/html-entities

來源

2016-06-08 16:16:36

感謝Eugen，這很有道理！ – Damodog

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

回答

相關問題