Marp 样式优化

本文档介绍了用于 Marp 生成幻灯片的移动端优化脚本。

概述

Marp 生成的 HTML 幻灯片在移动设备上的控制栏（导航按钮）未做优化：按钮过小、位置不合理，部分功能在移动端无用。由于幻灯片嵌入在 iframe 中，父页面的 CSS 无法影响幻灯片控件。

问题说明

Marp 默认移动端体验的问题

• 触控目标过小：导航按钮仅 32px，难以准确点击
• 位置不合理：控制栏距离底部太远，拇指操作不便
• iframe 隔离：父页面 CSS 无法样式化嵌入的幻灯片控件
• 无用功能：演讲者按钮在移动端无实际用途
• 无响应式设计：布局固定，无法适配不同屏幕尺寸

解决方案架构

直接在 marp 的 markdown 文件中增加 css 配置，例如：

<style>
/* 移动端优化样式 */
@media (max-width: 768px) {
  .controls {
    bottom: 20px;
  }
  .control-button {
    width: 48px;
    height: 48px;
  }
}
</style>

使用方法

我已经在 archetypes 目录中创建了 slide 类型，你只需要使用 hugo 命令先创建一个 markdown，比如：

hugo new -k slide content/zh/slide/new-slide/marp.md

这其中已经包含了 marp 的 css 配置，在生成的 markdown 文件中编写幻灯片。

到生成的 marp.md 的目录下执行：

marp marp.md -o marp.html

生成的 HTML 文件将自动应用移动端优化样式。

最后将生成的幻灯片迁移到 static/slides/new-slide/ 目录下即可。

最后需要使用 shortcode 短代码来引用这个幻灯片：

{{< slide src="slides/new-slide/marp.html" >}}