README

Craft CMS 3 的导航插件，支持 GraphQL 和自定义字段。Navie 允许您为导航项添加自定义字段。

添加自定义字段

添加链接到列表

使用自定义字段

需求

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

安装

要安装插件，请按照以下说明操作。

1. 打开您的终端并转到您的 Craft 项目

    cd /path/to/project
   

2. 然后告诉 Composer 加载插件

    composer require dutchheight/craft-navie
   

3. 在控制面板中，转到设置 → 插件，并点击 Navie 的“安装”按钮。

4. 创建列表

5. 在模板中渲染。见 显示 Navie 列表

Navie 功能

• 多个菜单/列表
• 多站支持
• GraphQL 支持
• 默认链接类型（条目、Url、类别、资产）
• 通过添加字段为每个菜单添加自定义链接类型
• 丰富的 API
• 可编辑的插件名称
• 权限（管理列表和编辑设置）
• 每个列表的权限（显示、创建、编辑和删除）
• 预加载（条目、类别、资产）

使用 Twig 与 Navie

显示 Navie 列表

craft.navie.render(handle, options) 用于显示列表。您可以提供样式选项。

可用选项

{
    ulClass: 'class',
    ulAttributes: {
        'style': 'margin-top: 10;'
    },
    ulChildClass: 'class',
    ulChildAttributes: {
        'style': 'margin-top: 10;'
    },
    listClass: 'class',
    listAttributes: {
        'style': 'margin-top: 10;'
    },
    linkClass: 'class',
    linkAttributes: {
        'style': 'margin-top: 10;'
    },
    linkActiveClass: 'active'
}

示例

渲染 Navie 列表

{{ 
    craft.navie.render('main', {
        ulChildAttributes: {
            'style': 'margin-top: 0.25rem;',
            'data-option': 'custom data option',
        }
    }) 
}}

获取 Navie 列表项的原始数据

craft.navie.items(criteria) 用于获取列表项。这允许您 检查 Craft 元素查询以获取更多信息。每个项目

示例

获取所有项目

{% 
    set items = craft.navie.items()
        .list('main')
        .all()
%}

按级别限制获取项目

{% 
    set items = craft.navie.items()
        .list('main')
        .level(1)
%}

预加载获取所有项目

{%
    set items = craft.navie.items()
        .list('main')
        .with(['entry', 'category', 'asset'])
        .all() 
%}

现在您可以使用 items.getElement().title 而无需额外的查询。这也可以在没有预加载的情况下完成，但会影响性能。

使用 GraphQL 与 Navie

Navie 内置了对通过 GraphQL 访问列表和项目的支持，使用本机 Craft CMS 3.3 GraphQL。

{
  listItems(list: "main", level: 1) {
    id,
    title,
    url,
    target,
    children {
      id,
      url,
      title,
      target,
      ... on main_List { # Main is list handle
        classes
      }
    }
  }
}

使用 CraftQL 插件与 Navie

Navie 内置了对通过 GraphQL 访问列表和项目的支持，使用 CraftQL 插件。

您可以检索所有列表及其字段

{
  navie {
    lists {
      id,
      structureId,
      fieldLayoutId,
      maxLevels,
      name,
      handle,
      uid,
      propagate
    }
  }
}

您还可以检索所有列表项及其字段，甚至列表上的自定义字段

{
  navie {
    items(list: main) {
      title,
      url,
      target,
      children {
        title,
        url,
        target
        ... on MainList {
          classes
        }
      },
      ... on MainList {
        classes
      }
    }
  }
}

Navie 路线图

一些要完成的事情以及潜在功能的想法

• 可用链接类型的设置
• 支持 Project.yaml
• 自定义链接类型注册

由 Dutch Height 提供