跳至主要內容

文章置顶功能使用指南

2026/9/13大约 5 分钟

文章置顶功能使用指南

本指南详细介绍如何在 Demius 主题中使用文章置顶功能。

📋 目录

✨ 功能特性

  • ✅ 简单配置：在文章 Front Matter 中添加 pinned: true 即可
  • ✅ 视觉突出：置顶文章有明显的徽章标识和边框高亮
  • ✅ 优先排序：置顶文章自动排在最前面
  • ✅ 全引擎支持：支持单栏、双栏、瀑布流三种布局引擎
  • ✅ 动画效果：图钉图标有轻微的摇摆动画
  • ✅ 响应式：自动适配各种屏幕尺寸
  • ✅ 暗色模式：自动适配网站主题

🚀 快速开始

1. 在文章中设置置顶

在文章的 Front Matter 中添加 pinned: true：

---
title: "这是一篇置顶文章"
date: 2025-10-24T20:00:00+08:00
slug: pinned-post-example
categories: ["技术"]
tags: ["置顶", "教程"]
cover: "https://example.com/cover.jpg"
pinned: true           # 设置为置顶文章
draft: false
---

文章内容...

2. 重新构建

hugo server

3. 查看效果

访问首页，置顶文章会：

  • 排在所有文章的最前面
  • 右上角显示"📌 置顶"徽章
  • 边框高亮显示
  • 有轻微的阴影效果

📝 使用方法

基础用法

设置置顶：

pinned: true

取消置顶：

pinned: false
# 或者直接删除 pinned 这一行

多篇置顶

可以同时设置多篇文章为置顶：

# 文章 A
---
title: "置顶文章 A"
pinned: true
date: 2025-10-24T10:00:00+08:00
---

# 文章 B
---
title: "置顶文章 B"
pinned: true
date: 2025-10-24T11:00:00+08:00
---

# 文章 C（普通文章）
---
title: "普通文章 C"
date: 2025-10-24T12:00:00+08:00
---

排序规则：

  1. 所有置顶文章排在前面
  2. 置顶文章之间按发布日期排序（新的在前）
  3. 普通文章排在置顶文章之后
  4. 普通文章之间按发布日期排序

最终显示顺序：

1. 置顶文章 B (2025-10-24 11:00) ← 置顶
2. 置顶文章 A (2025-10-24 10:00) ← 置顶
3. 普通文章 C (2025-10-24 12:00)
4. 其他普通文章...

🎨 样式说明

置顶徽章

位置： 文章卡片右上角

内容：

  • 图钉图标（📌）
  • "置顶"文字

样式特点：

  • 渐变背景（主题色）
  • 白色文字
  • 圆角设计
  • 阴影效果
  • 轻微动画（图钉摇摆）

置顶卡片

边框： 主题色高亮边框

阴影： 比普通卡片更明显的阴影

悬停效果：

  • 阴影增强
  • 徽章放大
  • 图片放大

动画效果

图钉摇摆动画：

@keyframes pin-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-5deg);
  }
  75% {
    transform: translateY(-3px) rotate(5deg);
  }
}

效果： 2秒循环，轻微的上下摇摆和左右旋转

🏗️ 布局引擎支持

单栏布局（Engine 1）

┌────────────────────────────────┐
│  📌 置顶                        │
│  ┌──────────────────────────┐  │
│  │  [封面图片]              │  │
│  ├──────────────────────────┤  │
│  │  置顶文章标题             │  │
│  │  摘要内容...              │  │
│  └──────────────────────────┘  │
└────────────────────────────────┘
┌────────────────────────────────┐
│  普通文章                       │
│  ...                           │
└────────────────────────────────┘

双栏布局（Engine 2）

┌──────────────┐  ┌──────────────┐
│ 📌 置顶1     │  │ 📌 置顶2     │
│ [封面]       │  │ [封面]       │
│ 标题         │  │ 标题         │
└──────────────┘  └──────────────┘
┌──────────────┐  ┌──────────────┐
│ 普通文章1     │  │ 普通文章2     │
│ ...          │  │ ...          │
└──────────────┘  └──────────────┘

瀑布流布局（Engine 3）

┌────┐  ┌────┐  ┌────┐
│📌  │  │📌  │  │    │
│置顶│  │置顶│  │普通│
│1   │  │2   │  │1   │
└────┘  └────┘  └────┘
┌────┐  ┌────┐  ┌────┐
│普通│  │普通│  │普通│
│2   │  │3   │  │4   │
└────┘  └────┘  └────┘

📱 响应式适配

桌面端（>768px）

