【Hexo】Butterfly主题站点运行时间实现n年m天格式显示

慕雪的小助手正在绞尽脑汁···

慕雪小助手的总结

DeepSeek & LongCat

慕雪前排提醒：本文所有内容包括修改点都是AI分析、修改并总结的，纯粹是AI写的，没有半点人工（除了两张截图是我贴上去的）。使用的是GLM-4.6和Claude Code。

前言

在博客网站的侧边栏中，显示站点运行时间是一个很常见的功能。通常我们会看到"1265 天"这样的显示方式，但对于长时间运行的站点来说，这种显示方式不够直观。最近我为Hexo Butterfly主题增加了一个新功能，支持将站点运行时间显示为"3 年 154 天"的格式，这样用户可以更直观地了解站点的运行历史。

本文将详细介绍这个功能的实现过程，包括配置项的添加、JavaScript代码的修改以及相关文件的调整。

功能概述

这个修改主要实现了以下功能：

配置选项：在主题配置中添加runtime_format选项，支持两种格式：

days：默认格式，显示总天数（如：1265 天）
year_day：年天格式，显示年数和剩余天数（如：3 年 154 天）

智能显示：当运行时间不足一年时，仍显示天数格式，避免出现"0 年"的尴尬情况

向下兼容：保持与原有功能的完全兼容，默认使用原有的天数显示方式

实现步骤

1. 配置文件修改

首先需要在主题配置文件_config.butterfly.yml中添加新的配置选项：

aside:
  card_webinfo:
    # 站点运行时间起始日期
    runtime_date: 04/16/2022 00:00:00
    # 运行时间格式：days（默认）或 year_day
    # days: 显示天数（如：1265 天）
    # year_day: 显示年天格式（如：3 年 154 天）
    runtime_format: year_day

同时在merge_config.js中添加默认配置：

// themes/butterfly/scripts/events/merge_config.js
aside: {
  card_webinfo: {
    post_count: true,
    last_push_date: true,
    sort_order: null,
    runtime_date: null,
    runtime_format: 'days'  // 新增默认配置
  }
}

2. 前端配置传递

在config.pug模板中将配置传递给前端JavaScript：

// themes/butterfly/layout/includes/head/config.pug
script.
  window.GLOBAL_CONFIG = {
    // ... 其他配置
    runtime: '!{theme.aside.card_webinfo.runtime_date ? _p("aside.card_webinfo.runtime.unit") : ""}',
    runtime_format: '!{theme.aside.card_webinfo.runtime_format || "days"}',
    // ... 其他配置
  }

3. 核心时间计算逻辑

主要的时间计算逻辑在utils.js中的diffDate函数中实现：

// themes/butterfly/source/js/utils.js
diffDate(date, more = false) {
  const datePost = new Date(date)
  const dateNow = new Date()
  const diffTime = dateNow - datePost
  const diffSecond = Math.round(diffTime / 1000)
  const diffDay = Math.floor(diffSecond / 86400)
  const diffMonth = diffDay / 30
  const { dateSuffix } = GLOBAL_CONFIG

  if (!more) {
    const totalDays = Math.floor(diffDay)

    // 如果启用了年天格式转换
    if (GLOBAL_CONFIG.runtime_format === 'year_day' && totalDays >= 365) {
      const years = Math.floor(totalDays / 365)
      const days = totalDays % 365

      if (years > 0 && days > 0) {
        return `${years} 年 ${days} 天`
      } else if (years > 0) {
        return `${years} 年`
      } else {
        return `${days} 天`
      }
    }

    return totalDays
  }

  // ... 其他时间差处理逻辑
}

4. 显示逻辑优化

在main.js中优化显示逻辑，避免重复显示单位：

// themes/butterfly/source/js/main.js
showRuntime() {
  const $runtimeCount = document.getElementById('runtimeshow')
  if ($runtimeCount) {
    const publishDate = $runtimeCount.getAttribute('data-publishDate')
    const runtimeText = btf.diffDate(publishDate)

    // 如果使用年天格式且已经包含年或天字，则不再添加单位
    if (GLOBAL_CONFIG.runtime_format === 'year_day' &&
        (runtimeText.includes('年') || runtimeText.includes('天'))) {
      $runtimeCount.textContent = runtimeText
    } else {
      $runtimeCount.textContent = `${runtimeText} ${GLOBAL_CONFIG.runtime}`
    }
  }
}