<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Cover Card - Pocket Hugo</title>
    <link>https://theme.leftn.com/zh-cn/tags/cover-card/</link>
    <description>Cover Card</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>zh-cn</language>
    <lastBuildDate>Mon, 20 Apr 2026 02:51:39 &#43;0000</lastBuildDate>
    <atom:link href="https://theme.leftn.com/zh-cn/tags/cover-card/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>标题卡片指南</title>
      <link>https://theme.leftn.com/zh-cn/article/title-card-guide/</link>
      <pubDate>Mon, 09 Feb 2026 00:30:00 &#43;0000</pubDate>
      <guid>https://theme.leftn.com/zh-cn/article/title-card-guide/</guid>
      <description>一份关于 Pocket Hugo Theme 中 fallback 标题卡片的实用说明，包括 front matter 设置方式和全部 16 个预设。</description>
      <content:encoded><![CDATA[<p>Pocket Hugo Theme 可以在文章没有封面图时，自动生成一个 <strong>标题卡片</strong>。</p>
<h2 id="这个功能适合什么场景">这个功能适合什么场景</h2>
<p>当你希望文章在列表页和单页里看起来都足够完整，但又不想为每一篇文章都单独准备真实图片文件时，就很适合使用标题卡片。</p>
<p>它尤其适合：</p>
<ul>
<li>笔记和短文</li>
<li>文档页面</li>
<li>希望保持统一节奏的多语言页面</li>
<li>那些更适合文字导向卡片，而不是照片封面的栏目</li>
</ul>
<h2 id="quick-start">Quick start</h2>
<div class="shortcode-note shortcode-note--info"><div class="shortcode-note__title">Zero config works too</div><div class="shortcode-note__body">
    即使你什么都不配置，只要站点层的封面回退设置开启，主题也能自动生成 fallback 标题卡片。
  </div>
</div>

<p>在 front matter 中，最简单的写法只需要一个字母：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">coverCard</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;a&#34;</span></span></span></code></pre></div><p>规则如下：</p>
<ul>
<li><code>a</code> 到 <code>h</code>：8 个浅色预设</li>
<li><code>A</code> 到 <code>H</code>：8 个深色预设</li>
<li>其他任意值：自动回退到随机预设</li>
</ul>
<p>一旦你设置了 <code>coverCard</code>，主题就会使用生成的标题卡片，并停止使用 <code>image</code>。</p>
<h2 id="隐藏重复的列表标题">隐藏重复的列表标题</h2>
<p>如果你只想让标题出现在卡片内部，而不想在首页、分类、归档等列表页里重复显示外部标题，可以添加：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">listTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div><p>这样会隐藏列表卡片里的重复标题。在单页中，如果该页面使用的是生成型标题卡片，也会一并隐藏独立的标题区块。</p>
<p>如果你想在全站范围修改，可以在 <code>hugo.toml</code> 中设置 <code>params.article.listTitle = false</code>。这个站点级开关只影响列表页里的渐变标题卡片，不影响普通图片封面。</p>
<h2 id="example-front-matter">Example front matter</h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;My Article&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2026-02-09T08:30:00</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">slug</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;my-article&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">coverCard</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;C&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">listTitle</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div><h2 id="all-16-presets">All 16 presets</h2>
<p>下面展示的是主题内置的 16 个预设，顺序与主题内部使用顺序一致。</p>


<div class="title-card-showcase">
    <div class="title-card-showcase__grid">
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="golden-summer-fields" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Golden Summer Fields</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>a</code> Golden Summer Fields</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="golden-summer-fields" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Golden Summer Fields Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>A</code> Golden Summer Fields Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="soft-pastel-shades" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Soft Pastel Shades</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>b</code> Soft Pastel Shades</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="soft-pastel-shades" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Soft Pastel Shades Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>B</code> Soft Pastel Shades Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="black-gold-elegance" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Black Gold Elegance</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>c</code> Black Gold Elegance</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="black-gold-elegance" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Black Gold Elegance Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>C</code> Black Gold Elegance Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="morandi-mist" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Morandi Mist</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>d</code> Morandi Mist</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="morandi-mist" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Morandi Mist Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>D</code> Morandi Mist Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="fresh-greens" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Fresh Greens</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>e</code> Fresh Greens</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="fresh-greens" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Fresh Greens Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>E</code> Fresh Greens Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="light-steel" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Light Steel</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>f</code> Light Steel</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="light-steel" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Light Steel Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>F</code> Light Steel Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="deep-sea-blue" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Deep Sea Blue</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>g</code> Deep Sea Blue</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="deep-sea-blue" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Deep Sea Blue Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>G</code> Deep Sea Blue Dark</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="monochrome-core" data-cover-tone="light">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Monochrome Core</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>h</code> Monochrome Core</figcaption>
            </figure>
        
            <figure class="title-card-showcase__item">
                <div class="cover-fallback cover-fallback--card" data-cover-palette="monochrome-core" data-cover-tone="dark">
                    <div class="cover-fallback__inner">
                        <p class="cover-fallback__title">Monochrome Core Dark</p>
                    </div>
                </div>
                <figcaption class="title-card-showcase__caption"><code>H</code> Monochrome Core Dark</figcaption>
            </figure>
        
    </div>
</div>

<h2 id="when-to-use-which-preset">When to use which preset</h2>
<ul>
<li><code>a</code> / <code>A</code>：偏暖、偏编辑感，适合随笔和个人写作</li>
<li><code>b</code> / <code>B</code>：更柔和、更亲切，适合教程或文档</li>
<li><code>c</code> / <code>C</code>：对比更强，适合产品说明或发布记录</li>
<li><code>d</code> / <code>D</code>：低饱和、更安静，适合归档式或回顾型内容</li>
<li><code>e</code> / <code>E</code>：更轻快鲜明，适合工具、工作流和更新</li>
<li><code>f</code> / <code>F</code>：中性克制，适合技术参考</li>
<li><code>g</code> / <code>G</code>：更清晰、更数字化，适合软件和平台类主题</li>
<li><code>h</code> / <code>H</code>：黑白极简，适合简短笔记或索引页</li>
</ul>
<h2 id="default-behavior">Default behavior</h2>
<p>如果页面没有定义 <code>coverCard</code>，主题就会按照 <code>hugo.toml</code> 中的站点级封面规则继续处理。</p>
<p>也就是说，用户即使什么都不做，也可能默认得到一张自动生成的标题卡片。当主题的 fallback 模式设置为 gradient 时，卡片预设会自动分配。</p>
<p>这意味着你可以把两种策略结合起来使用：</p>
<ul>
<li>为普通文章设置一个全站 fallback 模式</li>
<li>只在需要特定风格的页面上单独指定 <code>coverCard</code></li>
</ul>
<h2 id="one-practical-recommendation">One practical recommendation</h2>
<p>一个很实用的做法是：先为整个站点启用自动 fallback，再只给少数你希望更有辨识度的页面手动分配字母。这样既能保持写作速度，也能让重要页面更有个性。</p>]]></content:encoded>
    </item>
  </channel>
</rss>
