包简介

Laravel's array_get() / Arr::get() helper for Statamic.

README 文档

README

This addon helps you DRY up your templates with a tag that makes it trivial to output data nested in arrays with variable keys.

For the Laravel devs out there, this works very similarly to the Arr::get() (or the old array_get()) helper.

Looking for the docs?

Why?

I use it most often to simplify markup for component variants.

For example, on Highland's website we use several different color variants for our navbar and logo. Each variant requires setting several classes across six elements.

Rather than repeating markup with slight differences…

<!--
  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 }}

…or a bunch of conditionals inside class attributes…

<!--
  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>

…or a bunch of conditionals inside section/yield tags…

<!--
  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>

…configure your variants with front-matter!

---
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>

This approach often makes it way easier to add more variants later.

highland/statamic-array-get 适用场景与选型建议

highland/statamic-array-get 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 1.6k 次下载、GitHub Stars 达 1，最近一次更新时间为 2020 年 09 月 08 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 highland/statamic-array-get 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 highland/statamic-array-get 我们能提供哪些服务？

定制开发 / 二次开发

基于 highland/statamic-array-get 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

highland/statamic-array-get

包简介

README 文档

README

Why?

highland/statamic-array-get 适用场景与选型建议

统计信息

GitHub 信息

其他信息