I am having trouble understanding how to implement the docsearch snippet into my github pages (I am using bootstrap 3).
From the package documentation:
Once you have published your pkgdown website, submit the pkgdown site URL to Docsearch. DONE
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
headtag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"/></pre></li>
JavaScript
Copy this snippet at the end of the HTML
bodytag
<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?
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:
pkgdown/templatesin-header.html and after-body.html in that folderin-header.html and your JavaScript in after-body.htmlI hope one of these works for you.