Is it possible to add custom links to the sidebar in an HTML book made with bookdown in R Markdown?

Question

Consider the following MWE. By placing the following three files into a folder, opening the file index.Rmd in RStudio, and running the following command in the Console:

bookdown::render_book()

you'll get an HTML book made with bookdown in a separate subfolder "book". Below are the three files of this MWE.

index.RMD:

---
title: "MWE"
documentclass: book
output:
  bookdown::gitbook: default
author: John Doe
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

# Preface

This is the preface.

01-chapter_one.Rmd:

# First chapter

This is the first chapter.

_bookdown.yml:

output_dir: "book"
delete_merged_file: true

My question: is there any way to add a custom link to the sidebar? For instance, let's say that we wanted a link to the French version of the HTML book, so that when the user clicks on that link, they would be taken to an entirely different bookdown book and home page. I will try and describe the result I'm desiring in the following image:

jtbayly · Accepted Answer · 2022-10-19T13:53:00.347

It is quite possible to insert things into the TOC as part of the build process. You can put them before or after.

You can find the feature documented in the bookdown documentation here. Here is the relevant text:

You may add more items before and after the TOC using the HTML tag <li>. These items will be separated from the TOC using a horizontal divider. You can use the pipe character | so that you do not need to escape any characters in these items following the YAML syntax...

Here is some example code for your index.Rmd file that shows how to insert multiple lines of html including links and images above the TOC.

output: 
  bookdown::gitbook:
    config:
      toc:
        scroll_highlight: yes
        before: |
          <li><a href="https://www.example.com"><img src="/images/booklogo.png" width="260"></a></li>
          <li><a href="./">Book Title — Book Author</a></li>
        after: |
          <li><a href="https://github.com/rstudio/bookdown">Proudly published with bookdown</a></li>

Sorry for not accepting and upvoting your answer sooner - I only now noticed the answer. I have now tested your code and I confirm that it works perfectly. Thank you very much indeed! So much easier than running my Python script every time after the rendering... — jaggedjava, Dec 20 '22 at 19:39

score 0 · Answer 2 · answered Oct 04 '22 at 15:10

It seems that this question is not getting answers. I couldn't come up with any other solution myself than to "manually" change the HTML files' content.

I wrote the following Python script that does what I was requesting. I used the logic that has been introduced earlier in SO. I tried my script in a couple of projects (including the MWE above), and it should work fine - unless there is another instance of <ul class="summary"> somewhere in the HTML code. Here, as an example, the hyperlink takes the user to the French Yahoo's URL.

The following script can be saved, for instance, as custom_link_to_bookdown_sidebar.py and be run in the folder of the HTML files with the command: python3 custom_link_to_bookdown_sidebar.py

custom_link_to_bookdown_sidebar.py:

import fileinput
import glob
import os
import sys

filenames = glob.glob('*.html')

# Confirm that the user wants to process the files:
print("\n\n\n\n\n\nThis is a python app that adds a language link to the sidebar of all the HTML files in your working folder.")
print("\nYour working folder is:")
print(os.getcwd())
print("\nThe following HTML files will be immediately processed:", filenames)
confirming = input('\nDo you want to continue? Press "y" or "Y" to continue or press any other key to cancel\n')

if confirming == "y" or confirming == "Y":
    print("Processing.")
    pass
else:
    print("Process canceled.")
    sys.exit()

# One line of code (that creates the language link) will be added after the following line in the HTML file(s):
hit = '<ul class="summary">'

# The line that will be added to the HTML file(s):
new = '<li> <a href="https://fr.yahoo.com/"><i class="fa fa-language fa-fw"></i> Version française<span></span></a></li>'

# Add the new line to all the HTML files in the working folder with the following loop:
for f in filenames:
    for line in fileinput.FileInput(files=f, inplace=True):
        if hit in line:
            line += new + os.linesep
        print(line, end="")

Is it possible to add custom links to the sidebar in an HTML book made with bookdown in R Markdown?

2 Answers2