.post-pinned-badge {
  top: 1rem;
  right: 1rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

移动端（≤768px）

.post-pinned-badge {
  top: 0.75rem;          /* 位置更紧凑 */
  right: 0.75rem;
  padding: 0.3rem 0.6rem; /* 内边距缩小 */
  font-size: 0.75rem;     /* 字号缩小 */
}

🌙 暗色模式

亮色模式

  • 徽章背景：主题色渐变
  • 卡片边框：主题色
  • 阴影：rgba(0, 0, 0, 0.08)

暗色模式

  • 徽章背景：主题色渐变（保持一致）
  • 卡片边框：主题色
  • 阴影：rgba(0, 0, 0, 0.3) （更深）

自动适配： 无需额外配置，跟随网站主题自动切换

🔧 技术实现

文件结构

themes/demius/
├── layouts/partials/
│   ├── post-card.html         # 文章卡片模板（添加徽章）
│   └── main/
│       ├── engine-1.html      # 单栏布局（添加排序）
│       ├── engine-2.html      # 双栏布局（添加排序）
│       └── engine-3.html      # 瀑布流布局（添加排序）
└── assets/css/
    └── _post-card.css         # 置顶样式

排序逻辑

{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
{{ $pinnedPages := where $pages "Params.pinned" true }}
{{ $normalPages := where $pages "Params.pinned" "!=" true }}
{{ $sortedPages := union $pinnedPages $normalPages }}

步骤：

  1. 获取所有文章
  2. 筛选出置顶文章
  3. 筛选出普通文章
  4. 合并（置顶在前）

HTML 结构

<article class="post-card post-card-pinned">
  <div class="post-pinned-badge">
    <i class="fas fa-thumbtack"></i>
    <span>置顶</span>
  </div>
  <div class="post-cover">
    <img src="cover.jpg" alt="...">
  </div>
  <div class="post-info">
    <h2 class="post-title">...</h2>
    <div class="post-meta">...</div>
    <p class="post-summary">...</p>
  </div>
</article>

❓ 常见问题

Q1: 可以设置多篇文章置顶吗？

A: 可以。所有设置了 pinned: true 的文章都会置顶，它们之间按发布日期排序。

Q2: 置顶文章会影响分页吗？

A: 会。置顶文章会占用分页的位置。例如，如果每页显示6篇文章，有2篇置顶文章，第一页会显示这2篇置顶文章 + 4篇普通文章。

Q3: 如何修改徽章文字？

A: 修改 themes/demius/layouts/partials/post-card.html：

<div class="post-pinned-badge">
  <i class="fas fa-thumbtack"></i>
  <span>置顶</span>  <!-- 修改这里 -->
</div>

Q4: 如何修改徽章颜色？

A: 修改 themes/demius/assets/css/_post-card.css：

.post-pinned-badge {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4); /* 自定义颜色 */
}

Q5: 如何隐藏徽章，只保留置顶排序？

A: 在 themes/demius/assets/css/_post-card.css 中添加：

.post-pinned-badge {
  display: none;
}

Q6: 置顶文章会在归档页面也置顶吗？

A: 目前置顶功能仅在首页生效（使用 Engine 1/2/3 的页面）。归档页面、分类页面等其他页面不受影响。

Q7: 如何自定义徽章位置？

A: 修改 CSS：

/* 左上角 */
.post-pinned-badge {
  left: 1rem;
  right: auto;
}

/* 左下角 */
.post-pinned-badge {
  top: auto;
  bottom: 1rem;
  left: 1rem;
  right: auto;
}

🎯 最佳实践

1. 适度使用

  • ❌ 不要设置过多置顶文章（建议≤3篇）
  • ✅ 只置顶真正重要的内容

2. 定期更新

  • ❌ 不要永久置顶同一篇文章
  • ✅ 定期更换置顶内容，保持新鲜感

3. 明确目的

适合置顶的内容：

  • ✅ 重要公告
  • ✅ 新手引导
  • ✅ 热门教程
  • ✅ 精华文章

不适合置顶的内容：

  • ❌ 普通日常记录
  • ❌ 过时的内容
  • ❌ 仅为增加曝光

4. 配合分类

---
title: "新手必读"
pinned: true
categories: ["教程"]  # 配合分类使用
tags: ["新手", "指南"]
---

🔄 更新日志

v1.0.0 (2025-10-24)

  • ✨ 初始版本发布
  • ✅ 支持单栏、双栏、瀑布流三种布局
  • ✅ 置顶徽章和边框高亮
  • ✅ 响应式设计
  • ✅ 暗色模式适配
  • ✅ 图钉动画效果

📝 许可证

本功能遵循 Demius 主题的许可证协议。

祝使用愉快！ 🎉

最近更新: