2016-05-04 14 views
0

nodeバージョンPattern Labを使用して、新しいサイトビルド用のスタイルガイドを生成しています。また、パターンラボによって生成されたテンプレートファイルを当社のeコマースプラットフォームのテンプレートに利用することも期待しています。パターンラボを使ってプロジェクトでテンプレートを生成する方法は?

コンパイル後に生成されたマークアップとNodeタグを使わずに、パターンラボテンプレートの別のバージョンを作成する方法はありますか?

例として、main.mustacheというPLテンプレートがあります。私たちのPLイサキの時計タスクを実行すると、生成されたテンプレートは、それは思い

<!-- 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ファイルとして30-テンプレート - メイン - メインフォルダ\パブリック\パターン\ patternlabの内側に終わります追加のマークアップのないバージョンを持つことは素晴らしいことです(上のコメントを参照)。生物、分子、原子などを使って構築されたテンプレートhtmlが残っています。

答えて

2

いつもあります同じフォルダに生成されたスニペットのエスケープされたバージョン。ご例えば 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モジュールがあります。https://www.npmjs.com/package/html-entities

+0

ありがとうございました! – Damodog

関連する問題