zblogphp日历小改有所悟

林三是也发布于 2026-10-01 15:23Zblog19 次浏览抢沙发

记得之前有人问我，不是在用wordpress程序，怎么还有其他博客程序的笔记，然后我告述他，我主流程序都在学习。然后就没有然后了，这两天工作比较多，就在zblogphp子站上面做了点笔记，然后就想着搞下日历。

zblogphp的tpure纯净主题日历小改

这款tpure主题，说是纯净主题，其实指的是界面纯净，功能上是非常丰富饱满的。林三不喜欢花花绿绿的一些，就弄了个日历上去，没想到看着还不错，就是这个日历的默认样式是，如果该日期发表了日志，就会加上蓝色的边框以突出显示，其他就没有了。我以为，还得像苹果手机那样，当前的日期也需要突出显示！

主题还在更新，作者确实是良心，虽然有AI协助的可能性，但也是良性的进步或升级。由于主题设置里面的 SEO 设置可以添加自定代码，所以就问了下豆包，我这种需求是否可以满足，得到了肯定的回答。

先加上这个js代码，使得能够给当前日期加上类，方便后续添加css进行显示：


document.addEventListener('DOMContentLoaded',function(){
const table = document.getElementById('tbCalendar');
if(!table) return;
const today = new Date();
const day = today.getDate();
const tds = table.querySelectorAll('tbody td');
tds.forEach(td=>{
    const num = parseInt(td.innerText.trim());
    if(num === day){
        td.classList.add('today-td');
    }
})
})

还需要这段代码前后加上 script （自己添加尖括号）才能放到自定义代码框。然后再赋予 CSS 样样式：


#tbCalendar tbody td.today-td {background: transparent !important;
border:1px solid #f03838 !important;color:#f03838 !important;}
#tbCalendar tbody td.today-td a{color:#f03838 !important;}
#tbCalendar td {text-align: center !important;}
#tbCalendar td a {display: block !important;}

同样需要在前后加上 <style> 就行了。