新增首頁輪播(亞錦賽)

layouts/partials/breadcrumbs.html

@@ -6,7 +6,7 @@
             </div>
         </div>
     </div>
-    <div class="container">
+    <!-- <div class="container">
         <div class="row">
             <div class="col-md-12">
                 <div class="row">
@@ -24,13 +24,6 @@
                     </div>
                 </div>
             </div>
-            <!-- <div class="col-md-4 blog_social">
-                <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/u2MFY3U.png" alt=""></a>
-                <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/LNAJtkO.png" alt=""></a>
-                <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/ImYZfgI.png" alt=""></a>
-                <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg"><img src="https://i.imgur.com/A8EG8wf.png" width="32" height="32" alt=""></a>
-                <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/0t496B3.png"></a>
-            </div> -->
         </div>
-    </div>
+    </div> -->
 </div>

layouts/partials/components/carousel.html

@@ -22,6 +22,20 @@
         </div>
       </div> -->
 
+
+      <div class="swiper-slide">
+        <!-- <iframe src="https://www.youtube.com/embed/EEl8P8VshKs?si=JCbDL2qYGtE06JYq" title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe> -->
+
+        <img src="/imgs/home/亞錦賽-07.webp"
+          alt="choozmo｜AI主播｜AI｜華視｜亞錦賽｜12月3號到12月10號鎖定亞錦棒球看華視｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
+        <div class="cts-player-item">
+          <div id="cts-player"></div>
+        </div>
+      </div>
+
       <div class="swiper-slide">
         <div class="toggle-video">
           <select onchange="setEwinFrame(this)">
@@ -107,10 +121,12 @@
   // 在 API 載入完成後建立影片播放器
   let player;
   let ewinPlayer;
+  let cts;
 
   function onYouTubeIframeAPIReady() {
     setupPlayer('player', 'vS8D5h7oUU0'); // 克隆娟
     setupPlayer('ewin-player', 'YvmyRn6e9uw'); // 亞運
+    setupPlayer('cts-player', 'EEl8P8VshKs'); // 亞錦賽
   }
 
   function setupPlayer(playerId, videoId) {
@@ -127,12 +143,15 @@
           // 隱藏影片播放器
           event.target.mute();
 
-          const playerItem = document.querySelector(`.${playerId}-item`);
-          const posterDiv = document.createElement('div');
+          let posterDiv = document.createElement('div');
+          let playerItem = document.querySelector(`.player-item`);
 
           let ewinDiv = document.createElement('div');
           let playerEwinItem = document.querySelector('.ewin-player-item');
 
+          let ctsDiv = document.createElement('div');
+          let playerCtsItem = document.querySelector('.cts-player-item');
+
           // 設定封面圖片(在影片上放封面圖片 div)
           posterDiv.classList.add('poster'); // 克隆娟
           event.target.getIframe().parentNode.insertBefore(posterDiv, event.target.getIframe());
@@ -140,9 +159,13 @@
           ewinDiv.classList.add('ewin'); // 亞運
           event.target.getIframe().parentNode.insertBefore(ewinDiv, event.target.getIframe());
 
+          ctsDiv.classList.add('cts'); // 亞錦賽
+          event.target.getIframe().parentNode.insertBefore(ctsDiv, event.target.getIframe());
+
           setTimeout(() => {
             playerItem.style.opacity = '1';
             playerEwinItem.style.opacity = '1';
+            playerCtsItem.style.opacity = '1';
           }, 100);
 
           posterDiv.addEventListener('click', function () {
@@ -158,6 +181,13 @@
             event.target.setVolume(100);
             event.target.playVideo();
           });
+
+          ctsDiv.addEventListener('click', function () {
+            ctsDiv.style.display = 'none'; // 隱藏封面圖片
+            event.target.unMute();
+            event.target.setVolume(100);
+            event.target.playVideo();
+          });
         }
       }
     });

static/css/style.css

