如何在现有Hugo静态博客中添加reveal.js演示文稿？

1. 在Hugo中创建演示文稿入口 #

• 在Hugo项目的content目录下新建presentations文件夹，添加index.md文件，通过Front Matter指定自定义布局：

---
title: "我的演示文稿集"
layout: presentations
---

• 在layouts目录下创建presentations.html布局文件，作为所有reveal.js演示的基础容器。

2. 引入reveal.js核心CDN资源 #

直接在presentations.html的<head>和<body>中添加CDN链接，核心资源无需本地存储：

<!-- 核心CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
<!-- 默认主题（可被自定义主题覆盖） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/white.css">

<!-- 核心JS -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>

3. 处理自定义主题与本地资源 #

• 将自定义主题CSS文件放到Hugo项目的static/css目录下，在CDN默认主题之后引入，确保优先级更高：

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/custom-reveal-theme.css">

• 其他本地静态资源（如自定义插件、本地图片）统一放到static目录，引用时使用Hugo的{{ .Site.BaseURL }}变量拼接路径。

4. 补充所需插件（CDN或本地引入） #

reveal.js官方CDN核心包不包含数学公式、菜单、代码高亮等扩展插件，需单独处理：

• 数学公式（MathJax）：引入MathJax CDN，并在reveal.js初始化时配置：

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
  Reveal.initialize({
    math: {
      mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
      config: 'TeX-AMS_HTML-full',
      tex2jax: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    }
  });
</script>

• 代码高亮：引入highlight.js的CDN资源，开启reveal.js的高亮配置：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/highlight.js"></script>
<script>
  Reveal.initialize({
    highlight: {
      highlightOnLoad: true,
      theme: 'github'
    }
  });
</script>

• 菜单插件：若需菜单功能，可将reveal.js-menu插件的JS/CSS文件放到static目录，然后引入并配置：

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/menu.css">
<script src="{{ .Site.BaseURL }}js/menu.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMenu ]
  });
</script>

5. 整合演示文稿内容 #

• 单个演示文稿可直接写在presentations.html的<div class="reveal"><div class="slides">标签内，每个幻灯片用<section>包裹：

<div class="reveal">
  <div class="slides">
    <section>首页幻灯片</section>
    <section>
      <h2>数学公式示例</h2>
      <p>$E=mc^2$</p>
    </section>
    <section>
      <h2>交互式图表</h2>
      <iframe src="{{ .Site.BaseURL }}charts/bar-chart.html" width="800" height="600"></iframe>
    </section>
  </div>
</div>

• 多个演示文稿可通过Hugo短代码或模板拆分，在presentations/index.md中调用不同短代码加载对应演示内容，实现单页多演示切换；也可为每个演示文稿创建单独的Hugo页面（如content/presentations/topic1.md）。

6. 部署上线 #

执行hugo命令生成静态文件，将public目录下的所有文件上传到任意静态托管服务（如自有服务器、Vercel、Netlify），无需依赖GitHub即可完成部署。

内容的提问来源于stack exchange，提问作者Alasdair