如何在 docusaruas 博客上使用 Google 搜索

Question

我想知道如何将这个搜索框 sn-p 添加到 docusarus 博客。

<script async src="https://cse.google.com/cse.js?cx=e2e7646659949450a">
 </script>
 <div class="gcse-search"></div>

我用谷歌搜索了很多，但找不到任何可以破解的示例或任何接近的东西。

我也尝试过调整本地搜索和导航栏项目，但无法弄清楚。

我还尝试将其作为 html 项添加到导航栏中，但没有发现任何变化。

我是 docusarus 的新手，不是前端开发人员，只是想帮助我们的博客脱离 WordPress :)

任何帮助/指针/参考将不胜感激。

更新

我似乎有一种方法可以在导航栏中使用custom html item。

从 Google 添加以下脚本：

scripts: [
    {src:'https://cse.google.com/cse.js?cx=e2e7646659949450a', async: false, defer: false}
    ]

然后导航栏中的这个项目：

items: [
    ...
    {
        type: "html",
        position: "left",
        value: '<div class="gcse-search"></div>',
    },
    ...
    ],

这对我来说似乎是最简单的，因为避免了混合任何东西。但是我有一个问题，我现在需要 f5 刷新页面以加载搜索框出于某种原因。所以我需要在说导航栏方法中的 html 项目 100% 可以工作之前先弄清楚这一点。

如果最终对任何人有用，我正在 PR 工作：https://github.com/netdata/blog/pull/106/files

Answer 1

可能在看这样的东西：

export default function NavbarContent(): JSX.Element {
  const mobileSidebar = useNavbarMobileSidebar();

  const items = useNavbarItems();
  const [leftItems, rightItems] = splitNavbarItems(items);

  const searchBarItem = items.find((item) => item.type === 'search');

  return (
    <NavbarContentLayout
      left={
        // TODO stop hardcoding items?
        <>
          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
          <NavbarLogo />
          <NavbarItems items={leftItems} />
        </>
      }
      right={
        // TODO stop hardcoding items?
        // Ask the user to add the respective navbar items => more flexible
        <>
          <NavbarItems items={rightItems} />
          <NavbarColorModeToggle className={styles.colorModeToggle} />
          <div className="gcse-search"></div>
        </>
      }
    />
  );
}

在一个混杂的Navbar/Content。

然后：

  scripts: [
    {
      src: 'https://cse.google.com/cse.js?cx=<ID>',
      async: true,
    },
  ],

在你的docusaurus.config.js。这是未经测试的。