Sep 01·9 min· PV

Custom Components Preview

Preview the custom Markdown components used by this blog theme, with usage notes and source examples.

This page previews the custom components available in this blog theme. Each section shows the rendered component first, then the Markdown or HTML needed to reproduce it.

These components are custom HTML elements embedded in Markdown. Always load the matching module before using a component, and include data-swup-reload-script on the script tag so the component is reloaded after client-side navigation.

Use this page as a quick reference, but keep the components purposeful in real posts. A component should make structure, comparison, or context clearer. If plain Markdown communicates the idea better, use plain Markdown.

Tabs

Tabs are useful when the reader needs to compare related views without scrolling through repeated sections. In this page, each component uses tabs to separate the live preview from the source Markdown.

Keep tab labels short. Use @tab:active for the default tab and @tab for the remaining tabs. Leave blank lines around tab content, especially when the content contains Markdown blocks or custom HTML.

Image Carousel

Use an image carousel when several images belong to one sequence, scene, or comparison. It works well for travel notes, visual walkthroughs, and compact galleries.

Load /js/components/image-carousel.WWV2GNOP.js before the component. Put Markdown image syntax inside <image-carousel>, with blank lines around the image list. Use autoplay only when motion helps the page; otherwise let the reader move through the images manually. The interval value is in milliseconds.

