README

此插件与Kirby 3兼容，适用于旧项目，不会更新到Kirby 4，因为其页面部分提供了layout: table选项。

Kirby 3 - Pagetable

以灵活、可排序和可搜索的表格显示子页面。

概述

支持Kirby 3.6+及Pagetable 1.1+。您应该使用1.0.9与之前的Kirby 3版本。

此插件完全免费，并按MIT许可证发布。但是，如果您正在将其用于商业项目并想帮助我维持维护，请考虑随意捐赠或通过我的联盟链接购买您的许可证。

1. 安装
2. 设置
3. 全局选项
4. 列选项
5. 完整示例
6. 许可证
7. 致谢

1. 安装

如果您正在寻找此字段的Kirby 2版本，请查看索引字段。

下载并将此存储库复制到/site/plugins/pagetable

或者，您可以使用composer进行安装：composer require sylvainjule/pagetable

2. 蓝图使用

pagetable部分可以替换您已设置的任何pages部分

sections:
  mypagetable:
    headline: My PageTable
    type: pagetable

3. 全局选项

3.1. 继承选项

这些选项的工作方式与pages部分完全相同，请参阅其文档

- create
- headline
- image
- max
- min
- parent
- sortBy
- status

3.2. 限制选项

您可以通过与常规pages部分相同的方式限制显示的页面初始数量，只有前端将发生分页。默认值为25。

sections:
  mypagetable:
    type: pagetable
    limit: 25

您还可以设置在部分底部的下拉输入中显示的限制选项。默认值为[10, 25, 50]。

sections:
  mypagetable:
    type: pagetable
    limitOptions:
      - 10
      - 25
      - 50

3.3. 可见性选项

您还可以切换图像列、状态按钮和操作按钮的可见性

sections:
  mypagetable:
    type: pagetable
    showImage: false
    showStatus: false
    showActions: false

3.4. 查询

您可以使用query选项查询任何您想要的页面集。查询可以以kirby、site、pages或（当前）page开头。例如，这将查询标题中包含"Foo"的页面。

sections:
  mypagetable:
    type: pagetable
    query: site.index.filterBy('title', '*=', 'Foo')

有关Kirby蓝图查询语言的更多信息，请参阅此处。

3.5. 自定义字符串

Pagetable随附了其占位符/按钮等的翻译字符串。您可以在蓝图中将它们更改为您想要的任何内容

sections:
  mypagetable:
    type: pagetable
    translations:
      # single language
      empty: You have not added any products yet
      # or translated
      empty:
        en: You have not added any projects yet
        fr: Vous n'avez actuellement aucun projet à afficher
      # All available keys and their default english strings
      empty: No pages yet
      rowsPerPage: Pages displayed
      all: All
      loading: Loading pages…
      filterPages: Filter pages…
      reset: Reset

3.6. 面板/预览链接

默认情况下，每一行将重定向到其面板页面。但是，您可以通过设置url选项选择将编辑器重定向到其预览页面。

sections:
  mypagetable:
    type: pagetable
    url: preview

4. 列选项

该插件允许您选择要显示的列，并微调其行为。具有所有选项明确设置的列将如下所示

columns:
  title:
    label: Page title
    text: '{{ page.title }}'
    type: text
    width: 1/2
    class: my-title-class
    sortable: true
    searchable: true
  modified:
    ...

4.1. `label`

类型：string，默认值：选项的键

列的标题，显示在表格的头部/第一行。

# Single-language
columns:
  title:
    label: Page title

# Multi-language
columns:
  title:
    label:
      en: Page title
      fr: Titre de la page

4.2. `text` (必需)

类型: string

定义列中每行显示的信息。您需要在该处注入当前页面的信息，借助模板占位符

columns:
  title:
    text: '{{ page.title }}'

注意，这里唯一的限制是始终返回一个字符串。这个字符串可以包含纯文本或HTML标记，它将相应地进行渲染。这意味着，例如，您可以对返回的字符串使用字段方法

// site/plugins/my-methods/index.php
Kirby::plugin('your/plugin', [
    'fieldMethods' => [
        'toBlue' => function($field) {
            return '<span style="color: #384d9d">' . $field->value . '</span>';
        }
    ]
]);

在您的蓝图

columns:
  title:
    text: '{{ page.title.toBlue }}'

将在表格中显示蓝色标题

4.3. `type`

类型: string，默认: text

列的内容类型。大多数情况下，您希望保留默认类型，但在某些情况下，为了正确地进行排序和定位，必须明确地设置它。选项包括

text: 默认，左对齐
number: 右对齐
decimal: 右对齐，保留两位小数
percentage: 右对齐，期望0到1之间的十进制数（如0.03），并以3.00%的格式显示
boolean: 右对齐
date: 右对齐，期望日期的字符串表示，以及另外两个必需的选项。

表格需要知道您传递日期的格式（dateInputFormat）以及您希望如何显示它们（dateOutputFormat）。这里有一个小细节，因为PHP日期和JS日期库的语法不同。例如

columns:
  title:
    type: date
    # return the date as 2018-12-24
    text: '{{ page.modified("Y-m-d") }}'
    # tell the table to expect a date formated as 2018-12-24
    dateInputFormat: 'YYYY-MM-DD'
    # output it as Dec 24th 2018
    dateOutputFormat: 'MMM Do YYYY'

