A note from the authors: Some of the information and instructions in this book are now out of date because of changes to Hugo and the blogdown package. If you have suggestions for improving this book, please file an issue in our GitHub repository. Thanks for your patience while we work to update the book, and please stay tuned for the revised version!
In the meantime, you can find an introduction to the changes and new features in the v1.0 release blog post and this "Up & running with blogdown in 2021" blog post.
— Yihui, Amber, & Alison
D.6 HTML widgets
We do not recommend that you use different HTML widgets from many R packages on the same page, because it is likely to cause conflicts in JavaScript. For example, if your theme uses the jQuery library, it may conflict with the jQuery library used by a certain HTML widget. In this case, you can conditionally load the theme’s jQuery library by setting a parameter in the YAML metadata of your post and revising the Hugo template that loads jQuery. Below is the example code to load jQuery conditionally in a Hugo template:
{{ if not .Params.exclude_jquery}}
<script src="path/to/jquery.js"></script>
{{ end }}Then if you set exclude_jquery: true in the YAML metadata of a post, the theme’s jQuery will not be loaded, so there will not be conflicts when your HTML widgets also depend on jQuery.
Another solution is the widgetframe package (Karambelkar 2017). It solves this problem by embedding HTML widgets in <iframe></iframe>. Since an iframe is isolated from the main web page on which it is embedded, there will not be any JavaScript conflicts.
A widget is typically not of full width on the page. To set its width to 100%, you can use the chunk option out.width = "100%".