r pkgdown 文档搜​​索算法

Question

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

来自package documentation：

1. Once you have published your pkgdown website, submit the pkgdown site URL to Docsearch. DONE

2. Put the value of the apiKey and indexName parameters into your site _pkgdown.yml. DONE

---

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

Docsearch\Algolia 给我发了邮件：

CSS

Copy this snippet at the end of the HTML head tag

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

JavaScript

Copy this snippet at the end of the HTML body tag

<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 页面上复制这些片段，还是有一种自动方法可以这样做？

Answer 1

根据 documentation，像这样包含自定义 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
• 重建网站

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