Alpine.js 的基础使用说明

本文属于知识库测试文档，用于验证专题聚合、TOC、样式组件、代码块渲染效果。

简介

DayuPress 前端交互优先采用 Alpine.js，不引入 Vue、React 等重型框架。
所有交互逻辑轻量化，无多余动画，只完成基础功能：菜单展开、搜索、弹窗、主题色切换。

引入方式

wp_enqueue_script(
    'dayu-alpine',
    get_template_directory_uri() . '/assets/js/alpine.min.js',
    [],
    '3.14.0',
    true
);

基础示例：下拉子菜单

<div x-data="{open:false}">
    <button @click="open=!open">菜单</button>
    <div x-show="open">子菜单内容</div>
</div>

安全规范清单

• 输出内容统一使用 esc_html() / esc_attr() / esc_url()
• 表单提交必须携带 wp_nonce 校验
• 用户输入使用 sanitize_text_field 系列函数过滤
• 图片输出使用 the_post_thumbnail() + srcset

常见疑问

能不能换成原生JS？

可以。简单交互优先原生JS；复杂一点的状态切换（搜索弹窗、多选面板）再使用 Alpine.js。

会影响无障碍评分吗？

只要配套 ARIA 属性、键盘回车/ESC关闭逻辑，不会负面影响无障碍分数，目标保持 Lighthouse ≥90。