<script data-swup-reload-script type="module" src="/js/components/image-carousel.WWV2GNOP.js"></script><image-carousel autoplay interval="4000">![登山](https://assets.vluv.space/登山者.avif)![渔村](https://assets.vluv.space/珠山秀谷-珠山海边村落.avif)![山,海,船](https://assets.vluv.space/山海.avif)![映山湖与海](https://assets.vluv.space/映山湖与海.avif)</image-carousel>

Text Image Section

Use a text image section when an image and a paragraph need to be read together. It is better than a standalone image when the picture provides context for a person, place, quote, or historical note.

Load /js/components/text-image-section.GDDQIGKV.js before the component. Provide a meaningful alt value, set width deliberately, and keep the text focused. Long text can work, but the component reads best when the image and copy form one compact unit.

Hermann Karl Hesse (2 July 1877 – 9 August 1962) was a German-Swiss poet and novelist, and winner of the 1946 Nobel Prize in Literature. His interest in Eastern religious, spiritual, and philosophical traditions, combined with his involvement with Jungian analysis, helped to shape his literary work. His best-known novels include Demian, Steppenwolf, Siddhartha, Narcissus and Goldmund, and The Glass Bead Game, each of which explores an individual’s search for authenticity, self-knowledge, and spirituality.

Hesse was a widely read author in German-speaking countries during his lifetime, but his more enduring international fame did not come until a few years after his death, when, in the mid-1960s, his works became enormously popular with post-World War II generation readers in the United States, Europe, and elsewhere.

<script data-swup-reload-script type="module" src="/js/components/text-image-section.GDDQIGKV.js"></script><text-image-section image="https://www.myinterestingfacts.com/wp-content/uploads/2014/03/Hermann-Hesse-Image.jpg" alt="Hermann Hesse" width="200px" font-size="1.1rem" font-family="homemade-apple">**Hermann Karl Hesse** (2 July 1877 – 9 August 1962) was a German-Swiss poet and novelist, and winner of the 1946 Nobel Prize in Literature. His interest in Eastern religious, spiritual, and philosophical traditions, combined with his involvement with Jungian analysis, helped to shape his literary work. His best-known novels include Demian, Steppenwolf, Siddhartha, Narcissus and Goldmund, and The Glass Bead Game, each of which explores an individual's search for authenticity, self-knowledge, and spirituality.Hesse was a widely read author in German-speaking countries during his lifetime, but his more enduring international fame did not come until a few years after his death, when, in the mid-1960s, his works became enormously popular with post-World War II generation readers in the United States, Europe, and elsewhere.</text-image-section>

Accordion 🪗

Use an accordion for long optional explanations. It keeps the main page readable while still allowing interested readers to expand details.

Load /js/components/accordion.GK5MQZPB.js before the component. Each <accordion-item> needs a clear title. Keep blank lines between the item tags and the Markdown content. Indent nested Markdown consistently, especially lists and code blocks, because malformed spacing can break rendering inside custom elements.

When you execute the pipeline, fd begins scanning immediately. Crucially, fzf doesn’t block waiting for fd to finish.

It uses a streaming architecture: as soon as fd emits a path to stdout, fzf grabs it from stdin and populates the list in real-time. This is why the UI loads instantly, even while fd is still churning through thousands of files in the background.

The --preview flag transforms fzf from a simple text filter into a command orchestrator.

Dynamic Substitution The {} placeholder is the key. As you traverse the list, fzf dynamically swaps {} with the currently highlighted path (e.g., packages/ui).
Subprocess Execution For every cursor move, fzf spawns a temporary shell process to execute the constructed command (eza ... packages/ui).
ANSI Passthrough Since we forced --color=always, eza outputs raw ANSI escape codes. fzf acts as a mini terminal emulator here, capturing those codes and faithfully rendering the colors and icons in the side panel.

You might wonder: “If I scroll down quickly, will it spawn 50 instances of eza in a second?”

Smartly, fzf employs a debounce mechanism. If you scroll fast, it holds off on spawning the preview command until the cursor settles for a fraction of a second. It also aggressively kills any stale eza processes from previous selections to prevent your CPU from melting.

Once you find the directory you need and press Enter, fzf terminates, closes the eza preview, and prints the selected path to standard output.

This is the essence of the Unix philosophy. Because fzf sends clean text to stdout, you can compose it with other commands—like jumping into that directory automatically:

cd $(fd --type directory | fzf ...)

<script data-swup-reload-script type="module" src="/js/components/accordion.GK5MQZPB.js"></script><x-accordion>  <accordion-item title="The Asynchronous Stream (The 'Feeder')">  When you execute the pipeline, `fd` begins scanning immediately. Crucially, `fzf` doesn't block waiting for `fd` to finish.  It uses a **streaming architecture**: as soon as `fd` emits a path to *stdout*, `fzf` grabs it from *stdin* and populates the list in real-time. This is why the UI loads instantly, even while `fd` is still churning through thousands of files in the background.  </accordion-item>  <accordion-item title="The Preview Engine (The 'Runner')">  The `--preview` flag transforms `fzf` from a simple text filter into a command orchestrator.  - **Dynamic Substitution** The `{}` placeholder is the key. As you traverse the list, `fzf` dynamically swaps `{}` with the currently highlighted path (e.g., `packages/ui`).  - **Subprocess Execution** For every cursor move, `fzf` spawns a temporary shell process to execute the constructed command (`eza ... packages/ui`).  - **ANSI Passthrough** Since we forced `--color=always`, `eza` outputs raw ANSI escape codes. `fzf` acts as a mini terminal emulator here, capturing those codes and faithfully rendering the colors and icons in the side panel.  </accordion-item>  <accordion-item title="Performance Optimization (The 'Debouncer')">  You might wonder: "If I scroll down quickly, will it spawn 50 instances of `eza` in a second?"  Smartly, `fzf` employs a **debounce** mechanism. If you scroll fast, it holds off on spawning the preview command until the cursor settles for a fraction of a second. It also aggressively kills any stale `eza` processes from previous selections to prevent your CPU from melting.  </accordion-item>  <accordion-item title="The Final Output (The 'Composer')">  Once you find the directory you need and press **Enter**, `fzf` terminates, closes the `eza` preview, and prints the selected path to standard output.  This is the essence of the Unix philosophy. Because `fzf` sends clean text to **stdout**, you can compose it with other commands—like jumping into that directory automatically:  `{sh} cd $(fd --type directory | fzf ...)`  </accordion-item></x-accordion>

File Tree 🌳

Use a file tree when directory structure is part of the explanation. It is especially useful for themes, scripts, generated assets, and small project layouts.

Load /js/components/tree.6HPJV66A.js before the component. Use root to name the top-level directory. Inside <x-tree>, write each entry as a Markdown list item and use two spaces for each nesting level. Keep the tree small enough to scan.

source
- js
  - components
    - accordion.js
    - tree.js
    - image-carousel.js
  - main.js
- css
  - style.css
  - themes
    - nord.css
    - catppuccin.css
- images
  - logo.png
package.json
README.md
hexo.config.js

<script data-swup-reload-script type="module" src="/js/components/tree.6HPJV66A.js"></script><x-tree root="gnix-theme">- source  - js    - components      - accordion.js      - tree.js      - image-carousel.js    - main.js  - css    - style.css    - themes      - nord.css      - catppuccin.css  - images    - logo.png- package.json- README.md- hexo.config.js</x-tree>

Chat 💬

Use the chat component when a question-and-answer format makes the explanation easier to follow. It works well for debugging notes, AI-assisted explanations, and short conversations where the sequence matters.

Load /js/components/chat.U375A5RH.js before the component. Each <chat-message> should include a name; avatar and timestamp are optional but help the conversation feel structured. Add is-me to align the author’s own message. Keep each message concise, or the chat layout will become harder to scan than normal prose.

Hey everyone! How's the project going?

Going well! Just finished the authentication module.

Nice! We're using JWT tokens with refresh token rotation. Here's the basic structure: auth.refreshToken.rotate()

Awesome work! Can't wait to see the PR

<script data-swup-reload-script type="module" src="/js/components/chat.U375A5RH.js"></script><x-chat>  <chat-message name="Alice" avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Alice" timestamp="10:30">    Hey everyone! How's the project going?  </chat-message>  <chat-message name="Bob" avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Bob" timestamp="10:32">    Going well! Just finished the authentication module.  </chat-message>  <chat-message name="Charlie" avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Charlie" timestamp="10:35">    Nice! We're using JWT tokens with refresh token rotation. Here's the basic structure:    <code>auth.refreshToken.rotate()</code>  </chat-message>  <chat-message name="GnixAij" avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=GnixAij" timestamp="10:38" is-me>    Awesome work! Can't wait to see the PR  </chat-message></x-chat>