@@ -4380,20 +4380,46 @@
 .carousel-wrapper .carousel .ewin-player-item .ewin {
   background-image: url("/imgs/home/影片封面-11.webp");
 }
+.carousel-wrapper .carousel .cts-player-item {
+  top: 42%;
+  right: 23%;
+}
+.carousel-wrapper .carousel .cts-player-item,
+.carousel-wrapper .carousel .cts-player-item .cts {
+  width: 35vw;
+  height: 20vw;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper .carousel .cts-player-item,
+  .carousel-wrapper .carousel .cts-player-item .cts {
+    width: 44vw;
+    height: 25vw;
+  }
+}
+.carousel-wrapper .carousel .cts-player-item .cts {
+  background-image: url("/imgs/home/亞錦賽-08.webp");
+}
+.carousel-wrapper .carousel .cts-player-item,
 .carousel-wrapper .carousel .player-item,
 .carousel-wrapper .carousel .ewin-player-item {
   position: absolute;
   opacity: 0;
 }
+.carousel-wrapper .carousel .cts-player-item iframe,
 .carousel-wrapper .carousel .player-item iframe,
 .carousel-wrapper .carousel .ewin-player-item iframe {
   width: 100%;
   height: 100%;
 }
+.carousel-wrapper .carousel .cts-player-item .poster,
+.carousel-wrapper .carousel .cts-player-item .ewin,
+.carousel-wrapper .carousel .cts-player-item .cts,
 .carousel-wrapper .carousel .player-item .poster,
 .carousel-wrapper .carousel .player-item .ewin,
+.carousel-wrapper .carousel .player-item .cts,
 .carousel-wrapper .carousel .ewin-player-item .poster,
-.carousel-wrapper .carousel .ewin-player-item .ewin {
+.carousel-wrapper .carousel .ewin-player-item .ewin,
+.carousel-wrapper .carousel .ewin-player-item .cts {
   background-size: cover;
   position: absolute;
   top: 0;
@@ -4571,5 +4597,13 @@
   font-weight: bold;
   text-decoration: none;
 }
+.news-main-content .container {
+  max-width: 50%;
+}
+@media (max-width: 991px) {
+  .news-main-content .container {
+    max-width: 90%;
+  }
+}
 
 /* news-content End *//*# sourceMappingURL=style.css.map */

static/css/style.default.css

@@ -1749,8 +1749,8 @@ fieldset[disabled] .btn-template-primary.active {
   position: absolute;
   width: 6rem;
   height: .5rem;
-  top: 120%;
-  left: 48%;
+  top: 145%;
+  left: 47.5%;
   content: "";
   background-color: #EA5413;
 }

static/css/style.scss

@@ -4797,6 +4797,27 @@
       }
     }
 
+    .cts-player-item {
+      top: 42%;
+      right: 23%;
+
+      &,
+      .cts {
+        width: 35vw;
+        height: 20vw;
+
+        @media (max-width: 767px) {
+          width: 44vw;
+          height: 25vw;
+        }
+      }
+
+      .cts {
+        background-image: url("/imgs/home/亞錦賽-08.webp");
+      }
+    }
+
+    .cts-player-item,
     .player-item,
     .ewin-player-item {
       position: absolute;
@@ -4808,7 +4829,8 @@
       }
 
       .poster,
-      .ewin {
+      .ewin,
+      .cts {
         background-size: cover;
         position: absolute;
         top: 0;
@@ -5017,6 +5039,14 @@
     font-weight: bold;
     text-decoration: none;
   }
+
+  .container {
+    max-width: 50%;
+
+    @media (max-width: 991px) {
+      max-width: 90%;
+    }
+  }
 }
 
 /* news-content End */

webSite/content/tags/vtuber/_index.md

@@ -1,7 +1,5 @@
 +++
-title = "Vtuber"
+title = "部落格"
 date = "2021-07-23T12:27:12+08:00"
 +++
 
-{{< vtuber >}}
-