9  Создание блогов

Блог подразумевает регулярно добавляемые пользователем записи вместе с возможностью обновления. Quarto дает большие возможности для создания блогов на основе веб-страниц, состоящих из коллекции постов, которые можно отображать в различном виде упорядочивать, в свою очередь, блоги могут являться элементами веб-страниц.

Блоги создаются на основе особых типов веб-страниц — списков (или листингов), которые могут рассматриваться и в более широком смысле, например, на основе листингов можно создавать страницы с докладами на конференциях или списки научных публикаций.

9.1 Создание блога на основе шаблона

Опишем несколько способов создания блогов: в Visual Studio Code (или Positron), RStudio и с помощью командной строки.

Для создания блога в Quarto в Visual Studio Code (соответственно, Positron) нужно выбрать меню Палитра команд, далее Quarto : Create Project и выбрать Blog Project.

Рисунок 9.1: Создание блога в Quarto в Visual Studio Code / Positron на основе шаблона

Чтобы создать блог в Quarto в RStudio, необходимо выбрать в меню File : New Project… : New Directory : Quarto Blog как на рисунке ниже.

Рисунок 9.2: Создание блога в Quarto в RStudio на основе шаблона

Далее можно выбрать название проекта, директорию, движок, а также возможно выбрать возможность создания Git-репозитория, добавить renv для воспроизводимости и использовать визуальный редактор.

Рисунок 9.3: Создание блога в Quarto в RStudio на основе шаблона

Блог можно создать на основе шаблона из командной строки, например, используя команду:

Terminal
quarto create-project myblog --type website:blog

Еще один вариант создания блога — использовать команду

Terminal
quarto create project blog myblog
Рисунок 9.4: Пример создания блога в Quarto в терминале

В процессе создания блога на основе любого из способов, перечисленных выше, будет сформирован каталог, содержание которого показано ниже.

my_blog/  
1├── _quarto.yml
2├── index.qmd
3├── about.qmd
4├── styles.css
├── profile.jpg  
5└── posts/
6    | | └── _metadata.yml
    | |
    | └── post-with-code/
    |     ├── index.qmd
    |     └── thumbnail.jpg
    └──── welcome/
          ├── index.qmd
          └── thumbnail.jpg
1
Файл с метаданными проекта Quarto (_quarto.yml).
2
Домашняя страница блога (index.qmd).
3
Страница о проекте (about.qmd).
4
Стилевые файлы (styles.css).
5
Каталог, содержащий посты (posts/).
6
Общие параметры для директории posts/ (_metadata.yml).

Таким образом, на основе любого из перечисленных выше способов создания блога будет создан проект, основными файлами корневого каталога которого будут: _quarto.yml, index.qmd и about.qmd. Покажем их содержание в минимальном примере на основе стандартного шаблона и далее более подробно рассмотрим возможные варианты для формирования блогов.

project:
  type: website

website:
  title: "Мой блог"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
format:
  html:
    theme:
      - cosmo
      - brand
    css: styles.css

lang: ru
---
title: "Мой блог"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---
---
title: "О странице"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: github
      text: Github
      href: https://github.com

---

Об этом блоге...

9.2 Листинги

Любая страница блога представляет собой так называемый листинг, которые позволяют автоматически генерировать содержимое страницы (или области страницы) из списка документов Quarto или других пользовательских данных, блог является частным случаем листинга.

Такого рода страницы полезны, когда необходимо, чтобы содержимое страницы автоматически обновлялось по мере добавления, обновления и удаления документов и обеспечивают эффективную навигацию по большому количеству документов.

9.2.1 Содержимое листинга

Для того, чтобы использовать листинги, необходимо указать в YAML-части основного файла index.qmd:

index.qmd
---
title: "Пример листинга"
listing: default
---

Тогда все находящиеся в каталоге документы будут сгенерированы и обобщены на единой странице как «списки», при условии что эти документы содержат как минимум метаданные заголовка title.

Можно явно указать, какие документы следует включить в листинг, например, если содержимое находится в каталоге posts, то необходимо включить их таким образом:

index.qmd
---
title: "Пример листинга"
listing:
  contents: posts
---
Совет

