Customize HTML header

[benruijl]

For my blog I want to add a progress bar to the top of the page that shows how far into the article a reader is. An example of this feature can be seen here: https://serene-demo-site.vercel.app/blog/hello-serene/

I have no idea how I can add anything to the header, as it seems the DOM outside of the #quarto-document-content is completely fixed; in the docs I can only see how the CSS can be modified.

Can you give me some pointers as to how I can change the DOM, so as to add an extra div to the header? The only solution I can think of is using javascript to add the progress bar div dynamically, but that is a bit hacky.

[dragonstyle]

I think you likely would want to use an include-* option to include content in the document. Here are the options- would one of these work?

https://quarto.org/docs/reference/formats/html.html#includes

[benruijl]

I will try to see tomorrow if include-before-body works, but I fear I need finer grained control over where the div is placed.

Do you know of a way to change the html template that quarto uses?

[dragonstyle]

Sure, you can replace all or part of the template. More here:

https://quarto.org/docs/journals/templates.html#html-partials

[benruijl]

Thank you! With your help I managed to get the progress bar and the return to top button (see #3031) installed for blog posts. For reference to others:

in posts/_metadata.yml I added:

format:
  html:
    include-in-header: 
      - ../back-to-top.html
      - ../progressbar.html

where

back-to-top.html reads:

<button type="button" class="btn btn-primary btn-lg bi bi-arrow-up" id="btn-back-to-top"></button>

<style>
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>

<script id="backtotop" type="application/javascript">
let backToTopButton = document.getElementById("btn-back-to-top");

window.addEventListener('scroll', () => {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopButton.style.display = "block";
        } else {
            backToTopButton.style.display = "none";
        }
    });

backToTopButton.addEventListener("click", function () {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
});
</script>

and progressbar.html reads:

<div id="progress-bar" style="width: 0%; height:2px; background-color: rgb(89 127 235);; position: fixed; top: 0px; z-index: 2000;"></div>

<script id="progressbar" type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

    const bar = document.querySelector('#progress-bar');
    const post = document.querySelector('#quarto-content');
    const html = document.documentElement;
    
    const height = post.scrollHeight + post.offsetTop;
    
    window.addEventListener('scroll', () => {
        bar.style.width = (html.scrollTop / (height- html.clientHeight)) * 100 + '%';
    });
});
</script>