javascript - r pkgdown docsearch algolia

Question

我无法理解如何在我的 github 页面中实现 docsearch 片段(我正在使用 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和 after-body.html 中的 JavaScript

重建网站

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