Если вы создаете веб-сайт курса, можно использовать функцию списков и объединить каждый урок в папку. Тогда файл index.qmd в этой папке может быть целевой страницей для урока, а другие файлы (презентации, упражнения, заметки инструктора и т. д.) могут также находиться в папке урока, но не обрабатываться как отдельные элементы списка.

Можно делать и более сложные включения или исключения файлов контента на основе регулярных выражений.

index.qmd
---
title: "Пример листинга"
listing:
  contents:
    - "reports/*.qmd"
    - "!lab-notes/*reports.qmd"
---

Кроме того, можно указывать, какие документы включаются или исключаются на основе метаданных элементов, используя параметры include и exclude. Эти параметры позволяют указать одно или несколько имен полей и значений, которые должны присутствовать или отсутствовать, чтобы элемент был включен или исключен. Например, чтобы включить только элементы, автором которых является Автор1 или Автор2, необходимо написать:

listing:
  contents: posts
  include:
    author: "{Автор1,Автор2}*"

Чтобы исключить любые элементы, автором которых является Автор3:

listing:
  contents: posts
  exclude:
    author: "Автор3*"

9.2.2 Типы листингов

Существует три типа листингов:

  1. default — по умолчанию элементы листинга отображаются в виде блога;
  2. table — таблица списков;
  3. grid — сетка в виде карточек.
index.qmd
---
listing:
  contents: posts
  type: default
  # другие типы:
  # type: table
  # type: grid
---

Предупреждение

Не рекомендуется использовать динамические даты (например, today или last-modified) в блог-постах. Это приведет к изменению порядка записей в блоге и ленте каждый раз при рендеринге или изменении документа.

Формат даты, используемый при отображении дат можно установить с помощью параметра date-format как стиль даты (full, long, medium, short или iso). При этом поведение стилей даты будет различаться в зависимости от локали.

Отметим, что существует возможность контролировать количество элементов, отображаемых на странице, с помощью опции page-size.

listing:
  page-size: 42

Количество элементов по умолчанию, отображаемых на странице, зависит от типа листинга:

Таблица 9.1: Количество элементов по умолчанию, отображаемых на странице
Тип листинга Количество элементов на странице
default 25
table 30
grid 18

9.2.3 Список полей

При обработке листинга Quarto используя метаданные из титульного листа каждого считываемого документа для отображения на основной странице списка и заполняет поля для каждого элемента либо непосредственного содержимого документа. Ниже указан список возможных метаданных.

Таблица 9.2: Список возможных полей метаданных листинга
Имя поля Описание
title Название статьи, считываемое из поля title вводной части (или в первом разделе H1 документа)
subtitle Подзаголовок статьи
author Автор статьи
description Описание элемента, отображаемое в на странице листинга
date Дата публикации
image Изображение элемента, указанное в поле image либо найденное первое изображение из preview-image, изображения с именем файла, начинающимся с feature, cover или thumbnail, или первое изображение, которое появляется в документе
image-alt Альтернативный текст для изображения
word-count Количество слов в статье
reading-time Оценка времени чтения статьи, рассчитанная путем подсчета слов в элементе и предполагающая скорость чтения 200 слов в минуту
categories Категории элемента, читаемые из поля categories вводной части
filename Имя входного файла
file-modified Дата последнего изменения

По умолчанию на основной странице отображаются следующие элементы.

Таблица 9.3: Список элементов метаданных листинга для отображения на основной странице
Поле тип: default тип: table тип: grid
title x x x
subtitle x
author x x x
description x x
date x x x
image x x

Несмотря на то, что по умолчанию будут отображаться определенные элементы, соответствующие полям метаданных, с помощью опции fields возможно настроить настроить отображение любых полей для каждого типа листинга. Покажем, как это будет выглядеть на примерах.

default
title: "Мой блог"
listing:
  contents: posts
  type: default
  fields: [image, date, title, author, reading-time, categories, description, reading-time, filename, file-modified]
grid
title: "Мой блог"
listing:
  contents: posts
  type: grid
  fields: [image, date, title, author, reading-time, categories, description, reading-time, filename, file-modified]
