4

我无法理解如何在我的 github 页面中实现 docsearch 片段（我使用的是bootstrap 3）。

从包文档：

  1. 发布 pkgdown 网站后，将 pkgdown 网站 URL 提交到 Docsearch。完毕

  2. 将 apiKey 和 indexName 参数的值放入您的站点 _pkgdown.yml。完毕

由于我缺乏知识，我现在很难理解这一点。

Docsearch\Algolia 给我发了电子邮件：

CSS

head将此代码段复制到 HTML标记的末尾

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"/></pre></li>

JavaScript

body将此代码段复制到 HTML标记的末尾

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>

<script type="text/javascript">

  docsearch({

    appId: xxxxxx,

    apiKey: xxxxxx,

    indexName: xxxxxx,

    container: '### REPLACE ME WITH A CONTAINER (e.g. div) ###'

    debug: false // Set debug to true if you want to inspect the modal

  });

</script>

问题： 我应该在 pkgdown 生成的每个 html 页面上复制这些片段，还是有一种自动的方法可以这样做？

4

1 回答 1

2

根据文档，包含这样的自定义 HTML 的最佳方法是_pkgdown.yml在以下选项下将其添加到您的文件中：

template:
  includes:
    in_header: <!-- inserted at the end of the head -->
    after_body: <!-- inserted at the end of the body -->

所以在你的情况下，你应该做这样的事情：

template:
  include:
    in_header: |
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"/></pre></li>
    after_body: |
      <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
      <script type="text/javascript">
        docsearch({
          appId: xxxxxx,
          apiKey: xxxxxx,
          indexName: xxxxxx,
          container: '### REPLACE ME WITH A CONTAINER (e.g. div) ###'
          debug: false // Set debug to true if you want to inspect the modal
        });
      </script>

请注意，此功能是在大约 4 个月前添加的，因此它可能不适用于 Bootstrap 3 或旧版本的 pkgdown。如果这不起作用，这样做的旧方法是：

  • 添加一个名为pkgdown/templates
  • 添加in-header.html并after-body.html在该文件夹中
  • 将您的 CSS 代码in-header.html和您的 JavaScript 放入after-body.html
  • 重建网站

我希望其中一个对你有用。

于 2022-02-13T10:44:01.937 回答