【Hexo】Butterfly主题运行时间显示优化，支持年天格式

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

慕雪小助手的总结

LongCat-Flash-Chat

慕雪前排提醒，本文全文为AI生成，包括butterfly主题的修改点也是AI找到并修改的。使用的是GLM-4.6模型和Claude Code。

1. 前言

博客运行时间是一个很有意义的指标，它记录了博客持续运行的时间。默认情况下，Butterfly主题会显示为纯天数格式，比如"1265 天"。虽然准确，但对于访客来说，这种大数字不够直观。

今天我就来分享如何将运行时间显示优化为更友好的年天格式，比如"3年170天"，让访客能更直观地了解博客的运行时长。

2. 效果对比

默认格式: 1265 天
优化后: 3 年 170 天

很明显，年天格式更加直观易懂！

3. 实现思路

要实现这个功能，我们需要修改以下几个部分：

JavaScript 工具函数 (utils.js) - 修改 diffDate 函数，支持年天格式计算
主逻辑函数 (main.js) - 修改 addRuntime 函数，智能处理显示格式
配置传递 (config.pug) - 将新配置项传递到前端
用户配置 (_config.butterfly5.yml) - 添加配置选项

4. 详细实现步骤

4.1. 添加配置选项

首先在主题配置文件中添加新的配置选项：

# _config.butterfly5.yml
aside:
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order:
    # Time difference between publish date and now
    runtime_date: 04/16/2022 00:00:00
    # Runtime format: days (default) or year_day
    # days: 显示天数（如：1265 天）
    # year_day: 显示年天格式（如：3 年 154 天）
    runtime_format: year_day

4.2. 修改 JavaScript 工具函数

修改 themes/butterfly5/source/js/utils.js 中的 diffDate 函数：

diffDate: (inputDate, more = false) => {
  const dateNow = new Date()
  const datePost = new Date(inputDate)
  const diffMs = dateNow - datePost
  const diffSec = diffMs / 1000
  const diffMin = diffSec / 60
  const diffHour = diffMin / 60
  const diffDay = diffHour / 24
  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
  }

  if (diffMonth > 12) return datePost.toISOString().slice(0, 10)
  if (diffMonth >= 1) return `${Math.floor(diffMonth)} ${dateSuffix.month}`
  if (diffDay >= 1) return `${Math.floor(diffDay)} ${dateSuffix.day}`
  if (diffHour >= 1) return `${Math.floor(diffHour)} ${dateSuffix.hour}`
  if (diffMin >= 1) return `${Math.floor(diffMin)} ${dateSuffix.min}`
  return dateSuffix.just
},

关键点：

当 runtime_format 为 year_day 且天数 ≥ 365 时，执行年天转换
使用 Math.floor(totalDays / 365) 计算年份
使用 totalDays % 365 计算剩余天数
智能显示：只有年显示"X年"，只有天显示"X天"，都有显示"X年X天"

4.3. 修改主显示逻辑

修改 themes/butterfly5/source/js/main.js 中的 addRuntime 函数：

const addRuntime = () => {
  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}`
    }
  }
}

关键点：

检查配置格式和返回文本内容
年天格式已经包含单位，不再添加额外的"天"字
保持对默认格式的兼容性

4.4. 配置传递到前端

修改 themes/butterfly5/layout/includes/head/config.pug，在 GLOBAL_CONFIG 中添加：

const GLOBAL_CONFIG = {
  // ... 其他配置
  runtime: '!{theme.aside.card_webinfo.runtime_date ? _p("aside.card_webinfo.runtime.unit") : ""}',
  runtime_format: '!{theme.aside.card_webinfo.runtime_format || "days"}',
  // ... 其他配置
}

4.5. 默认配置设置

在 themes/butterfly5/scripts/events/merge_config.js 中添加默认值：

card_webinfo: {
  enable: true,
  post_count: true,
  last_push_date: true,
  sort_order: null,
  runtime_date: null,
  runtime_format: 'days'  // 新增默认配置
}