table
title: "Мой блог"
listing:
  contents: posts
  type: table
  fields: [image, date, title, author, reading-time, categories, reading-time]

9.2.4 Сортировка

По умолчанию списки в листингах, созданные из документов, сортируются по их названию. Для изменения порядка сортировки можно использовать опцию sort:

listing:
  contents: posts
  sort: "date"

Элемент управления сортировкой позволяет пользователю сортировать по значениям параметров title, date или author. Сортировка по умолчанию будет осуществляться по возрастанию, управлять этим параметром можно с помощью ключа asc или desc соответственно. Ключ сортировки может также содержать одно или несколько полей для сортировки.

listing:
  contents: posts
  sort:
    - "date"
    - "title desc"

В приведенном выше примере документы в каталоге posts будут отсортированы сначала по дате в порядке возрастания, а затем по названию в порядке убывания. Сортировку можно отключить указав sort: false.

Для отображения сортировки в пользовательском интерфейсе необходимо указать:

listing:
  sort-ui: true
  # для скрытия сортировки:
  # sort-ui: false
Рисунок 9.9: Пример сортировки в листинге (блоге)

Для управления полями, которые будут добавлены в список сортировки, можно задать их имена в ключе sort-ui как в следующем примере.

listing:
  sort-ui: [title, date]
Рисунок 9.10: Пример управления сортировкой в листинге (блоге)

9.2.5 Фильтрация

Основная страница листинга включает в себя поле фильтра, расположенное в правом верхнем углу, которое позволяет читателям выполнять поиск. Включить или отключить фильтрацию возможно с помощью параметра filter-ui.

listing:
  filter-ui: true
Рисунок 9.11: Пример фильтрации в листинге (блоге)

Также, как и в случае сортировки, можно ограничить поиск/фильтрацию определенными полями, указав список полей в ключе filter-ui.

listing:
  filter-ui: [title, date]

9.3 Компоненты блога

Рассмотрим основные составляющие для создания блогов.

9.3.1 Категории

Категории в блоге позволяют организовать публикации по темам, что значительно облегчает навигацию и позволяют быстро найти необходимую информацию. Для того, чтобы включить категории, вы можете установить параметр следующим образом в файле index.qmd, расположенном в верхнем уровне проекта:

index.qmd
---
listing:
  categories: true
---
Полный код для файла index.qmd примера 
index.qmd
---
title: "Мой блог"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

Теперь категории можно указать непосредственно в публикации (в нашем случае это файл /posts/post-with-code/index.qmd).

---
title: "Пост, содержащий категории"
author: "Адам Смит"
date: "2025-06-25"
categories: [новости, код, аналитика]
image: "image.jpg"
---

Это пост с исполняемым кодом.

Для отображения категорий существует несколько возможностей:

  1. numbered — отображение категорий в алфавитном порядке с указанием в скобках количества их упоминаний;
  2. unnumbered — категории отображаются в алфавитном порядке;
  3. cloud — категории отображаются в виде облака.
index.qmd
---
listing:
  categories: numbered
  # другие опции:
  # categories: unnumbered
  # categories: cloud
---

9.3.2 Страница «О сайте»

Страница «О сайте» (или «О блоге») выполняет ряд важных функций: в первую очередь рассказывает об авторе блога, может содержать ссылки и контакты, позволяющие связаться или подписаться; кроме того, такая страница может содержать информацию о чем блог и для кого он, в чем его уникальность и что делает блог запоминающимся.

Рассмотрим YAML структуру файла about.qmd, отвечающего за такую страницу.

---
title: "Об этом блоге"
1image: profile.jpg
about:
2  template: jolla
3  links:
    - icon: telegram
      text: Telegram
      href: https://web.telegram.org/
    - icon: github
      text: Github
      href: https://github.com
---
1
Изображение на странице, способами отображения которого можно управлять с помощью параметров: image-width — допустимая ширина изображения; image-shape — форма изображения на странице (rectangle, round или rounded, форму можно изменять только для шаблонов jolla, solana, trestles); image-alt — альтернативный текст для изображения; image-title — название изображения.
2
Встроенный шаблон: jolla, trestles, broadside, solana или marquee.
3
Набор ссылок на другие ресурсы на основе параметров: href — ссылка на файл, содержащийся в проекте, или внешний URL-адрес; text — текст для отображения элемента навигации (если не указано, будет использоваться заголовок на основе title документа); icon — название иконки из набора Bootstrap Icons.