4.4. `width`

类型: string，默认: auto

列在表格中的宽度，以分数形式书写并自动计算（1/2，1/3，1/6，32/94等）

columns:
  title:
    width: 3/4

4.5. `class`

类型: string，默认: null

允许您为列添加自定义类。一个myClass类将作为.head-myClass添加到其th中，作为.row-myClass添加到其td中。

columns:
  title:
    class: myClass

4.6. `sortable`

类型: Boolean，默认: true

启用/禁用列的排序。

columns:
  title:
    sortable: true

4.7. `searchable`

类型: Boolean，默认: true

如果为false，则此列将被全局搜索忽略。

columns:
  title:
    searchable: true

4.8. `mobile`

类型: Boolean，默认: false

默认情况下，只有第一列在移动视口中显示。您可以通过将其设置为true来更改您想要的任何列。

columns:
  title:
    mobile: true

请注意，只能有一个列具有此选项。

5. 完整示例

以下是如何在README上方重现截图的方法

首先，我们需要在我们的子蓝图（摄影师姓名、类别、项目日期）中拥有一些可用字段

...
fields:
  photographer:
    type: text
  category:
    type: select
    options:
      architecture: Architecture
      culture: Culture
      environment: Environment
      gastronomy: Gastronomy
      science: Science
  date:
    type: date

然后我们创建我们的分页表部分，并设置关联的列

sections:
  mypagetable:
    headline: Projects index
    type: pagetable
    status: all
    image:
      cover: true
    columns:
      title:
        label: Title
        text: '{{ page.title }}'
        width: 1/3
      photographer:
        label: Photographer
        text: '{{ page.photographer }}'
      category:
        label: Category
        text: '{{ page.category }}'
      date:
        label: Date
        type: date
        text: '{{ page.date.toDate("Y-m-d") }}'
        dateInputFormat: 'YYYY-MM-DD'
        dateOutputFormat: 'MMMM YYYY'
        width: 1/6

到此为止，所有信息都应显示，但类别仍然缺少任何样式。我们需要在这里调用一个字段方法，我们需要在一个自定义插件中注册它。我们将创建一个 site/plugins/my-methods/index.php 并编写

Kirby::plugin('your/plugin', [
    'fieldMethods' => [
        'toLabel' => function($field) {
          $value = $field->value;
          return '<span class="category-label" data-category="'. $value .'">' . $value . '</span>';
        },
    ]
]);

现在每个标签都将这样渲染

<span class="category-label" data-category="architecture">architecture</span>

我们正在路上，但还没有样式。让我们创建一个 assets/css/panel.css 样式表（如果您还没有的话），并添加一些规则

.k-pagetable-section .category-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 3px;
}
.k-pagetable-section .category-label[data-category="architecture"] {
  background: #d7e1e9;
}
.k-pagetable-section .category-label[data-category="culture"] {
  background: #f5e6bf;
}
.k-pagetable-section .category-label[data-category="environment"] {
  background: #cae5dd;
}
.k-pagetable-section .category-label[data-category="gastronomy"] {
  background: #e0d7dd;
}
.k-pagetable-section .category-label[data-category="science"] {
  background: #f9e9e0;
}

别忘了告诉面板您想加载该样式表，通过在您的 site/config/config.php 中添加它

<?php

return array(
  'panel' => array('css' => 'assets/css/panel.css'),
);

最后一步是更改我们在蓝图中的列文本，并附加我们的新 toLabel 方法

category:
  label: Category
  text: '{{ page.category.toLabel }}'

你现在应该得到与上述截图完全相同的设置。

6. 许可证

麻省理工学院

7. 致谢

非常感谢 stevenworldplay 提供的 query 选项，来自 k3-pagesdisplay-section
本部分是基于 vue-good-table 构建的。
请查看 https://github.com/jongacnik/kirby-index-field 获取 K2 版本。

SylvainJule / pagetable

维护者

详细信息

README

Kirby 3 - Pagetable

概述

1. 安装

2. 蓝图使用

3. 全局选项

3.1. 继承选项

3.2. 限制选项

3.3. 可见性选项

3.4. 查询

3.5. 自定义字符串

3.6. 面板/预览链接

4. 列选项

4.1. `label`

4.2. `text` (必需)

4.3. `type`

4.4. `width`

4.5. `class`

4.6. `sortable`

4.7. `searchable`

4.8. `mobile`

5. 完整示例

6. 许可证

7. 致谢

SylvainJule / pagetable

维护者

详细信息

README

Kirby 3 - Pagetable

概述

1. 安装

2. 蓝图使用

3. 全局选项

3.1. 继承选项

3.2. 限制选项

3.3. 可见性选项

3.4. 查询

3.5. 自定义字符串

3.6. 面板/预览链接

4. 列选项

4.1. label

4.2. text (必需)

4.3. type

4.4. width

4.5. class

4.6. sortable

4.7. searchable

4.8. mobile

5. 完整示例

6. 许可证

7. 致谢

4.1. `label`

4.2. `text` (必需)

4.3. `type`

4.4. `width`

4.5. `class`

4.6. `sortable`

4.7. `searchable`

4.8. `mobile`