components

components 目录包含的是可复用的代码片段，通常包含独立的功能或 UI 元素（如面包屑、按钮、图标等）。

本文以面包屑 UI 组件元素为例，说明其使用方法。

目录结构

主题对 components 的目录层级结构没有强制要求，但建议按功能分类。标准结构示例如下：

components
└─ breadcrumb             # 面包屑组件
    ├─ breadcrumb.html    # 组件模版
    ├─ breadcrumb.css     # 组件样式（可选）
    └─ breadcrumb.js      # 组件脚本（可选）

引用方式

在页面模板或组件文件中，可通过 component tag 引用代码片段，引用路径遵循 组件目录/模板文件名 格式。以下是主题组件文件引用面包屑片段的示例：

<!-- sections/customers-order-detail.html -->
<div class="order-detail-page">
  <section class="order-detail">
    {{#component "breadcrumb/breadcrumb" /}}
  </section>
</div>

支持自定义参数

代码片段支持传递多个自定义参数，以实现相同代码段在不同模块中的不同表现。以下是一个代码片段传递参数的基本示例：

传递参数

在 sections/customers-order-detail.html 组件文件中，将 class 和 title 参数传递给面包屑组件，并为其赋值：

<div class="order-detail-page">
  <section class="order-detail">
    <!-- 传递 class 和 title 参数 -->
    {{#component "breadcrumb/breadcrumb" class="hidden-desktop" title="Order Name" /}}
  </section>
</div>

获取参数

在 components/breadcrumb/breadcrumb.html 片段文件中，你可以通过 props object 获取到传过来的 class 和 title 值：

<a class="breadcrumb {{props.class}}"> <!-- 获取 class 参数值 -->
  <div class="breadcrumb__title body1">{{props.title}}</div> <!-- 获取 title 参数值 -->
</a>
<div class="title">{{props.title}}</div> <!-- 获取 title 参数值 -->

渲染结果

经过模板引擎渲染之后的 HTML 代码如下所示：

<div class="order-detail-page">
  <section class="order-detail">
    <a class="breadcrumb hidden-desktop"> <!-- 新注入的 class -->
      <div class="breadcrumb__title body1">Order Name</div> <!-- 新注入的 title -->
    </a>
    <div class="title">Order Name</div> <!-- 新注入的 title -->
  </section>
</div>

这篇文章对你有帮助吗？

SHOPLINE

条款协议