youandmedigital/breadcrumb

生成简单的面包屑

3.0.0 2024-04-16 19:17 UTC

This package is auto-updated.

Last update: 2024-09-16 20:10:23 UTC


README

Craft Breadcrumb

Craft CMS 的面包屑

生成简单的面包屑。

需求

此插件需要 Craft CMS 5 或更高版本。

Breadcrumb from URL

安装

要安装此插件,请在 Craft 插件商店中搜索 "Breadcrumb",或使用 composer 手动安装。

composer require youandmedigital/breadcrumb

概述

此插件将生成一个简单的面包屑数组,您可以通过 Twig 进行样式设置。如果设置了 customFieldHandle 设置,它将生成自定义字段处理的标题,如果未设置,则回退到标题字段。如果这些字段都不存在,它将根据 URL 段生成面包屑标题。

面包屑适用于不同的元素类型,并且对多站点友好。它甚至可以用来生成 BreadcrumbList schema

示例

面包屑生成如下数组

array (size=4)
  0 =>
    array (size=3)
      'title' => string 'Home' (length=4)
      'url' => string 'https://mysite.local' (length=18)
      'position' => int 1
  1 =>
    array (size=3)
      'title' => string 'Posts' (length=5)
      'url' => string 'https://mysite.local/posts' (length=24)
      'position' => int 2
  2 =>
    array (size=3)
      'title' => string 'Categories' (length=10)
      'url' => string 'https://mysite.local/posts/categories' (length=35)
      'position' => int 3
  3 =>
    array (size=3)
      'title' => string 'Example Category' (length=11)
      'url' => string 'https://mysite.local/posts/categories/example-category' (length=52)
      'position' => int 4

使用 Twig 定义呈现并应用额外的逻辑。使用最适合您项目的标记。以下是一个没有应用设置的简单示例

{% set breadcrumb = craft.breadcrumb.config %}

{% if breadcrumb %}
<div class="c-breadcrumb">
    <ol class="c-breadcrumb__items">
        {% for crumb in breadcrumb  %}
            {% if loop.last %}
            <li class="c-breadcrumb__item">
                <span>{{ crumb.title }}</span>
            </li>
            {% else %}
            <li class="c-breadcrumb__item">
                <a class="c-breadcrumb__link" href="{{ crumb.url }}">
                    <span>{{ crumb.title }}</span>
                </a>
            </li>
            {% endif %}
        {% endfor %}
    </ol>
</div>
{% endif %}

设置

面包屑有以下可用的设置

homeTitle (字符串,可选,默认 'Home') 自定义面包屑数组的第一个段落的标题。

customBaseUrl (字符串,可选,默认 '@baseUrl') 为面包屑数组中的每个面包屑设置自定义基本 URL。使用不带尾随斜杠的完全限定 URL。

customFieldHandle (字符串,可选,默认 'null') 指定一个自定义字段处理以生成每个面包屑标题。需要 customFieldHandleEntryId 设置才能工作。

customFieldHandleEntryId (整数,可选,默认 '0') customFieldHandle 所需。

lastSegmentTitle (字符串,可选,默认 'null') 自定义面包屑数组中的最后一个面包屑标题。当使用自定义路由时很有用。

skipUrlSegment (整数,可选,默认 'null') 跳过面包屑数组中的级别或段。例如,如果您有以下 URL https://mysite.local/posts/categories/example-category 并将值设置为 3,则将从数组中删除 categories

limit (整数,可选,默认 'null') 限制返回到面包屑数组中的面包屑数量。

应用设置后的示例设置

{# If entry is empty, try category, tag and finally return null #}
{% set element = entry ?? category ?? tag ?? null %}

{# Breadcrumb settings array #}
{% set settings =
    {
        homeTitle: 'My Website',
        customBaseUrl: 'https://example.com/123',
        customFieldHandleEntryId: element.id,
        customFieldHandle: 'myCustomField',
        lastSegmentTitle: element.customMenuTitle ?? element.title,
        skipUrlSegment: 2,
        limit: 3
    }
%}

{# The settings array above is passed into the Breadcrumb config below #}
{% set breadcrumb = craft.breadcrumb.config(settings) %}

{% if breadcrumb %}
<div class="c-breadcrumb">
    <ol class="c-breadcrumb__items">
        {% for crumb in breadcrumb  %}
            {% if loop.last %}
            <li class="c-breadcrumb__item">
                <span>{{ crumb.title }}</span>
            </li>
            {% else %}
            <li class="c-breadcrumb__item">
                <a class="c-breadcrumb__link" href="{{ crumb.url }}">
                    <span>{{ crumb.title }}</span>
                </a>
            </li>
            {% endif %}
        {% endfor %}
    </ol>
</div>
{% endif %}

路线图

欢迎 PR & FR!

You & Me Digital 提供