博客置顶功能使用说明

博客置顶功能使用说明

功能概述

博客置顶功能允许您将重要的文章置顶显示在首页顶部，置顶文章将具有特殊的视觉效果，包括：

  • 📌 图钉图标
  • “置顶” 标签
  • 渐变背景色
  • 边框高亮
  • 悬停动画效果

使用方法

如何设置文章置顶

在您想要置顶的博客文章的 YAML front matter 中添加 pinned: true 字段即可。

示例：

---
layout: post
title: "GPT和Qwen系列"
date: 2025-10-02
tags: [LLM]
comments: true
author: 炼丹怪
pinned: true      # 添加这一行即可置顶
---

如何取消文章置顶

有两种方式：

  1. 删除 pinned 字段： 
    ---
layout: post
title: "文章标题"
date: 2025-10-02
tags: [标签]
comments: true
author: 炼丹怪
# 删除 pinned: true 这一行
---
  2. 设置为 false： 
    ---
layout: post
title: "文章标题"
date: 2025-10-02
tags: [标签]
comments: true
author: 炼丹怪
pinned: false     # 设置为 false
---

置顶规则

  1. 显示位置：置顶文章仅在首页第一页显示，在分页的其他页面不会显示
  2. 数量限制：可以同时置顶多篇文章
  3. 排序规则：
    • 置顶文章按照文章发布日期排序
    • 置顶文章显示在所有普通文章之前
    • 普通文章不会包含已置顶的文章（避免重复显示）

视觉效果

置顶文章具有以下特殊样式：

  • 📌 图钉图标：标题前显示动态图钉图标（带上下弹跳动画）
  • 🏷️ 置顶标签：标题后显示紫色”置顶”标签
  • 🎨 渐变背景：淡紫色渐变背景（从 rgba(190, 75, 219, 0.1) 到 rgba(174, 62, 201, 0.05)）
  • 🔲 边框高亮：紫色边框高亮（2px solid）
  • ✨ 悬停效果：鼠标悬停时阴影加深，卡片微微上移

实际应用示例

假设您想要置顶”GPT和Qwen系列”这篇文章，只需：

  1. 打开文件 _posts/2025-10-02-GPT_and_Qwen.md
  2. 在 front matter 中添加 pinned: true
  3. 保存文件
  4. 推送到 GitHub，等待 GitHub Pages 自动构建

修改后的文件头部应该是这样：

---
layout: post
title: "GPT和Qwen系列"
date: 2025-10-02
tags: [LLM]
comments: true
author: 炼丹怪
pinned: true
---

注意事项

  1. ⚠️ 只能置顶 _posts/ 目录下的文章
  2. ⚠️ 置顶功能只在首页生效，在标签页、搜索结果中不会特殊显示
  3. ⚠️ 建议不要置顶过多文章（建议1-3篇），以保持首页的清爽
  4. ✅ 置顶文章的日期、标签、评论等功能正常使用
  5. ✅ 置顶状态可以随时修改，修改后推送即可生效

技术实现说明

本功能通过以下文件实现：

  1. index.html：添加了置顶文章的筛选和显示逻辑
  2. style.scss：添加了 .pinned-post 样式和动画效果

如需自定义置顶样式，可以修改 style.scss 文件中的相关样式。