1 Intro
Además de yaml, texto y chunks, para escribir con Quarto conviene conocer la estructura o layout de los artículos que se generan con él. Las páginas tienen un body, un margin y un área para las sidebars, que en nuestro caso contiene un TOC1. Documentación oficial aquí.
Usando divs y spans podemos añadir clases y atributos, haciendo que determinados elementos de nuestro documento cambien sus “propiedades”. En esta sección usaremos divs para hacer que determinadas partes de nuestro post se ajusten a distintos layout’s.
2 Ejemplo (con imágenes)
Para ver las distintas posibilidades que tenemos, insertaremos una imagen ocupando distintas áreas del artículo. Empezaremos situando la imagen en el margen. para ello habría que hacer lo siguiente:
::: {.column-margin}
![](imagenes/my_layout-01.png){fig-align="center"}
:::
Si queremos podemos llegar a ocupar el 100% de la pantalla. Sólo habría que indicarlo en las opciones de la imagen con width="100%"
.
3 Ejemplo (con chunks)
El output de los chunks también puede ocupar distintas áreas. Veamos si un leaflet se puede poner en el margen:
```{r}
#| column: margin
library(leaflet)
leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map tiles
addMarkers(lng = -4.7880, lat = 37.885, popup = "Rectorado de la Universidad de Córdoba\n (Sede de las XII Jornadas de usuarios de R)")
```
Y ahora ocupando toda la pantalla:
```{r}
#| column: screen
library(leaflet)
leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map tiles
addMarkers(lng = -4.7880, lat = 37.885, popup = "Rectorado de la Universidad de Córdoba\n (Sede de las XII Jornadas de usuarios de R)")
```
Como no puede ser de otro modo, aún hay más opciones para el layout. Documentación aquí
4 Layout de las páginas
Además, para el layout de toda la página tienes las opciones aquí. Si quieres crear un “custom layout” quizás tengas que usar Bootstrap CSS grid.