51工具盒子新版本 {#新版本}
原理：通过hexo的api获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素。
修改page.js {#修改page-js}
首先我们需要在 themes\butterfly\scripts\helpers\page.js 内加入一段内容（位置任意，别放在其他函数里面即可）
|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | // 最新文章 hexo.extend.helper.register('newPost', function() { let name, time; hexo.locals.get('posts').map((item, index) => { if (index == 0) name = item.title, time = item.date else if (item.date > time) { name = item.title, time = item.date } }); return name }) |
修改post-ui.pug {#修改post-ui-pug}
然后在 themes\butterfly\layout\includes\mixins\post-ui.pug 添加如下代码（带颜色的是需要添加的代码，注意去掉最前面的加号，去掉之后不需要补空格）：
|---------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | mixin postUI(posts) + - let newTitle= newPost() each article , index in page.posts.data .recent-post-item - let link = article.link || article.path let title = article.title || _p('no_title') const position = theme.cover.position let leftOrRight = position === 'both' ? index%2 == 0 ? 'left' : 'right' : position === 'left' ? 'left' : 'right' let post_cover = article.cover let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' - if post_cover && theme.cover.index_enable .post_cover(class=leftOrRight) a(href=url_for(link) title=title) img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) .recent-post-info(class=no_cover) + if newTitle == title + span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新 |
css部分 {#css部分}
如果你没有自定义css文件，请先查看此文章：Hexo博客添加自定义css和js文件
在你的自定义css文件中，添加如下代码：
|------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #recent-posts>.recent-post-item { position: relative; } /* 最新文章图标 */ .newPost-left, .newPost-right { position: absolute; top: 0; color: white; padding: 0 15px; background-color: #49b1f5; border-radius: 0 0 10px 10px; } .newPost-left { left: 15px; } .newPost-right { right: 15px; } |
旧版本 {#旧版本}
js部分 {#js部分}
在你的自定义js文件中，添加如下代码：
|------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // 确保其他页面（如第二页）第一篇文章不添加 if (location.pathname == '/') newPost(); // 最新文章函数 function newPost() { // 获取所有文章信息 let ls = document.querySelectorAll('.recent-post-info') // 先让时间和索引值都等于第第一篇文章的 let time = new Date(ls[0].querySelector('.post-meta-date-created').getAttribute('datetime')).getTime(); let index = 0 // 遍历数组，如果有时间比time大（更新的文章）则替换 ls.forEach((i, num) => { let t = new Date(i.querySelector('.post-meta-date-created').getAttribute('datetime')).getTime() if (t > time) { time = t; index = num } }) // 单数在右，双数在左 let className = index % 2 == 0 ? 'newPost-right' : 'newPost-left' ls[index].innerHTML += '<span class="' + className + '">最 新</span>'; // 如果你不想让其一左一右，可以注释上面的启用下面的，默认左，left改成right就是右 // ls[index].innerHTML += '<span class="newPost-left">最 新</span>'; } |
参考链接：https://blog.leonus.cn/2022/newpost.html
