文章置顶功能使用指南
本指南详细介绍如何在 Demius 主题中使用文章置顶功能。
📋 目录
✨ 功能特性
- ✅ 简单配置：在文章 Front Matter 中添加
pinned: true即可 - ✅ 视觉突出：置顶文章有明显的徽章标识和边框高亮
- ✅ 优先排序：置顶文章自动排在最前面
- ✅ 全引擎支持：支持单栏、双栏、瀑布流三种布局引擎
- ✅ 动画效果：图钉图标有轻微的摇摆动画
- ✅ 响应式：自动适配各种屏幕尺寸
- ✅ 暗色模式：自动适配网站主题
🚀 快速开始
1. 在文章中设置置顶
在文章的 Front Matter 中添加 pinned: true：
markdown
---
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
---
文章内容...1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2. 重新构建
bash
hugo server1
3. 查看效果
访问首页，置顶文章会：
- 排在所有文章的最前面
- 右上角显示"📌 置顶"徽章
- 边框高亮显示
- 有轻微的阴影效果
📝 使用方法
基础用法
设置置顶：
yaml
pinned: true1
取消置顶：
yaml
pinned: false
# 或者直接删除 pinned 这一行1
2
2
多篇置顶
可以同时设置多篇文章为置顶：
markdown
# 文章 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
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
排序规则：
- 所有置顶文章排在前面
- 置顶文章之间按发布日期排序（新的在前）
- 普通文章排在置顶文章之后
- 普通文章之间按发布日期排序
最终显示顺序：
1. 置顶文章 B (2025-10-24 11:00) ← 置顶
2. 置顶文章 A (2025-10-24 10:00) ← 置顶
3. 普通文章 C (2025-10-24 12:00)
4. 其他普通文章...1
2
3
4
2
3
4
🎨 样式说明
置顶徽章
位置： 文章卡片右上角
内容：
- 图钉图标（📌）
- "置顶"文字
样式特点：
- 渐变背景（主题色）
- 白色文字
- 圆角设计
- 阴影效果
- 轻微动画（图钉摇摆）
置顶卡片
边框： 主题色高亮边框
阴影： 比普通卡片更明显的阴影
悬停效果：
- 阴影增强
- 徽章放大
- 图片放大
动画效果
图钉摇摆动画：
css
@keyframes pin-bounce {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-3px) rotate(-5deg);
}
75% {
transform: translateY(-3px) rotate(5deg);
}
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
效果： 2秒循环，轻微的上下摇摆和左右旋转
🏗️ 布局引擎支持
单栏布局（Engine 1）
┌────────────────────────────────┐
│ 📌 置顶 │
│ ┌──────────────────────────┐ │
│ │ [封面图片] │ │
│ ├──────────────────────────┤ │
│ │ 置顶文章标题 │ │
│ │ 摘要内容... │ │
│ └──────────────────────────┘ │
└────────────────────────────────┘
┌────────────────────────────────┐
│ 普通文章 │
│ ... │
└────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
双栏布局（Engine 2）
┌──────────────┐ ┌──────────────┐
│ 📌 置顶1 │ │ 📌 置顶2 │
│ [封面] │ │ [封面] │
│ 标题 │ │ 标题 │
└──────────────┘ └──────────────┘
┌──────────────┐ ┌──────────────┐
│ 普通文章1 │ │ 普通文章2 │
│ ... │ │ ... │
└──────────────┘ └──────────────┘1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
瀑布流布局（Engine 3）
┌────┐ ┌────┐ ┌────┐
│📌 │ │📌 │ │ │
│置顶│ │置顶│ │普通│
│1 │ │2 │ │1 │
└────┘ └────┘ └────┘
┌────┐ ┌────┐ ┌────┐
│普通│ │普通│ │普通│
│2 │ │3 │ │4 │
└────┘ └────┘ └────┘1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
📱 响应式适配
桌面端（>768px）
css
.post-pinned-badge {
top: 1rem;
right: 1rem;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}1
2
3
4
5
6
2
3
4
5
6
移动端（≤768px）
css
.post-pinned-badge {
top: 0.75rem; /* 位置更紧凑 */
right: 0.75rem;
padding: 0.3rem 0.6rem; /* 内边距缩小 */
font-size: 0.75rem; /* 字号缩小 */
}1
2
3
4
5
6
2
3
4
5
6
🌙 暗色模式
亮色模式
- 徽章背景：主题色渐变
- 卡片边框：主题色
- 阴影：
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 # 置顶样式1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
排序逻辑
go
{{ $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
2
3
4
步骤：
- 获取所有文章
- 筛选出置顶文章
- 筛选出普通文章
- 合并（置顶在前）
HTML 结构
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
❓ 常见问题
Q1: 可以设置多篇文章置顶吗？
A: 可以。所有设置了 pinned: true 的文章都会置顶，它们之间按发布日期排序。
Q2: 置顶文章会影响分页吗？
A: 会。置顶文章会占用分页的位置。例如，如果每页显示6篇文章，有2篇置顶文章，第一页会显示这2篇置顶文章 + 4篇普通文章。
Q3: 如何修改徽章文字？
A: 修改 themes/demius/layouts/partials/post-card.html：
html
<div class="post-pinned-badge">
<i class="fas fa-thumbtack"></i>
<span>置顶</span> <!-- 修改这里 -->
</div>1
2
3
4
2
3
4
Q4: 如何修改徽章颜色？
A: 修改 themes/demius/assets/css/_post-card.css：
css
.post-pinned-badge {
background: linear-gradient(135deg, #ff6b6b, #4ecdc4); /* 自定义颜色 */
}1
2
3
2
3
Q5: 如何隐藏徽章，只保留置顶排序？
A: 在 themes/demius/assets/css/_post-card.css 中添加：
css
.post-pinned-badge {
display: none;
}1
2
3
2
3
Q6: 置顶文章会在归档页面也置顶吗？
A: 目前置顶功能仅在首页生效（使用 Engine 1/2/3 的页面）。归档页面、分类页面等其他页面不受影响。
Q7: 如何自定义徽章位置？
A: 修改 CSS：
css
/* 左上角 */
.post-pinned-badge {
left: 1rem;
right: auto;
}
/* 左下角 */
.post-pinned-badge {
top: auto;
bottom: 1rem;
left: 1rem;
right: auto;
}1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
🎯 最佳实践
1. 适度使用
- ❌ 不要设置过多置顶文章（建议≤3篇）
- ✅ 只置顶真正重要的内容
2. 定期更新
- ❌ 不要永久置顶同一篇文章
- ✅ 定期更换置顶内容，保持新鲜感
3. 明确目的
适合置顶的内容：
- ✅ 重要公告
- ✅ 新手引导
- ✅ 热门教程
- ✅ 精华文章
不适合置顶的内容：
- ❌ 普通日常记录
- ❌ 过时的内容
- ❌ 仅为增加曝光
4. 配合分类
markdown
---
title: "新手必读"
pinned: true
categories: ["教程"] # 配合分类使用
tags: ["新手", "指南"]
---1
2
3
4
5
6
2
3
4
5
6
🔄 更新日志
v1.0.0 (2025-10-24)
- ✨ 初始版本发布
- ✅ 支持单栏、双栏、瀑布流三种布局
- ✅ 置顶徽章和边框高亮
- ✅ 响应式设计
- ✅ 暗色模式适配
- ✅ 图钉动画效果
📝 许可证
本功能遵循 Demius 主题的许可证协议。
祝使用愉快！ 🎉