content: применить правки кейса Card Columns

This commit is contained in:
root committed 2026-09-29 18:29:44 +02:00
1 parent 908d5b259d
commit ac8b60049a
5 files changed
+255 -140

No files matched your search

+57 -31
View File
@@ -444,34 +444,43 @@
</figure>
<p class="section__prose">
Я разработал Card Columns, вид для Obsidian Bases. Штатный вид Cards выводил заметки длинной лентой,
а мне хотелось разложить их по группам. Плагин опубликован
в&nbsp;<a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге Obsidian Community</a>.
Я разработал Card Columns, дополнительный вид карточек для Obsidian Bases. Штатный Cards показывал
заметки сеткой, а мне был нужен вид с колонками. В готовых плагинах я не нашёл подходящего сценария,
поэтому сделал свой. Плагин опубликован в&nbsp;<a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге Obsidian Community</a>.
Код открыт по лицензии MIT.
</p>
<div class="case-block" id="kontekst">
<h2>От запроса Bases к колонкам</h2>
<h2>Ещё один вид карточек для Bases</h2>
<p class="section__prose">
Файл <code>.base</code> хранит запрос к заметкам в vault: что показать и какие свойства вывести.
В моей базе штатный вид Cards превращал результат в длинную ленту. Я хотел видеть те же заметки
по группам, например по статусу или тегу.
В Obsidian Bases я настраиваю запрос через интерфейс и выбираю, как показать результат: таблицей,
списком или карточками. Card Columns добавляет ещё один карточный вид: раскладывает заметки по
колонкам на основе выбранного свойства.
</p>
<p class="section__prose">
Columns подключается к Bases как ещё один вид и получает результат запроса. Сортировку,
фильтры, свойства и поиск по-прежнему задаю в штатном тулбаре. Заметки остаются в vault,
а&nbsp;запрос хранится в файле <code>.base</code>. Columns меняет только способ показа результата.
Сортировку, фильтры, поиск и набор свойств задаю в штатном тулбаре Bases. Columns использует
эту выборку и меняет способ её отображения. При просмотре заметки остаются без изменений.
Перетаскивание карточки обновляет свойство, по которому построены колонки.
</p>
</div>
<div class="case-block" id="filtry">
<h2>Сначала сгруппировать, потом отобрать</h2>
<p class="section__prose">
В тулбаре Bases задаю Group by: тег, статус, категорию или другое frontmatter-свойство.
Если ничего не указать, Columns группирует по тегам. Меняю Group by, и колонки перестраиваются.
Условия запроса при этом не трогаю. Если у свойства несколько значений, заметка попадает
в&nbsp;каждую соответствующую колонку, а не теряет остальные группы.
В тулбаре Bases выбираю Group by: тег, статус, категорию или другое свойство.
Если группу не задать, Columns группирует по тегам. Меняю Group by, и колонки перестраиваются.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>
Мне нужна была одна карточка сразу в нескольких столбцах. Например, ссылка с тегами «Инструменты»
и «AI» появляется в обеих колонках. В базе фильмов одна и та же карточка может попасть в «Комедии»
и «Семейные». Готовые плагины, которые я пробовал, такого сценария не решали. Поэтому я сделал Columns.
Так заметку не нужно дублировать: она видна в каждой подходящей группе.
</p>
</div>
</aside>
<p class="section__prose">
Пилюли тегов стоят под тулбаром, рядом с доской. Обычный клик оставляет один тег, а&nbsp;следующий
добавляет ещё один по OR. Ctrl+клик или правый клик включает и выключает отдельный тег, не
@@ -479,9 +488,8 @@
заметки, где есть все выбранные теги. All сбрасывает отбор.
</p>
<p class="section__prose">
Пилюли сужают текущую выборку, но не записывают условия в файл <code>.base</code>. Для
сохранённых условий остаётся штатный Filter. Теговый фильтр нужен для быстрого просмотра
вариантов, поэтому он всегда рядом с доской.
Фильтр по тегам уточняет уже полученную выборку. Штатный Filter задаёт основные условия через тулбар,
а пилюли позволяют быстро выбрать нужную комбинацию, не уходя с доски.
</p>
<figure class="case-media case-media--wide">
<div class="case-video-shell">
@@ -511,6 +519,11 @@
В&nbsp;сплите обычный клик открывает заметку в&nbsp;панели рядом с доской, а&nbsp;Ctrl+клик добавляет вкладку
в&nbsp;эту панель. Доска остаётся на месте, и&nbsp;контекст выборки не теряется.
</p>
<h3>Интерфейс в стиле Obsidian</h3>
<p class="section__prose">
Интерфейс Columns я проектировал и собирал прямо в коде, без Figma и других редакторов.
Ориентировался на дизайн-систему Obsidian, чтобы вид воспринимался частью приложения.
</p>
</div>
<div class="case-block" id="reshenie">
@@ -525,12 +538,12 @@
Перетаскивание включено по умолчанию, но в General его можно отключить. Тогда Columns останется
видом для обзора, без правок свойств перетаскиванием.
</p>
<h3>Настройки под разные базы</h3>
<h3>Настройки сгруппированы по типу</h3>
<p class="section__prose">
Настройки собраны в четырёх группах: General, Title, Properties и Cover. В General задаю
ширину карточек, число колонок в группе (от 1 до 6) и их порядок. Можно оставить автоматический
порядок или задать его вручную; пустые колонки при этом остаются на месте. Например, колонка
Done не исчезнет, даже если в ней пока нет карточек.
Разделы General, Title, Properties и Cover собраны по типу параметров, чтобы нужное было проще найти.
В General задаю ширину карточек, число колонок в группе (от 1 до 6) и их порядок. Можно оставить
автоматический порядок или задать его вручную; пустые колонки при этом остаются на месте. Например,
колонка Done не исчезнет, даже если в ней пока нет карточек.
</p>
<p class="section__prose">
Сетка раскладывает карточки рядом, masonry заполняет пустоты по вертикали, а зебра помогает
@@ -548,27 +561,40 @@
</figure>
</div>
<div class="case-block" id="publikaciya">
<h2>От разработки к публикации</h2>
<p class="section__prose">
Разработку веду с помощью Hermes Agent. Исходный код хранится на VPS агента, а собранная версия
синхронизируется на мой ноутбук. Там я проверяю плагин в своём vault.
</p>
<p class="section__prose">
Если всё работает, агент через настроенные скрипты отправляет изменения в Gitea и GitHub.
Публикацию новой версии в каталоге Obsidian Community я запускаю сам.
</p>
</div>
<div class="case-block" id="rezultat">
<h2>Результат: доска внутри Obsidian Bases</h2>
<p class="section__prose">
Card Columns оставляет заметки в Bases, но меняет способ их обзора: я задаю группировку,
отбираю теги и открываю карточки рядом с доской. Когда нужно сменить статус, перетаскивание
обновляет то же frontmatter-свойство, по которому строятся колонки. Я&nbsp;продолжаю пользоваться
Columns в&nbsp;своей базе: отдельную доску синхронизировать не нужно.
обновляет свойство, по которому построены колонки.
</p>
<p class="section__prose">
Время поиска до и после я не замерял, поэтому цифры экономии не привожу.
</p>
<p class="section__prose">
На момент подготовки кейса карточка Obsidian Community показывала версию 0.9.0 и 846 загрузок.
Плагин работает с Obsidian 1.8.0 и новее на компьютерах и мобильных устройствах. Лицензия MIT.
К концу сентября 2026 года плагин набрал 846 органических загрузок в каталоге Obsidian Community.
Там указана версия 0.9.0. На <a href="https://github.com/mamadaevv/card-columns" target="_blank" rel="noopener noreferrer">GitHub</a>
у Card Columns 4 звезды и два обращения: сообщение об ошибке закрыто, а запрос на выбор свойства
обложки пока открыт.
Некоторые предложенные доработки уже вошли в релизы. Плагин работает с Obsidian 1.8.0 и новее
на компьютерах и мобильных устройствах, лицензия MIT.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
<div class="case-callout__content">
<p>
Для меня важна граница между обзором и изменением данных. Группировка и фильтр помогают
читать базу. Перенос карточки меняет её свойство. Это действие видно, его можно отключить.
Для меня главный результат в том, что карточки стало удобнее представлять и просматривать.
Я выбираю нужные поля и группировку, а одна заметка может появиться в нескольких подходящих
колонках. Перетаскивание отдельно меняет свойство, и его можно отключить.
</p>
</div>
</aside>