社区 › 实用教程 › 给Hexo的Anzhiyu主题侧边栏添加一个春节倒计时

kingkare 发表于 2026-2-4 18:27:57

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

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

折腾的起因:

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


教程开始(我自己的操作,如果有别的更简便的欢迎讨论,以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();
});第四步:修改配置文件 _config.anzhiyu.yml,在你的主题配置文件最底部添加以下配置：注意缩进
# 倒计时挂件配置开始
aside_countdown: # 注意：这里建议用 aside_countdown 对应你 Pug 里的变量名
enable: true
event_date: '2026-02-17'
event_name: '春节'
default_theme: 'traditional'
themes_list:
    traditional: "传统红火"
    modern: "华丽金秋"
    ink: "水墨丹青"
    blue: "科技之蓝"
    green: "生机盎然"
# 倒计时挂件配置结束
第五步:挂载到侧边栏-你需要告诉主题在哪里渲染这个组件,在30行左右添加以下代码,具体的看自己主题和缩进,我是在这个文件挂载的(themes\anzhiyu\layout\includes\widget\index.pug)
    !=partial('includes/widget/aside_countdown', {}, {cache: true})
以上的所有步骤都操作完成以后执行Hexo 三大步骤既可!
hexo clean
hexo g
hexo s大功告成!完结撒花

七夏 发表于 2026-2-4 18:37:53

hexo好玩吗？我第一次接触还是看了 张洪Heo 的博客

kingkare 发表于 2026-2-4 18:44:26

七夏 发表于 2026-2-4 18:37
hexo好玩吗？我第一次接触还是看了 张红Heo 的博客

还行吧 就是我个人感觉麻烦 只要修改任何东西就必须重新推送 我懒 不过最近闲了就是在折腾hexo的anzhiyu主题 各种魔改{:4_99:}

查看完整版本: 给Hexo的Anzhiyu主题侧边栏添加一个春节倒计时