Read in:
Русский
English

Встраивание заметок

Напишите ![[имя-заметки]] — и отрендеренное содержимое заметки появится прямо на странице, обёрнутое в <div class="embedded-note">. Добавьте embed_class: my-class во frontmatter встраиваемой заметки — обёртка получит ещё и класс embedded-note__my-class, за который её можно стилизовать парой строк CSS в админке. Так любая заметка превращается в переиспользуемый оформленный блок: колаут, промо-карточку, общий футер.

Как встроить заметку

Тот же синтаксис, что в Obsidian — вики-ссылка с ! впереди:

![[pricing-table]]

Встроенная заметка рендерится целиком, со своим markdown, ссылками и картинками. Если цель не найдена, встраивание молча пропускается, а страница получает предупреждение рендеринга.

Медиафайлы используют тот же синтаксис, но рендерятся как медиа, а не как встраивания: ![[photo.jpg]] станет <img>, ![[demo.mp4]] — видеоплеером. Эта страница — про встраивание заметок.

Скрытые _-заметки — хорошие партиалы

Заметки, чьё имя файла начинается с _, скрыты из списков, поиска и RSS — но встраиваются без проблем:

![[_signup-banner]]

Это и есть паттерн переиспользуемых партиалов: держите баннер в одной _-заметке, встройте на десять страниц, правьте в одном месте. Подробнее про скрытие через _ — в Подграфах.

Оговорка: встраивание показывает содержимое на странице-хозяине. _ прячет заметку от обнаружения, но это не контроль доступа — для него используйте подграф.

Свой CSS-класс для встраивания

Во frontmatter встраиваемой заметки (не страницы-хозяина):

---
embed_class: promo-card
---

Везде, где эта заметка встроена, теперь рендерится:

<div class="embedded-note embedded-note__promo-card">
  ...содержимое заметки...
</div>

Значение санитизируется: любой символ вне a-z A-Z 0-9 _ - заменяется на _, так что embed_class: "my card!" превратится в embedded-note__my_card_. Используйте буквы, цифры и дефисы.

Не то место — так не работает:

# frontmatter страницы-ХОЗЯИНА — на встраивания не влияет
embed_class: promo-card

Класс принадлежит самой встраиваемой заметке. В этом и смысл: заметка носит своё оформление с собой всюду, где встроена.

Стилизация из админки

Админка → SEO & URLs → HTML Injections → + Add. Поставьте placement head и вставьте блок <style> в качестве содержимого. Он попадёт в <head> каждой страницы — без правки шаблонов. Тем же механизмом настраиваются шрифты, цвета и лёгкое темирование; полная история — в Темах.

Рабочий пример: промо-карточка

  1. Создайте _promo.md:
---
embed_class: promo-card
---
**Попробуйте trip2g бесплатно** — синхронизируйте хранилище и получите сайт за 5 минут.

[[getting-started|Начать →]]
  1. Встройте где угодно:
![[_promo]]
  1. В админке добавьте HTML Injection с placement head и таким содержимым:
<style>
.embedded-note__promo-card {
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.embedded-note__promo-card > :first-child { margin-top: 0; }
.embedded-note__promo-card > :last-child { margin-bottom: 0; }
</style>

Вот эта инъекция в админке — placement head, блок <style> вставлен в поле Content:

Каждая страница со встроенным _promo теперь показывает карточку с рамкой. Поменяли текст в _promo.md — обновилось везде. Поменяли CSS в инъекции — оформление обновилось везде.

Базовый класс .embedded-note (без суффикса __) есть на каждом встраивании — им можно стилизовать все встраивания разом, а embed_class оставить для особых.