admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/cases/card-columns-obsidian.en.html
+58 -32
View File
@@ -132,43 +132,51 @@
</figure>
<p class="section__prose">
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
I built Card Columns as an additional card view for Obsidian Bases. The built-in Cards view showed
notes in a grid, but I needed columns. I couldn't find a ready-made plugin for the scenario I wanted,
so I built my own. The plugin is listed in the
<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>
<h2>Another card view for Bases</h2>
<p class="section__prose">
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.
In Obsidian Bases, I configure a query in the UI and choose how to display its results: as a table,
list, or cards. Card Columns adds another card view, grouping notes into columns by a selected property.
</p>
<p class="section__prose">
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.
I set sorting, filters, search, and visible properties in the native Bases toolbar. Columns uses that
result and changes only its presentation. Browsing does not change notes. Dragging a card updates
the property used to group the columns.
</p>
</div>
<div class="case-block" id="filters">
<h2>Group first, filter second</h2>
<p class="section__prose">
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.
In the Bases toolbar, I choose Group by and select a tag, status, category, or another property.
With no group selected, Columns groups by tags. Changing Group by reshapes the columns.
</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>
This was the problem that started Columns: I needed the same card in several columns. A link tagged
“Tools” and “AI” appears in both. In a movie database, one film can belong to both “Comedy” and
“Family.” I couldn't find this behavior in the ready-made plugins I tried, so I built Columns.
The note stays single and appears in every matching group.
</p>
</div>
</aside>
<p class="section__prose">
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">
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.
Tag pills refine the current results. The native Filter sets the main conditions in the toolbar,
while the pills quickly narrow the view without taking me away from the board.
</p>
<figure class="case-media case-media--wide">
<div class="case-video-shell">
@@ -195,6 +203,11 @@
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>
<h3>Designed to fit Obsidian</h3>
<p class="section__prose">
I designed and built the interface directly in code, without Figma or another design editor.
I followed Obsidian’s design system so Columns feels like part of the app.
</p>
</div>
<div class="case-block" id="reshenie">
@@ -209,12 +222,12 @@
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>
<h3>Settings grouped by type</h3>
<p class="section__prose">
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.&nbsp;A&nbsp;lane such as Done stays visible even when it has
no cards yet.
General, Title, Properties, and Cover group settings by what they control, so the one I need is easier
to find. 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.&nbsp;A&nbsp;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
@@ -232,27 +245,40 @@
</figure>
</div>
<div class="case-block" id="publikaciya">
<h2>From development to release</h2>
<p class="section__prose">
I develop Card Columns with Hermes Agent. The source code lives on the agent’s VPS, and the built
plugin is synced to my laptop. I test it there in my Obsidian vault.
</p>
<p class="section__prose">
If it works as expected, the agent’s scripts send the changes to Gitea and GitHub. I initiate the
release of each new version in the Obsidian Community directory myself.
</p>
</div>
<div class="case-block" id="rezultat">
<h2>Result: a board inside Obsidian Bases</h2>
<p class="section__prose">
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.
Card Columns keeps notes in Bases while changing how I browse them. I choose a grouping, filter by tags,
and open cards beside the board. When I need to change a status, moving a card updates the property used
to build the columns.
</p>
<p class="section__prose">
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.
By the end of September 2026, Card Columns had 846 organic downloads in the Obsidian Community
directory. The listing showed version 0.9.0. On
<a href="https://github.com/mamadaevv/card-columns" target="_blank" rel="noopener noreferrer">GitHub</a>,
Card Columns had four stars and two issues. One bug report is closed; one request to choose a property
for covers is still open. Some requested improvements have already shipped. 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>
Grouping and filtering help me browse the database. Moving a card changes its property. That edit
is visible and can be turned off.
The main result for me is a more useful way to present and scan cards. I choose the fields and
grouping, and one note can appear in every matching column. Drag-and-drop edits the property
separately and can be turned off.
</p>
</div>
</aside>
src/pages/cases/card-columns-obsidian.html
+57 -31
View File
@@ -131,34 +131,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+клик или правый клик включает и выключает отдельный тег, не
@@ -166,9 +175,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">
@@ -198,6 +206,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">
@@ -212,12 +225,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 заполняет пустоты по вертикали, а зебра помогает
@@ -235,27 +248,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>