马上就要过年了，虽然还有几个月，但写代码的人总喜欢提前准备点什么。最近我捣鼓了一个小脚本，能在春节前后自动给你的网站挂上两只大红灯笼，不用手动开关，到日子自己出现，过完节自己消失。
项目已经开源，在线预览在这里：https://acuherb.github.io/denglong/
源码仓库：https://github.com/acuherb/denglong
为什么做这个
春节是中国人最看重的节日，很多网站都会挂点红色装饰。但手动加 HTML、到时间再删掉，挺麻烦的。我就想：能不能用一段纯前端的脚本，让它自己判断日期，自动挂、自动撤？
于是就有了这个「春节灯笼」脚本。它内置了 2025 到 2050 年的春节公历日期表，每年到了腊月廿三（可配置）就自动渲染灯笼，过完正月十五（可配置）就自动移除。你只需要把代码丢进网站，剩下的交给它。
效果长什么样
页面左右两侧各挂一只大红灯笼，缓缓摆动，灯笼上竖排写着「新年」「快乐」。底部有流苏，也有独立的摆动动画。整体是纯 CSS 驱动的，没有鼠标监听，不会闪烁。
灯笼容器设置了 pointer-events: none，所以不会挡住任何点击，纯粹是视觉装饰。手机端会自动缩小、贴边，响应式也做了两档断点。
怎么用
只挂在首页
把整段脚本追加到 FixIt 主题的 layouts/_partials/custom/profile.html 里。注意：只保留 <script> 那一段，不要带 <!DOCTYPE html>、<html>、<body> 这些标签，否则会破坏主题的暗黑模式切换（这是我自己踩过的坑）。
全站每页都挂
- 创建
layouts/_partials/custom/footer.html，把<script>放进去。 - 在
config/_default/params.toml里注册：
[custom_partials]footer = [ "custom/footer.html",]这样每个页面都会加载灯笼脚本。
配置项
脚本开头有几个变量，按需改就行：
| 变量 | 默认值 | 说明 |
|---|---|---|
TEXT_LEFT | '新年' | 左灯笼显示的文字 |
TEXT_RIGHT | '快乐' | 右灯笼显示的文字 |
DAYS_BEFORE | 7 | 春节前多少天开始挂 |
DAYS_AFTER | 15 | 春节后多少天撤掉 |
比如你想从腊月廿三挂到二月初二，可以改成：
var DAYS_BEFORE = 15;var DAYS_AFTER = 30;它是怎么判断日期的
核心逻辑很简单：脚本里有一张 SPRING_FESTIVALS 数组，存了每年的春节公历日期。运行时取当前年份和下一年的春节日期，分别算今天与它们的差值。只要任意一个落在 [-DAYS_BEFORE, DAYS_AFTER] 区间内，就渲染灯笼；否则直接 return，不注入任何 DOM。
因为跨年时正月初一可能在明年 1 月，所以必须同时看两年，这样就不会漏掉。
一些注意事项
- 日期表只到 2050 年。2051 年之后需要手动补充，每年加一行就行。春节日期可以从紫金山天文台或权威农历工具查到。
- 灯笼的
z-index是 9999，比常规内容高，但因为不接收鼠标事件，不会挡点击。如果你有其他组件也用了z-index: 9999+，可能会被盖住，按需调整即可。 - 不适用于 iframe 内嵌。脚本没做
window.top !== window判断，如果页面被嵌入 iframe，灯笼也会在 iframe 里出现。不需要的话，在脚本开头加一句if (window.top !== window) return;即可。 - 样式参考自开源社区，原样式没标注明确许可证，我做了日期判断和结构重写。如果有顾虑，可以自己替换 CSS。
自定义
想换颜色，改这几处：
- 灯笼主体：
.lantern-center { background-color: red } - 金色边框与流苏：
#ecaa2f - 阴影：
0 0 80px -10px #f00想换摆幅或周期，改@keyframes lantern里的rotate角度，以及.lantern-container的animation时长。
最后
这个脚本很小，但挺实用。如果你也写博客，不妨挂上试试。到春节那天，它会自己出现，给访客一点小惊喜。
项目基于 MIT 许可，可自由用于个人或商业站点，保留出处即可。
部分信息可能已经过时
