时间戳

首页 > 解决方案 > Patternlab Node Mustache - 在 Pattern Lab 上寻找渲染到页面的语法

node.js - Patternlab Node Mustache - 在 Pattern Lab 上寻找渲染到页面的语法

问题描述

我目前正在使用 Node Patternlab 和 Mustache - 要回答这个问题，您需要使用 Patternlab 的经验（是的，Pattern Lab 使用模板语言来构建利用它打算支持的原子设计原则的分层模式。）。

我已经构建了原子、分子，最后将我的分子构建成头部有机体，一切看起来都很好。但是，我现在想将标题有机体呈现到页面上。

是否需要在页面级别为有机体重新定义 JSON？将我的有机体呈现到页面的语法是什么？

这是 home.mustache 文件的内容，位于以下文件夹结构中：patterns > pages > home.mustache

除其他外，我已经尝试过：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
</head>
<body>
<h1> My organisms go here </h1>
  
  {{>organisms-primary-header}}

</body>
</html>

这件事目前是我的基本 html 样板，即使没有 Mustache 语法，当我单击页面时也不会呈现。我会假设我至少会看到 h1 - 但什么也没有出现。

这是我的文件夹结构

模式 > 原子

模式 > 分子

模式 > 有机体

模式 > 页面 > home.mustache

patterns > pages > home.json（标题的 JSON 数据，需要吗？）

标签： node.jsmustachepatternlab.io

解决方案

我已经解决了这个问题。我不会删除我的问题，而是演示如何呈现页面，以防有人遇到类似的困难。

它就像定义您的 JSON 数据并调用您的有机体一样简单。Patternlab 将处理 html 样板文件。

patterns > pages > home.json（我在其中定义我的 JSON 数据）

模式 > 页面 > home.mustache

{{>organisms-primary-header}}

它有效！

推荐阅读