create-fesd-app 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.10",
-    "@xwadex/fesd": "0.0.53",
+    "@xwadex/fesd": "0.0.54",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "clsx": "^2.1.1",

package/src/assets/css/layouts/article4/_article4_setting.sass

@@ -336,6 +336,7 @@ $quote-TB-gap: 20px
   // @extend %table_solid_striped
   // @extend %table_border_rows
   // @extend %table_border_full
+  // @extend %table_border_full_column
   @extend %table_solidSingle_borderColumn
   
   &[data-table-markdown="on"]
@@ -423,9 +424,15 @@ $quote-TB-gap: 20px
         color: #fff
         background-color: #6AA8FF
     tbody
+      tr
+        td
+          &.lefthead
+            color: #fff
+            background-color: #6AA8FF
       tr:nth-child(even)
         td
-          background-color: #F2F2F2
+          &:not(.lefthead)
+            background-color: #F2F2F2
 %table_solid_striped
   ._table
     border-bottom: 5px solid #6AA8FF
@@ -439,14 +446,22 @@ $quote-TB-gap: 20px
       th:nth-child(even)
         background-color: #3287FF
     tbody
-      tr:nth-child(even)
+      tr
         td
+          &.lefthead
+            color: #fff
+            &:nth-child(even)
+              background-color: #3287FF
+            &:nth-child(odd)
+              background-color: #6AA8FF
+      tr:nth-child(even)
+        td:not(.lefthead)
           background-color: #F2F2F2
 %table_border_rows
   ._table
+    border-top: 2px solid #000
     border-bottom: 2px solid #000
-    &:not(:has(thead))
-      border-top: 2px solid #000
+    // &:not(:has(thead))
   table
     thead
       th
@@ -458,7 +473,7 @@ $quote-TB-gap: 20px
           width: 100%
           height: 2px
           left: 0
-          top: 0
+          bottom: 0
           background: #000
       tr:last-child
         th::after
@@ -470,6 +485,10 @@ $quote-TB-gap: 20px
           left: 0
           background: #000
     tbody
+      tr
+        td
+          &.lefthead
+            color: #00C5B1
       tr:not(:first-child)
         td
           position: relative
@@ -480,7 +499,62 @@ $quote-TB-gap: 20px
             height: 1px
             top: 0
             left: 0
