README

为什么选择Molecule？

Molecule 允许您从模板文件夹外部获取Twig组件。如果您想将Twig部分、CSS、React/Vue文件等放在一个组件文件夹中，这将非常有用。现在，所有组件都整齐地组织在各自的文件夹结构中！

├── components/
│   ├── ButtonPrimary/
│   │   ├── index.css
│   │   ├── index.jsx
│   │   ├── index.twig
│   │   └── README.md
│   ├── Gallery/
│   ├── Hero/
│   └── VideoEmbed/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

示例用法

设置您的 ButtonPrimary/index.twig 部分组件

<a href="{{url}}"{% if newWindow is defined and newWindow %} target="_blank"{% endif %}>
  {{label}}
</a>

然后使用以下语法在Twig模板中包含它

{{craft.molecule.get("ButtonPrimary", {
    url: "https://google.com",
    label: "Visit Google.com",
    newWindow: true
  })
}}

您甚至可以在其他组件中包含组件！

/components/Hero/index.twig

<div class="Hero">
  <img src="myImage.jpg" alt="A short description">

  {{craft.molecule.get("ButtonPrimary", {
      url: "#",
      label: "Learn more"
    })
  }}
</div>

图标组件

如果您有一个 Icon/ 组件，您可以使用额外的 craft.molecule.icon() 助手将SVG直接输出到模板中。

├── components/
│   ├── Icon/
│   │   ├── images/
│   │   │    ├── arrow.svg
│   │   │    ├── play-button.svg
│   │   │    └── twitter.svg
│   │   ├── index.css
│   │   └── index.jsx
│   ├── Gallery/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

{{craft.molecule.icon("twitter", { class: "custom_class" })}}

将编译为

<span class="Icon Icon--twitter custom_class">
  <!-- SVG contents of twitter.svg -->
</span>

推荐信

Matt Rothenberg @mattrothenberg

@aaronbushnell @CraftCMS 我全力以赴 😜。

能够以类似React的方式“组合”组件感觉真好。 https://twitter.com/mattrothenberg/status/1094693570177654784/photo/1

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

要安装插件，请按照以下说明操作。

1. 打开您的终端并转到您的Craft项目

    cd /path/to/project
   

2. 然后告诉Composer加载插件

    composer require trendyminds/molecule
   

3. 在控制面板中，转到设置 → 插件，然后点击Molecule的“安装”按钮。

4. 在Molecule的设置中配置组件目录的路径

鸣谢

图标由 Aaron Humphreys 设计 — Dribbble帖子