恋爱倒计时组件添加教程

1
<!-- 恋爱倒计时组件 -->
2
---
3
import WidgetLayout from "@/components/common/WidgetLayout.astro";
4
import { relationshipConfig } from "@/config/relationshipConfig";
5

6
const config = relationshipConfig;
7

8
interface Props {
9
  class?: string;
10
  style?: string;
11
}
12
const className = Astro.props.class;
13
const style = Astro.props.style;
14
---
15

16
<WidgetLayout
17
  name={config.title || "恋爱时光"}
18
  id="relationship"
19
  class={className}
20
  style={style}
21
>
22
  <div class="flex flex-col items-center p-2">
23
    <!-- 顶部名称栏 -->
24
    <div class="flex items-center justify-center gap-2 mb-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
25
      <span>{config.name1}</span>
26
      <span class="text-red-500 animate-pulse">❤️</span>
27
      <span>{config.name2}</span>
28
    </div>
29

30
    <!-- 头像和爱心 -->
31
    <div class="flex items-center justify-center gap-4 mb-6">
32
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
33
        <img src={config.avatar1} alt={config.name1} class="w-full h-full object-cover" />
34
      </div>
35
      <div class="text-2xl text-red-500 transform transition-all hover:scale-125 hover:rotate-12 cursor-pointer">
36
        ❤️
37
      </div>
38
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
39
        <img src={config.avatar2} alt={config.name2} class="w-full h-full object-cover" />
40
      </div>
41
    </div>
42

43
    <!-- 计时器 -->
44
    <div class="relationship-timer flex items-center justify-center gap-x-1 text-sm whitespace-nowrap overflow-x-auto">
45
      <span class="timer-num" data-timer-years>0</span><span class="timer-unit bg-red-400">年</span>
46
      <span class="timer-num" data-timer-months>0</span><span class="timer-unit bg-red-300">月</span>
47
      <span class="timer-num" data-timer-days>0</span><span class="timer-unit bg-blue-400">天</span>
48
      <span class="timer-num" data-timer-hours>0</span><span class="timer-unit bg-orange-400">时</span>
49
      <span class="timer-num" data-timer-minutes>0</span><span class="timer-unit bg-blue-500">分</span>
50
      <span class="timer-num" data-timer-seconds>00</span><span class="timer-unit bg-purple-400">秒</span>
51
    </div>
52
  </div>
53
</WidgetLayout>
54

55
<style>
56
  @reference "tailwindcss";
57

58
  .timer-num {
59
    @apply font-bold text-neutral-700 dark:text-neutral-200 min-w-[0rem] text-center;
60
    color: var(--primary);
61
  }
62
  .timer-unit {
63
    @apply px-1 py-0.5 rounded text-[10px] text-white font-medium shrink-0;
64
  }
65
</style>
66

67
<script is:inline define:vars={{ startDateStr: config.startDate }}>
68
  function updateRelationshipTimer() {
69
    const startDate = new Date(startDateStr);
70
    const now = new Date();
71

72
    let diff = now.getTime() - startDate.getTime();
73

74
    if (diff < 0) return;
75

76
    // 计算年月日时分秒的差值
77
    let years = now.getFullYear() - startDate.getFullYear();
78
    let months = now.getMonth() - startDate.getMonth();
79
    let days = now.getDate() - startDate.getDate();
80
    let hours = now.getHours() - startDate.getHours();
81
    let minutes = now.getMinutes() - startDate.getMinutes();
82
    let seconds = now.getSeconds() - startDate.getSeconds();
83

84
    // 处理借位逻辑
85
    if (seconds < 0) {
86
      seconds += 60;
87
      minutes--;
88
    }
89
    if (minutes < 0) {
90
      minutes += 60;
91
      hours--;
92
    }
93
    if (hours < 0) {
94
      hours += 24;
95
      days--;
96
    }
97
    if (days < 0) {
98
      const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
99
      days += lastMonth.getDate();
100
      months--;
101
    }
102
    if (months < 0) {
103
      months += 12;
104
      years--;
105
    }
106

107
    // 更新所有实例，避免移动端和电脑端 ID 冲突
108
    const update = (attr, value) => {
109
      const elements = document.querySelectorAll(`[data-timer-${attr}]`);
110
      elements.forEach(el => {
111
        el.innerText = value;
112
      });
113
    };
114

115
    update('years', years);
116
    update('months', months);
117
    update('days', days);
118
    update('hours', hours);
119
    update('minutes', minutes);
120
    update('seconds', seconds.toString().padStart(2, '0'));
121
  }
122

123
  // 立即运行并每秒更新
124
  updateRelationshipTimer();
125
  if (!window.relationshipTimerInterval) {
126
    window.relationshipTimerInterval = setInterval(updateRelationshipTimer, 1000);
127
  }
128

129
  // 监听 Swup 页面切换
130
  document.addEventListener('swup:content:replace', updateRelationshipTimer);
131
</script>

1
// 右侧边栏组件配置列表
2
rightComponents: [
3
  // ... 其他组件
4
  {
5
    // 组件类型：恋爱计时组件
6
    type: "relationship",
7
    // 是否启用该组件
8
    enable: true,
9
    // 组件位置
10
    position: "top",
11
    // 是否在文章详情页显示
12
    showOnPostPage: true,
13
  },
14
  // ... 其他组件
15
],