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

public/en/cases/card-columns-obsidian/index.html
+58 -32
View File
@@ -445,43 +445,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">
@@ -508,6 +516,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">
@@ -522,12 +535,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
@@ -545,27 +558,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>