HTML PPT Studio 版式组件目录实战指南：31+ 种单页 Layout 的选用、拼装与源码解析

AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载本文以 references/layouts.md 为骨架系统梳理 HTML PPT Studiohtml-ppt-skill中templates/single-page/下的全部可复用布局它们如何作为独立页面运行、如何被拷贝拼装进新 Deck、图片版式的裁剪与比例体系如何工作以及每一类布局的适用场景。读完本文你将能像搭积木一样快速组合出一套结构完整、图文规范的专业 HTML 演示文稿并理解底层assets/base.css、assets/runtime.js与配套脚本scripts/new-deck.sh、scripts/render.sh的具体配合方式。一、Layout 的存放位置与两种使用方式在 HTML PPT Studio 中每个布局都是一个可独立运行的完整 HTML 页面统一存放在 templates/single-page/ 目录下文件命名即布局名如cover.html、two-column.html、image-single.html。每个文件都带有真实感十足的示例数据你可以直接双击文件、用 Chrome 打开看到的就是一个可以马上投入演示的成品页面。使用布局有两种典型方式组合进新 Deck打开某个布局文件把其中的section classslide…/section代码块或连续多块复制进你的 Deck HTML然后替换掉示例数据即可。整页单独演示因为每个文件本身就是自足的自带fonts.css、base.css、主题 CSS、动画 CSS 与runtime.js引用单个布局也可以独立放映。以 templates/deck.html 为模板的 Deck 已经替你接好了所有共享资源其head中的接线方式如下link relstylesheet href../assets/fonts.css !-- 字体 -- link relstylesheet href../assets/base.css !-- 布局/组件基础样式 -- link relstylesheet idtheme-link href../assets/themes/minimal-white.css !-- 主题 -- link relstylesheet href../assets/animations/animations.css !-- 动效 -- ... script src../assets/runtime.js/script !-- 键盘导航/主题切换/动效运行时 --也就是说当你把某个单页布局的section classslide代码块拷入 Deck 时不需要再拷贝该布局文件头部的 CSS 引用deck.html已经统一完成装配你只需要关注 slide 内部的标记结构。这也是“共享 CSSbase、theme、animations由 deck.html 统一接线”的由来。二、图片版式的核心.img-frame框架体系image-*系列布局共 7 个使用的是真实的img元素而不是背景图。关键设计在于裁切与比例由框架.img-frame控制而不是由图片自己控制。因此当你把演示照片换成自己的素材时唯一需要改动的就是一个src属性布局绝不会因为图片尺寸不同而破版。以下是原文档给出的.img-frame完整参数表对照 assets/base.css 中的实现逐一展开类 / 变量作用源码实现要点.img-frame图片的“画框”。拥有宽高比与裁切权内部img以object-fit: cover填满aspect-ratio: var(--img-ratio, 16/10)overflow: hidden圆角取var(--radius)、阴影取var(--shadow)背景为var(--surface-2).img-frame.contain改为 **letterbox信箱式**而非裁切。截图、示意图、Logo 必须用它——裁切会丢失信息背景切换为var(--bg-soft)、去阴影、加1px solid var(--border)边框img使用object-fit: contain--img-ratio框架宽高比默认16/10通过 CSS 变量覆盖例如--img-ratio:4/5可得到竖版构图--img-posobject-position例如top可保住图片顶部如标题、人脸默认center经object-position: var(--img-pos, center)生效.img-scrim图片底部渐变遮罩让白色文字在照片上保持可读linear-gradient(180deg, transparent 42%, rgba(8,10,20,.72))绝对定位铺满整个框架.img-cap框架下方的图注文字font-size:14px; color: var(--text-3)上边距 10px.img-tag框架左上角的小药丸标签半透明深色底rgba(10,12,20,.55) 白色大写字母 backdrop-filter: blur(6px)2.1 一张图讲清楚一件事image-single.htmlimage-single.html 是“单图 图注”的典型版式专为截图、图表、架构图设计——框架使用.img-frame.contain保证整张图完整可见、绝不裁切figure classimg-frame contain img src../../assets/demo-images/shot-ui.svg alt产品主界面截图 /figure p classimg-cap图 1 · 新版工作台。左侧是任务流右侧是实时指标。/p该布局还在页面级style中做了高度自适应处理.fig让框架吃掉标题之外的所有剩余高度flex:1; min-height:0因此无论在什么窗口比例下页面都能撑满而不错位。2.2 左图右文image-text-split.html与flipimage-text-split.html 是“图文各半”的 50/50 版式核心结构如下div classsplit div classcol-img anim-fade-right>const accent css.getPropertyValue(--accent).trim(); const text2 css.getPropertyValue(--text-2).trim(); const border css.getPropertyValue(--border).trim(); new Chart(document.getElementById(c), { type: bar, data: { /* backgroundColor: accent … */ }, options: { scales: { x: { ticks: { color: text2 }, grid: { color: border } }, … } } });这意味着所有 Chart.js 图表天然继承当前主题——运行时按T切换主题后刷新页面图表配色即与全局一致。3.4 代码与终端Code terminal文件用途结构要点code.html语法高亮代码块highlight.jsJS 示例代码卡片 文件名眉题diff.html手写实现的 /− diff 视图绿色行、红色−行纯 CSS 完成terminal.html带红绿灯头部的终端窗口模拟自带blink光标闪烁动画该页单独以terminal-green主题渲染氛围更真实3.5 图表与流程Diagrams flows文件用途结构要点flow-diagram.html5 节点管道流程箭头连接可高亮一个节点适合介绍流水线、调用链arch-diagram.html三层架构网格经典 presentation / business / data 分层表达process-steps.html4 个编号步骤卡片grid g4 大号序号mindmap.html放射状思维导图SVG 路径绘制动画借助path-draw动效逐笔画出连线3.6 计划与对比Plans comparisons文件用途结构要点timeline.html5 点横向时间轴带圆点适合里程碑回顾roadmap.html4 列 NOW / NEXT / LATER / VISION规划类演示首选gantt.html12 周甘特图5 条并行轨道项目排期展示comparison.htmlBefore vs After 双面板卡片改造前后对照pros-cons.html优点/缺点双卡片决策分析场景todo-checklist.html勾选/未勾选状态的清单状态推进演示3.7 视觉类Visuals文件用途关键区别image-single.html一张图不裁切.img-frame.contain 图注。截图、示意图、图表专用图片信息完整保留image-full-bleed.html一张图铺满整页渐变遮罩 标题压在图上。照片专用配合.img-scrim保证文字可读image-text-split.html一张图 文字50/50。给.split加flip可把图换到右侧图文论证场景image-gallery.html3–6 张图统一网格、每张一条图注。混合比例的图由框架统一归一化不同来源截图混排也不乱image-compare.html两张图并排before/after带标签与结论行改造对比、修图对比image-hero.html全出血 heroKen Burns 渐变背景无真实图片适合抽象大气开场image-grid.html7 格bento 网格渐变占位无真实图片信息密度高的聚合页3.8 收尾Closers文件用途结构要点cta.html行动号召页大号渐变标题 按钮渐变文字 按钮行thanks.html最终致谢页彩带爆裂动效依靠confetti-burst动画收尾四、按场景快速选版Picking a layout原文档给出的选版清单如下逐条保留并补充说明开场cover.html通常随后接toc.html章节分隔每个主要章节前放section-divider.html核心正文bullets.html、two-column.html、three-column.html展示数字单个大数字用stat-highlight.html四个一组用kpi-grid.html展示图表chart-bar.html/chart-line.html/chart-pie.html/chart-radar.html按数据类型选柱/线/环/雷达展示差异或变化文本对照用comparison.html代码差异用diff.html权衡分析用pros-cons.html展示计划timeline.html里程碑、roadmap.html四象限规划、gantt.html排期、process-steps.html步骤展示一张图截图/示意图/图表永远用image-single.htmlcontain不裁切希望照片撑满整页则用image-full-bleed.html图文并重image-text-split.html展示多张图均匀排布用image-gallery.html3–6 张参差不齐的 bento 排布用image-grid.html展示变化对比image-compare.html两张图、comparison.html纯文字展示架构arch-diagram.html、flow-diagram.html、mindmap.html代码/演示code.html、terminal.html收尾cta.html→thanks.html。五、命名与结构约定构建自有布局的规范原文档定义了所有布局共同遵守的结构契约。这些类名在 assets/base.css 中均有对应实现是保证“任意布局混装进同一 Deck 依然风格统一”的根本元素写法base.css 中的实现幻灯片section classslide>section classslide is-active>./scripts/new-deck.sh name [output-parent-dir] [-t template]默认模板为deck-t也可指定某个 full-deck 名称如pitch-deck、某个单页布局名如arch-diagram或任意.html文件路径输出目录默认落在skill/examples/也可传绝对/相对路径脚本会自动重写拷贝出的 HTML/CSS/JS 中的../assets/前缀使资源引用在任意嵌套深度、甚至在 skill 目录之外都能正确解析最关键的是其自检机制脚本会列出页面中所有本地href/src/url()引用逐条用词法路径解析lexjoin避免 shell 对..跟随符号链接的差异任何一个引用指向不存在的文件都会报错退出对应脚本注释中的历史 bug #19 修复。./scripts/new-deck.sh graphify-talk # 生成 examples/graphify-talk/index.html open examples/graphify-talk/index.html # Chrome 打开按 T 切主题、← → 翻页、O 概览6.2 无头渲染scripts/render.sh./scripts/render.sh html-file [N|all] [out-dir]render.sh deck.html→ 输出第 1 页 PNGrender.sh deck.html 6→ 输出 6 页内部通过#/k逐页定位render.sh deck.html all→ 自动统计section classslide数量正则按完整 class 词匹配可正确识别slide is-active等多类名组合后逐页输出到stem-png/目录基于本机 Chrome 的--headlessnew --window-size1920,1080截图并通过“文件是否存在且非空”而非 Chrome 退出码来判定成败。这也解释了 terminal.html 页面里那段“终端演示”——新开一个 deck、用 Chrome 打开、渲染成 1920×1080 PNG正是上面两个脚本的完整使用闭环。七、实战清单组装你的第一套 Deck最后把原文档的选版逻辑浓缩为一份可照做的拼装顺序复制 templates/deck.html 作为起点或直接./scripts/new-deck.sh my-deck开场放cover.html的 slide 块替换 kicker、标题、lede 与药丸行数据用toc.html列出议程2×3 卡片网格每个大章节前插section-divider.html正文按“论证密度”选版要点用bullets.html对照用two-column.html/three-column.html数据用kpi-grid.html/stat-highlight.html图表按类型从四个 Chart.js 版式中选需要图时严守规则截图/图表/架构图一律image-single.htmlcontain 不裁切照片压满页用image-full-bleed.html图文各半用image-text-split.html对比用image-compare.html收尾cta.html→thanks.html检查每个 slide 是否带data-title与.notes备注然后按← →翻页、T换主题、A切动效、O看概览最后用render.sh输出 PNG 交付。至此references/layouts.md 中描述的 36 个布局已全部映射到可运行的源码文件图片框架的每一个类都能在 assets/base.css 找到实现计数动画与键盘导航能在 assets/runtime.js 中验证而 scripts/new-deck.sh 与 scripts/render.sh 则把“拷贝 slide 块”这一手工动作升级为可校验、可渲染的完整流水线。你需要的只是一份内容大纲和一套选好的版式组合。赞分享AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载相关推荐如何用PPTXjs实现网页版PPT预览超简单的PPT转HTML工具指南如何用PPTXjs实现网页版PPT预览超简单的PPT转HTML工具指南 PPTXjs是一款基于jQuery的实用插件能轻松将PowerPoint .pptxKaneo 单选组件实战coss Radio Group 的选用决策、安装配置与源码级用法解析Kaneo 单选组件实战coss Radio Group 的选用决策、安装配置与源码级用法解析 本指南围绕开源项目 Kaneo README.md http企业应用后端前端Formily Next 的 Radio 单选框组件三种 Schema 写法与源码级封装解析Formily Next 的 Radio 单选框组件三种 Schema 写法与源码级封装解析 本文基于 Formily 2.x 的 formily/next前端UI组件上一篇pydantic-ai 新增模型支持实战指南从模型发布到 PR 合入的完整接线流程下一篇Mercure配置终极指南从基础设置到高级调优的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考