r pkgdown docsearch algolia

Question

I am having trouble understanding how to implement the docsearch snippet into my github pages (I am using bootstrap 3).

From the 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

---

Given my lack of knowledge, I am now having hard time understanding this.

The Docsearch\Algolia emailed me:

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>

QUESTION: Shall I copy these snippets on every html page generated by pkgdown or there is an automatic way to do so?

Answer 1

According to the documentation, the best way to include custom HTML like this is to add it to your _pkgdown.yml file under these options:

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

So in your case, you should do something like this:

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>

---

Note that this feature was added about 4 months ago, so there's a chance it won't work with Bootstrap 3 or old versions of pkgdown. If this doesn't work, the old way of doing this was to:

• Add a folder called pkgdown/templates
• Add in-header.html and after-body.html in that folder
• Place your CSS code in in-header.html and your JavaScript in after-body.html
• Rebuild the site

I hope one of these works for you.