Footer 添加建站时间

plume.config.ts

  footer: {
    message: 'Power by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a>. Configed with ❤️!',
    copyright: 'Copyright © 2020-present SunRt233',
  },

TimeSinceCreated.vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { themeData } from 'vuepress-theme-plume/composables'

// 创建时间实例，用于后续计算时间差
const cratedTime = new Date('2020-01-06')

// 自动计算页面创建时间并更新
const timeSinceCreate = ref()

// 初始化消息和版权信息
const message = ref()
const copyright = ref()
const id = ref()

// 根据主题数据配置消息和版权信息
if (typeof (themeData.value.footer) == "boolean") {
    // 如果主题数据的页脚是布尔类型，则不进行任何操作
} else {
    // 否则，根据主题数据填充消息和版权信息
    message.value = themeData.value.footer?.message
    copyright.value = themeData.value.footer?.copyright
}

/**
 * 计算两个时间戳之间的差异
 * @param {number} startTimestamp 开始时间的时间戳
 * @param {number} endTimestamp 结束时间的时间戳
 * @returns {Object} 包含年、月、日、小时、分钟和秒的时间差对象
 */
let calculateTimeDifference = (startTimestamp, endTimestamp) => {
    const start = new Date(startTimestamp);
    const end = new Date(endTimestamp);

    // 检查时间是否有效
    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
        return { years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
    }

    let diffInMilliseconds = end.getTime() - start.getTime();

    // 计算时间差
    let years = end.getFullYear() - start.getFullYear();
    let months = end.getMonth() - start.getMonth();
    let days = end.getDate() - start.getDate();
    let hours = end.getHours() - start.getHours();
    let minutes = end.getMinutes() - start.getMinutes();
    let seconds = end.getSeconds() - start.getSeconds();

    // 调整负值
    adjustNegativeValues(seconds, minutes, 60, (newSeconds, newMinutes) => {
        seconds = newSeconds;
        minutes = newMinutes;
    });

    adjustNegativeValues(minutes, hours, 60, (newMinutes, newHours) => {
        minutes = newMinutes;
        hours = newHours;
    });

    adjustNegativeValues(hours, days, 24, (newHours, newDays) => {
        hours = newHours;
        days = newDays;
    });

    adjustNegativeValues(days, months, getDaysInMonth(end.getFullYear(), end.getMonth()), (newDays, newMonths) => {
        days = newDays;
        months = newMonths;
    });

    adjustNegativeValues(months, years, 12, (newMonths, newYears) => {
        months = newMonths;
        years = newYears;
    });

    // 返回计算结果
    return {
        years,
        months,
        days,
        hours,
        minutes,
        seconds
    };
};

/**
 * 调整负值时间单位
 * @param {number} smaller 较小的时间单位
 * @param {number} larger 较大的时间单位
 * @param {number} base 进制基数
 * @param {Function} callback 回调函数，用于更新时间单位
 */
let adjustNegativeValues = (smaller, larger, base, callback) => {
    if (smaller < 0) {
        larger -= 1;
        smaller += base;
    }
    callback(smaller, larger);
};

/**
 * 获取指定年月的天数
 * @param {number} year 年份
 * @param {number} month 月份（0-11）
 * @returns {number} 该月的天数
 */
let getDaysInMonth = (year, month) => {
    return new Date(year, month + 1, 0).getDate();
};

/**
 * 更新自创建以来的时间
 */
let updateTimeSinceCreated = () => {
    let result = ''

    // 计算当前时间与创建时间的差异
    let diff = calculateTimeDifference(cratedTime.getTime(), new Date().getTime())
    if (diff.years > 0) {
        result += `${diff.years}年`;
    }
    if (diff.months > 0) {
        result += `${diff.months}个月`;
    }
    if (diff.days > 0) {
        if (diff.months == 0 && diff.years > 0) {
            result += `零${diff.days}天`;
        }
        else {
            result += `${diff.days}天`;
        }
    }
    if (diff.days == 0 && diff.months == 0) {
        if (diff.hours > 0) {
            result += `${diff.hours}小时`
        }
        if (diff.minutes > 0) {
            result += `${diff.minutes}分钟`
        }
        if (diff.seconds > 0) {
            result += `${diff.seconds}秒`
        }
    }
    return result
}

// 仅当被挂载时执行
onMounted(() => {
    // 每秒更新一次自创建以来的时间
    id.value = setInterval(() => {
        // 格式化为X年X月X分X秒
        timeSinceCreate.value = updateTimeSinceCreated()
    }, 1000)

    // 初始化自创建以来的时间
    updateTimeSinceCreated()
})
// 在卸载时清除定时器
onUnmounted(() => {
    clearInterval(id.value)
})
</script>
<template>
    <div class="my-container">
        <div class="message" v-html="message"></div>
        <div class="message">自本站创建已过去 {{ timeSinceCreate }} 啦 ~ </div>
        <div class="copyright" v-html="copyright"></div>
    </div>

</template>
<style>
.my-container {
    max-width: var(--vp-layout-max-width);
    margin: 0 auto;
    text-align: center;
}

.message,
.copyright {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--vp-c-text-2);
}

.message {
    order: 2;
}

.copyright {
    order: 1;
}
</style>

client.ts

import { defineClientConfig } from 'vuepress/client'
import TimeSinceCreated from './theme/components/TimeSinceCreated.vue'
import './theme/styles/custom.css'
import { h } from 'vue'
import { Layout } from 'vuepress-theme-plume/client'

// 定义客户端配置
export default defineClientConfig({
  // 在应用中增强功能
  enhance({ app }) {
    // 注册自定义组件 TimeSinceCreated
    app.component('TimeSinceCreated', TimeSinceCreated)
  },
  // 定义布局
  layouts: {
    // 使用 vuepress-theme-plume 主题的 Layout 布局
    Layout: () => h(Layout, null, {
      // 在布局的页脚部分添加自定义组件 TimeSinceCreated
      'footer-content': () => h(TimeSinceCreated),
    })
  }
})

贡献者

SunRt233

更新日志

2025/10/11 22:26

查看所有更新日志

• 80cdb-``` build(docs): 更新文档主题版本缓存于 2025/10/11
• 8bd29-'update'于 2025/1/6