给自己的博客添加上节日通知(弹窗与侧边栏)

因为这几天节日比较多嘛，然后就想着弄一些有关节日的东西，弹窗是按照Akilar的SAO-UI-PLAN-Notify ,这个弹窗就引入了个js，但是只用于没有加载动画和pwa的，具体怎么加条件判断什么的请去问问Akilar吧！我演示将以未加这些的。侧边栏也没什么技术含量，所以这篇比较水😁

弹窗

新建在\根目录\themes\butterfly\source\js\SAO-Notify.js

function SAONotify(title,message,action){
  // 先移除旧有弹窗,确保不会重叠。
  var notifyWindow = document.getElementById('SAO-Notify');
  if(notifyWindow){
    notifyWindow.remove();
  }
  //样式文件
  var tempstyle = `#SAO-Notify{z-index:9999;background:rgba(204,204,207,0.8);font-family:'SAOUI',Langar,-apple-system,sans-serif;font-weight:bolder;text-shadow:0.5px 0.5px 0.5px#888;height:240px;width:350px;position:fixed;bottom:0;right:0;left:0;top:0;margin:auto auto;border-radius:5px;box-shadow:2px 2px 10px#888;display:block;animation:flashOpen 1s ease alternate}.notify-title{background:rgba(249,249,249,0.8);color:rgba(60,60,61,0.7);height:60px;width:100%;display:block;font-size:20px;text-align:center;border-top-left-radius:5px;border-top-right-radius:5px;padding-top:10px}.notify-alert::-webkit-scrollbar{display:none}.notify-alert{background:rgba(220,220,220,0.8);color:rgba(60,60,61,0.7);height:120px;overflow:scroll;width:100%;display:flex;justify-content:space-around;align-items:center;box-shadow:0px 0px 15px#bcbcbc inset;flex-wrap:wrap;padding:5px 25px;}.notify-button{background:rgba(249,249,249,0.8);height:60px;width:100%;display:block;text-align:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding-top:12.5px}.notify-confirm{background:rgba(47,121,212,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#2f79d4}.notify-confirm button{background:#2f79d4;text-align:center;border-radius:50%;font-size:18px;color:#fff;display:block;width:30px;height:30px;margin:2px}.notify-cancel{background:rgba(203,55,73,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#cb3749}.notify-cancel button{background:#cb3749;text-align:center;border-radius:50%;font-size:18px;font-weight:bolder;color:#fff;display:block;width:30px;height:30px;margin:2px}.notify-receive{background:rgba(47,121,212,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#eda60c}.notify-receive button{background:#eda60c;text-align:center;border-radius:50%;font-size:18px;color:#fff;display:block;width:30px;height:30px;margin:2px}@-moz-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-webkit-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-o-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-moz-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@-webkit-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@-o-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}`;
  //若定义了action执行代码片段，则输出有双选项的弹窗
  if (action){
    var template =`<div id="SAO-Notify"><style>` + tempstyle +`</style><div class="notify-title">` + `${title}` + `</div><div class="notify-alert"> `+ `${message}` + `</div><div class="notify-button"><span class="notify-confirm"><button class="far fa-circle" type="button" name="confirm" onclick="clickAudio();setTimeout(function(){` + `${action}` + `},500);cancelNotify()"></button></span><span class="notify-cancel"><button class="fa fa-times" type="button" name="cancel" onclick="panelAudio();cancelNotify()"></button></span></div><audio id="SAO-Notify-Panel" src="https://npm.elemecdn.com/akilar-candyassets/audio/Panel.mp3"></audio><audio id="SAO-Notify-Click" src="https://npm.elemecdn.com/akilar-candyassets/audio/Click.mp3"></audio>
    </div>`
  } else { //若未定义action代码片段，则仅输出单选项的弹窗
    var template =`<div id="SAO-Notify"><style>` + tempstyle +`</style><div class="notify-title">` + `${title}` + `</div><div class="notify-alert"> `+ `${message}` + `</div><div class="notify-button"><span class="notify-receive"><button class="fas fa-check" type="button" name="receive" onclick="panelAudio();cancelNotify()"></button></span></div><audio id="SAO-Notify-Panel" src="https://npm.elemecdn.com/akilar-candyassets/audio/Panel.mp3"></audio><audio id="SAO-Notify-Click" src="https://npm.elemecdn.com/akilar-candyassets/audio/Click.mp3"></audio>
    </div>`
  };

  document.body.insertAdjacentHTML('beforeend',template);
}


//按钮确认选项音效
function clickAudio() {
  var clickAudio = document.getElementById("SAO-Notify-Click");
  if (clickAudio) {
    clickAudio.play();//有音频时播放
  }
}
//按钮取消选项音效
function panelAudio() {
  var panelAudio = document.getElementById("SAO-Notify-Panel");
  if (panelAudio) {
    panelAudio.play();//有音频时播放
  }
}
// 关闭通知栏
function cancelNotify(){
  var notifyWindow = document.getElementById('SAO-Notify');
  notifyWindow.style.animation = 'flashClose 1.5s ease alternate ';
  setTimeout(function() {
    notifyWindow.remove();
  }, 1e3);

}

引入

在主题文档_config.butterfly.yml的head中引入该js

head:
  - <script defer src="/js/SAO-Notify.js"></script>

使用

在需要弹窗的页面中添加如下代码

<script type="text/javascript">
SAONotify("节日倒计时","今天就是圣诞节！祝你圣诞节快乐！<br>祝你圣诞节能收到礼物哦!</br>距离2023年元旦还有8天!","location.reload(true);");
</script>

放在首页的话就在全局生效的js中引入

SAONotify("节日倒计时","今天就是圣诞节！祝你圣诞节快乐！<br>祝你圣诞节能收到礼物哦!</br>距离2023年元旦还有8天!","location.reload(true);");

内容可以修改，第一个引号内是标题，第二个引号内是内容，第三个引号内是按钮(以上例子为两个按钮一个刷新，一个关闭)。

侧边栏

添加pug

创建\根目录\node_modules\hexo-theme-butterfly\layout\includes\widget\card_time.pug
图标抖动：

if theme.aside.card_time.enable
  .card-widget.card-time
    .item-headline
      i.fa.fa-birthday-cake.fa-shake #i.后面，.fa-shake前的icon图标可自定义
      span= _p('节日倒计时')  #侧边栏标题可以修改
    .time_content!= theme.aside.card_time.content

图标静止：

if theme.aside.card_time.enable
  .card-widget.card-time
    .item-headline
      i.fa.fa-birthday-cake #i.后面，.fa-shake前的icon图标可自定义
      span= _p('节日倒计时') #侧边栏标题可以修改
    .time_content!= theme.aside.card_time.content 

修改主题配置的aside

在主题文档_config.butterfly.yml的aside下按照你想的位置添加(不知道为什么侧边栏只能显示两行文字)

card_time:
  enable: true
  content: 今天就是圣诞节！祝你圣诞节快乐！<br>距离元旦还有7天！</br>

最后

不知道如何获取当前日期，原本想根据日期自动更换的那种，但是不会啊！(恼
今天是圣诞节，祝各位圣诞快乐，希望有人送你圣诞礼物哦！
快要元旦了，提前祝各位在新的一年，新的开始，新的机遇，新的挑战，新的追逐！加油！！！😆