Layout’s

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 TOC¹. Documentación oficial aquí y aquí. Además, desde Quarto 1.3 podemos redimensionar los elementos de nuestras webs y documentos .html, para, por ejemplo, dar más espacio a la sidebar o al margin: documentación aquí.

Además, 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 y ocupen más o menos espacio en nuestros documentos.

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/post_21_img_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:

Código

```{r}
#| column: margin
#| eval: true
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:

Código

```{r}
#| column: screen
#| eval: true
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.

Notas

1. Además, el layout puede venir afectado por la opción page-layout: custom #- {article, full, custom}. Documentación oficial aquí

Reutilizar