README

功能

此模块是自定义构建系统和模块化模板系统的坚实基础。它提供了一系列基于 PageTable 的内容元素，并通过 ProcessWire 后端添加直观的用户界面，使内容创建和编辑尽可能简单和有趣。它提供创建、发布、移动、删除、隐藏、复制和粘贴内容元素的功能。

模块的渲染逻辑通过 Shadow DOM 与 ProcessWire 后端范围分离，允许自定义后端元素渲染和样式，从而使后端预览可以与前端完全相同，或任何您可以想象的样子。它包含一些辅助函数，简化了内容元素的处理。

该模块扩展了 Ryan 的 PageTable，并受到 mademyday 的 PageTableExtended 的强烈启发。向他们两位表示衷心的感谢。

功能

后端自定义渲染（例如前端预览）。内容元素封装在 Shadow DOM 中。
即时发布和取消发布。
复制和粘贴时检查允许的模板（页面范围）。
在 ProcessWire 模态中编辑。
即时删除内容元素。
可以轻松添加自定义 JavaScript 操作。
支持页面引用。
在所有引用页面上触发保存（例如清除缓存）。
在编辑视图中显示“查看”链接，该链接指向引用页面 /link/to/parent/#s[PageId]。
操作内容元素的面包屑导航（显示第一个引用页面）。
支持 ProcessGraphQL，并附加了模块 GraphQLFieldtypePageTable 和 GraphQLFieldtypePageTableNext

安装（快捷方式）

将此模块的文件复制到 /site/modules/PageTableNext/，并安装 PageTableNext、FieldtypePageTableNext 和 InputfieldPageTableNext。
在模块配置中输入您喜欢的字段名，然后点击“设置字段”。
将字段添加到您的页面模板中，并将一些内容元素模板添加到 PageTableNext 字段中。

安装（长方式）

将此模块的文件复制到 /site/modules/PageTableNext/，并安装 PageTableNext、FieldtypePageTableNext 和 InputfieldPageTableNext。
创建一个新的模板（例如“content-elements”）。
- 在“访问”选项卡中设置权限管理为“是”，然后勾选“查看页面”和“访客”。
- 可选：在“家族”选项卡中，将选项“此模板可以用于新页面吗？”设置为“一个”。
- 可选：在“高级”选项卡中，勾选选项“不允许页面更改模板？”和“不允许未发布的页面”。
创建一个新的页面，该页面将作为内容元素的容器（作为 Admin 的子级），标题例如“内容元素”。选择步骤 2 中的模板（“content-elements”）。
创建一个新的 PageTableNext 类型的字段（例如 ptn）
- “详细信息”选项卡
  - 在“选择项目模板”下选择一个或多个内容元素模板。
  - 可选：在“选择项目父级”下选择您在步骤 3 中创建的容器页面。
  - 可选：在“页面行为”下配置以下内容
    - 删除：删除它们
    - 回收站：无操作
    - 取消发布：无操作
- “输入”选项卡
  - 可选：为“自动页面名称格式”添加 {template.label|template.name}。
  - 内容元素模板的路径：添加内容元素的端前后端渲染路径。路径相对于 /site/templates/fields/，例如 "ptn/"。PHP模板文件的名称必须与模板名称匹配。
将模块文件夹中的文件 /site/modules/PageTableNext/data/ptn.php 复制到文件夹 /site/templates/fields/[字段名].php。将 "ptn" 替换为您的字段名
将字段添加到您的页面模板中，并为新的 PageTableNext 字段添加一些内容元素模板。

渲染

前端

使用文件字段渲染输出。您可以在此处找到更多信息：更多信息。

// if your field name is "ptn":
echo $page->render->ptn;

后端

所有元素都在后端以自定义HTML元素（<ptn-content>）的形式渲染。样式与后端分离。这样，内容元素的渲染被封装并从后端分离。您可以通过扩展类 "PtnContent" 使用不同的自定义元素（重写自定义元素）。

class PtnContent extends HTMLElement {
	constructor() { /* some code here*/ }
}

customElements.define('ptn-content', PtnContent);

配置/添加新字段

模块 > 配置 > PageTableNext

字段设置

字段 > ptn > 详细信息

为项目选择一个或多个模板

在此处，您可以选择内容元素的模板。这些模板在您想创建页面上的新内容元素时可用。

为项目选择父元素

如果选择，所有新的内容元素都将存储为所选页面的子页面。如果没有选择页面，内容元素将作为引用页面的子页面创建。

API

该字段本身返回内容元素的 PageArray。如果您想，您可以创建自己的渲染

