Chapter 21 Make it yours

21.1 Adding new Distill articles

A Distill page is called an article. To add new ones we need to add new .Rmd files (with a Distill-flavored YAML) to our site’s project root directory. You can do this in RStudio using File > New File > R Markdown. When the dialogue box opens, go to From Template and choose “Distill Article.” Now you can edit away. To add this article to your navbar and site, see the next section.

21.2 Grow your navbar

To make a new Distill article discoverable and connected to the Distill site, you’ll need to also make a change to navbar, which means opening up the _site.yml file and fiddling with it. To add another page link to your navbar, you need to know two things about the new page you want to add:

  1. The name you want to see on the navbar for this page; this is the page’s text.

  2. The name of the .html file that corresponds to the .Rmd file you’re adding; this is the page’s href.

Let’s say we create a new file called labs.Rmd. We want to add the link to the rendered page labs.html to our upper navbar next to “Home” and “Lectures,” so we would add the following to our YAML:

navbar:
  left:
  - text: Home
    href: index.html
  - text: Lectures
    href: lectures.html
  - text: Labs
    href: labs.html


Save the changes to _site.yml, build, and preview to see the new page appear in the upper navbar.

name: Basic Course Site
output_dir: docs
title: Demo Distill
description: ' | Demo Distill'
navbar:
  right:
  - text: Home
    href: index.html
  - text: Lectures
    href: lectures.html
  - text: Labs
    href: labs.html

You may have noticed that in the YAML options we’ve looked at so far, right: has been one of the first things to go under navbar:. You can add all (or just some) of your links aligned to the left side of the navbar instead by using left:.

navbar:
  left: []
  right: []


If we added the page for labs.Rmd to the left of our navbar instead:
name: Basic Course Site
output_dir: docs
title: Demo Distill
description: ' | Demo Distill'
navbar:
  left:
  - text: Labs
    href: labs.html
  right:
  - text: Home
    href: index.html
  - text: Lectures
    href: lectures.html