文章

Anniversary ---TypeRenew/Typecho纪念日、顶部横幅及弹窗插件

技术栈,作品集

本文是《技术栈（共30篇）》目录的第 26 篇。阅读本文前，建议先阅读本文前3篇文章：

阅读本目录下更多其它文章

CONTENT / 正文
导读似水流年 · AI 生成
嘿，这次我捣鼓了个纪念日插件，初衷是给网站来点特别的日子提醒。集成了纪念日条幅、庄重和喜庆两种模式，还加了弹窗功能。集成过程中遇到不少坎儿，但最后还是搞定了。有兴趣的可以试试，有问题随时来找我聊聊。
20261005141334_h1_O5ss_cd07b323a605e6dcfda7a91f56c8a85f.jpg

前几天九一八的时候，我把网站变成了灰白色，本来是一段平平无奇的代码插入到header或者footer中，后来想想干脆一劳永逸，就把主题集成了，随着想法越来越多，就逐渐加了弹窗、显示日期这些，好容易集成完了，又有了想法，想着其他人可能也会用，干脆做成插件吧，所以就有了这个。

V1.0.4版本，全面优化、修复了许多问题，强化了安全性。

V1.0.3版本，引入了jieqi.dev的日期接口，节气节日自动识别，不用以后每年都修改日期了。

V1.0.2版本，插件完全引入西风兄弟jieqi.dev的接口。

V1.0.1版本，完全重构

插件的逻辑

插件一共4个功能：顶部条幅、庄重纪念日、喜庆纪念日和弹窗。我设计的逻辑非常的简单：

1、顶部条幅和弹窗都可以独立设置某一天或者某一个日期段自动开启自动关闭，也可以随庄重纪念日和喜庆纪念日设置的某一天或者某一个日期段自动开启自动关闭；

2、庄重纪念日适合抗日战争、重大自然灾害等具有缅怀性质的纪念日，开启即全站灰白，不受当前主题配色影响，可以设置某一天或者某一个日期段自动开启自动关闭；

3、喜庆纪念日适合中秋、国庆、过年等喜庆节日，遵循当前主题配色，可以设置某一天或者某一个日期段自动开启自动关闭；

4、庄重纪念日和喜庆纪念日不可同时开启；

5、顶部条幅与弹窗这2个功能可以和庄重纪念日与喜庆纪念日的其中一个任意搭配。

插件介绍

后台设置：启用插件后，点击设置进入后台设置页面，默认全部关闭。

1.png

1、顶部横幅设置：文案即显示的文字内容，横幅背景颜色和文案文字颜色均可以设置；横幅日期分3个选项，有注释，日期不填代表一直显示；横幅显示时长为0时一直显示，大于0时代表显示几秒后消失；由于顶部横幅并不会遮挡视线，降低网站交互度，所以不再设计首页或是全站显示功能，开启即代表全站显示。

2.png

2、庄重纪念日设置：庄重纪念日开启即全站变灰，优先级高于网站后台设置的主题配色。庄重纪念日列表为空相当于此模块关闭。

3.png

3、喜庆纪念日设置：喜庆纪念日开启不改变现有主题配色，喜庆纪念日列表为空相当于此模块关闭。

4.png

4、弹窗设置：弹窗日期分3个选项，有注释，日期不填代表一直显示；由于弹窗会遮挡视线，降低网站交互度，所以可以设置首页或是全站显示，默认首页显示，同时可以设置1天显示的次数，但是这个次数会随着浏览器cookies清除而重新计算。

5.png

前台演示

仅顶部横幅：

顶部横幅.png

仅弹窗：

弹窗.png

顶部横幅/庄重纪念日/弹窗组合：

庄重.png

顶部横幅/喜庆纪念日/弹窗组合：

喜庆.png

插件下载地址

https://wwaza.lanzoup.com/b00jfkwxpg
密码:32qa

希望这个插件大家能够喜欢，有问题评论留言。

您已阅读完《技术栈（共30篇）》目录的第 26 篇。请继续阅读本文后3篇文章：

阅读本目录下更多其它文章

COMMENTS / 评论

添加新评论

