edit: вычитай кейс Card Columns
This commit is contained in:
root committed
1 parent
eb90714012
commit
6325186f52
6 files changed
+255
-258
No files matched your search
@@ -262,6 +262,10 @@
|
||||
padding-top: 2.5rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
||||
}
|
||||
.case-block#kartochki,
|
||||
.case-block#rezultat {
|
||||
border-top: 0;
|
||||
}
|
||||
.case-block:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@@ -427,7 +431,7 @@
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Obsidian Bases · Plugin</p>
|
||||
<h1 class="case-page__h1">
|
||||
Канбан-доска для Obsidian Bases<br />с фильтрацией и перетаскиванием
|
||||
Канбан-доска для Obsidian Bases<br />с фильтрацией и перетаскиванием
|
||||
</h1>
|
||||
<p class="case-page__sub">
|
||||
Card Columns: группировка по свойствам,<br />
|
||||
@@ -440,52 +444,44 @@
|
||||
</figure>
|
||||
|
||||
<p class="section__prose">
|
||||
Card Columns - мой плагин-вид для Obsidian Bases. Я спроектировал и разработал его сам:
|
||||
хотел видеть заметки колонками, а не искать нужные в длинной ленте штатного Cards. Плагин
|
||||
опубликован в <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге Obsidian Community</a>,
|
||||
исходный код открыт по лицензии MIT.
|
||||
Я разработал Card Columns, вид для Obsidian Bases. Штатный вид Cards выводил заметки длинной лентой,
|
||||
а мне хотелось разложить их по группам. Плагин опубликован
|
||||
в <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>
|
||||
<p class="section__prose">
|
||||
Файл <code>.base</code> описывает запрос к заметкам в vault: какие записи показать и какие
|
||||
свойства вывести. Штатный вид Cards в моей базе складывал результаты в длинную ленту.
|
||||
Я хотел видеть ту же выборку по группам, например по статусу или тегу.
|
||||
Файл <code>.base</code> хранит запрос к заметкам в vault: что показать и какие свойства вывести.
|
||||
В моей базе штатный вид Cards превращал результат в длинную ленту. Я хотел видеть те же заметки
|
||||
по группам, например по статусу или тегу.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Columns подключается как ещё один BasesView и получает результат запроса. Сортировка,
|
||||
фильтры, набор свойств и поиск остаются за штатным тулбаром. Я не стал заводить отдельную
|
||||
доску: заметки и настройки запроса остаются в Bases, плагин меняет только их представление.
|
||||
Columns подключается к Bases как ещё один вид и получает результат запроса. Сортировку,
|
||||
фильтры, свойства и поиск по-прежнему задаю в штатном тулбаре. Заметки остаются в vault,
|
||||
а запрос хранится в файле <code>.base</code>. Columns меняет только способ показа результата.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="filtry">
|
||||
<h2>Сначала сгруппировать, потом отобрать</h2>
|
||||
<p class="section__prose">
|
||||
Группировку настраиваю через Group by в тулбаре Bases: по тегу, статусу, категории или
|
||||
любому frontmatter-свойству. Если свойство не задано, Columns группирует по тегам. Колонки
|
||||
строятся из значений выбранного свойства, а исходный запрос остаётся тем же. Одна база
|
||||
подходит для разных разрезов: меняю только группировку.
|
||||
В тулбаре Bases задаю Group by: тег, статус, категорию или другое frontmatter-свойство.
|
||||
Если ничего не указать, Columns группирует по тегам. Меняю Group by, и колонки перестраиваются.
|
||||
Условия запроса при этом не трогаю. Если у свойства несколько значений, заметка попадает
|
||||
в каждую соответствующую колонку, а не теряет остальные группы.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Теги для быстрого отбора вынесены отдельными пилюлями под тулбаром. Щёлкнул один раз,
|
||||
оставил этот тег. Выбрал следующий, добавил его по OR. Для точного переключения использую
|
||||
Ctrl+клик или правую кнопку мыши, а кнопкой OR/AND меняю логику отбора:
|
||||
Пилюли тегов стоят под тулбаром, рядом с доской. Обычный клик оставляет один тег, а следующий
|
||||
добавляет ещё один по OR. Ctrl+клик или правый клик включает и выключает отдельный тег, не
|
||||
сбрасывая остальные. В режиме OR достаточно совпадения с одним выбранным тегом. AND оставляет
|
||||
заметки, где есть все выбранные теги. All сбрасывает отбор.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Эти пилюли не заменяют Filter в тулбаре. Bases формирует исходную выборку, а теговый фильтр
|
||||
сужает её уже внутри Columns. Так я не меняю запрос, когда нужно быстро посмотреть подмножество.
|
||||
</p>
|
||||
<ul class="section__prose">
|
||||
<li>первый тег оставляет только заметки с ним;</li>
|
||||
<li>следующий добавляет заметки с любым из выбранных тегов;</li>
|
||||
<li>Ctrl+клик или правый клик добавляет и снимает один тег, не сбрасывая остальные;</li>
|
||||
<li>OR/AND переключает условие между «любой из» и «все выбранные», All очищает выбор.</li>
|
||||
</ul>
|
||||
<p class="section__prose">
|
||||
Фильтр остаётся перед глазами вместе с доской. Модальное окно здесь только мешало бы:
|
||||
пришлось бы закрывать его, чтобы проверить результат.
|
||||
Пилюли сужают текущую выборку, но не записывают условия в файл <code>.base</code>. Для
|
||||
сохранённых условий остаётся штатный Filter. Теговый фильтр нужен для быстрого просмотра
|
||||
вариантов, поэтому он всегда рядом с доской.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -501,41 +497,45 @@
|
||||
<div class="case-block" id="kartochki">
|
||||
<h2>Карточка показывает нужные поля</h2>
|
||||
<p class="section__prose">
|
||||
Состав карточки задаётся штатным списком Properties. Первое выбранное свойство становится
|
||||
заголовком, остальные отображаются чипами: текст, теги, ссылки, булевы значения и даты.
|
||||
Для чипов можно выбрать вертикальный стек или компактную сетку, настроить перенос и формат даты.
|
||||
Какие поля попадут на карточку, выбираю в штатном списке Properties. Первое свойство становится
|
||||
заголовком, остальные показываются чипами: текст, теги, ссылки, булевы значения и даты.
|
||||
Grid собирает свойства с короткими значениями в компактную сетку, Stack располагает их друг
|
||||
под другим. Для длинных значений можно включить перенос, а даты показывать в нужном формате.
|
||||
Так карточка показывает выбранные для конкретной базы поля, не меняя сами заметки.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Если базе нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного
|
||||
frontmatter-свойства. Можно настроить пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), вписывание
|
||||
и место обложки. Карточка открывается в активной панели, модальном окне, новой вкладке или
|
||||
сплите. В сплите обычный клик переиспользует панель, Ctrl+клик открывает новую вкладку.
|
||||
Так можно читать заметку рядом с доской и не терять контекст выборки.
|
||||
Если для базы нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного
|
||||
свойства frontmatter. В настройках задаю пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), способ вписывания
|
||||
и место на карточке.
|
||||
Карточку можно открыть в активной панели, модальном окне, новой вкладке или сплите.
|
||||
В сплите обычный клик открывает заметку в панели рядом с доской, а Ctrl+клик добавляет вкладку
|
||||
в эту панель. Доска остаётся на месте, и контекст выборки не теряется.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="reshenie">
|
||||
<h2>Перетаскивание меняет свойство заметки</h2>
|
||||
<p class="section__prose">
|
||||
В релизе 0.9.0 карточку можно перетащить в другую колонку, и Columns обновит
|
||||
frontmatter-свойство, по которому построена группировка, через API
|
||||
Obsidian <code>processFrontMatter()</code>. Если колонки собраны по статусу, после переноса
|
||||
меняется именно статус заметки. Если в свойстве несколько значений, старое убирается,
|
||||
новое добавляется, остальные сохраняются.
|
||||
В версии 0.9.0 карточки можно перемещать между колонками. При переносе Columns через API
|
||||
Obsidian <code>processFrontMatter()</code> меняет frontmatter-свойство, по которому построена
|
||||
группировка. На статусной доске перенос меняет статус заметки. Если свойство хранит список,
|
||||
плагин заменяет перенесённое значение и сохраняет остальные значения.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Я оставил этот сценарий настраиваемым. Drag-and-drop включён по умолчанию, но его можно
|
||||
отключить в General. Так пользователь сам выбирает: только смотреть на группы или менять
|
||||
значение свойства прямо с доски.
|
||||
Перетаскивание включено по умолчанию, но в General его можно отключить. Тогда Columns останется
|
||||
видом для обзора, без правок свойств перетаскиванием.
|
||||
</p>
|
||||
<h3>Настройки под разные базы</h3>
|
||||
<p class="section__prose">
|
||||
У вида четыре группы настроек: General, Title, Properties и Cover. В них задаются ширина
|
||||
карточек, число колонок внутри группы (от 1 до 6), порядок колонок, зебра и masonry.
|
||||
Порядок можно оставить автоматическим или задать вручную; пустые колонки в этом списке
|
||||
сохраняются. Сетка показывает несколько карточек рядом, masonry заполняет вертикальные
|
||||
пустоты, а зебра помогает не сбиться при чтении широкой доски. Отдельно настраиваются заголовки, чипы, даты
|
||||
и обложки. Один вид подстраивается под разные базы, а не наоборот.
|
||||
Настройки собраны в четырёх группах: General, Title, Properties и Cover. В General задаю
|
||||
ширину карточек, число колонок в группе (от 1 до 6) и их порядок. Можно оставить автоматический
|
||||
порядок или задать его вручную; пустые колонки при этом остаются на месте. Например, колонка
|
||||
Done не исчезнет, даже если в ней пока нет карточек.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Сетка раскладывает карточки рядом, masonry заполняет пустоты по вертикали, а зебра помогает
|
||||
следить за колонками на широком экране. Для заголовков, чипов, дат и обложек есть отдельные
|
||||
параметры. Так один и тот же вид подходит разным базам.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -552,22 +552,23 @@
|
||||
<h2>Результат: доска внутри Obsidian Bases</h2>
|
||||
<p class="section__prose">
|
||||
Card Columns оставляет заметки в Bases, но меняет способ их обзора: я задаю группировку,
|
||||
отбираю теги и открываю карточки рядом с доской. Когда нужна смена статуса, перетаскивание
|
||||
правит то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться
|
||||
Columns в своей базе: заметки остаются в vault, отдельную доску синхронизировать не нужно.
|
||||
отбираю теги и открываю карточки рядом с доской. Когда нужно сменить статус, перетаскивание
|
||||
обновляет то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться
|
||||
Columns в своей базе: отдельную доску синхронизировать не нужно.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
На скриншоте моя база Links: Obsidian показывает 196 результатов. Плагин уже опубликован
|
||||
в каталоге Obsidian Community. На момент обновления кейса там указаны версия 0.9.0 и
|
||||
846 загрузок; поддерживаются Obsidian 1.8.0+, Desktop и Mobile, лицензия MIT.
|
||||
Время поиска до и после я не замерял, поэтому цифры экономии не привожу.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
На момент подготовки кейса карточка Obsidian Community показывала версию 0.9.0 и 846 загрузок.
|
||||
Плагин работает с 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>
|
||||
Для меня важна граница между обзором и изменением данных. Группировка и фильтр помогают
|
||||
читать базу; перенос карточки меняет её свойство. В Columns это действие видно и его
|
||||
можно отключить.
|
||||
читать базу. Перенос карточки меняет её свойство. Это действие видно, его можно отключить.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -262,6 +262,10 @@
|
||||
padding-top: 2.5rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
||||
}
|
||||
.case-block#cards,
|
||||
.case-block#rezultat {
|
||||
border-top: 0;
|
||||
}
|
||||
.case-block:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@@ -441,52 +445,43 @@
|
||||
</figure>
|
||||
|
||||
<p class="section__prose">
|
||||
Card Columns is my view plugin for Obsidian Bases. I designed and built it myself because I wanted
|
||||
to scan notes in columns instead of searching through the standard Cards feed. The plugin is
|
||||
available in the <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian Community directory</a>
|
||||
I designed and built Card Columns as a view for Obsidian Bases. The built-in Cards view showed
|
||||
my notes as a long feed. I wanted a board where I could scan them by status or tag. The plugin is listed in
|
||||
<a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian Community directory</a>
|
||||
and is open source under the MIT license.
|
||||
</p>
|
||||
|
||||
<div class="case-block" id="kontekst">
|
||||
<h2>From a Bases query to columns</h2>
|
||||
<p class="section__prose">
|
||||
A <code>.base</code> file describes a query over notes in the vault: which entries to show and
|
||||
which properties to display. In my database, Obsidian’s built-in Cards view produced a long
|
||||
feed. I wanted to see the same results grouped by a property such as status or tag.
|
||||
A <code>.base</code> file stores a query over the vault: which notes to show and which properties
|
||||
to display. In my database, the built-in Cards view returned a long feed. I wanted to see those
|
||||
notes grouped by status or tag.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Columns registers as another BasesView and receives the query results. Sorting, filters, visible
|
||||
properties, and search stay in the native toolbar. I chose not to create a separate board: the
|
||||
notes and query settings remain in Bases; the plugin changes only how they are displayed.
|
||||
The plugin registers as another Bases view and receives the query results. Bases still handles sorting,
|
||||
filters, visible properties, and search in its native toolbar. Notes stay in the vault, while the
|
||||
query stays in the <code>.base</code> file. Columns only changes how the results are displayed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="filters">
|
||||
<h2>Group first, filter second</h2>
|
||||
<p class="section__prose">
|
||||
I set grouping through Group by in the Bases toolbar: tags, status, category, or any frontmatter
|
||||
property. If none is selected, Columns groups by tags. The columns use that property’s values;
|
||||
the underlying query stays the same. To view the database from another angle, I only change
|
||||
its grouping.
|
||||
In the Bases toolbar, I choose Group by and select a tag, status, category, or another frontmatter
|
||||
property. With no property selected, Columns groups by tags. Changing Group by reshapes the columns,
|
||||
but leaves the Bases query alone. If a property has several values, a note appears in each
|
||||
matching column instead of losing its other groups.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
I put tag filters right below the toolbar. Click one tag to keep only notes with it. Click another
|
||||
to add it in OR mode. Ctrl-click or right-click toggles one tag without clearing the rest, and
|
||||
the OR/AND control changes how multiple selections combine:
|
||||
Tag pills sit under the toolbar, beside the board. A regular click filters to that tag; clicking
|
||||
another adds it in OR mode. Ctrl-click or right-click toggles one tag without clearing the rest.
|
||||
OR/AND switches between matching any selected tag and matching all of them. All clears the filter.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
These pills do not replace Filter in the toolbar. Bases creates the initial result set; the tag
|
||||
filter narrows it inside Columns. I can inspect a subset without changing the underlying query.
|
||||
</p>
|
||||
<ul class="section__prose">
|
||||
<li>the first tag narrows the view to notes that have it;</li>
|
||||
<li>the next adds notes with any of the selected tags;</li>
|
||||
<li>Ctrl-click or right-click toggles a single tag in the current selection;</li>
|
||||
<li>OR/AND switches between “any selected” and “all selected”; All clears the selection.</li>
|
||||
</ul>
|
||||
<p class="section__prose">
|
||||
The filter stays visible beside the board. A modal would interrupt the flow: I would have to close
|
||||
it just to check what changed.
|
||||
Tag pills narrow the current Bases results without writing conditions to the <code>.base</code> file.
|
||||
The native Filter remains the place for saved query conditions. I kept the pills beside the board
|
||||
so each click updates the view in place.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -502,39 +497,42 @@
|
||||
<div class="case-block" id="cards">
|
||||
<h2>Cards show the fields I need</h2>
|
||||
<p class="section__prose">
|
||||
The card contents follow the native Properties selection. The first selected property becomes
|
||||
the title; the rest appear as chips: text, tags, links, booleans, and dates. Chips can use a vertical
|
||||
stack or compact grid, with configurable wrapping and date formats.
|
||||
I choose visible fields from the native Properties list. The first selected property becomes the
|
||||
title; the rest appear as chips: text, tags, links, booleans, and dates. Properties chips can be
|
||||
stacked vertically or arranged in a compact grid. I can also set wrapping for multi-line values and
|
||||
date formats. The cards show the fields selected for each database without changing the notes themselves.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
When a database needs covers, Columns can use the first image in a note or a chosen frontmatter
|
||||
property. I can set the aspect ratio (Auto, 1:1, 3:2, 4:3, or 16:9), fit, and position. Cards can
|
||||
open in the active pane, a floating modal, a new tab, or a split pane. In a split, a click reuses
|
||||
the pane; Ctrl-click opens a new tab. That keeps the note beside the board without losing the
|
||||
current query context.
|
||||
For a cover, I can use the first image in a note or a frontmatter property value. The settings control
|
||||
its aspect ratio (Auto, 1:1, 3:2, 4:3, or 16:9), fit, and position. I can open a card in the
|
||||
active pane, a modal, a new tab, or a split. In a split, a click reuses the pane; Ctrl-click opens
|
||||
another tab in that pane. The board stays in view, so I can follow the current query.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="reshenie">
|
||||
<h2>Dragging a card edits its note</h2>
|
||||
<p class="section__prose">
|
||||
In version 0.9.0, a card can be dragged into another column. That movement changes data: Columns
|
||||
updates the frontmatter property used for grouping through Obsidian’s
|
||||
<code>processFrontMatter()</code> API. If the board is grouped by status, dropping a card into a
|
||||
different column changes that note’s status. For a multi-value property, the old value is removed,
|
||||
the new one is added, and the other values stay in place.
|
||||
Version 0.9.0 supports moving cards between columns. When a card moves, Columns updates the
|
||||
grouping property through Obsidian’s <code>processFrontMatter()</code> API. On a status board, that
|
||||
changes the note’s status. If the property is a list, Columns replaces the moved value and leaves
|
||||
the others intact.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Drag-and-drop is enabled by default, but it can be turned off in General settings. The choice is
|
||||
explicit: use the board to inspect groups, or edit the grouping property by moving a card.
|
||||
Drag-and-drop is enabled by default. A switch in General settings turns it off, so the board will
|
||||
not update frontmatter when cards move.
|
||||
</p>
|
||||
<h3>Settings for different databases</h3>
|
||||
<p class="section__prose">
|
||||
The view has four settings groups: General, Title, Properties, and Cover. They cover card width,
|
||||
one to six cards per group, column order, zebra striping, and masonry. Column order can be automatic
|
||||
or set manually, with empty columns kept in place. The grid places cards side by side,
|
||||
masonry fills vertical gaps, and zebra striping helps scan a wide board. Title style,
|
||||
property chips, dates, and covers have their own controls. The view adapts to the database.
|
||||
Settings are grouped into General, Title, Properties, and Cover. In General, I set card width,
|
||||
one to six columns per group, and column order. I can leave the order automatic or set it manually;
|
||||
the manual layout keeps empty columns in place. A lane such as Done stays visible even when it has
|
||||
no cards yet.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Grid layout places several cards side by side. Masonry fills vertical gaps, while zebra striping
|
||||
makes a wide board easier to scan. Title style, property chips, dates, and covers have their own controls,
|
||||
so the same view can fit different databases.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -550,23 +548,24 @@
|
||||
<div class="case-block" id="rezultat">
|
||||
<h2>Result: a board inside Obsidian Bases</h2>
|
||||
<p class="section__prose">
|
||||
Card Columns keeps notes in Bases but changes how I scan them: I choose a grouping, filter tags,
|
||||
and open cards beside the board. When I need to change a status, dragging a card updates the same
|
||||
frontmatter property that forms the columns. I still use Columns with my own database; notes stay
|
||||
in the vault, so there is no separate board to keep in sync.
|
||||
Card Columns keeps notes in Bases while changing how I browse them. I group the results, filter by tags,
|
||||
and open cards beside the board. When I need to change a status, moving a card updates the same
|
||||
frontmatter property used for grouping. I still use Columns in my own vault, so there is no separate
|
||||
board to sync.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
The screenshot shows my Links database; Obsidian displays 196 results. The plugin is listed in
|
||||
Obsidian Community. When I updated this case, the listing showed version 0.9.0 and 846 downloads;
|
||||
it supports Obsidian 1.8.0+, desktop and mobile, under the MIT license.
|
||||
I did not compare search times before and after, so I am not claiming a time saving.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
When I prepared this case, the Obsidian Community listing showed version 0.9.0 and 846 downloads.
|
||||
The plugin supports Obsidian 1.8.0+ on desktop and mobile under the MIT license.
|
||||
</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>
|
||||
I care about the boundary between viewing and changing data. Grouping and filtering help me
|
||||
read the database; moving a card edits its property. In Columns, that action is visible and
|
||||
can be turned off.
|
||||
Grouping and filtering help me browse the database. Moving a card changes its property. That edit
|
||||
is visible and can be turned off.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
+1
-1
@@ -31,7 +31,7 @@
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://mamadaevv.site/cases/card-columns-obsidian/</loc>
|
||||
<lastmod>2026-09-24</lastmod>
|
||||
<lastmod>2026-09-29</lastmod>
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/card-columns-obsidian/" />
|
||||
<xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/card-columns-obsidian/" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/card-columns-obsidian/" />
|
||||
|
||||
@@ -54,6 +54,10 @@
|
||||
padding-top: 2.5rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
||||
}
|
||||
.case-block#cards,
|
||||
.case-block#rezultat {
|
||||
border-top: 0;
|
||||
}
|
||||
.case-block:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@@ -128,52 +132,43 @@
|
||||
</figure>
|
||||
|
||||
<p class="section__prose">
|
||||
Card Columns is my view plugin for Obsidian Bases. I designed and built it myself because I wanted
|
||||
to scan notes in columns instead of searching through the standard Cards feed. The plugin is
|
||||
available in the <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian Community directory</a>
|
||||
I designed and built Card Columns as a view for Obsidian Bases. The built-in Cards view showed
|
||||
my notes as a long feed. I wanted a board where I could scan them by status or tag. The plugin is listed in
|
||||
<a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">Obsidian Community directory</a>
|
||||
and is open source under the MIT license.
|
||||
</p>
|
||||
|
||||
<div class="case-block" id="kontekst">
|
||||
<h2>From a Bases query to columns</h2>
|
||||
<p class="section__prose">
|
||||
A <code>.base</code> file describes a query over notes in the vault: which entries to show and
|
||||
which properties to display. In my database, Obsidian’s built-in Cards view produced a long
|
||||
feed. I wanted to see the same results grouped by a property such as status or tag.
|
||||
A <code>.base</code> file stores a query over the vault: which notes to show and which properties
|
||||
to display. In my database, the built-in Cards view returned a long feed. I wanted to see those
|
||||
notes grouped by status or tag.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Columns registers as another BasesView and receives the query results. Sorting, filters, visible
|
||||
properties, and search stay in the native toolbar. I chose not to create a separate board: the
|
||||
notes and query settings remain in Bases; the plugin changes only how they are displayed.
|
||||
The plugin registers as another Bases view and receives the query results. Bases still handles sorting,
|
||||
filters, visible properties, and search in its native toolbar. Notes stay in the vault, while the
|
||||
query stays in the <code>.base</code> file. Columns only changes how the results are displayed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="filters">
|
||||
<h2>Group first, filter second</h2>
|
||||
<p class="section__prose">
|
||||
I set grouping through Group by in the Bases toolbar: tags, status, category, or any frontmatter
|
||||
property. If none is selected, Columns groups by tags. The columns use that property’s values;
|
||||
the underlying query stays the same. To view the database from another angle, I only change
|
||||
its grouping.
|
||||
In the Bases toolbar, I choose Group by and select a tag, status, category, or another frontmatter
|
||||
property. With no property selected, Columns groups by tags. Changing Group by reshapes the columns,
|
||||
but leaves the Bases query alone. If a property has several values, a note appears in each
|
||||
matching column instead of losing its other groups.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
I put tag filters right below the toolbar. Click one tag to keep only notes with it. Click another
|
||||
to add it in OR mode. Ctrl-click or right-click toggles one tag without clearing the rest, and
|
||||
the OR/AND control changes how multiple selections combine:
|
||||
Tag pills sit under the toolbar, beside the board. A regular click filters to that tag; clicking
|
||||
another adds it in OR mode. Ctrl-click or right-click toggles one tag without clearing the rest.
|
||||
OR/AND switches between matching any selected tag and matching all of them. All clears the filter.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
These pills do not replace Filter in the toolbar. Bases creates the initial result set; the tag
|
||||
filter narrows it inside Columns. I can inspect a subset without changing the underlying query.
|
||||
</p>
|
||||
<ul class="section__prose">
|
||||
<li>the first tag narrows the view to notes that have it;</li>
|
||||
<li>the next adds notes with any of the selected tags;</li>
|
||||
<li>Ctrl-click or right-click toggles a single tag in the current selection;</li>
|
||||
<li>OR/AND switches between “any selected” and “all selected”; All clears the selection.</li>
|
||||
</ul>
|
||||
<p class="section__prose">
|
||||
The filter stays visible beside the board. A modal would interrupt the flow: I would have to close
|
||||
it just to check what changed.
|
||||
Tag pills narrow the current Bases results without writing conditions to the <code>.base</code> file.
|
||||
The native Filter remains the place for saved query conditions. I kept the pills beside the board
|
||||
so each click updates the view in place.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -189,39 +184,42 @@
|
||||
<div class="case-block" id="cards">
|
||||
<h2>Cards show the fields I need</h2>
|
||||
<p class="section__prose">
|
||||
The card contents follow the native Properties selection. The first selected property becomes
|
||||
the title; the rest appear as chips: text, tags, links, booleans, and dates. Chips can use a vertical
|
||||
stack or compact grid, with configurable wrapping and date formats.
|
||||
I choose visible fields from the native Properties list. The first selected property becomes the
|
||||
title; the rest appear as chips: text, tags, links, booleans, and dates. Properties chips can be
|
||||
stacked vertically or arranged in a compact grid. I can also set wrapping for multi-line values and
|
||||
date formats. The cards show the fields selected for each database without changing the notes themselves.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
When a database needs covers, Columns can use the first image in a note or a chosen frontmatter
|
||||
property. I can set the aspect ratio (Auto, 1:1, 3:2, 4:3, or 16:9), fit, and position. Cards can
|
||||
open in the active pane, a floating modal, a new tab, or a split pane. In a split, a click reuses
|
||||
the pane; Ctrl-click opens a new tab. That keeps the note beside the board without losing the
|
||||
current query context.
|
||||
For a cover, I can use the first image in a note or a frontmatter property value. The settings control
|
||||
its aspect ratio (Auto, 1:1, 3:2, 4:3, or 16:9), fit, and position. I can open a card in the
|
||||
active pane, a modal, a new tab, or a split. In a split, a click reuses the pane; Ctrl-click opens
|
||||
another tab in that pane. The board stays in view, so I can follow the current query.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="reshenie">
|
||||
<h2>Dragging a card edits its note</h2>
|
||||
<p class="section__prose">
|
||||
In version 0.9.0, a card can be dragged into another column. That movement changes data: Columns
|
||||
updates the frontmatter property used for grouping through Obsidian’s
|
||||
<code>processFrontMatter()</code> API. If the board is grouped by status, dropping a card into a
|
||||
different column changes that note’s status. For a multi-value property, the old value is removed,
|
||||
the new one is added, and the other values stay in place.
|
||||
Version 0.9.0 supports moving cards between columns. When a card moves, Columns updates the
|
||||
grouping property through Obsidian’s <code>processFrontMatter()</code> API. On a status board, that
|
||||
changes the note’s status. If the property is a list, Columns replaces the moved value and leaves
|
||||
the others intact.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Drag-and-drop is enabled by default, but it can be turned off in General settings. The choice is
|
||||
explicit: use the board to inspect groups, or edit the grouping property by moving a card.
|
||||
Drag-and-drop is enabled by default. A switch in General settings turns it off, so the board will
|
||||
not update frontmatter when cards move.
|
||||
</p>
|
||||
<h3>Settings for different databases</h3>
|
||||
<p class="section__prose">
|
||||
The view has four settings groups: General, Title, Properties, and Cover. They cover card width,
|
||||
one to six cards per group, column order, zebra striping, and masonry. Column order can be automatic
|
||||
or set manually, with empty columns kept in place. The grid places cards side by side,
|
||||
masonry fills vertical gaps, and zebra striping helps scan a wide board. Title style,
|
||||
property chips, dates, and covers have their own controls. The view adapts to the database.
|
||||
Settings are grouped into General, Title, Properties, and Cover. In General, I set card width,
|
||||
one to six columns per group, and column order. I can leave the order automatic or set it manually;
|
||||
the manual layout keeps empty columns in place. A lane such as Done stays visible even when it has
|
||||
no cards yet.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Grid layout places several cards side by side. Masonry fills vertical gaps, while zebra striping
|
||||
makes a wide board easier to scan. Title style, property chips, dates, and covers have their own controls,
|
||||
so the same view can fit different databases.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -237,23 +235,24 @@
|
||||
<div class="case-block" id="rezultat">
|
||||
<h2>Result: a board inside Obsidian Bases</h2>
|
||||
<p class="section__prose">
|
||||
Card Columns keeps notes in Bases but changes how I scan them: I choose a grouping, filter tags,
|
||||
and open cards beside the board. When I need to change a status, dragging a card updates the same
|
||||
frontmatter property that forms the columns. I still use Columns with my own database; notes stay
|
||||
in the vault, so there is no separate board to keep in sync.
|
||||
Card Columns keeps notes in Bases while changing how I browse them. I group the results, filter by tags,
|
||||
and open cards beside the board. When I need to change a status, moving a card updates the same
|
||||
frontmatter property used for grouping. I still use Columns in my own vault, so there is no separate
|
||||
board to sync.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
The screenshot shows my Links database; Obsidian displays 196 results. The plugin is listed in
|
||||
Obsidian Community. When I updated this case, the listing showed version 0.9.0 and 846 downloads;
|
||||
it supports Obsidian 1.8.0+, desktop and mobile, under the MIT license.
|
||||
I did not compare search times before and after, so I am not claiming a time saving.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
When I prepared this case, the Obsidian Community listing showed version 0.9.0 and 846 downloads.
|
||||
The plugin supports Obsidian 1.8.0+ on desktop and mobile under the MIT license.
|
||||
</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>
|
||||
I care about the boundary between viewing and changing data. Grouping and filtering help me
|
||||
read the database; moving a card edits its property. In Columns, that action is visible and
|
||||
can be turned off.
|
||||
Grouping and filtering help me browse the database. Moving a card changes its property. That edit
|
||||
is visible and can be turned off.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -54,6 +54,10 @@
|
||||
padding-top: 2.5rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
||||
}
|
||||
.case-block#kartochki,
|
||||
.case-block#rezultat {
|
||||
border-top: 0;
|
||||
}
|
||||
.case-block:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@@ -114,7 +118,7 @@
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Obsidian Bases · Plugin</p>
|
||||
<h1 class="case-page__h1">
|
||||
Канбан-доска для Obsidian Bases<br />с фильтрацией и перетаскиванием
|
||||
Канбан-доска для Obsidian Bases<br />с фильтрацией и перетаскиванием
|
||||
</h1>
|
||||
<p class="case-page__sub">
|
||||
Card Columns: группировка по свойствам,<br />
|
||||
@@ -127,52 +131,44 @@
|
||||
</figure>
|
||||
|
||||
<p class="section__prose">
|
||||
Card Columns - мой плагин-вид для Obsidian Bases. Я спроектировал и разработал его сам:
|
||||
хотел видеть заметки колонками, а не искать нужные в длинной ленте штатного Cards. Плагин
|
||||
опубликован в <a href="https://community.obsidian.md/plugins/card-columns" target="_blank" rel="noopener noreferrer">каталоге Obsidian Community</a>,
|
||||
исходный код открыт по лицензии MIT.
|
||||
Я разработал Card Columns, вид для Obsidian Bases. Штатный вид Cards выводил заметки длинной лентой,
|
||||
а мне хотелось разложить их по группам. Плагин опубликован
|
||||
в <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>
|
||||
<p class="section__prose">
|
||||
Файл <code>.base</code> описывает запрос к заметкам в vault: какие записи показать и какие
|
||||
свойства вывести. Штатный вид Cards в моей базе складывал результаты в длинную ленту.
|
||||
Я хотел видеть ту же выборку по группам, например по статусу или тегу.
|
||||
Файл <code>.base</code> хранит запрос к заметкам в vault: что показать и какие свойства вывести.
|
||||
В моей базе штатный вид Cards превращал результат в длинную ленту. Я хотел видеть те же заметки
|
||||
по группам, например по статусу или тегу.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Columns подключается как ещё один BasesView и получает результат запроса. Сортировка,
|
||||
фильтры, набор свойств и поиск остаются за штатным тулбаром. Я не стал заводить отдельную
|
||||
доску: заметки и настройки запроса остаются в Bases, плагин меняет только их представление.
|
||||
Columns подключается к Bases как ещё один вид и получает результат запроса. Сортировку,
|
||||
фильтры, свойства и поиск по-прежнему задаю в штатном тулбаре. Заметки остаются в vault,
|
||||
а запрос хранится в файле <code>.base</code>. Columns меняет только способ показа результата.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="filtry">
|
||||
<h2>Сначала сгруппировать, потом отобрать</h2>
|
||||
<p class="section__prose">
|
||||
Группировку настраиваю через Group by в тулбаре Bases: по тегу, статусу, категории или
|
||||
любому frontmatter-свойству. Если свойство не задано, Columns группирует по тегам. Колонки
|
||||
строятся из значений выбранного свойства, а исходный запрос остаётся тем же. Одна база
|
||||
подходит для разных разрезов: меняю только группировку.
|
||||
В тулбаре Bases задаю Group by: тег, статус, категорию или другое frontmatter-свойство.
|
||||
Если ничего не указать, Columns группирует по тегам. Меняю Group by, и колонки перестраиваются.
|
||||
Условия запроса при этом не трогаю. Если у свойства несколько значений, заметка попадает
|
||||
в каждую соответствующую колонку, а не теряет остальные группы.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Теги для быстрого отбора вынесены отдельными пилюлями под тулбаром. Щёлкнул один раз,
|
||||
оставил этот тег. Выбрал следующий, добавил его по OR. Для точного переключения использую
|
||||
Ctrl+клик или правую кнопку мыши, а кнопкой OR/AND меняю логику отбора:
|
||||
Пилюли тегов стоят под тулбаром, рядом с доской. Обычный клик оставляет один тег, а следующий
|
||||
добавляет ещё один по OR. Ctrl+клик или правый клик включает и выключает отдельный тег, не
|
||||
сбрасывая остальные. В режиме OR достаточно совпадения с одним выбранным тегом. AND оставляет
|
||||
заметки, где есть все выбранные теги. All сбрасывает отбор.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Эти пилюли не заменяют Filter в тулбаре. Bases формирует исходную выборку, а теговый фильтр
|
||||
сужает её уже внутри Columns. Так я не меняю запрос, когда нужно быстро посмотреть подмножество.
|
||||
</p>
|
||||
<ul class="section__prose">
|
||||
<li>первый тег оставляет только заметки с ним;</li>
|
||||
<li>следующий добавляет заметки с любым из выбранных тегов;</li>
|
||||
<li>Ctrl+клик или правый клик добавляет и снимает один тег, не сбрасывая остальные;</li>
|
||||
<li>OR/AND переключает условие между «любой из» и «все выбранные», All очищает выбор.</li>
|
||||
</ul>
|
||||
<p class="section__prose">
|
||||
Фильтр остаётся перед глазами вместе с доской. Модальное окно здесь только мешало бы:
|
||||
пришлось бы закрывать его, чтобы проверить результат.
|
||||
Пилюли сужают текущую выборку, но не записывают условия в файл <code>.base</code>. Для
|
||||
сохранённых условий остаётся штатный Filter. Теговый фильтр нужен для быстрого просмотра
|
||||
вариантов, поэтому он всегда рядом с доской.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -188,41 +184,45 @@
|
||||
<div class="case-block" id="kartochki">
|
||||
<h2>Карточка показывает нужные поля</h2>
|
||||
<p class="section__prose">
|
||||
Состав карточки задаётся штатным списком Properties. Первое выбранное свойство становится
|
||||
заголовком, остальные отображаются чипами: текст, теги, ссылки, булевы значения и даты.
|
||||
Для чипов можно выбрать вертикальный стек или компактную сетку, настроить перенос и формат даты.
|
||||
Какие поля попадут на карточку, выбираю в штатном списке Properties. Первое свойство становится
|
||||
заголовком, остальные показываются чипами: текст, теги, ссылки, булевы значения и даты.
|
||||
Grid собирает свойства с короткими значениями в компактную сетку, Stack располагает их друг
|
||||
под другим. Для длинных значений можно включить перенос, а даты показывать в нужном формате.
|
||||
Так карточка показывает выбранные для конкретной базы поля, не меняя сами заметки.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Если базе нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного
|
||||
frontmatter-свойства. Можно настроить пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), вписывание
|
||||
и место обложки. Карточка открывается в активной панели, модальном окне, новой вкладке или
|
||||
сплите. В сплите обычный клик переиспользует панель, Ctrl+клик открывает новую вкладку.
|
||||
Так можно читать заметку рядом с доской и не терять контекст выборки.
|
||||
Если для базы нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного
|
||||
свойства frontmatter. В настройках задаю пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), способ вписывания
|
||||
и место на карточке.
|
||||
Карточку можно открыть в активной панели, модальном окне, новой вкладке или сплите.
|
||||
В сплите обычный клик открывает заметку в панели рядом с доской, а Ctrl+клик добавляет вкладку
|
||||
в эту панель. Доска остаётся на месте, и контекст выборки не теряется.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="case-block" id="reshenie">
|
||||
<h2>Перетаскивание меняет свойство заметки</h2>
|
||||
<p class="section__prose">
|
||||
В релизе 0.9.0 карточку можно перетащить в другую колонку, и Columns обновит
|
||||
frontmatter-свойство, по которому построена группировка, через API
|
||||
Obsidian <code>processFrontMatter()</code>. Если колонки собраны по статусу, после переноса
|
||||
меняется именно статус заметки. Если в свойстве несколько значений, старое убирается,
|
||||
новое добавляется, остальные сохраняются.
|
||||
В версии 0.9.0 карточки можно перемещать между колонками. При переносе Columns через API
|
||||
Obsidian <code>processFrontMatter()</code> меняет frontmatter-свойство, по которому построена
|
||||
группировка. На статусной доске перенос меняет статус заметки. Если свойство хранит список,
|
||||
плагин заменяет перенесённое значение и сохраняет остальные значения.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Я оставил этот сценарий настраиваемым. Drag-and-drop включён по умолчанию, но его можно
|
||||
отключить в General. Так пользователь сам выбирает: только смотреть на группы или менять
|
||||
значение свойства прямо с доски.
|
||||
Перетаскивание включено по умолчанию, но в General его можно отключить. Тогда Columns останется
|
||||
видом для обзора, без правок свойств перетаскиванием.
|
||||
</p>
|
||||
<h3>Настройки под разные базы</h3>
|
||||
<p class="section__prose">
|
||||
У вида четыре группы настроек: General, Title, Properties и Cover. В них задаются ширина
|
||||
карточек, число колонок внутри группы (от 1 до 6), порядок колонок, зебра и masonry.
|
||||
Порядок можно оставить автоматическим или задать вручную; пустые колонки в этом списке
|
||||
сохраняются. Сетка показывает несколько карточек рядом, masonry заполняет вертикальные
|
||||
пустоты, а зебра помогает не сбиться при чтении широкой доски. Отдельно настраиваются заголовки, чипы, даты
|
||||
и обложки. Один вид подстраивается под разные базы, а не наоборот.
|
||||
Настройки собраны в четырёх группах: General, Title, Properties и Cover. В General задаю
|
||||
ширину карточек, число колонок в группе (от 1 до 6) и их порядок. Можно оставить автоматический
|
||||
порядок или задать его вручную; пустые колонки при этом остаются на месте. Например, колонка
|
||||
Done не исчезнет, даже если в ней пока нет карточек.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Сетка раскладывает карточки рядом, masonry заполняет пустоты по вертикали, а зебра помогает
|
||||
следить за колонками на широком экране. Для заголовков, чипов, дат и обложек есть отдельные
|
||||
параметры. Так один и тот же вид подходит разным базам.
|
||||
</p>
|
||||
<figure class="case-media case-media--wide">
|
||||
<div class="case-video-shell">
|
||||
@@ -239,22 +239,23 @@
|
||||
<h2>Результат: доска внутри Obsidian Bases</h2>
|
||||
<p class="section__prose">
|
||||
Card Columns оставляет заметки в Bases, но меняет способ их обзора: я задаю группировку,
|
||||
отбираю теги и открываю карточки рядом с доской. Когда нужна смена статуса, перетаскивание
|
||||
правит то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться
|
||||
Columns в своей базе: заметки остаются в vault, отдельную доску синхронизировать не нужно.
|
||||
отбираю теги и открываю карточки рядом с доской. Когда нужно сменить статус, перетаскивание
|
||||
обновляет то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться
|
||||
Columns в своей базе: отдельную доску синхронизировать не нужно.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
На скриншоте моя база Links: Obsidian показывает 196 результатов. Плагин уже опубликован
|
||||
в каталоге Obsidian Community. На момент обновления кейса там указаны версия 0.9.0 и
|
||||
846 загрузок; поддерживаются Obsidian 1.8.0+, Desktop и Mobile, лицензия MIT.
|
||||
Время поиска до и после я не замерял, поэтому цифры экономии не привожу.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
На момент подготовки кейса карточка Obsidian Community показывала версию 0.9.0 и 846 загрузок.
|
||||
Плагин работает с 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>
|
||||
Для меня важна граница между обзором и изменением данных. Группировка и фильтр помогают
|
||||
читать базу; перенос карточки меняет её свойство. В Columns это действие видно и его
|
||||
можно отключить.
|
||||
читать базу. Перенос карточки меняет её свойство. Это действие видно, его можно отключить.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -10,52 +10,49 @@ Card Columns: группировка по свойствам, быстрый о
|
||||
|
||||
На скриншоте моя база Links: Obsidian показывает 196 результатов.
|
||||
|
||||
Card Columns - мой плагин-вид для Obsidian Bases. Я спроектировал и разработал его сам: хотел видеть заметки колонками, а не искать нужные в длинной ленте штатного Cards. Плагин опубликован в [каталоге Obsidian Community](https://community.obsidian.md/plugins/card-columns), исходный код открыт по лицензии MIT.
|
||||
Я разработал Card Columns, вид для Obsidian Bases. Штатный вид Cards выводил заметки длинной лентой, а мне хотелось разложить их по группам. Плагин опубликован в [каталоге Obsidian Community](https://community.obsidian.md/plugins/card-columns). Код открыт по лицензии MIT.
|
||||
|
||||
## От запроса Bases к колонкам
|
||||
|
||||
Файл `.base` описывает запрос к заметкам в vault: какие записи показать и какие свойства вывести. Штатный вид Cards в моей базе складывал результаты в длинную ленту. Я хотел видеть ту же выборку по группам, например по статусу или тегу.
|
||||
Файл `.base` хранит запрос к заметкам в vault: что показать и какие свойства вывести. В моей базе штатный вид Cards превращал результат в длинную ленту. Я хотел видеть те же заметки по группам, например по статусу или тегу.
|
||||
|
||||
Columns подключается как ещё один BasesView и получает результат запроса. Сортировка, фильтры, набор свойств и поиск остаются за штатным тулбаром. Я не стал заводить отдельную доску: заметки и настройки запроса остаются в Bases, плагин меняет только их представление.
|
||||
Columns подключается к Bases как ещё один вид и получает результат запроса. Сортировку, фильтры, свойства и поиск по-прежнему задаю в штатном тулбаре. Заметки остаются в vault, а запрос хранится в файле `.base`. Columns меняет только способ показа результата.
|
||||
|
||||
## Сначала сгруппировать, потом отобрать
|
||||
|
||||
Группировку настраиваю через Group by в тулбаре Bases: по тегу, статусу, категории или любому frontmatter-свойству. Если свойство не задано, Columns группирует по тегам. Колонки строятся из значений выбранного свойства, а исходный запрос остаётся тем же. Одна база подходит для разных разрезов: меняю только группировку.
|
||||
В тулбаре Bases задаю Group by: тег, статус, категорию или другое frontmatter-свойство. Если ничего не указать, Columns группирует по тегам. Меняю Group by, и колонки перестраиваются. Условия запроса при этом не трогаю. Если у свойства несколько значений, заметка попадает в каждую соответствующую колонку, а не теряет остальные группы.
|
||||
|
||||
Теги для быстрого отбора вынесены отдельными пилюлями под тулбаром. Щёлкнул один раз, оставил этот тег. Выбрал следующий, добавил его по OR. Для точного переключения использую Ctrl+клик или правую кнопку мыши, а кнопкой OR/AND меняю логику отбора:
|
||||
Пилюли тегов стоят под тулбаром, рядом с доской. Обычный клик оставляет один тег, а следующий добавляет ещё один по OR. Ctrl+клик или правый клик включает и выключает отдельный тег, не сбрасывая остальные. В режиме OR достаточно совпадения с одним выбранным тегом. AND оставляет заметки, где есть все выбранные теги. All сбрасывает отбор.
|
||||
|
||||
Эти пилюли не заменяют Filter в тулбаре. Bases формирует исходную выборку, а теговый фильтр сужает её уже внутри Columns. Так я не меняю запрос, когда нужно быстро посмотреть подмножество.
|
||||
|
||||
- первый тег оставляет только заметки с ним;
|
||||
- следующий добавляет заметки с любым из выбранных тегов;
|
||||
- Ctrl+клик или правый клик добавляет и снимает один тег, не сбрасывая остальные;
|
||||
- OR/AND переключает условие между «любой из» и «все выбранные», All очищает выбор.
|
||||
|
||||
Фильтр остаётся перед глазами вместе с доской. Модальное окно здесь только мешало бы: пришлось бы закрывать его, чтобы проверить результат.
|
||||
Пилюли сужают текущую выборку, но не записывают условия в файл `.base`. Для сохранённых условий остаётся штатный Filter. Теговый фильтр нужен для быстрого просмотра вариантов, поэтому он всегда рядом с доской.
|
||||
|
||||
## Карточка показывает нужные поля
|
||||
|
||||
Состав карточки задаётся штатным списком Properties. Первое выбранное свойство становится заголовком, остальные отображаются чипами: текст, теги, ссылки, булевы значения и даты. Для чипов можно выбрать вертикальный стек или компактную сетку, настроить перенос и формат даты.
|
||||
Какие поля попадут на карточку, выбираю в штатном списке Properties. Первое свойство становится заголовком, остальные показываются чипами: текст, теги, ссылки, булевы значения и даты. Grid собирает свойства с короткими значениями в компактную сетку, Stack располагает их друг под другом. Для длинных значений можно включить перенос, а даты показывать в нужном формате. Так карточка показывает выбранные для конкретной базы поля, не меняя сами заметки.
|
||||
|
||||
Если базе нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного frontmatter-свойства. Можно настроить пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), вписывание и место обложки. Карточка открывается в активной панели, модальном окне, новой вкладке или сплите. В сплите обычный клик переиспользует панель, Ctrl+клик открывает новую вкладку. Так можно читать заметку рядом с доской и не терять контекст выборки.
|
||||
Если для базы нужны обложки, Columns возьмёт первую картинку из заметки или значение указанного свойства frontmatter. В настройках задаю пропорции (Auto, 1:1, 3:2, 4:3 или 16:9), способ вписывания и место на карточке. Карточку можно открыть в активной панели, модальном окне, новой вкладке или сплите. В сплите обычный клик открывает заметку в панели рядом с доской, а Ctrl+клик добавляет вкладку в эту панель. Доска остаётся на месте, и контекст выборки не теряется.
|
||||
|
||||
## Перетаскивание меняет свойство заметки
|
||||
|
||||
В релизе 0.9.0 карточку можно перетащить в другую колонку, и Columns обновит frontmatter-свойство, по которому построена группировка, через API Obsidian `processFrontMatter()`. Если колонки собраны по статусу, после переноса меняется именно статус заметки. Если в свойстве несколько значений, старое убирается, новое добавляется, остальные сохраняются.
|
||||
В версии 0.9.0 карточки можно перемещать между колонками. При переносе Columns через API Obsidian `processFrontMatter()` меняет frontmatter-свойство, по которому построена группировка. На статусной доске перенос меняет статус заметки. Если свойство хранит список, плагин заменяет перенесённое значение и сохраняет остальные значения.
|
||||
|
||||
Я оставил этот сценарий настраиваемым. Drag-and-drop включён по умолчанию, но его можно отключить в General. Так пользователь сам выбирает: только смотреть на группы или менять значение свойства прямо с доски.
|
||||
Перетаскивание включено по умолчанию, но в General его можно отключить. Тогда Columns останется видом для обзора, без правок свойств перетаскиванием.
|
||||
|
||||
### Настройки под разные базы
|
||||
|
||||
У вида четыре группы настроек: General, Title, Properties и Cover. В них задаются ширина карточек, число колонок внутри группы (от 1 до 6), порядок колонок, зебра и masonry. Порядок можно оставить автоматическим или задать вручную; пустые колонки в этом списке сохраняются. Сетка показывает несколько карточек рядом, masonry заполняет вертикальные пустоты, а зебра помогает не сбиться при чтении широкой доски. Отдельно настраиваются заголовки, чипы, даты и обложки. Один вид подстраивается под разные базы, а не наоборот.
|
||||
Настройки собраны в четырёх группах: General, Title, Properties и Cover. В General задаю ширину карточек, число колонок в группе (от 1 до 6) и их порядок. Можно оставить автоматический порядок или задать его вручную; пустые колонки при этом остаются на месте. Например, колонка Done не исчезнет, даже если в ней пока нет карточек.
|
||||
|
||||
Сетка раскладывает карточки рядом, masonry заполняет пустоты по вертикали, а зебра помогает следить за колонками на широком экране. Для заголовков, чипов, дат и обложек есть отдельные параметры. Так один и тот же вид подходит разным базам.
|
||||
|
||||
## Результат: доска внутри Obsidian Bases
|
||||
|
||||
Card Columns оставляет заметки в Bases, но меняет способ их обзора: я задаю группировку, отбираю теги и открываю карточки рядом с доской. Когда нужна смена статуса, перетаскивание правит то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться Columns в своей базе: заметки остаются в vault, отдельную доску синхронизировать не нужно.
|
||||
Card Columns оставляет заметки в Bases, но меняет способ их обзора: я задаю группировку, отбираю теги и открываю карточки рядом с доской. Когда нужно сменить статус, перетаскивание обновляет то же frontmatter-свойство, по которому строятся колонки. Я продолжаю пользоваться Columns в своей базе: отдельную доску синхронизировать не нужно.
|
||||
|
||||
Плагин опубликован в каталоге Obsidian Community. На момент обновления кейса там указаны версия 0.9.0 и 846 загрузок; поддерживаются Obsidian 1.8.0+, Desktop и Mobile, лицензия MIT.
|
||||
Время поиска до и после я не замерял, поэтому цифры экономии не привожу.
|
||||
|
||||
Для меня важна граница между обзором и изменением данных. Группировка и фильтр помогают читать базу; перенос карточки меняет её свойство. В Columns это действие видно и его можно отключить.
|
||||
На момент подготовки кейса карточка Obsidian Community показывала версию 0.9.0 и 846 загрузок. Плагин работает с Obsidian 1.8.0 и новее на компьютерах и мобильных устройствах. Лицензия MIT.
|
||||
|
||||
Для меня важна граница между обзором и изменением данных. Группировка и фильтр помогают читать базу. Перенос карточки меняет её свойство. Это действие видно, его можно отключить.
|
||||
|
||||
## Медиа
|
||||
|
||||
|
||||
Reference in new issue
Block a user