README

Silverstripe Elemental 备选基础

用法

elements.yml

---
Name: myelements
After: silverstripe-elemental-textimage
---
Page:
  extensions:
  - ATW\ElementalBase\Extensions\ElementalPageExtension
  ATW\ElementalTextImage\Models\ElementTextImage:
    variants:
      section--imageleft: 'Image Left'
      section--imageright: 'Image Right'
    variants_name: 'Image direction'
  ATW\ElementalBase\Models\ElementText:
    options:
      section--highlight: 'Highlight'
    options_name: 'Options'
ATW\ElementalBase\Models\BaseElement:
  use_submenu: false

选项和变体

可以在配置中定义变体和选项。它们在CMS中以下拉菜单（变体）和复选框（选项）的形式显示。

它们可以包含在模板中。

ElementTextImage.ss

<section class="section section--textimage $VariantClasses" id="$Anchor">
    <div class="section_content">
        <% if $ShowTitle %>
            <h2>$Title</h2>
        <% end_if %>
        <div class="section_items">
            <div class="text">
                $Text
            </div>

            <div class="image">
                $Image
            </div>

        </div>
    </div>
</section>

子菜单

用于生成锚点菜单

ATW\ElementalBase\Models\BaseElement:
  use_submenu: true

在CMS中显示子菜单的标题和选项。

在模板中

<% if $SubMenu %>
<ul class="submenu">
    <% loop $SubMenu %>
    <li><a class="menu--section" href="$Link" data-scroll="$Link">$Title</a></li>
    <% end_loop %>
</ul>
<% end_if %>

菜单扩展

并不真正相关

Page:
  extensions:
  - ATW\ElementalBase\Extensions\MenuPageExtension
  menus:
    main: "Main menu"
    footer: "Footer menu"
PageController:
  extensions:
  - ATW\ElementalBase\Extensions\MenuContentControllerExtension

在模板中

<% loop $FilteredMenu("main", 1) %>
<li><a class="menu--$LinkOrSection" href="$Link">$MenuTitle</a></li>
<% end_loop %>