已有 17 条评论

  1. 花
    花非花常来常往门常开，人常来花非花 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数31/40← 当前瓶颈：再评 9 条活跃23/22资历681/60
    回复

    真是有心了，这几个月工作一直忙，自己的博客都没回复，也没意识到过了特殊节日

    1. 似
      似水流年
      回复

      一眨眼年过去3/4了，最后一个季度，大家更忙了。

  2. 摸
    摸鱼大王常来常往门常开，人常来摸鱼大王 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数17/40← 当前瓶颈：再评 23 条活跃12/22资历90/60
    回复

    你网站的公告弹窗貌似在手机端太大，关闭按钮都溢出屏幕了

    1. 似
      似水流年
      回复

      现在呢，刚才修改了一下。

      1. 摸
        摸鱼大王常来常往门常开，人常来摸鱼大王 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数17/40← 当前瓶颈：再评 23 条活跃12/22资历90/60
        回复

        可以了💯

        1. 似
          似水流年
          回复

          收到，谢谢反馈。

  3. 彬
    彬红茶常来常往门常开，人常来彬红茶 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数18/40← 当前瓶颈：再评 22 条活跃18/22资历452/60
    回复

    又是一个有趣小插件，中秋快乐~

    1. 似
      似水流年
      回复

      中秋快乐！

  4. 西
    西风萍水相逢一次擦肩，也是相逢西风 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数4/5← 当前瓶颈：再评 1 条活跃4/3资历38/14
    回复

    我前端时间去伍子蛇网站看到了节气，我还做了一个相关的项目 jieqi.dev😋

    1. 似
      似水流年
      回复

      你这个项目真好看，能下载使用吗？

      1. 西
        西风萍水相逢一次擦肩，也是相逢西风 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数4/5← 当前瓶颈：再评 1 条活跃4/3资历38/14
        回复

        我去开源一下，随便下 https://github.com/gentpan/jieqi.dev

        1. 似
          似水流年
          回复

          谢谢西风兄弟，新版插件已经完全集成你的作品，插件简介加入了jieqi.dev的说明，设置中也加上jieqi.dev的链接！

  5. 我
    我是军爸常来常往门常开，人常来我是军爸 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数26/40← 当前瓶颈：再评 14 条活跃23/22资历302/60
    回复

    看到你从wp转到tp，又慢慢地折腾完善起来了

    1. 似
      似水流年
      回复

      得益于AI的盛行。

  6. 刘
    刘郎常来常往门常开，人常来刘郎 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数25/40← 当前瓶颈：再评 15 条活跃23/22资历711/60
    回复

    不错 这个很有创意 不过如果太复杂 感觉会不会有点挡屏幕呢

    1. 似
      似水流年
      回复

      已经完全重写了！

  7. 不
    不凡萍水相逢一次擦肩，也是相逢不凡 · Lv1「萍水相逢」 —— 下一阶「点头之交」计数1/5← 当前瓶颈：再评 4 条活跃1/3资历39/14
    回复

    虽然我目前用不上，也不错了

    1. 似
      似水流年
      回复

      谢谢鼓励！

  8. k
    kissthisrain常来常往门常开，人常来kissthisrain · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数18/40← 当前瓶颈：再评 22 条活跃16/22资历419/60
    回复

    很实用的功能，用插件比手动改方便多了

    1. 似
      似水流年
      回复

      是的，我比较喜欢插件。

  9. 陈
    陈阳点头之交见得多了，便点头致意陈阳 · Lv2「点头之交」 —— 下一阶「常来常往」计数6/15← 当前瓶颈：再评 9 条活跃6/8资历288/30
    回复

    厉害啊 👍

    1. 似
      似水流年
      回复

      🙏谢谢

  10. 扶
    扶苏常来常往门常开，人常来扶苏 · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数28/40← 当前瓶颈：再评 12 条活跃24/22资历702/60
    回复

    我怎么感觉今天你博客打开速度贼快。。。优化了吗？前两天还好慢啊。

    1. V
      Vind常来常往门常开，人常来Vind · Lv3「常来常往」 —— 下一阶「渐渐相熟」计数26/40← 当前瓶颈：再评 14 条活跃15/22资历262/60
      回复

      以前很慢的，最近两个月感觉还好，今天特别快

      1. 似
        似水流年
        回复

        今天真实惊喜到我了，不过我这里感觉不出来啊。

    2. 似
      似水流年
      回复

      没动啊网站，可能是网络波动小吧。

  1. 1
  2. 2
LEFT / 附记
标签： typecho 插件 节日