Hexo博客置顶功能优化

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

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

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

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


置顶标记

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

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

1
2
3
4
5
6
7
8
9
<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 命令才能看到效果,并不是像文章更新的那样刷新页面就立即生效的。


扩展优化

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

所以我就上网去找了一下,发现了下面的一个网站的置顶效果(其中的文字我做了替换):

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

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

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

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

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

1
2
3
4
5
6
7
<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 标记,找到了如下的代码段:

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

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

然后,回去看我们上面的 “葫芦”:

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

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

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

然后放进去就可以了:

1
2
3
4
{% 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。。。

你听,耳边想起了:

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


相关参考

坚持原创技术分享,您的支持将鼓励我继续创作!
如有疑问或需要技术讨论,请留言或发邮件到 service@itfanr.cc