Ниже показан пример Markdown-составляющей файла about.qmd.

Анна Смирнова --- главный специалист по обработке данных в **Сбер**. Когда Анна не занимается инновациями в области платформ обработки данных, она с удовольствием катается на велосипеде и играет со своей любимой кошкой.

## Образование

**Санкт-Петербургский государственный университет** | 
Экономист| сентябрь 2019 - июнь 2023

**Университет ИТМО** | 
Управление высокотехнологичным бизнесом, магистр | сентябрь 2023 - июнь 2025

## Опыт работы

**Сбер** | Главный специалист по обработке данных | август 2025 --- настоящее время

Предварительный просмотр каждого из шаблонов:

9.3.3 Метаданные

Очень важным аспектом блога является то, что нет необходимости при создании нового поста делать рендер для остальных статей. Настройки такого рода можно установить в файле posts/_metadata.yml. Его главная цель — задать глобальные параметры для всех постов вашего блога в каталоге posts.

По умолчанию в этом файле установлено freeze: true, однако здесь можно определить больше параметров YAML для всех записей блога.

posts/_metadata.yml
# указанные здесь параметры будут применяться ко всем записям в данной папке

# заморозка вычислительных результатов
freeze: true

# включить блоки заголовков в стиле баннеров
title-block-banner: true

# лицензия
license: "CC BY"

# имя автора всех записей в блоге
author: 
  - name: И.О. Автор
    url: https://my_blog.net
    affiliation: Организация
    affiliation-url: https://my_org.com
    orcid: 0000-0001-2222-3333

# настройки для содержания
toc: true
toc-title: "Содержание"
toc-depth: 3
toc-location: left

# опции knitr
execute:
  echo: true
  message: true
  warning: true

# нижний колонтитул
format:
  html:
    include-after-body: ../footer.html

9.3.4 Заморозка вычислительных результатов

В том случае, если блог содержит код, очень важно, чтобы при написании нового поста блога, предыдущие записи были «заморожены», поскольку версии библиотек могут с течением времени измениться. Напомним, что для заморозки вычислительных результатов необходимо установить параметр freeze: true в YAML.

Если проект содержит код на R, когда вы устанавливаете или обновляете библиотеке в записи блога, вызывайте renv::snapshot() как это указано в параграфе Кэширование и заморозка. Это обновит файл renv.lock проекта блога. Скопируйте этот файл в каталог вашей новой записи в блоге и в новой записи блога добавьте следующий фрагмент кода в начало файла index.qmd:

#| echo: false
#| results: hide
renv::use(lockfile = "renv.lock")

Теперь каждый раз, когда будет производиться новый рендер блога, данный фрагмент кода даст указание R использовать версии библиотек, которые определены в файле renv.lock данного поста.

9.3.5 Включение комментариев

Комментарии в блоге позволяют читателям задавать вопросы, уточнять информацию, исправлять ошибки, помогают автору понять, насколько материал полезен и интересен, делают блог более конструктивным и социальным.

Для обратной связи на страницах блога можно включить комментирование на основе сервиса Utterances как GitHub issues. Для этого необходимо выполнить следующие шаги.

  1. Создать публичный репозиторий на GitHub для хранения комментариев.
  2. Установить utterances app в настройках GitHub.
  3. Включить комментарии в Quarto:
comments:
  utterances:
    repo: owner/repo
Рисунок 9.13: Пример комментариев в блоге на основе Utterances

Если комментарии включены на глобальном уровне, возможно на некоторых страницах они не нужны. Для отключения комментариев на определенной странице, необходимо указать comments: false как в примере ниже.

title: "Страница без комментариев"
comments: false

9.3.6 Включение файлов cookie

Quarto позволяет запрашивать согласие на использование файлов cookie. Для включения баннера с запросом по умолчанию на согласие на использование cookie используется:

website:
  cookie-consent: true

Внешний вид и согласие можно изменить, например:

website:
  cookie-consent: 
