给博客添加一个时钟效果

由于我准备把侧边栏时钟功能移除掉了，但是之前魔改的代码还是想留着，所以有了本文，爱折腾，有兴趣的可以尝试一下！

效果预览

魔改步骤

1.新建 card_clock.pug，添加如下内容

if theme.aside.card_clock.enable
  style.
    .clock_frame {
      background: var(--Jay-main);
      display: flex;
      justify-content: center;
      align-content: center;
      box-shadow: var(--Jay-shadow-border);
      background: var(--Jay-card-bg);
      border: var(--style-border);
      border-radius: 12px;
      transition: .3s;
      position: relative;
      overflow: hidden;
      margin-top: 1rem;
    }      
    .clock {
      width: 256px;
      height: 256px;
      border-radius: 50%;
      background-color: #fff;
      position: relative;
      overflow: hidden;
    }
    .clock::after {
      content: "";
      width: calc(256px - 80px);
      height: calc(256px - 80px);
      background-color: inherit;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .clock .marker {
      height: calc(100% - 25px);
      width: 3.2px;
      background-color: rgb(52 73 94 / 40%);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .clock .marker:nth-of-type(3n + 1) {
      background: rgb(52 73 94);
    }
    .clock .marker:nth-of-type(2) {
      transform: rotate(30deg);
    }
    .clock .marker:nth-of-type(3) {
      transform: rotate(60deg);
    }
    .clock .marker:nth-of-type(4) {
      transform: rotate(90deg);
    }
    .clock .marker:nth-of-type(5) {
      transform: rotate(120deg);
    }
    .clock .marker:nth-of-type(6) {
      transform: rotate(150deg);
    }
    .clock .hand {
      transform-origin: center bottom;
      position: absolute;
      z-index: 3;
      bottom: 50%;
      left: 50%;
      width: 5.12px;
      transition: transform 1s linear;
    }
    .clock .hand.second {
      height: 85.3333333333px;
      width: 1.3837837838px;
      left: calc(50% - 1.5px);
      border-radius: 1.5px;
      background-color: #ec231e;
      box-shadow: 4px 6px 0 0 rgba(0, 0, 0, 0.15);
      transform: rotate(40deg);
      z-index: 9;
    }
    .clock .hand.second::before,
    .clock .hand.second::after {
      content: "";
      background-color: inherit;
      position: absolute;
      border-radius: 50%;
      left: 50%;
    }
    .clock .hand.second::before {
      width: 12.8px;
      height: 12.8px;
      bottom: 0;
      transform: translate(-50%, 50%);
      box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.15);
    }
    .clock .hand.second::after {
      width: 7.1111111111px;
      height: 7.1111111111px;
      top: 17.0666666667px;
      transform: translate(-50%, 0);
      box-shadow: 4px 6px 2px 0 rgba(0, 0, 0, 0.15);
    }
    .clock .hand.minute {
      height: 85.3333333333px;
      left: calc(50% - 3px);
      border-radius: 3px;
      background-color: rgb(52 73 94);
    }
    .clock .hand.hour {
      height: 64px;
      left: calc(50% - 3px);
      border-radius: 3px;
      background-color: rgb(52 73 94);
    }
    @media screen and (max-width: 768px) {
      .clock_frame {
          display: none;
      }
    }
    @-webkit-keyframes rotateArms {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes rotateArms {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
  .cat_block.clock_frame
    .clock
      .marker
      .marker
      .marker
      .marker
      .marker
      .marker
      .hand.second
      .hand.minute
      .hand.hour
  script.
    let secondPlus = 0;
      function getTime() {
        let date = new Date(),
          seconds = date.getSeconds() * 6,
          minutes = date.getMinutes() * 6,
          hours = (date.getHours() % 12) * 30 + minutes / 15;
        if (seconds == 0) {
          secondPlus += 360;
        }
        document.querySelector(".hand.second").style.transform = "rotate( " + (seconds + secondPlus) + "deg)";
        document.querySelector(".hand.minute").style.transform = "rotate( " + minutes + "deg)";
        document.querySelector(".hand.hour").style.transform = "rotate( " + hours + "deg)";
    }
      setInterval(function() {
        getTime();
      }, 1000);

2.在 theme\layout\includes\widget\index.pug 中的侧边栏引入

//- 时钟
    !=partial('includes/widget/card_clock', {}, {cache: true})

3.主题配置文件 _config.mxblog.yml 添加开关

aside:
  card_clock:
    enable: true # 时钟

至此，你的侧边栏将多了一个时钟，快去试试吧！