WARNING

在开始使用实践之前，你需要注意，自建网站需要一定的相关知识，你可能会遇到一系列的问题，请确保你有独立解决问题的能力。
假如你想修改主题的某些组件或样式，你还需要掌握 Vue.js 的相关知识
虽然如今你可以借助 AI 来辅助完成一些需求，但知其然，知其所以然
是每一个优秀的人都应该具备的基本素养。

新建 Timing.vue 文件 ​

新建在：.vitepress\theme\components\Aside\Widgets\Timing.vue
写入以下内容：

vue
<script setup>
import { useData } from "vitepress";

const { theme } = useData();

// 拿到配置的日期字符串
const timingDate = computed(() => theme.value.aside.timing?.date);

// 把日期字符串解析成 Date 实例
const parsedDate = computed(() => {
  const ds = timingDate.value;
  return ds ? new Date(ds) : null;
});

// 判断是否为未来日期
const isFuture = computed(() => {
  const d = parsedDate.value;
  return d ? d.getTime() > Date.now() : false;
});

// 计算天数差：未来则向上取整，过去则向下取整
const dayCount = computed(() => {
  const d = parsedDate.value;
  if (!d) return 0;
  const now = Date.now();
  const msPerDay = 1000 * 60 * 60 * 24;
  const diff = now - d.getTime();
  return diff >= 0
    ? Math.floor(diff / msPerDay)
    : Math.ceil(-diff / msPerDay);
});
</script>

<template>
  <div v-if="theme.aside.timing?.enable" class="timing-card s-card">
    <!-- 未来倒计时 -->
    <p v-if="isFuture" class="custom-text">
      ⏳ 距离 
          <span class="event-name">
        {{ theme.aside.timing.event }}
    </span> 还有
      <span class="day-number">{{ dayCount }}</span> 天
    </p>
    <!-- 过去累计天数 -->
    <p v-else class="custom-text">
      💌 
      <span class="title-name">
        {{ theme.aside.timing.name }}
    </span> 
          <span class="event-name">
        {{ theme.aside.timing.event }}
    </span>
    已经
      <span class="day-number">{{ dayCount }}</span> 天
    </p>
  </div>
</template>

<style scoped>
/* 只保留组件特定的样式，通用样式由 s-card 处理 */
.timing-card {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-name {
  font-weight: bold;
  font-size: 1.1rem;
}

.event-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--vp-c-brand);
  margin: 0 0.25rem;
  color: var(--main-color);
}

.custom-text {
  font-size: 1rem;
  color: var(--vp-c-text-2);
  text-align: center;
  line-height: 1.5;
}

.day-number {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--vp-c-brand);
  vertical-align: middle;
  color: var(--main-color);
}
</style>

修改 index.vue ​

修改index.vue使Weather.vue挂载在侧边
index.vue路径：
.vitepress\theme\components\Aside\index.vue

vue
<Weather
v-if="theme.aside.weather.enable && showWeather"
class="weidgets"
@fetch-error="onWeatherError"
/>
<Countdown class="weidgets" />
<Timing v-if="theme.aside.timing.enable" class="weidgets" />
<!-- HelloGithub 热榜 -->
<HelloGithubHot
v-if="theme.aside.HelloGithub.enable && showHot"
@fetch-error="onHotError"
/>

修改 themeConfig.mjs ​

.vitepress\theme\assets\themeConfig.mjs

js
    timing: {
      enable: true,
      name: "池鱼", //要显示的名字
      event: "活着", //事件名称
      date: "2010-09-07", //出生日期
    },
},
参考资料
给你的 Curve 主题添加一个天数倒计时https://chiyu.it/posts/2025/0805
作者池鱼
发布于今日内
更新于今日内
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
开发
赞赏博主
评论 隐私政策