hexo博客优化之文章置顶+置顶标签

最新推荐文章于 2024-04-18 16:35:31 发布

立杰说

最新推荐文章于 2024-04-18 16:35:31 发布

阅读量1.6w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：博客搭建系列文章标签：博客 hexo 置顶文章置顶

本文链接：https://blog.youkuaiyun.com/qwerty200696/article/details/79010629

博客搭建系列专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在Hexo博客系统中实现文章置顶的方法。通过修改特定的生成器并使用Front-matter标记，可以轻松地将指定文章置于首页顶部。此外，还介绍了如何在前端添加置顶图标以增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文首发于wangwlj.com

博文置顶

一种方法是手动对相关文件进行修改，具体可参考这篇文章。

另一种方法就是，目前已经有修改后支持置顶的仓库，可以直接用以下命令安装。

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章：

---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---

到目前为止，置顶功能已经可以实现了。所有相关博文到这边就结束了。

不过置顶的文章显示在最上面之后，如果没有明确的置顶标志，是不是感觉有点怪怪的呢？

设置置顶标志

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置顶</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

效果展示：

hexo博客优化之文章置顶+置顶标签

博文置顶

设置置顶标志

参考资料