halo-theme-dream2.0-plus/templates/notice/side.html

梦之城，童话梦境，动漫类型博客主题。

<div class="popup-notice hidden" xmlns:th="https://www.thymeleaf.org">
    <div th:class="|notice-content ${theme.config.pop_notice.pop_notice_orientation} ${theme.config.pop_notice.pop_notice_vertical}|">
        <div class="content-title" th:if="${!#strings.isEmpty(theme.config.pop_notice.pop_notice_title)}">
            <span>[[${theme.config.pop_notice.pop_notice_title}]]</span>
        </div>
        <div class="others">[(${theme.config.pop_notice.pop_notice_content})]</div>
        <div th:class="|countdown ${#strings.isEmpty(theme.config.pop_notice.pop_notice_btn) ? 'padding' : ''}|">
            <i class="ri-flashlight-fill"></i>本通知将在 <span id="countdown">[[${theme.config.pop_notice.pop_notice_show_time}]]</span> 秒后自动消失
        </div>
        <div class="others-end" th:if="${!#strings.isEmpty(theme.config.pop_notice.pop_notice_btn)}">
            <button class="notice-close-btn" onclick="closePopupNotice();">
                [[${theme.config.pop_notice.pop_notice_btn}]]
            </button>
        </div>
    </div>

    <link rel="preload stylesheet" as="style" th:href="@{/assets/css/notice/side.min.css(mew=${theme.spec.version})}">
    <script th:inline="javascript">
      const notice_read_key = 'notice_read_key'
      let notice_side_content = 'side-' + Utils.djb2Hash(`[[${#strings.defaultString(theme.config.pop_notice.pop_notice_content, '')}]]`)

      function shouldShowNotice() {
        return `${notice_side_content}` !== localStorage.getItem(notice_read_key) && `${notice_side_content}` !== sessionStorage.getItem(notice_read_key)
      }

      window.closePopupNotice = function () {
        var popup = document.querySelector('.notice-content')
        popup.classList.remove('show')
        setTimeout(function () {
          document.querySelector('.popup-notice').remove()
        }, 300)

        if ([[${theme.config.pop_notice.pop_notice_show_mode != 'session'}]]) {
          localStorage.setItem(notice_read_key, `${notice_side_content}`)
        } else {
          sessionStorage.setItem(notice_read_key, `${notice_side_content}`)
        }

        if (interval) {
          clearInterval(interval)
        }
      }
      let interval
      // 页面加载时检查并显示通知
      document.addEventListener('DOMContentLoaded', function () {
        if (shouldShowNotice()) {
          setTimeout(function () {
            document.querySelector('.notice-content').classList.add('show')
          }, 30)
          //显示
          document.querySelector('.popup-notice').classList.remove('hidden')
          //单次显示时，直接记录
          if ([[${theme.config.pop_notice.pop_notice_show_mode == 'first'}]]) {
            localStorage.setItem(notice_read_key, `${notice_side_content}`)
          }

          let countdown = [[${theme.config.pop_notice.pop_notice_show_time}]]
          if (countdown && countdown > 0) {
            interval = setInterval(function () {
              countdown--
              document.querySelector('.popup-notice #countdown').innerText = countdown
              if (countdown === 0) {
                closePopupNotice()
              }
            }, 1000)
          } else {
            document.querySelector('.popup-notice .countdown').remove()
          }
        } else {
          closePopupNotice()
        }
      })
    </script>
</div>