如何在Deno Fresh中使用reveal.js？为何显示‘Resume presentation’

我认为reveal.js是原生JavaScript（vanilla JS），与Deno搭配使用应该不存在问题。我的代码如下：

routes/index.tsx：

import Island from "../islands/Island.tsx";

export default function Home() {
  return (
    <Island />
  );
}

islands/Island.tsx：

import {useEffect} from 'preact/hooks'
import Reveal from '../reveal/js/index.js';

export default function Island() {
  useEffect(()=> {
    const deck = new Reveal()
    deck.initialize();
  }, [] ) 
  return (
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
  ) 
}

期望浏览器显示基础幻灯片，但左下角出现了‘Resume presentation’文本，请问这是为什么？

原因与解决方案 #

出现“Resume presentation”的核心问题是Reveal.js没有正确关联到页面上的.reveal容器，导致初始化失败进入暂停状态；另外，缺少Reveal的样式文件也会导致幻灯片布局异常。

1. 绑定容器DOM引用 #

修改Island.tsx，使用useRef获取容器元素并传给Reveal构造函数，确保初始化时能找到目标容器：

import { useEffect, useRef } from 'preact/hooks'
import Reveal from '../reveal/js/index.js';

export default function Island() {
  const revealRef = useRef(null);

  useEffect(()=> {
    if (revealRef.current) {
      const deck = new Reveal(revealRef.current);
      deck.initialize();
    }
  }, [] ) 

  return (
    <div class="reveal" ref={revealRef}>
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
  ) 
}

2. 引入Reveal.js样式文件 #

在Island.tsx顶部添加样式引入，保证幻灯片的布局和显示效果正常：

import '../reveal/css/reveal.css';
import '../reveal/css/theme/white.css'; // 可替换为你需要的主题样式文件

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