Hexo博客置顶功能优化

今天一个朋友发微信跟我说：“你的博客该更新了，都长草了！” 我一想不对呀，这两天一直都有更新文章的呀！然后我才恍然明白原来他说的是我博客的“置顶”功能。

不过确实，某些文章设置了置顶后在博客中给人的感觉就是：一看前面几篇文章的发表时间还是好几个月前的甚至是几年前的，第一印象就是 “这个博客已经好久不更新了吧！”。那种感觉就像。。。你约女孩子见面结果三天没洗头一样。。。不仅仅是尴尬

在我之前的文章中也介绍过在Hexo博客中(nexT主题)添加文章“置顶”功能的方法：Hexo博客功能优化 | IT范儿 虽然只是在写文章时添加了一个 top: true 的标记，但确实实现了一个非常棒的功能。

对于博客作者来说，知道这样的文章是“置顶”的，但对于博客浏览者来说，他们却并不知情。那么最好的解决方法就是为 “置顶” 的文章加上一个“置顶”的标记。

---

置顶标记

从网上简单的搜索了一下，找到了如下的代码段。修改博客文件目录中的 /themes/next/layout/_macro/post.swig 文件：

直接搜索 class="post-meta 在 <div class="post-meta"> 和 <span class="post-time"> 之间加入如下的代码段：

该写法已过时，可以查看文章底部的更新

<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 %}

  <span class="post-time">

保存修改。执行 hexo s -g 查看效果。

---

颜色修改

对于“置顶”两字的颜色，默认的颜色 7D26CD 我不是很喜欢，所以把它改成了稍微偏红的颜色 #f05050 ，当然你也可以随意更改，看个人喜好了。

# 号有没有无所谓，大小写随意不影响，不过为了符合标准建议写成这样：color="#f05050"。

需要注意的是，修改后必须重新执行 hexo s -g 命令才能看到效果，并不是像文章更新的那样刷新页面就立即生效的。

---

图标修改

对于需要的图标，可以从网站 Icons | Font Awesome 中获取。例如我这里就是使用的一个 图钉 的Icon。

<i class="fa fa-thumb-tack"></i>

---

扩展优化

虽然按照上面的方法加上了 “置顶” 标记，不过感觉和自己想象的似乎有那么点差距，但差距在哪也不是很好说。。。

所以我就上网去找了一下，发现了下面的一个网站的置顶效果（其中的文字我做了替换）：

恩，就是这样！“置顶” 两个字放在标题前面，红底、白字，非常醒目。

当然，改起来其实也很简单。。。

不过可能有的朋友说了，“我也不会写代码呀，让我怎么改？”，或者 “我也不会nodejs呀？” 。。。

那这个问题其实非常好办，不会写你还不会改吗？不会改你还不会抄吗？照葫芦画瓢总可以吧！！！

首先，查看网页的源代码，找到我们需要添加置顶标记的文章标题：

<header class="post-header">

       <h2 class="post-title" itemprop="name headline">
             
             <a class="post-title-link" href="/2019/07/11/run-drone-cicd-on-kubernetes/" itemprop="url"> 在Kubernetes上执行Drone CI/CD</a></h2>
     
     <div class="post-meta">

可以看到文章的标题是包裹在一个带有class标记的a链接中，class名称为post-title-link。

然后，我们再回到上面操作的 post.swig 文件中去搜索该class 标记，找到了如下的代码段：

{% endif %}
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">{#
#} {{ post.title | default(__('post.untitled'))}}{#
#}</a>{#

通过单词可知其中的 post.title 就是文章的标题了。那其实我们只需要把 “置顶” 两个字加到a标签中，文章标题之前就可以了嘛。

然后，回去看我们上面的 “葫芦”：

<font color=7D26CD>置顶</font>

我们只需稍微改一下，加上颜色，加上置顶条件：

{% if post.top %}<font color="f05050">[置顶] </font> {% endif %}

然后放进去就可以了：

{% endif %}
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">{#
#} {% if post.top %}<font color="f05050">[置顶] </font> {% endif %} {{ post.title | default(__('post.untitled'))}}{#
#}</a>{#

最后的效果如下：

当然，前端能力强的，还可以再美化一下。

---

说点别的

博客嘛，看的就是文章。重要的就是把你在工作、学习或者生活中遇到的问题、获得的经验、得到的收获去分享给别人，可能这就是我写博客的初衷所在吧。

看到好多朋友的博客搞得非常的“花哨”，什么动态背景啦，什么萌萌哒卡哇伊啦。我一直都不是很感冒。

可能更关键的原因是：每次我打开带有“动态背景”的博客时，我的MacBook的风扇就会进入 “狂浪” 模式，虽然我一直觉得这可能是Hexo的一个至今未被修复的bug。。。

你听，耳边想起了：

狂浪是一种态度 狂浪在起起伏伏 狂浪 狂浪 狂浪 狂浪

---

相关参考

• Hexo博客彻底解决置顶问题 | wangwlj’s Blog

---

置顶标记更新

更新于：2021-04-10

对于上面添加的 置顶标记 提示文字，其实可以参考已有的 发表于 更新于 这些副标题的格式来实现。正好显示在同一行上，格式也要统一嘛！

提取 发表于 部分的html代码段：

<span class="post-meta-item">
    <span class="post-meta-item-icon">
    <i class="far fa-calendar"></i>
    </span>
    <span class="post-meta-item-text">发表于</span>
    

    <time title="创建时间：2021-02-28 11:18:43 / 修改时间：11:41:19" itemprop="dateCreated datePublished" datetime="2021-02-28T11:18:43+08:00">2021-02-28</time>
</span>

对其进行优化，我们只需要显示提示文字，不需要后面的带下划线部分，最终得到的就是：

<span class="post-meta-item">
  <span class="post-meta-item-icon">
      <i class="fas fa-thumbtack"></i>
  </span>
  <span class="post-meta-item-text">
      <font color='#f05050'>[置顶]</font>
  </span>
</span>

完整代码：

---