给Hexo的Anzhiyu主题侧边栏添加一个春节倒计时

kingkare · 昨天 18:27

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

本帖最后由 kingkare 于 2026-2-4 18:49 编辑

折腾的起因:

今天逛论坛的时候看到站长发的这个帖子 HTML+CSS实现2026年春节倒计时！！附源码！！感觉挺好看的,正好最近在折腾Hexo程序,就想着折腾到Hexo上面去,然后就开始了我的折腾之路.
演示图:

给Hexo的Anzhiyu主题侧边栏添加一个春节倒计时

教程开始(我自己的操作,如果有别的更简便的欢迎讨论,以anzhiyu主题为例,其他主题请自行研究):

第一步:
在你的 Hexo 博客根目录下，创建或修改 themes/anzhiyu/layout/includes/widgets/aside_countdown.pug（如果目录不存在请手动创建）然后添加以下代码：

if theme.aside_countdown && theme.aside_countdown.enable
.card-widget.card-countdown
.item-headline
i.fas.fa-hourglass-half
span= _p('春节倒计时')
i.fas.fa-cog.countdown-settings(onclick="toggleCountdownMenu()" title="切换风格")
.countdown-menu#countdown-menu
if theme.aside_countdown.themes_list
each name, key in theme.aside_countdown.themes_list
.menu-item(onclick=`changeCountdownTheme('${key}')`)= name
//- 这里的 class 会根据 JS 动态切换 theme-modern, theme-golden 等
.countdown-content#countdown-main-content(class=`theme-${theme.aside_countdown.default_theme || 'traditional'}`)
.spring-date-info
span#spring-date-text 2026年2月17日 · 农历正月初一
.countdown-timer
.timer-item
span#days.timer-num 00
span.timer-unit 天
.timer-item
span#hours.timer-num 00
span.timer-unit 时
.timer-item
span#minutes.timer-num 00
span.timer-unit 分
.timer-item
span#seconds.timer-num 00
span.timer-unit 秒
.zodiac-info
i.fas.fa-dragon
span#zodiac-text 丙午马年 · 金马迎春
//- 专门用于金耀效果的动态容器
.fu-container#fu-container

复制代码

金耀效果没实现,搞了一下发现会错位那个福字一直在下面一直新增,暂且不搞

第二步:添加样式CSS代码,可以外挂CDN

