用 Hexo 搭建博客的朋友，可能都有过这个烦恼：写了一篇超级走心的文章，结果很快被后续内容淹没了，连自己都找不到它！别担心，今天就教你如何给文章戴上 “置顶皇冠”，让它永远在 C 位闪耀。

第一步：安装置顶插件

Hexo 自带的功能里没有直接的置顶功能，但我们可以借助插件轻松实现。

  1. 打开你的 Hexo 项目目录，先用 npm 安装一个 hexo-generator-index-pin-top 插件：

    1
    npm install hexo-generator-index-pin-top --save

    小贴士：这个插件的名字虽然长得有点拗口，但它绝对是实现置顶功能的好帮手。

  2. 安装好后，Hexo 会自动帮我们改造首页的文章排序规则。

第二步：修改文章的 Front-Matter

什么是 Front-Matter？简单来说就是文章头部那块 YAML 格式的配置区域。比如：

1
2
3
4
5
6
---
title: 我是置顶文章
date: 2024-12-22
categories: 技术分享
tags: [Hexo, 置顶功能]
---

在这里加一个 top 属性，值设得越大，越靠前！比如：

1
2
3
4
5
6
7
---
title: 我是置顶文章
date: 2024-12-22
top: 100  # 数字越大越靠前！
categories: 技术分享
tags: [Hexo, 置顶功能]
---

注意事项：

  • 这个 top 属性只对首页文章生效，对分类页和标签页不起作用。
  • 别和同事比谁的 top 数字更大，不然首页会被你们塞满置顶文章！

第三步：生成并查看效果

  1. 修改好后，记得重新生成博客：

    1
    hexo clean && hexo generate

  2. 启动本地预览，看看效果：

    1
    hexo server

  3. 打开浏览器，访问 http://localhost:4000，你会发现加了 top 的文章已经傲然挺立在首页 C 位！

第四步：部署上线

本地没问题的话，把更新推到线上吧：

1
hexo deploy

等一会儿，再刷新你的线上博客页面，置顶功能就正式生效了！

进阶技巧：让置顶更灵活

如果你想对置顶文章加点 “特别待遇”（比如打个小标记），可以自定义主题的模板。

修改主题的模板文件

以 Butterfly 主题为例，找到 layout/index.ejs，找到用于渲染文章的循环代码，加入如下逻辑：

1
2
3
<% if (post.top) { %>
  <span class="post-top">🔥置顶</span>
<% } %>

然后，配合样式文件 source/css/_custom.scss，自定义一个样式：

1
2
3
4
5
6
7
.post-top {
  background-color: #ff5722;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
}

这样一来，置顶文章不仅能靠前，还能闪亮登场！

总结

Hexo 的文章置顶功能其实不复杂，只需要一个插件和几行配置就能搞定。希望大家都能用好这个功能，让自己最得意的文章 “站上巅峰”！如果你还有其他 Hexo 使用问题，欢迎留言或者打赏咖啡（开个玩笑😄）。