1    style: simple
2    type: express
3    palette: light
1
Стиль отображаемого баннера согласия: simple (по умолчанию) — простое окно в правом нижнем углу веб-сайта, headline — баннер на всю ширину в верхней части сайта, interstitial — полупрозрачное наложение на весь веб-сайт, standalone — непрозрачное наложение на весь веб-сайт.
2
Тип согласия, который следует запрашивать: implied (по умолчанию) — файлы cookie не блокируются, если пользователь не изменит свои настройки, express — файлы cookie будут блокироваться до тех пор, пока пользователь явно не согласится их разрешить.
3
Цвет для баннера: light (по умолчанию) — светлый, dark — темный.

По умолчанию настройки cookie пользователя автоматически управляются с помощью сервиса Google Analytics:

website:
  cookie-consent: true
  google-analytics:
    tracking-id: "G-XXXXXXX"
    anonymize-ip: true

Тем не менее, возможно использовать собственный JavaScript-скрипт для отслеживания пользователей, как ниже, о чем можно прочесть в соответствующем разделе.

<script type="text/plain" cookie-consent="tracking">

// JavaScript-код для отслеживания

</script>

9.3.7 RSS-лента

С помощью RSS-каналов можно следить за за обновлениями блога, не завися при этом от социальных сетей или email-рассылок. Это позволяет подписчикам получать новые статьи без необходимости заходить на сам блог. Для того, чтобы включить RSS-канал в Quarto необходимо выполнить следующее.

  1. В файле _quarto.yml необходимо добавить URL веб-страницы и описание (без установки этих параметров в файле проекта Quarto не сможет сгенерировать фид).
_quarto.yml
website:
  title: "Блог"
  site-url: https://www.blog_example.com
  description: "Пример блога"
  1. В параметрах основного файла index.qmd домашней страницы блога необходимо добавить вариант feed: true.
index.qmd
---
listing:
  feed: true
---

Также (опционально) добавить ссылку на RSS-ленту в навигационную панель.

Рисунок 9.15: Пример ссылки на RSS-ленту в навигационной панели 
_quarto.yml
website:
  title: "Блог"
  site-url: https://www.blog_example.com
  description: "Пример блога"
  navbar:
    right:
      - icon: rss
        href: index.xml

9.3.8 Черновики страниц и панели анонсов

Для предварительного просмотра контента перед публикацией можно указать страницы в качестве черновиков. По умолчанию черновики страниц не будут отображаться в навигации, списках, результатах поиска и на карте сайта.

Чтобы указать, что страница или запись является черновиком, можно добавить draft: true в YAML файла index.qmd поста:

posts/post-with-code/index.qmd
---
title: "Пост, содержащий код"
draft: true
---

Альтернативно, можно задать YAML-файл:

drafts.yml
website:
  drafts:
    - posts/post-with-code/index.qmd

и затем включить drafts.yml в основной _quarto.yml:

_quarto.yml
website:
  title: "Пост, содержащий код"

metadata-files:
  - drafts.yml

Опцию черновиков можно включить глобально для всех постов блога.

posts/_metadata.yml
draft: true
Рисунок 9.16: Пример отображения черновиков

Управлять отображением черновиков на сайте и ссылками на черновики документов можно с помощью опции draft-mode:

Таблица 9.4: Варианты опции draft-mode
Значение Описание
gone (по умолчанию) Страница не будет отображаться и не будет связана с основной страницей
unlinked Страница будет отображаться и не связана с основной страницей
visible Страница будет отображаться и связана с основной страницей

Панель объявлений

Рисунок 9.17: Пример отображения панели объявлений 
website:
  announcement: 
1    icon: info-circle
2    dismissable: true
3    content: content: "**Внимание** --- это версия 0.1 веб-сайта"
4    type: primary
5    position: below-navbar
1
icon — значок Bootstrap для отображения в панели объявлений.
2
dismissable (значения: true или false) — может ли пользователь закрыть панель объявлений.
3
content — содержимое панели объявлений.
4
type (значения: primary, secondary, success, danger, warning, info, light, dark) — тип панели объявлений
5
position (значения: below-navbar или above-navbar) — положение панели объявлений.

Заключение