halo-theme-dream2.0-plus/templates/common/banner.html

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

<div xmlns:th="https://www.thymeleaf.org"
     th:fragment="banner" th:class="|banner${theme.config.basic_style.banner_hide_mask ? ' hide-mask' : ''}
                                    ${(theme.config.basic_style.banner_full_screen ? (theme.config.basic_info.header_fixed ? ' header-fixed-full' : ' full') : '')}|">
    <script>
      (function () {
        if (location.pathname !== '/') {
          document.querySelector('.banner').classList.add('hidden')
        }
      })()
    </script>
    <video preload="auto" loop autoplay muted playsinline webkit-playsinline width="100%" height="100%"
           th:data-src="${theme.config.basic_style.enable_banner == 'video' ? theme.config.basic_style.banner_video : ''}"
           th:data-src-mobile="${theme.config.basic_style.enable_banner == 'video' ? theme.config.basic_style.banner_video_mobile : ''}"
           th:data-poster="${theme.config.basic_style.banner_image}"
           th:data-poster-mobile="${theme.config.basic_style.banner_image_mobile}"
           style="width: 100%;height: 100%;object-position: center;object-fit: cover;controlslist: nocontrols;">
        [[#{common.banner.video.not_support}]]
    </video>
    <script th:inline="javascript">
      const video = document.querySelector('.banner video')

      const getAttr = (attr) => video.getAttribute(attr)
      const data = {
        src: getAttr('data-src'),
        srcM: getAttr('data-src-mobile'),
        poster: getAttr('data-poster'),
        posterM: getAttr('data-poster-mobile')
      }

      // 清理属性
      video.removeAttribute('data-src')
      video.removeAttribute('data-src-mobile')
      video.removeAttribute('data-poster')
      video.removeAttribute('data-poster-mobile')

      let lastIsMobile
      const updateVideo = () => {
        const isMobile = Utils.isMobileByScreenWidth()
        if (lastIsMobile === isMobile) return
        lastIsMobile = isMobile
        video.src = isMobile ? (data.srcM || data.src || '') : (data.src || '')
        video.poster = isMobile ? (data.posterM || data.poster || '') : (data.poster || '')
      }

      $(window).on('resize', Utils.debounce(updateVideo, 100))
      updateVideo()
    </script>
    <div style="width: 100%;height: 100%;position: absolute;"></div>
    <div class="banner-info" th:unless="${theme.config.basic_style.banner_hide_info}">
        <div class="banner-info-title" th:text="${site.title}"></div>
        <div class="banner-info-desc" th:text="${theme.config.basic_style.banner_description}"></div>
    </div>
    <svg class="banner-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
            <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88
                    -18 s 58 18 88 18 v 44 h -352 Z"></path>
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0"></use>
            <use xlink:href="#gentle-wave" x="48" y="3"></use>
            <use xlink:href="#gentle-wave" x="48" y="5"></use>
            <use xlink:href="#gentle-wave" x="48" y="7"></use>
        </g>
    </svg>

    <th:block th:if="${theme.config.basic_style.banner_full_screen}">
        <svg class="banner-slide" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" onclick="scrollToText()">
            <path d="M448.72390438 351.872a88.32 88.32 0 0 0 124.41599999 0L894.93190437 32l52.99200001 52.992a87.552 87.552 0 0 1 0 124.416l-372.86400001 372.864a88.32 88.32 0 0 1-124.416 0L75.85990438 209.408a88.32 88.32 0 0 1 0-124.416L128.85190438 32z m124.41599999 384L894.93190437 416l52.99200001 52.992a87.552 87.552 0 0 1 0 124.416l-372.86400001 372.864a88.32 88.32 0 0 1-124.416 0L75.85990438 593.408a88.32 88.32 0 0 1 0-124.416L128.85190438 416l319.872 319.872a88.32 88.32 0 0 0 124.41599999 0z"
                  fill=""></path>
        </svg>
        <script th:inline="javascript">
          function scrollToText() {
            const bannerElement = document.querySelector('.banner')
            if (bannerElement) {
              window.scrollTo({
                top: bannerElement.offsetHeight,
                behavior: 'smooth'
              })
            }
          }
        </script>
    </th:block>
</div>