-
Notifications
You must be signed in to change notification settings - Fork 1
/
cookbook-rmd_yours.Rmd
169 lines (125 loc) · 5.26 KB
/
cookbook-rmd_yours.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
# Make it yours {#rmd-yours}
```{r, include = FALSE}
source("common.R")
knitr::opts_chunk$set(fig.align="center")
```
```{r, echo= FALSE}
knitr::include_graphics("images/illos/yours-rmd.jpg")
```
## Adding new pages {#add-rmd}
Adding new pages to your site means adding new `.Rmd` files to your site's project root directory. You can do this in RStudio using *File > New File > R Markdown*. Delete the default YAML except for the title and all text/code in the document, then edit away.
## Grow your navbar {#rmd-grow}
To make a new page actually findable from your 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 R Markdown 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`.
1. 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 `readings.Rmd`. We want to add the link to the rendered page `readingss.html` to our upper navbar next to "Home" and "About", so we would add the following to our YAML:
```{r echo = FALSE}
yml_empty() %>%
yml_navbar(
left = list(
navbar_page("Home", href = "index.html"),
navbar_page("About", href = "about.html"),
navbar_page("Readings", href = "readings.html")
)) %>%
asis_yaml_output(fences = FALSE)
```
\
Save the changes to `_site.yml`, build, and preview to see the new page appear in the upper navbar.
<div class = side-by-side>
<div class = side1>
```{r echo = FALSE}
yml_empty() %>%
yml_site_opts(
name = "My Website",
output_dir = "docs"
) %>%
yml_navbar(
left = list(
navbar_page("Home", href = "index.html"),
navbar_page("About", href = "about.html"),
navbar_page("Readings", href = "readings.html")
)) %>%
asis_yaml_output(fences = FALSE)
```
</div>
<div class= side2>
</div>
</div>
You may have noticed that in the YAML options we’ve looked at so far, `left:` has been one of the first things to go under `navbar:`. You can add all (or just some) of your links aligned to the right side of the navbar instead by using `right:`.
```{r echo = FALSE}
yml_empty() %>%
yml_navbar(
left = list(),
right = list()
) %>%
asis_yaml_output(fences = FALSE)
```
\
If we added the page for `rmd.Rmd` to the right of our navbar instead:
<div class = side-by-side>
<div class = side1>
```{r echo = FALSE}
yml_empty() %>%
yml_site_opts(
name = "My Website",
output_dir = "docs"
) %>%
yml_navbar(
left = list(
navbar_page("Home", href = "index.html"),
navbar_page("Lectures", href = "lectures.html")
),
right = list(
navbar_page("Readings", href = "readings.html")
)) %>%
asis_yaml_output(fences = FALSE)
```
</div>
<div class= side2>
</div>
</div>
## Add a dropdown menu {#rmd-menu}
At some point, you may realize that you need room to grow with your navbar and the content you have planned to create and share. When you do, you may want to use dropdown menus. You can create a dropdown menu to add *many* more pages to the site without taking up space in your navbar. Let's say we had a course with several modules, and we decided to create a separate R Markdown document for each module of readings in this course. We could create a dropdown menu called "Readings" and link to each of the readings pages underneath that.
See how we do this in the YAML below:
1. We'll start by getting rid of the single `readings.Rmd` that we linked in our navbar.
1. **Add a new `- text:` field** followed by the heading that you want to use for your dropdown. I'm going to call mine "Readings".
1. **Add** a `menu:` field. Nothing else goes on this line.
1. Now **add** the pages that will go under this menu with their own `- text:` and `href:` fields.
1. **Repeat** the previous step until you've added all the pages for this dropdown. We're adding 4 new pages under our menu.
<div class = side-by-side>
<div class = side1>
```{r echo = FALSE, warning = FALSE}
yml_empty() %>%
yml_navbar(
title = "My Website",
left = list(
navbar_page("Home", href = "index.html"),
navbar_page("About", href = "about.html"),
navbar_page("Readings",
menu = list(
navbar_page("Module 1", href = "readings-module1.html"),
navbar_page("Module 2", href = "readings-module2.html"),
navbar_page("Module 3", href = "readings-module3.html"),
navbar_page("Module 4", href = "readings-module4.html")
)
)
)
) %>%
asis_yaml_output(fences = FALSE)
```
</div>
<div class= side2>
</div>
</div>
## Add your content
Now that you know how to add and link new pages to your site, you're ready to make your site your own with your own content.
Creating this for a workshop? A course? Need ideas of what to include? Check out our [Organization]() page.
## Recap
In this section you:
* Added new pages
* Grew your navbar
* Added a dropdown menu
* Added your own content to your site