/* 1. 基础容器样式 */
.card-countdown {
position: relative;
overflow: visible !important; /* 必须为 visible，否则下拉菜单会被遮挡 */
padding: 15px !important;
}
/* 标题与齿轮图标 */
.card-countdown .item-headline {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.countdown-settings {
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.6;
}
.countdown-settings:hover {
transform: rotate(90deg);
color: #ff4d4f;
opacity: 1;
}
/* 2. 下拉菜单样式 */
.countdown-menu {
display: none;
position: absolute;
right: 15px;
top: 45px;
background: var(--anzhiyu-card-bg);
border: 1px solid var(--anzhiyu-border-styling);
border-radius: 12px;
z-index: 1000;
padding: 8px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
min-width: 100px;
}
.countdown-menu.show {
display: block;
animation: countdownSlideIn 0.3s ease;
}
.menu-item {
padding: 8px 15px;
font-size: 13px;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
color: var(--anzhiyu-fontcolor);
text-align: center;
}
.menu-item:hover {
background: var(--anzhiyu-theme);
color: #fff !important;
}
/* 3. 倒计时内容区通用样式 */
.countdown-content {
border-radius: 12px;
padding: 15px;
text-align: center;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
color: #fff;
position: relative;
overflow: hidden;
}
.spring-date-info {
font-size: 12px;
opacity: 0.9;
margin-bottom: 10px;
}
.countdown-timer {
display: flex;
justify-content: space-around;
margin: 10px 0;
}
.timer-item {
display: flex;
flex-direction: column;
align-items: center;
}
.timer-num {
font-size: 24px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
.timer-unit {
font-size: 12px;
opacity: 0.8;
}
.zodiac-info {
font-size: 13px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.2);
}
/* 4. 五大主题配色方案 */
/* 传统红火 (Traditional) */
.theme-traditional {
background: linear-gradient(135deg, #d32f2f 0%, #ff5252 100%);
box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}
/* 华丽金秋 (Modern) */
.theme-modern {
background: linear-gradient(135deg, #fbc02d 0%, #ffa000 100%);
color: #5d4037 !important;
}
.theme-modern .zodiac-info { border-top-color: rgba(0,0,0,0.1); }
/* 水墨丹青 (Ink) */
.theme-ink {
background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
border: 1px solid rgba(255,255,255,0.1);
}
/* 科技之蓝 (Blue) */
.theme-blue {
background: linear-gradient(135deg, #1976d2 0%, #03a9f4 100%);
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}
/* 生机盎然 (Green) */
.theme-green {
background: linear-gradient(135deg, #388e3c 0%, #8bc34a 100%);
box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3);
}
/* 5. 装饰动画 */
@keyframes countdownSlideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 手机端适配优化 */
@media screen and (max-width: 768px) {
.timer-num { font-size: 20px; }
.countdown-content { padding: 10px; }
}

复制代码

CSS和JS文件需要在主题配置文件 _config.anzhiyu.yml 中引用,配置文件中添加引用地址

inject:
head:
- <link rel="stylesheet" href="你的github链接/countdown.css">
bottom:
- <script src="你的github链接/countdown.js"></script>

第三步:注入逻辑脚本

/**
* 2026 春节倒计时插件
* 兼容 Pjax，支持主题切换与本地存储
*/
// 声明一个全局变量，用于清除旧的定时器，防止 Pjax 跳转后产生多个定时器冲突
var countdownTimer = null;
function initCountdown() {
const targetDate = new Date('2026-02-17T00:00:00').getTime();
// 1. 倒计时核心逻辑
const updateTimer = () => {
const now = new Date().getTime();
const diff = targetDate - now;
const d = document.getElementById('days');
const h = document.getElementById('hours');
const m = document.getElementById('minutes');
const s = document.getElementById('seconds');
// 如果元素不存在（比如不在首页），则停止执行
if (!d) return;
if (diff <= 0) {
if (countdownTimer) clearInterval(countdownTimer);
return;
}
d.innerText = Math.floor(diff / 86400000).toString().padStart(2, '0');
h.innerText = Math.floor((diff % 86400000) / 3600000).toString().padStart(2, '0');
m.innerText = Math.floor((diff % 3600000) / 60000).toString().padStart(2, '0');
s.innerText = Math.floor((diff % 60000) / 1000).toString().padStart(2, '0');
};
// 清除旧定时器并开启新定时器
if (countdownTimer) clearInterval(countdownTimer);
if (document.getElementById('days')) {
countdownTimer = setInterval(updateTimer, 1000);
updateTimer();
}
// 2. 加载用户之前保存的主题风格
const savedTheme = localStorage.getItem('countdown-theme');
const content = document.getElementById('countdown-main-content');
if (savedTheme && content) {
// 保持 class 结构为 "countdown-content theme-xxx"
content.className = 'countdown-content theme-' + savedTheme;
}
}
// 3. 切换菜单显示/隐藏
function toggleCountdownMenu() {
const menu = document.getElementById('countdown-menu');
if (menu) {
menu.classList.toggle('show');
}
}
// 4. 切换主题函数
function changeCountdownTheme(themeName) {
const content = document.getElementById('countdown-main-content');
if (content) {
content.className = 'countdown-content theme-' + themeName;
localStorage.setItem('countdown-theme', themeName);
// 切换后自动关闭菜单
const menu = document.getElementById('countdown-menu');
if (menu) menu.classList.remove('show');
}
}
// 5. 点击外部区域自动关闭菜单
document.addEventListener('click', function (e) {
const menu = document.getElementById('countdown-menu');
const settingsBtn = document.querySelector('.countdown-settings');
if (menu && menu.classList.contains('show')) {
if (!menu.contains(e.target) && !settingsBtn.contains(e.target)) {
menu.classList.remove('show');
}
}
});
// 6. 核心：兼容 Pjax 逻辑
// 首次进入页面执行
initCountdown();
// 监听 Pjax 完成事件，确保跳转页面后侧边栏功能依然有效
document.addEventListener('pjax:complete', function () {
initCountdown();
});