SuperAPI AI 工具集

md-section

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:把任意 HTML 布局/模板转换为 WordPress 区块编辑器标记,以 marketers-delight/section 动态容器区块为主,配合核心区块组合,替代 Custom HTML,便于在编辑器中继续编辑。适用于把 HTML 模板或组件转为可编辑区块、在编辑器中搭建复杂布局(hero、卡片网格、选项卡面板)、用户粘贴 HTML 后希望得到区块等场景。

主要能力:区块名为 marketers-delight/section,属性包括 htmlTag(默认 div,可选 section、article、aside、header、footer、main、nav、figure、details 或 custom)、customTag、className、anchor、align(wide/full)、sectionCSS、htmlAttributes、ariaHidden、ariaLabel、ariaLabelledBy、role、customRole、hidden。htmlAttributes 仅允许 data-、aria- 前缀及 tabindex、style、title、lang、dir、translate、loading、fetchpriority、rel、target、width、height、viewbox、preserveaspectratio、fill、stroke、opacity,onclick、onerror、src、href 等不安全属性会被静默丢弃。

转换流程:先删除 link stylesheet、script src 和全局 style 块;把布局内使用的 CSS 规则移入最外层 Section 的 sectionCSS(含 @keyframes、@media);再映射元素——结构标签与 div 转 Section,h1-h6 转 core/heading,p 转 core/paragraph,ul/ol、img、video、audio、blockquote、pre/code、table、hr 分别转对应核心区块,装饰性内联 SVG 转 core/html,dl 用 customTag=dl。class、id、role、aria-、hidden、data-、tabindex、style 分别映射到 Section 属性;核心区块用其原生 style JSON 承载内联样式。script 标签全部剥离,需说明哪些交互(tabs、accordion、marquee、滚动效果)需重新实现。

输出:始终写入文件而非聊天内联,文件名形如 {descriptive-name}-blocks.html,仅含区块标记,不包含 DOCTYPE/html/body,不写描述性注释。

限制:a 标签不能直接用 htmlTag=a 包装;img、h1-h6、p 不应使用 Section;动态区块分隔符之间只能放内部区块;全局 CSS 只放最外层 Section;htmlAttributes 中包含引号需转义。