在 Next.js 中使用 Reveal.js 作为 npm答案

【问题标题】：Use Reveal.js as npm in Next.js在 Next.js 中使用 Reveal.js 作为 npm
【发布时间】：2022-12-03 00:28:30
【问题描述】：

我在一个项目中工作，我必须在 Next.js 中使用 Reveal.js。但我不明白如何显示幻灯片。当我尝试显示时，任何东西都会出现。

我尝试显示一些幻灯片但没有出现，这是我的代码：我的组件

//Slide.js 
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

import '/node_modules/reveal.js/dist/reveal.css';
import '/node_modules/reveal.js/dist/theme/black.css';

Reveal.initialize({
    controls:true,
    width:1000,
    height:1000,
    margin: 0.1,
    display:true,

    plugins: [ Markdown ]

});

export default function Slide(){

    return(
        <>
            <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                                  <section data-state="make-it-pop">
                                      <section>Vertical Slide 1</section>
                                      <section>Vertical Slide 2</section>
                                  </section>
                                  <section data-markdown>
                                      <textarea data-template>
                                        ## Slide 1
                                        A paragraph with some text and a [link](http://hakim.se).
                                        ---
                                        ## Slide 2
                                        ---
                                        ## Slide 3
                                      </textarea>
                                  </section>
            </div>
        </div>
        </>    
    )
}

这是应该显示的页面：

//index.js
import dynamic from 'next/dynamic';

const Slide = dynamic(() => import('./slide'), { ssr: false, })

export default function Home() {
    return (
        <div>
            <Slide></Slide>
        </div>
    )
}

【问题讨论】：

标签： javascript reactjs npm next.js reveal.js

【解决方案1】：

您正在导入 reveal.js 包，但没有在 Slide 组件中的任何地方使用它。您需要使用 Slide 组件内部的 Reveal.initialize() 方法来初始化演示文稿。这是在里面完成的 useEffect挂钩。

export default function Slide(){
    useEffect(() => {
        Reveal.initialize({
            controls:true,
            width:1000,
            height:1000,
            margin: 0.1,
            display:true,
            plugins: [ Markdownu ]
        });
    }, []);

    return(
    …

【讨论】：