/** @var PageArray $contentElements */
$contentElements = $page->ptn;
$renderIndex = 0;

/** @var Page $contentElement */
foreach($contentElements as $contentElement) {
    echo $page->renderValue(
        $contentElement->set('_myRenderIndex', $renderIndex++),
        'ptn/' . $contentElement->template->name
    );
}

自定义/重写输出文件

可以重写 /site/modules/PageTableNext/templates/ 文件夹中的所有文件。只需在您的模板目录中创建一个文件夹 /site/templates/PageTableNext 并将相应的文件复制到那里。现在您可以编辑文件。

样式

变体 1

将您的 CSS 样式文件复制到文件夹 /site/templates/PageTableNext/content.css 或设置到您的样式文件的符号链接。

cd site/templates/PageTableNext/
ln -s path/to/your/style.css content.css

变体 2

将文件 /site/modules/PageTableNext/templates/ptn-content.php 复制到目录 /site/templates/PageTableNext/ 并更改下面的样式文件路径

扩展自定义元素

如果您想在创建内容元素时执行自己的代码，例如使用 Alpine 初始化页面树，您可以扩展自定义元素。例如，您可以将自己的代码添加到 ptn.php 文件中。

第一步

class MyContent extends PtnContent {
	constructor() {
		super();

		// Add alpine init to the custom element
		document.addEventListener('alpine:init', () => {
			Alpine.initTree(this.shadowRoot);
			setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 400)
		}, { once: true})
	}
}

// Define new custom element
if(!customElements.get('my-content')) {
	customElements.define('my-content', MyContent);
}

第二步

重写 ptn-content.php。前往文件底部，并将标签名称从 <ptn-content> 更改为 <my-content>

//...
<my-content>
    <template id="content">
        <?php
            $cssFilePath = $ptn->getFileLocation('content.css', 'paths');
            $cssFileUrl = $ptn->getFileLocation('content.css', 'urls');
            $cssFileUrl = $cssFileUrl . '?modified=' . filemtime($cssFilePath);
            ?>
        <link rel="stylesheet" href="<?= $cssFileUrl; ?>">
        <div class="backend" data-of="<?= $value->of(); ?>">
            <?= $ptn->renderValueWrapper($page, $value); ?>
        </div>
    </template>
</my-content>

添加自定义操作

为了添加新的 JavaScript 操作，请按照以下两个步骤操作。将按钮添加到文件 ptn-content 中的动作列表中。

<a
		class="uk-icon-button uk-icon ptn_actions_custom"
		data-actioncustom='{"name": "myaction", "params": "your method input"}'
		href="#"
		uk-icon="icon: bolt; ratio: .8"
		title="<?= __('My Custom Action'); ?>"
></a>

在文件 ptn.php 中注册您的操作。

<script>
	$.InputfieldPageTableNextContentElementCustomActions.actionMyaction = function (params, event) {
		/** PointerEvent */
		const clickEvent = event;

		/** mixed (your custom parameter) */
		const myParams = params;

		/** $.InputfieldPageTableNextContentElement */
		const contentElementInstance = this;

		/** $.InputfieldPageTableNext */
		const table = this.getParent();
	}
</script>

GraphQL

内容元素也可以使用 GraphQL 进行查询。为此，数据被分为三个新字段：id、type 和 render。所有其他页面字段仍然可用（创建时间、名称、引用、模板...）。

id 是内容元素的页面 ID。 type 是 PascalCase 中的模板名称。
render 是从内容元素模板文件 /site/fields/[content-element-template-name].php 中的一切。此模板也用于后端的预览。如果您想在此处使用不同的模板，例如返回不同的字段或序列化对象，您可以创建一个带有后缀 ".graphql" 的附加模板文件 /site/fields/[content-element-template-name].graphql.php。

请求

query {
    home {
        first {
            id
            name
            title
            ptn {
                getTotal
                list {
                    id
                    type
                    render
                }
            }
        }
    }
}

响应

{
  "data": {
    "home": {
      "first": {
        "id": "1",
        "name": "home",
        "title": "Home",
        "ptn": {
          "getTotal": 2,
          "list": [
            {
              "id": "1193",
              "type": "CeText",
              "template": "ce-text",
              "render": "<h1>Hello World</h1>"
            },
            {
              "id": "1194",
              "type": "CeImage",
              "template": "ce-image",
              "render": "<h1>Nice pictures</h1> <img ....>"
            }
          ]
        }
      }
    }
  }
}

使用Postman的GraphQL查询

待办事项

使用Alpine.js重构内容元素处理
视频教程

nr / pagetablenext

维护者

详细信息