+            transform: translate3d(0, -50%, 0)
             background-color: rgba(#000, .2)
+          &.lefthead
+            &::after
+              background-color: #000
+              height: 2px
+%table_border_full_column
+  ._table
+    border-bottom: 2px solid #000
+    &:not(:has(thead))
+      border-top: 2px solid #000
+  table
+    thead
+      th
+        position: relative
+        &::before
+          content: ''
+          position: absolute
+          width: 100%
+          height: 2px
+          bottom: 0
+          left: 0
+          background-color: #000
+          z-index: 5
+    tbody
+      tr:not(:first-child)
+        td
+          &::after
+            content: ''
+            position: absolute
+            width: 100%
+            height: 1px
+            top: 0
+            left: 0
+            transform: translate3d(0, -50%, 0)
+            background-color: rgba(#000, .2)
+      tr
+        td
+          position: relative
+          &.lefthead
+            font-weight: 600
+            &::after
+              height: 2px
+              background-color: #000
+          &:not(:last-child)
+            &::before
+              content: ''
+              position: absolute
+              width: 1px
+              height: 100%
+              top: 0
+              right: 0
+              background-color: rgba(#000, .2)
+            &.lefthead
+              &::before
+                content: unset
 %table_border_full
   ._table
     border-bottom: 2px solid #000
@@ -503,15 +577,12 @@ $quote-TB-gap: 20px
           &:after
             content: ''
             position: absolute
-            top: 50%
+            top: 25%
             right: 0
             width: 1px
-            height: 20px
-            transform: translate3d(50%, -50%, 0)
+            height: 50%
             background-color: #000
     tbody
-      td
-        position: relative
       tr:not(:first-child)
         td
           &::after
@@ -521,9 +592,16 @@ $quote-TB-gap: 20px
             height: 1px
             top: 0
             left: 0
+            transform: translate3d(0, -50%, 0)
             background-color: rgba(#000, .2)
       tr
         td
+          position: relative
+          &.lefthead
+            font-weight: 600
+            &::after
+              height: 2px
+              background-color: #000
           &:not(:last-child)
             &::before
               content: ''
@@ -533,11 +611,25 @@ $quote-TB-gap: 20px
               top: 0
               right: 0
               background-color: rgba(#000, .2)
+            &.lefthead
+              &::before
+                background-color: #000
+                top: 25%
+                height: 50%
 %table_solidSingle_borderColumn
   @extend %table_solid_single
   table
     thead
       th
+        &::before
+          content: ''
+          position: absolute
+          bottom: 0
+          right: 0
+          width: 100%
+          height: 1px
+          z-index: 3
+          background-color: #fff
         &:not(:last-child)
           position: relative
           &:after
@@ -561,6 +653,21 @@ $quote-TB-gap: 20px
           width: 1px
           height: 100%
           background-color: rgba(#000, .2)
+      tr
+        td.lefthead
+          &::after
+            background-color: #fff
+        &:not(:last-child)
+          td.lefthead
+            &::before
+              content: ''
+              position: absolute
+              bottom: 0
+              right: 0
+              width: 100%
+              height: 1px
+              z-index: 3
+              background-color: #fff
   
 // markdown文字樣式
 %table_markdown_style

package/src/assets/css/pages/index.sass

@@ -96,6 +96,7 @@
         display: flex
         flex-wrap: wrap
         gap: 0 20px
+        margin-top: 20px
         +rwdmax(575)
           gap: 15px
       .grid
@@ -282,3 +283,13 @@
       .textarea-scrollbar
         width: calc(100% - 30px)
         margin: 0 auto 10px
+.circle
+  width: 50px
+  height: 50px
+  background: rgba(0,0,0,.3)
+  display: flex
+  justify-content: center
+  align-items: center
+  cursor: pointer
+[video-cover="off"]
+  padding: 0 !important

package/src/assets/js/apps/index/page.js

@@ -180,7 +180,7 @@ $(async () => {
       },
     },
   });
-  new Video4('[video-target]');
+  // new Video4('[video-target]');
   new Share4('[web-share]');
   new Anchor4('[data-anchor-target]');
   // await

package/src/assets/js/commons/cookies/cookiePolicy.js

@@ -283,16 +283,12 @@ cookieAdvanced.switchState = () => {
 
 // 存 cookie
 cookieAdvanced.cookieSaveFn = () => {
-  const nonRequiredValues = Object.entries(cookieNewObj)
-    .filter(
-      ([key]) => key !== 'required' && key !== 'close'
-    )
-    .map(
-      ([, value]) => value
-    )
+  const noRequiredValue = Object.entries(cookieNewObj)
+    .filter(([key]) => key !== 'required' && key !== 'close')
+    .map(([, value]) => value)
 
-  const allNonRequiredAreClosed = nonRequiredValues.every(opt => opt.close === 1)
-  const globalCloseValue = allNonRequiredAreClosed ? 1 : 0
+  const closeValue = noRequiredValue.every(opt => opt.close === 1)
+  const globalCloseValue = closeValue ? 1 : 0
 
   // 判斷設定第一層的 close 值
   cookieNewObj.close = globalCloseValue
@@ -307,95 +303,61 @@ cookieAdvanced.cookieSaveFn = () => {
 
 // 點擊方法
 cookieAdvanced.clickEvent = (el) => {
-  const $settingBlock = $(".cookie-setting")
-  const $cookiePolicy = $(".cookie-check")
-
-  let scrollInstance = null
+  const $settingBlock = $(".cookie-setting");
+  const $cookiePolicy = $(".cookie-check");
 
   $(document)
-    .off("click.cookie", "[data-cookie]")
-    .on("click.cookie", "[data-cookie]", function (e) {
-      const $this = $(this)
-  
-      // 打開 cookie 介面
-      if ($this.is("[data-cookie-open]")) {
-        const mode = $this.attr("data-cookie-open")
-        const targets = new Set(mode === "all" ? ["advance", "basic"] : [mode])
-
-        // 打開進階版 cookie 時跑的方法
-        const openAdvance = () => {
-          cookieSetting.openEvent($settingBlock, () => {
-            const scrollerEl = $settingBlock.find(".scroller")[0]
-
-            if (scrollerEl) {
-              scrollInstance = OverlayScrollbars(scrollerEl, {})
-              const scrollers = document.querySelector(".cookie-setting")?.querySelectorAll("[data-overlayscrollbars-viewport]")
-              scrollLock([...scrollers]);
-            }
-          })
-        }
-
-        // 打開基本版 cookie 時跑的方法
-        const openBasic = () => {
-          $cookiePolicy.addClass("first-enter").removeClass("agree hidden")
-          clearTimeout(cookieAdvanced.timer)
-
-          cookieAdvanced.timer = setTimeout(() => {
-            $cookiePolicy.addClass("show")
-          }, 800)
-        }
-
-        if (targets.has("advance")) openAdvance()
-        if (targets.has("basic")) openBasic()
-      }
-
-      // 啟用進階版 cookie 所有選項
-      if ($this.is("[data-cookie-all]")) {
-        cookieSetting.enableAll()
-      }
-
-      // 關閉進階版 cookie 所有選項
-      if ($this.is("[data-cookie-reject]")) {
-        cookieSetting.rejectAll()
-        cookieAdvanced.cookieSaveFn()
-      }
-
-      // 關閉進階版 cookie 視窗
-      if ($this.is("[data-cookie-close]")) {
-        const mode = $this.attr("data-cookie-close")
-        const targets = new Set(mode === "all" ? ["basic", "advance"] : [mode])
-        
-        const closeAdvance = () => {
-          const viewport = $settingBlock.find("[data-overlayscrollbars-viewport]")[0];
-          if (viewport) {
-            viewport.scrollTo({ top: 0, behavior: 'smooth' });
+    .off("click.cookie")
+    .on("click.cookie", "[data-cookie]", function() {
+      const $this = $(this);
+      const data = this.dataset;
+
+      const actions = {
+        open: () => {
+          const mode = data.cookieOpen;
+          if (mode === "advance" || mode === "all") {
+            cookieSetting.openEvent($settingBlock, () => {
+              const scrollerEl = $settingBlock.find(".scroller")[0];
+              if (scrollerEl) {
+                const scrollInstance = OverlayScrollbars(scrollerEl, {});
+                scrollLock([...$settingBlock.find("[data-overlayscrollbars-viewport]")]);
+              }
+            });
           }
-          cookieSetting.closeEvent($settingBlock)
-          scrollUnlock()
-        }
-        
-        const closeBasic = () => {
-          $cookiePolicy.addClass("hidden")
-          sessionStorage.setItem(el, "true")
-        }
-
-        if (targets.has("advance")) closeAdvance()
-        if (targets.has("basic")) closeBasic()
-      }
-
-      // 儲存, 放在預存當前選項的按鈕上（功能：將目前選項紀錄預存至 cookie 中, 尚未真正啟用）
-      if ($this.is("[data-cookie-save]")) {
-        cookieAdvanced.cookieSaveFn()
-      }
-
-      // 放在真正要啟動 cookie 功能的儲存按鈕上（功能：依照目前 save 的 cookie 選項, 執行後端程式）
-      if ($this.is("[data-cookie-run]")) {
-        if (typeof window._wdSetting === "function") {
-          window._wdSetting()
-        }
-      }
-    })
-}
+          if (mode === "basic" || mode === "all") {
+            $cookiePolicy.addClass("first-enter").removeClass("agree hidden");
+            setTimeout(() => $cookiePolicy.addClass("show"), 800);
+          }
+        },
+        close: () => {
+          const mode = data.cookieClose;
+          if (mode === "advance" || mode === "all") {
+            cookieSetting.closeEvent($settingBlock);
+            scrollUnlock();
+          }
+          if (mode === "basic" || mode === "all") {
+            $cookiePolicy.addClass("hidden");
+            sessionStorage.setItem(el, "true");
+          }
+        },
+        all: () => cookieSetting.enableAll(),
+        reject: () => {
+          cookieSetting.rejectAll();
+          cookieAdvanced.cookieSaveFn();
+        },
+        save: () => cookieAdvanced.cookieSaveFn(),
+        run: () => typeof window._wdSetting === "function" && window._wdSetting()
+      };
+
+      // 根據 dataset 鍵名執行對應 action
+      if (data.cookieOpen) actions.open();
+      if (data.cookieClose) actions.close();
+      if (data.cookieAll !== undefined) actions.all();
+      if (data.cookieReject !== undefined) actions.reject();
+      if (data.cookieSave !== undefined) actions.save();
+      if (data.cookieRun !== undefined) actions.run();
+  });
+};
 
 // ** --- 工具們 --- **
 // cookie 開啟方法

package/src/assets/js/commons/inits.js

@@ -1,5 +1,6 @@
 import {
   Aost4,
+  Video4,
   ImageValidate,
   Detect4
 } from '@xwadex/fesd';
@@ -52,6 +53,13 @@ export const inits = () => {
   // pluginInit
   lazyLoadImg();
   new ImageValidate();
+  new Video4('[video-target]');
+  new Video4('[video-target]', {
+    isGlobal: true,
+    videoMode: "inBox",
+    videoTargetRoute: "https://cdn.wdd.idv.tw/fesd/video4_inbox_lightbox.html",
+    videoTarget: 'video-inBox',
+  })
   // uiInit
   navbar.init();
   // 預設為 false -> 基礎版, true -> 進階版, 各專案 key 名要記得更改

package/src/layouts/_template.pug

@@ -9,6 +9,8 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
     // Safari 電話號碼判斷
     meta(content="telephone=no" name="format-detection")
+    meta(name="robots" content="noindex")
+    meta(name="googlebot" content="noindex")
     title WDD F2E Framework
     link(rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon")
     // Google font
@@ -51,9 +53,9 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
       
       modern-modal(data-modal-id="my-modal" data-modal-animate="clip-right")
         .close-btn(data-modal-close)
-        .title Modal4
-        .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube" video-mode="onPage")
-          picture
-            source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.webp" type="image/webp")
-            source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.jpg" type="image/jpeg")
-            img(src="https://cdn.wdd.idv.tw/image/video-cover02.jpg" alt="")
+        .title(data-modal-target="other-modal") Modal4
+  
+      modern-modal(data-modal-id="other-modal" data-modal-animate="clip-right")
+        .close-btn(data-modal-close)
+        .title other Modal
+  

package/src/layouts/components/_cookiePolicy.pug

@@ -14,9 +14,8 @@
         p.title Cookie 
         p.text 關於本網站使用瀏覽器紀錄 Cookie 來提供您最好的使用體驗，我們使用的 Cookie 也包括了第三方 Cookie 。<br>相關資訊請訪問我們的隱私權與 Cookie 政策。如果您選擇繼續瀏覽或關閉這個提示，便表示您已接受我們的網站使用條款。
       .button-group
-        // [data-cookie-reject] -> 全部關閉; [data-cookie-save] -> 儲存 cookie
-        .cookie-btn.close(data-cookie data-cookie-reject) Reject 我拒絕
-        .cookie-btn.agree(data-cookie data-cookie-save) OK 我接受
+        .cookie-btn.close(data-cookie data-cookie-reject data-cookie-save) Reject 我拒絕
+        .cookie-btn.agree(data-cookie data-cookie-all data-cookie-save) OK 我接受
         // 若此專案無開進階版 cookie, 請移除以下結構！
         .cookie-setting-btn(data-cookie data-cookie-open="advance")
           span Cookie 偏好設定
@@ -39,7 +38,7 @@
             // JS append 結構 (cookieStep1El)
           .button-group
             .cookie-btn.open(data-cookie data-cookie-all) 啟用所有 Cookie
-            .cookie-btn.save(data-cookie data-cookie-close="advance") SAVE 儲存本次變更
+            .cookie-btn.save(data-cookie data-cookie-save data-cookie-close="all") SAVE 儲存本次變更
         // 步驟 2
         .setting-container(t4-role="tabPanel" t4-id='step2')
           .back(onClick=`document.body.fesd.cookieGoToNext(false)`)

package/src/pages/about.pug

@@ -821,37 +821,38 @@ block content
           
           .titleBox(data-anchor=`tableFreezeDemo`) 
             .title Table freeze Demo
-            .dep 此範例搭配屬性<span class='code'>freeze-table</span>之特殊表格<br>此功能僅特殊案例開啟 請至<span class='lightHigh'>段落編輯器需求表</span>確認各專案要開啟什麼功能！
+            .dep 此範例搭配屬性<span class='code'>freeze-table</span>之特殊表格<br>此功能僅特殊案例開啟 請至<span class='lightHigh'>段落編輯器需求表</span>確認各專案要開啟什麼功能！只有表頭才可以選擇凍結！側邊表頭<span class='code'>class="lefthead"</span>
           +article(tableData.tableFreezeDemo)
             table
-              tbody
+              thead 
                 tr(data-row='0')
-                  td(data-column="A" rowspan="3" style='width:200px; min-width:200px;') 
+                  th(data-column="A" rowspan="3" style='width:200px; min-width:200px;') 
                     span aaa
-                  td(data-column="B" colspan="3" style='width:200px; min-width:200px;') 
+                  th(data-column="B" colspan="3" style='width:200px; min-width:200px;') 
                     span bbb
-                  td(data-column="E" style='width:300px; min-width:300px;') 
+                  th(data-column="E" style='width:300px; min-width:300px;') 
                     span eee
-                  td(data-column="F" style='width:300px; min-width:300px;') 
+                  th(data-column="F" style='width:300px; min-width:300px;') 
                     span fff
                 tr(data-row='1')
-                  td(data-column="B" rowspan="2" style='width:200px; min-width:200px;') 
+                  th(data-column="B" rowspan="2" style='width:200px; min-width:200px;') 
                     span bbb
-                  td(data-column="C" colspan="3" style='width:200px; min-width:200px;') 
+                  th(data-column="C" colspan="3" style='width:200px; min-width:200px;') 
                     span ccc
-                  td(data-column="F" style='width:300px; min-width:300px;') 
+                  th(data-column="F" style='width:300px; min-width:300px;') 
                     span fff
                 tr(data-row='2')
-                  td(data-column="C" style='width:300px; min-width:300px;') 
+                  th(data-column="C" style='width:300px; min-width:300px;') 
                     span ccc
-                  td(data-column="D" style='width:300px; min-width:300px;') 
+                  th(data-column="D" style='width:300px; min-width:300px;') 
                     span ddd
-                  td(data-column="E" style='width:300px; min-width:300px;') 
+                  th(data-column="E" style='width:300px; min-width:300px;') 
                     span eee
-                  td(data-column="F" style='width:300px; min-width:300px;') 
+                  th(data-column="F" style='width:300px; min-width:300px;') 
                     span fff
+              tbody
                 tr(data-row='3')
-                  td(data-column="A" rowspan="2" style='width:200px; min-width:200px;') 
+                  td.lefthead(data-column="A" rowspan="2" style='width:200px; min-width:200px;') 
                     span aaa
                   td(data-column="B" style='width:200px; min-width:200px;') 
                     span bbb
@@ -876,7 +877,7 @@ block content
                     span fff
                 for i in [1,2,3,4,5,6,7]
                   tr(data-row=`${i+3}`)
-                    td(data-column="A" style='width:200px; min-width:200px;') 
+                    td.lefthead(data-column="A" style='width:200px; min-width:200px;') 
                       span aaa
                     td(data-column="B" style='width:200px; min-width:200px;') 
                       span bbb

package/src/pages/index.pug

@@ -93,29 +93,97 @@ block content
       h3 Video4 👇
       .row
         .grid
-          .photo-box(video-target="video-ig-template" video-button="playing" video-target-route="./ajax/ajax_igDemo.html" video-id="../../public/assets/img/banner.jpg" video-type="instagram")
+          p onPage youtube
+          .photo-box(video-target video-mode="onPage" video-id="5bMdjkfvONE" video-type="youtube")
             picture
-              source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.webp" type="image/webp")
-              source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.jpg" type="image/jpeg")
-              img(src="https://cdn.wdd.idv.tw/image/video-cover01.jpg" alt="")
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.webp" type="image/webp")
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.jpg" type="image/jpeg")
+              img(src="https://cdn.wdd.idv.tw/image/video-cover04.jpg" alt="")
         .grid
+          p onBox youtube 
           .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.jpg" type="image/jpeg")
               img(src="https://cdn.wdd.idv.tw/image/video-cover02.jpg" alt="")
         .grid
+          p onBox youku 
           .photo-box(video-target video-id="XNDk5NzkwNzY3Mg" video-type="youku")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover03.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover03.jpg" type="image/jpeg")
               img(src="https://cdn.wdd.idv.tw/image/video-cover03.jpg" alt="")
         .grid
+          p onBox vimeo 
           .photo-box(video-target video-id="777062285" video-type="vimeo")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.jpg" type="image/jpeg")
               img(src="https://cdn.wdd.idv.tw/image/video-cover04.jpg" alt="")
+      .row
+        .grid
+          p instagram
+          .photo-box(video-target="video-ig-template" video-button="playing" video-target-route="./ajax/ajax_igDemo.html" video-id="../../public/assets/img/banner.jpg" video-type="instagram")
+            picture
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.webp" type="image/webp")
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.jpg" type="image/jpeg")
+              img(src="https://cdn.wdd.idv.tw/image/video-cover01.jpg" alt="")
+        .grid
+          p video
+          .photo-box(video-target video-id="https://cdn.wdd.idv.tw/video/chappie_Video1.mp4" video-type="video")
+            picture
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.webp" type="image/webp")
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.jpg" type="image/jpeg")
+              img(src="https://cdn.wdd.idv.tw/image/video-cover04.jpg" alt="")
+        .grid
+          p inBox youtube
+          .photo-box(
+            video-target="video-inBox" 
+            video-mode="inBox" 
+            video-target-route="https://cdn.wdd.idv.tw/fesd/video4_inbox_lightbox.html" 
+            video-id="5bMdjkfvONE" 
+            video-type="youtube"
+          )
+            picture
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.webp" type="image/webp")
+              source(srcset="https://cdn.wdd.idv.tw/image/video-cover04.jpg" type="image/jpeg")
+              img(src="https://cdn.wdd.idv.tw/image/video-cover04.jpg" alt="")
+        .grid
+          p inBox video
+          .photo-box(
+            video-target="video-inBox" 
+            video-mode="inBox" 
+            video-target-route="https://cdn.wdd.idv.tw/fesd/video4_inbox_lightbox.html" 
+            video-id="https://cdn.wdd.idv.tw/video/chappie_Video1.mp4" 
+            video-type="video"
+          )
+      .row
+        .grid
+          p video onBox 燈箱
+          .photo-box(video-cover="off" video-target video-id="https://cdn.wdd.idv.tw/video/chappie_Video1.mp4" video-type="video")
+            .circle :)
+        .grid
+          p yt inBox 燈箱
+          .photo-box(
+            video-cover="off" 
+            video-target="video-inBox" 
+            video-mode="inBox" 
+            video-target-route="https://cdn.wdd.idv.tw/fesd/video4_inbox_lightbox.html" 
+            video-id="5bMdjkfvONE" 
+            video-type="youtube" 
+            video-inbox-img="https://cdn.wdd.idv.tw/image/video-cover04.jpg"
+          )
+            .circle :)
+        .grid
+          p yt onBox 燈箱
+          .photo-box(
+            video-target 
+            video-cover="off"
+            video-id="5bMdjkfvONE" 
+            video-type="youtube"
+          )
+            .circle :)
+
   section.section4
     .container
       h3 Tab4 👇