I would like to build a png-image below the sidebar on the right in a quarto-book:
I have tried to find a solution with the help of ChatGPT. Unfortunately not successful. So I don't have a solution. But here is my code:
index.qmd
:
# Preface {.unnumbered}
This is a Quarto book.
To learn more about Quarto books visit <https://quarto.org/docs/books>.
_quarto.yml
:
project:
type: book
book:
title: "q_book_exampl"
author: "Norah Jones"
date: "2.7.2024"
chapters:
- index.qmd
format:
html:
theme: cosmo
You could do it like this: A logo can be used in the sidebar by configuring _quarto.yml
as described here in the documentation. Additionally we add a small EventListener
which applies appendChild
in order to relocate the image below the content of the sidebar.
_quarto.yml
:
project:
type: book
book:
title: "q_book_exampl"
author: "Norah Jones"
date: "2.7.2024"
chapters:
- index.qmd
sidebar:
logo: 'testImage.png'
format:
html:
theme: cosmo
include-in-header:
text: |
<script>
document.addEventListener("DOMContentLoaded", function() {
var sidebar = document.getElementById('quarto-sidebar');
var logo = sidebar.getElementsByTagName('img')[0];
sidebar.appendChild(logo);
});
</script>