Накатал инструкцию по вёрстке в Obsidian, чтоб самому не забыть, ну и может кому пригодится.

Как создавать своё оформление заметок в Obsidian

Создание фрагментов css кода (сниппетов)

Фрагменты css кода это обычные файлы вёрстки содержащие css. Располагать данные файлы необходимо в каталоге \.obsidian\snippets\

Для удобства можно принять что имя файла фрагмента это базовый класс, на который стоит опираться при описании стилей. Например если имя файла my-grid.css то декларация для стилей должна начинаться с .my-grid

Применение фрагментов css кода

Помимо правильного расположения файла css, его также необходимо явно включить в настройках Obsidian -> Оформление -> Фрагменты css кода

В самой заметке для применения фрагмента необходимо создать атрибут с ключом cssclasses и значением (одним или несколько) с базовым классом, описанным в этом фрагменте т.е. my-grid

Вёрстка

Очевидным способом вёрстки является использование консоли разработчика, которая открывается комбинацией Ctrl + Shift + i, где можно с помощью инспектора анализировать элементы и дописывать туда желаемые стили, после чего переносить их в файл фрагмента.

Полезные советы

1) Режимы просмотра

Стоит учесть что режимы редактора и просмотра заметки имеют разные родительские классы .markdown-preview-view и .markdown-source-view

2) Адаптивная вёрстка

Отдельные заметки, открытые рядом, как и боковые панели, образуют единую область просмотра, поэтому сделать адаптивную вёрстку страницы заметки через media-query не получится. Вместо этого можно использовать container-query.

Пример:

/**
    Назначение элемента контейнером, для использования его размера как опорной точчки
*/
.my-grid .markdown-preview-sizer.markdown-preview-section {
    container-type: inline-size;
    container-name: db-card-preview-section;
}

/**
    Применение стиля к элементу исходя из размера определённого выше контейнера
*/
@container db-card-preview-section (width <= 900px) {
    .my-grid.markdown-preview-view .markdown-preview-sizer > div {
        width: 300px;
    }
}

#obsidian

Решил, что пора освоить создание картотек в Obsidian.

Способа нашёл аж три штуки, основанные на разных плагинах:

1) Make.md - Notion внутри Obsidian. Круто, мощно, много функционала, иногда даже слишком много. И совершенно параллельная структура в интерфейсе, метаданных, организации заметок и оформлении. Реально как продукт внутри продукта. Не нашёл как внутри make.md использовать свойства заметок, да и ещё он мусорит служебными файлами в каталог с заметками.

2) DB folder - выводит в табличном виде заметки не только из папки, но и по тегу, например. Вроде делает то, что надо, но мало настроек и встроенная таблица в заметке выглядит чужеродно.

3) Dataview - БАЗА для любого пользователя Obisidian. Имеет три киллер-фичи - вывод данных таблицей или списком с использованием языка запросов, похожего на SQL, вывод данных в строке (inline) и использование для запросов js.

На третьем варианте я и остановился. Что я хотел:
1) Карточку (запись) с картинкой и атрибутами
2) Вывод содержимого карточек в виде сетки, с теми же атрибутами и картинками

Как я это организовал: привести карточку и сетку к нужному виду мне помогли самописные css-сниппеты. Свёрстано всё это было поверх темы minimal, поэтому в стандартной теме выглядит уныло. Но оно мне в стандартной теме и не нужно. Для того чтобы локально хранящееся изображение выводилось в сетке, пришлось запихнуть его в атрибут. Для того же, чтоб оно выводилось в карточке написал строковый запрос типа $= dv.container = '<img alt="cover" src="' + app.vault.getResourcePath(dv.current().cover) + '" />' Служебные поля вроде "cssclasses" скрыл для режима просмотра с помощью тех же css-сниппетов.

Не то чтобы мне сильно нужна была база пиваса, но на чём-то же надо было технологию обкатывать ))

https://entropysource.ru/photo/17976056126692810908c16470793762-1.jpeg

https://entropysource.ru/photo/400276899666928108d2486208924989-1.jpeg

#obsidian