README

此插件可以帮助您通过一个标签将嵌套在具有可变键的数组中的数据输出变得非常简单，从而 简化您的模板。

对于 Laravel 开发者来说，这和 Arr::get()（或旧的 array_get()）辅助函数非常相似。

为什么？

我通常用它来 简化组件变体的标记。

例如，在 Highland 的网站上，我们为我们的导航栏和标志使用了几种不同的颜色变体。每个变体都需要在六个元素上设置几个类。

与其重复标记以略作修改……

<!--
  Note this example strips out a lot of complexity surrounding responsive 
  design and JavaScript-powered mobile behavior.
-->
{{ if navbar_variant === 'blue_tan_pink' }}
  <nav>
    <header class="bg-blue-500">
      <a href="/">
        {{ partial:components/svg/logo
            p_logo_type_class     ="text-tan-200"
            p_logo_crossbar_class ="text-pink-400"
        }}
      </a>
      <ol>
        {{ links }}
          <a href="{{ url }}" class="text-white">
        {{ /links }}
      </ol>
    </header>
  </nav>


{{ elseif navbar_variant === 'blue_tan_peach' }}
  <nav>
    <header class="bg-blue-500">
      <a href="/">
        {{ partial:components/svg/logo
            p_logo_type_class     ="text-tan-200"
            p_logo_crossbar_class ="text-peach-300"
        }}
      </a>
      <ol>
        {{ links }}
          <a href="{{ url }}" class="text-white">
        {{ /links }}
      </ol>
    </header>
  </nav>

  <!-- Insert several more variants. -->
{{ /if }}

……或者在内联属性中使用一堆条件语句……

<!--
  Note this example strips out a lot of complexity surrounding responsive 
  design and JavaScript-powered mobile behavior.
-->
<nav>
  <header class="{{ if navbar_variant === 'blue_tan_pink' }}bg-blue-500{{ elseif navbar_variant === 'blue_tan_peach' }}bg-blue-500 <!-- MOAR VARIANTS -->{{ /if }}">
    <!-- Let's just stop there on this one... -->
</nav>

……或者在内联部分/输出标签中使用一堆条件语句……

<!--
  Note this example strips out a lot of complexity surrounding responsive 
  design and JavaScript-powered mobile behavior.
-->
{{ if navbar_variant === 'blue_tan_pink' }}
  {{ section:navbar_header_class }}
    bg-blue-500
  {{ /section:navbar_header_class }}
  
  {{ section:logo_type_class }}
    text-tan-200
  {{ /section:logo_type_class }}

  {{ section:logo_crossbar_class }}
    text-pink-400
  {{ /section:logo_crossbar_class }}

  {{ section:navbar_links_class }}
    text-white
  {{ /section:navbar_links_class }}

{{ elseif navbar_variant === 'blue_tan_peach' }}
  {{ section:navbar_header_class }}
    bg-blue-500
  {{ /section:navbar_header_class }}
  
  {{ section:logo_type_class }}
    text-tan-200
  {{ /section:logo_type_class }}

  {{ section:logo_crossbar_class }}
    text-peach-300
  {{ /section:logo_crossbar_class }}

  {{ section:navbar_links_class }}
    text-white
  {{ /section:navbar_links_class }}

  <!-- Insert several more variants. -->
{{ /if }}

<nav>
  <header class="{{ yield:navbar_header_class }}">
    <a href="/">
      {{ partial:components/svg/logo
          p_logo_type_class     ="{yield:logo_type_class}"
          p_logo_crossbar_class ="{yield:logo_crossbar_class}"
      }}
    </a>
    <ol>
      {{ links }}
        <a href="{{ url }}" class="{{ yield:navbar_links_class }}">
      {{ /links }}
    </ol>
  </header>
</nav>

……使用前端元数据配置您的变体！

---
navbar_variants:
  # Variants are named by colors used for navbar background, logo text color, 
  # and logo crossbar color, respectively.
  blue_tan_pink:
    navbar_header_class:        bg-blue-500
    navbar_logo_type_class:     text-tan-200
    navbar_logo_crossbar_class: text-pink-400
    navbar_menu_button_class:   text-white
    navbar_links_class:         text-white hover:text-blue-100
    navbar_last_link_class:     text-white
  blue_tan_peach:
    navbar_header_class:        bg-blue-500
    navbar_logo_type_class:     text-tan-200
    navbar_logo_crossbar_class: text-peach-300
    navbar_menu_button_class:   text-white
    navbar_links_class:         text-white hover:text-blue-100
    navbar_last_link_class:     text-white
  # Insert several more variants.
---




<nav>
  <header class="{{ array_get:view:navbar_variants key='{navbar_variant}.navbar_header_class' }}">
    <a href="/">
      {{ partial:components/svg/logo
          p_logo_type_class     ="{array_get:view:navbar_variants key='{navbar_variant}.navbar_logo_type_class'}"
          p_logo_crossbar_class ="{array_get:view:navbar_variants key='{navbar_variant}.navbar_logo_crossbar_class'}"
      }}
    </a>
    <ol>
      {{ links }}
        <a href="{{ url }}" class="{{ array_get:view:navbar_variants key='{navbar_variant}.navbar_links_class' }}">
      {{ /links }}
    </ol>
  </header>
</nav>

这种方法通常 使得稍后添加更多变体变得更加容易。

highland / statamic-array-get

维护者

详细信息

README

为什么？