置顶文章功能使用指南

功能说明

首页现在支持置顶文章功能，可以在首页顶部显示重要的文章，让用户更容易找到关键内容。

如何设置置顶文章

1. 在文章front matter中添加置顶标记

在文章的YAML front matter中添加 pinned: true：

---
layout: post
title: "文章标题"
categories: 分类
date: 2025-03-01
tags: [标签1, 标签2]
permalink: /article-url/
description: 文章描述
pinned: true  # 添加这一行来置顶文章
---

2. 置顶文章的特点

  • 显示位置：在首页”最新文章”之前显示
  • 显示数量：最多显示6篇置顶文章
  • 显示样式：使用卡片式布局，带有📌图标
  • 响应式设计：支持移动端和桌面端

3. 置顶文章显示内容

每篇置顶文章会显示：

  • 文章标题（可点击链接）
  • 发布日期
  • 文章分类
  • 文章摘要（前100个字符）
  • 文章标签（最多3个）

如何管理置顶文章

添加新的置顶文章

  1. 编辑要置顶的文章
  2. 在front matter中添加 pinned: true
  3. 保存并提交更改
  4. 网站会自动重新构建并显示

取消置顶

  1. 编辑文章
  2. 删除或改为 pinned: false
  3. 保存并提交更改

调整置顶顺序

置顶文章按照以下规则排序：

  1. 首先按 pinned 状态排序（置顶文章在前）
  2. 然后按发布日期排序（最新在前）
  3. 最后按标题字母顺序排序

样式自定义

如果需要修改置顶文章的样式，可以编辑 _layouts/home.html 文件中的CSS样式部分。

主要样式类

  • .pinned-posts - 置顶文章容器
  • .pinned-posts-grid - 置顶文章网格布局
  • .pinned-post-card - 单个置顶文章卡片
  • .pinned-post-title - 置顶文章标题
  • .pinned-post-meta - 置顶文章元信息
  • .pinned-post-excerpt - 置顶文章摘要
  • .pinned-post-tags - 置顶文章标签

注意事项

  1. 数量限制：建议不要设置太多置顶文章，保持首页简洁
  2. 内容质量：只置顶真正重要和高质量的文章
  3. 定期更新：定期检查和更新置顶文章，保持内容时效性
  4. 移动端适配：置顶文章已适配移动端，在小屏幕上会显示为单列布局

技术实现

  • 使用Jekyll的 where 过滤器筛选置顶文章
  • 使用CSS Grid实现响应式布局
  • 使用CSS动画实现悬停效果
  • 支持最多6篇置顶文章显示