README

Craft CMS 3 的 Htmx 插件

此插件已停止维护，并由 Sprig 取代。

提供与 Htmx 和 Craft CMS 3 一起使用的组件和辅助工具。

插件将自动将 Htmx 发出的任何动作请求通过 htmx/route 控制器路由，以确保结果始终以 text/html 格式呈现，并且不进行任何重定向。

变量

craft.htmx 变量（以及简写版本 hx）可在您的 twig 模板中使用。它提供组件以及通过 Htmx 请求头 传递的值。

craft.htmx.component(template, options = {})

使用提供的模板渲染一个响应式组件。

{{ hx.component('path/to/template', { 
    params: {
        entryId: entry.id,
        title: entry.title,
    },
}) }}

params 会自动在组件中作为 twig 变量可用

Entry ID: {{ entryId }}

{# Add `hx-get` to make the input field reactive #}
<input hx-get type="text" name="title" value="{{ title }}">
{{ title|length }} characters of max 255

{# Any `hx-` attributes can be used #}
<button hx-get hx-confirm="Are you sure?">Refresh</button>

craft.htmx.get(tag, options = {})

使用提供的标签和选项渲染一个 get 组件。

{# Minimal example #}
{{ hx.get('div', { 
    content: 'Like', 
}) }}

{# Example with all possible options #}
{{ hx.get('button', {
    url: '/like',
    content: 'Like',
    params: {
        entryId: 1,
    },
    hx: {
        trigger: 'click',
    },
    attributes: {
        class: 'btn',
    }
}) }}

输出将如下所示

{# Minimal example #}
<div hx-get="">Like</div>

{# Example with all possible options #}
<button hx-get="/like?entryId=1" hx-trigger="click" class="btn">Like</button>

craft.htmx.post(tag, options = {})

使用提供的标签和选项渲染一个 post 组件。如果启用了 CSRF 验证，将自动添加 CSRF 令牌。

{# Minimal example #}
{{ hx.post('form', {
    content: '<input type="submit" value="Like">',
}) }}

{# Example with all possible options #}
{{ hx.post('form', {
    url: '/like',
    content: '<input type="submit" value="Like">',
    params: {
        entryId: 1,
    },
    hx: {
        confirm: 'Are you sure?',
    },
    attributes: {
        class: 'form',
    }
}) }}

输出将如下所示

{# Minimal example #}
<form hx-post="">
  <input type="hidden" name="CRAFT_CSRF_TOKEN" value="UIfhSl2qN0084dgj6NJdHcCTnL5xFPJ...">
  <input type="submit" value="Like">
</form>

{# Example with all possible options #}
<form hx-post="/like" hx-confirm="Are you sure?" class="form">
  <input type="hidden" name="CRAFT_CSRF_TOKEN" value="UIfhSl2qN0084dgj6NJdHcCTnL5xFPJ...">
  <input type="hidden" name="entryId" value="1">
  <input type="submit" value="Like">
</form>

craft.htmx.script(attributes = {})

返回一个脚本标签，用于包含来自 unpkg.com 的最新版本的 Htmx。

<script src="https://unpkg.com/htmx.org"></script>

craft.htmx.request

如果这是一个 Htmx 请求，则返回 true，否则返回 false。

craft.htmx.trigger.id

返回触发请求的元素的 ID。

craft.htmx.trigger.name

返回触发请求的元素的名字。

craft.htmx.target.id

返回目标元素的 ID。

craft.htmx.url

返回浏览器的 URL。

craft.htmx.prompt

返回通过 hx-prompt 提示用户输入的值。

craft.htmx.eventTarget.id

返回触发请求的事件的原始目标元素的 ID。

craft.htmx.element.id

返回当前活动元素的 ID。

craft.htmx.element.name

返回当前活动元素的名称。

craft.htmx.element.value

返回当前活动元素的值。

要求

Craft CMS 3.0.0 或更高版本。

安装

使用 composer 安装插件。

composer require putyourlightson/craft-htmx:^0.1.0

许可证

此插件在 MIT 许可证下免费使用。

由 PutYourLightsOn 创建。