Question

我正在将静态网站转换为gatbsyjs，有一个无法工作的js插件：https://github.com/gijsroge/priority-navigation。这是一个仅用于客户端的脚本，因此我正在使用替代安装过程来绕过节点。

这是我的规矩：

在 html.js 中，我从“静态”文件夹中加载脚本，然后对其进行初始化。

<script src={withPrefix('priority-nav.js')} />
        <script
            dangerouslySetInnerHTML={{
                __html: `
    console.log('start!');

    var nav = priorityNav.init({});

    console.log(nav);
    console.log('end!');
        `,
            }}
        />
      {props.postBodyComponents}
      </body>

我的 page.js 很简单：

import React from "react"
import '../../node_modules/priority-nav/dist/priority-nav-core.css'

const IndexPage = () => (
      <nav className="nav-wrapper">
        <ul className="nav-ul" style={{display:"inline-block", border: "1px solid blue"}}>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
          <li style={{display:"inline-block", padding:"0 100px", border: "1px solid red"}}>list item</li>
        </ul>
      </nav>
)

export default IndexPage

在呈现的html中，正在加载.js和.css文件。但是nav元素正受到脚本的影响。

这样的作品行吗？

在GatsbyJs中使用客户端脚本（优先级导航）

0 个答案: