灰度站点

.dumirc.ts 配置 headScripts 和 styles。

import { defineConfig } from 'dumi';

export default defineConfig({
  headScripts: ['/memorial/memorial.js'],
  styles: ['/memorial/memorial.css'],
});

public/memorial/memorial.css 配置灰度样式。

css

/* 纪念日黑白模式样式*/
.memorial-mode {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

public/memorial/memorial.js 配置灰度脚本。

// 检查当前日期，如果是纪念日则启用黑白模式
function checkMemorialDay() {
  const today = new Date();
  const currentMonth = today.getMonth() + 1; // 月份从0开始
  const currentDay = today.getDate();

  // 定义纪念日数组 [月份, 日期]
  const memorialDays = [
    [4, 4], // 清明
    [4, 5], // 清明
    [4, 6], // 清明
    [9, 18], // 九一八
    [9, 30], // 中国烈士纪念日
    [12, 13], // 南京大屠杀死难者国家公祭日
  ];

  const isMemorialDay = memorialDays.some(
    (day) => day[0] === currentMonth && day[1] === currentDay,
  );

  if (isMemorialDay) {
    document.body.classList.add('memorial-mode');
  }
}

document.addEventListener('DOMContentLoaded', function () {
  // 页面加载时检查
  checkMemorialDay();
});

TABLE OF CONTENTS

灰度站点

TABLE OF CONTENTS

灰度站点