本文发表于 269 天前，其中的信息可能已经事过境迁

WARNING

在开始使用实践之前，你需要注意，你可能会遇到一系列的问题，请确保你有独立解决问题的能力。
如果你想修改主题的某些组件或样式，你还需要掌握 Vue.js 的相关知识

新建 Birthday.vue 文件 ​

新建在：.vitepress\theme\components\Aside\Widgets\Birthday.vue
写入：

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

const { theme } = useData();

// 计算天数的逻辑
const authorDays = computed(() => {
  const dateStr = theme.value.aside.birthDate?.date;
  if (!dateStr) return 0;
  
  const startDate = new Date(dateStr);
  const today = new Date();
  const timeDiff = today.getTime() - startDate.getTime();
  
  return Math.floor(timeDiff / (1000 * 60 * 60 * 24));
});
</script>

<template>
  <div v-if="theme.aside.birthDate?.enable" class="birthday-card s-card">
    <p class="custom-text">
      🎉{{ theme.aside.birthDate.name }} 已经在这个世界上存在
      <span class="day-number">{{ authorDays }}</span>
      天啦！
      <!-- 可以在这里修改文字, {{ theme.aside.birthDate.name }} 是在ThemeConfig.mjs中配置的名字。在{{ theme.aside.birthDate.name }}前面的就是在名字前面显示的文字 不需要就留空 -->
    </p>
  </div>
</template>
<style scoped>
/* 只保留组件特定的样式，通用样式由 s-card 处理 */
.birthday-card {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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: 600;
  color: var(--vp-c-brand);
  margin: 0 0.25rem;
  vertical-align: middle;
}
</style>

修改 index.vue ​

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

vue
<template>
  <aside class="main-aside">
    <Hello v-if="theme.aside.hello.enable" class="weidgets" />
    <div class="sticky">
      <Toc v-if="theme.aside.toc.enable && showToc" class="weidgets" />
      <Weather
        v-if="theme.aside.weather.enable && showWeather"
        class="weidgets"
        @fetch-error="onWeatherError"
      />
      <Countdown class="weidgets" />
      <Birthday class="weidgets" />
      <HelloGithubHot
        v-if="theme.aside.HelloGithub.enable && showHot"
        @fetch-error="onHotError"
      />
      <Tags v-if="theme.aside.tags.enable" class="weidgets" />
      <SiteData v-if="theme.aside.siteData.enable" class="weidgets" />
    </div>
  </aside>
</template>
vue
<script setup>
import Birthday from './Widgets/Birthday.vue'
const { theme } = useData();

修改 themeConfig.mjs ​

.vitepress\theme\assets\themeConfig.mjs

js
birthDate: {
  enable: true,
  name: "Sy Yann", //要显示的名字
  date: "2011-08-15", //出生日期
},

完成 ​

按照步骤做完后，run dev保存应该就可以看见一个出生天数卡片出现在右边了。祝愉快~

给你的 Curve 主题添加一个出生天数的侧边栏https://ddnsy.fun/posts/bt
作者Sy
发布于2025/8/4
更新于今日内
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
开发
评论 隐私政策