Skip to content

章节卡片

本指南演示了在 Hugo 博客中使用卡片布局为不同章节样式化的可维护方法。示例支持浅色和深色主题，并展示了响应式行为。

示例 CSS

/*--------------------------------------------------------------
  颜色与间距变量
 --------------------------------------------------------------*/
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-text: #1a1a37;
  --color-border: #e0e4e8;
  --color-shadow: rgba(0, 0, 0, 0.04);
  --color-accent: #0a55a7;
  --color-heading: #0a55a7;
  --space-xs: 0.25rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
}

[data-theme="dark"] {
  --color-bg: #1a1a37;
  --color-bg-alt: #24244d;
  --color-text: #e8e8f0;
  --color-border: #383855;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-accent: #8ab4f8;
  --color-heading: #8ab4f8;
}

/*--------------------------------------------------------------
  全局元素
 --------------------------------------------------------------*/
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 700;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.section-heading {
  position: relative;
  margin-bottom: var(--space-sm);
}
.section-heading::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: var(--space-xs);
  background: linear-gradient(to right, var(--color-accent), transparent);
}

:focus-visible {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
  卡片组件
 --------------------------------------------------------------*/
.card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px var(--color-shadow);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

/*--------------------------------------------------------------
  布局区块
 --------------------------------------------------------------*/
.post-meta,
.related-posts,
.pager,
.comments {
  composes: card;
}

.content-area {
  background: var(--color-bg);
  padding: var(--space-lg);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px var(--color-shadow);
}

/* 响应式间距 */
@media (max-width: 768px) {
  :root {
    --space-md: 1rem;
    --space-lg: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --space-md: 2rem;
    --space-lg: 3rem;
  }
}

/* 打印调整 */
@media print {
  .site-nav,
  .pager,
  .comments {
    display: none;
  }
}

示例 HTML

<article class="post">
  <header class="post-meta card">
    <h1 class="section-heading">我的文章标题</h1>
    <p>作者：Jane Doe · 2024-05-10</p>
  </header>

  <div class="content-area card">
    <p>这里是主要文章内容……</p>
  </div>

  <section class="related-posts card">
    <h2 class="section-heading">相关文章</h2>
    <ul>
      <li><a href="#">如何构建现代 Hugo 主题</a></li>
      <li><a href="#">无障碍设计指南</a></li>
    </ul>
  </section>

  <nav class="pager card" aria-label="文章导航">
    <a href="#" class="prev">上一篇</a>
    <a href="#" class="next">下一篇</a>
  </nav>

  <section class="comments card">
    <h2 class="section-heading">评论</h2>
    <!-- 评论嵌入区 -->
  </section>
</article>