create-fesd-app 1.0.11 → 1.0.13

package/package.json

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

package/src/assets/css/layouts/article4/_article4_2.0.sass

@@ -113,7 +113,6 @@
       ._wordCover
         margin-top: 0
       ._imgCover
-        // margin-top: $img-cover-TB-gap_rwd !important
         margin-top: $img-cover-TB-gap_rwd 
         order: 1
   &.typeSL,
@@ -180,6 +179,9 @@
       &[img-merge="on"]
         ._imgCover
           margin-bottom: 0
+        // *-*
+        .swiper-pagination
+          margin-bottom: 0
     +rwdmax($basic_rwd)
       ._wordCover
         margin-bottom: $img-cover-TB-gap_rwd
@@ -194,6 +196,10 @@
           order: -1
         ._wordCover
           margin: 0
+      // *-*
+      &[img-swiper=on]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd}
       // 2025.04.21 新增判斷
       &[img-row="x2"],
       &[img-row="x3"],
@@ -247,16 +253,14 @@
   &.typeDR
     ._imgCover
       order: -1
-    &[img-merge="off"]
-      &:not([img-swiper="on"])
-        @for $i from 2 through 5
-          &[img-row="x#{$i}"]
-            ._imgCover
-                margin-bottom: 0
     +rwdmax($basic_rwd)
+      // *-*
+      ._imgCover
+        margin-bottom: 0
       &[mobile-rwd="on"]
         ._imgCover
           order: 1
+          margin-bottom: #{-$cover-TB-gap_rwd}
         &[img-merge="on"]:not([img-swiper="on"])
           ._imgCover
             margin-bottom: 0
@@ -270,32 +274,47 @@
   &.typeD
     ._wordCover
       margin: 0
+    ._imgCover
+      margin-bottom: 0
     &[img-merge="on"]
       &:not([img-swiper="on"])
         ._imgCover
           margin-bottom:  $img-cover-TB-gap
-    &:not([img-merge="on"]):not([mobile-rwd="on"])
+    // *-*
+    &[img-swiper="on"]
       ._imgCover
         margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
+      &[img-merge="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
     +rwdmax($basic_rwd)
       &[img-merge="on"]
         &:not([img-swiper="on"])
           ._imgCover
             margin-bottom:  $img-cover-TB-gap_rwd
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
       &:not([img-merge="on"]):not([img-swiper="on"])
         &:not([mobile-rwd="on"])
           ._imgCover
-            // margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
             margin-bottom: $img-cover-TB-gap_rwd
         ._imgCover
-          // margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
           margin-bottom: $img-cover-TB-gap_rwd
         &[mobile-rwd="on"]
-        ._imgCover
-          margin-bottom: 0
+          ._imgCover
+            // *-*
+            margin-bottom: #{-$cover-TB-gap_rwd}
       &[mobile-rwd="on"]
         ._imgCover
-          margin-bottom: -#{$cover-TB-gap_rwd}
+          margin-bottom: #{-$cover-TB-gap_rwd}
+      // *-*
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+        &[mobile-rwd="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd}
   &.typeDL,
   &.typeDR
     ._H
@@ -303,6 +322,11 @@
       width: 35%
     ._wordCover
       margin-top: $img-cover-TB-gap
+    &[img-merge="on"]
+      &[img-swiper="on"]
+        @for $i from 2 through 5
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap}
     +rwdmax($basic_rwd)
       ._H
         margin-top: $img-cover-TB-gap_rwd
@@ -312,6 +336,11 @@
       &[mobile-rwd="on"]
         ._H
           margin-top: 0
+      &[img-merge="on"]
+        &[img-swiper="on"]
+          @for $i from 2 through 5
+            ._imgCover
+              margin-bottom: #{-$cover-TB-gap_rwd}
   &.typeDL
     ._H
       order: 1
@@ -384,6 +413,9 @@
       ._imgCover
         margin: 0
         width: 50%
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap}
     +rwdmax($basic_rwd)
       ._imgCover
         margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd}
@@ -404,14 +436,22 @@
         ._imgCover
           margin: $img-cover-TB-gap_rwd 0 0
           width: 100%
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd}
       &[mobile-rwd="on"]
         ._imgCover
-          // margin: 0 0 #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
           margin-top: 0
           order: initial
         ._wordCover
-          margin-top: $img-cover-TB-gap_rwd 
+          margin-top: $img-cover-TB-gap_rwd
           width: 100%
+        // *-*
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: 0
+          ._wordCover
+            margin-top: calc( $img-cover-TB-gap_rwd - $cover-TB-gap_rwd )
   &.typeLR
     &:after,
     &:before
@@ -442,6 +482,13 @@
       ._imgCover
         margin: 0 0 $wrapping-gap $img-cover-LR-gap
         width: calc(50% - #{$img-cover-LR-gap})
+      // *-*
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{$cover-TB-gap - $wrapping-gap}
+    &[img-swiper="on"]
+      ._imgCover
+        margin-bottom: #{$cover-TB-gap - $wrapping-gap}
     +rwdmax($basic_rwd)
       ._contentWrap
         display: flex
@@ -454,26 +501,51 @@
       ._imgCover
         margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd}
         order: 1
-      // &[img-row="x2"],
-      // &[img-row="x3"],
-      // &[img-row="x4"],
-      // &[img-row="x5"]
       @for $i from 2 through 5
         &[img-row="x#{$i}"],
         &[swiper-num="#{$i}"]
           ._imgCover
             margin: $img-cover-TB-gap_rwd #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd}
             width: calc(100% + #{$cover-LR-gap_rwd})
+          &[mobile-rwd="on"]
+            ._imgCover
+              margin: 0 #{-$cover-LR-gap_rwd * 0.5}  #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+              width: calc(100% + #{$cover-LR-gap_rwd})
+
       &[img-merge="on"]
         ._imgCover
           margin-left: 0
           margin-right: 0
           width: 100%
+          // *-*
+          margin-bottom: #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd}
       &[mobile-rwd="on"]
         ._imgCover
-          margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd} !important
           order: initial
-
+          margin: 0 #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd}  #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+          width: 100%
+        // *-*
+        &[img-swiper="on"]
+          ._imgCover
+            margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+            width: calc(100% + #{$cover-LR-gap_rwd})
+          &:not([swiper-num])
+            ._imgCover
+              width: 100%
+              margin: 0 #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+        &[img-merge="on"]
+          ._imgCover
+            margin: 0 0 $img-cover-TB-gap_rwd
+          &[img-swiper="on"]
+            ._imgCover
+              margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+              width: 100%
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd}
 // _articleR ( R、RR )
 ._article
   &.typeR,
@@ -503,17 +575,14 @@
           width: calc(50% + #{$cover-LR-gap})
     &[img-merge="on"]
       ._imgCover
-        margin: 0 $img-cover-LR-gap 0 0
+        margin: 0 $img-cover-LR-gap #{-$cover-TB-gap + $cover-TB-gap} 0
         width: calc(50% - #{$img-cover-LR-gap})
     +rwdmax($basic_rwd)
       ._imgCover
-        margin: 0 0 #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+        margin: 0 0 #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
       ._wordCover
         margin-left: 0
-        // 2025.09.09 scarlett 新增
-        // margin-top: #{$cover-TB-gap_rwd}
         margin-top: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
-        // -
         width: 100%
       // &[img-row="x2"],
       // &[img-row="x3"],
@@ -525,6 +594,17 @@
           ._imgCover
             margin: 0 #{-$cover-LR-gap_rwd * 0.5}
             width: calc(100% + #{$cover-LR-gap_rwd})
+          // *-*
+          &[mobile-rwd="on"]
+            ._imgCover
+              margin-inline: #{-$cover-LR-gap_rwd * 0.5}
+            &[img-merge="on"]
+              ._imgCover
+                margin-inline: #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd}
+                margin-bottom: #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
+            &[img-swiper="on"]
+              ._imgCover
+                margin-bottom: #{-$cover-TB-gap_rwd}
       &[img-merge="on"]
         ._imgCover
           margin-left: 0
@@ -537,10 +617,13 @@
           margin-top: 0
         ._imgCover
           margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd}
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd}
       // 2025.09.09 scarlett 新增
       &[img-swiper="on"]
         ._imgCover
-          margin-bottom: 0
+          margin-bottom: #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd}
   &.typeRR
     &:after,
     &:before
@@ -571,6 +654,13 @@
       ._imgCover
         margin: 0 $img-cover-LR-gap $wrapping-gap 0
         width: calc(50% - #{$img-cover-LR-gap})
+      // *-*
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{$cover-TB-gap - $wrapping-gap}
+    &[img-swiper="on"]
+      ._imgCover
+        margin-bottom: #{$cover-TB-gap - $wrapping-gap}
     +rwdmax($basic_rwd)
       ._contentWrap
         display: flex
@@ -590,20 +680,37 @@
         &[img-row="x#{$i}"],
         &[swiper-num="#{$i}"]
           ._imgCover
-            // 2025.09.09 scarlett 新增
-            // margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{$img-cover-TB-gap_rwd + $cover-TB-gap_rwd - $img-cover-TB-gap_rwd}
             margin: 0 #{-$cover-LR-gap_rwd * 0.5}  #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
-            // -
             width: calc(100% + #{$cover-LR-gap_rwd})
       &[img-merge="on"]
         ._imgCover
-          margin: 0 0 #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd} 0
+          margin: 0 0 #{-$cover-TB-gap_rwd + $img-cover-TB-gap} 0
           width: 100%
+        &[img-swiper="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+        &[mobile-rwd="on"]
+          ._imgCover
+            margin-bottom: #{-$cover-TB-gap_rwd}
       &[mobile-rwd="on"]
         ._imgCover
           order: 1
-          margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd}
-
+          margin: $img-cover-TB-gap_rwd #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd} #{-$cover-TB-gap_rwd}
+          width: 100%
+        &[img-row],
+        &[swiper-num]
+          ._imgCover
+            margin: $img-cover-TB-gap_rwd #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd}
+            width: calc(100% + #{$cover-LR-gap_rwd})
+        &[img-merge="on"]
+          ._imgCover
+            // margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
+            margin: $img-cover-TB-gap_rwd 0 #{-$cover-TB-gap_rwd} #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
+            width: 100%
+            
 // _articleF ( F、FL、FR )
 ._article
   &.typeF,
@@ -714,12 +821,8 @@
   &[img-swiper="on"]
     ._imgCover
       position: relative
-      // 2025.09.09 scarlett 新增
-      // margin: 0 #{-$swiper-cover-LR-gap * 0.5}
-      // -
-      ._cover
-        // margin-bottom: 0
-        padding: 0 #{$swiper-cover-LR-gap * 0.5}
+      // *-*
+      margin-bottom: #{-$cover-TB-gap}
       .swiper-button-cover
         &:before
           display: block
@@ -733,21 +836,28 @@
             &:before
               padding-bottom: #{math.div(56.25%, $i)} !important
     +rwdmax($basic_rwd)
+      // *-*
+      ._imgCover
+        margin-bottom: #{-$cover-TB-gap_rwd}
       @for $i from 2 through 5
         &[swiper-num="#{$i}"]
           ._imgCover
             .swiper-button-cover
               &:before
                 padding-bottom: 56.25% !important
-  // -
 
   // img-merge
   &[img-merge="on"]
     ._imgCover
       width: 100%
+      // *-*
       margin-bottom: 0
       ._cover
         padding: 0
+    // *-*
+    &[img-swiper="on"]
+      ._imgCover
+        margin-bottom: #{-$cover-TB-gap}
     &:not([img-swiper="on"])
       ._imgCover
         // margin: 0 0 $cover-TB-gap
@@ -755,6 +865,13 @@
           margin-bottom: 0
           ._description
             display: none
+    // *-*
+    +rwdmax($basic_rwd)
+      ._imgCover
+        margin-bottom: 0
+      &[img-swiper="on"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd}
 
   // article-flex
   &[article-flex="up"]
@@ -998,7 +1115,6 @@
   .table_navigation
     @extend %table_navigation
 
-  // 對齊方式同大標題
   &[tip-align="center"]
     ._tipText
       justify-content: center

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

@@ -344,20 +344,26 @@ $quote-TB-gap: 20px
   @extend %table_solidSingle_borderColumn
   table
     th, td
-      // text-align: left
+      text-align: left
       background: #fff
-      // 以下可修改
-      span
-        display: block
-        font-size: 14px
-        line-height: 1.8
     thead
       th
+        // 以下可修改
+        font-size: 16px
+        line-height: 1.2
+        font-weight: 600
+        span
+          display: block
+    tbody
+      td
+        // 以下可修改
+        font-size: 16px
+        line-height: 1.2
         span
           display: block
-          // 以下可修改
-          font-size: 16px
-          font-weight: 600
+        ol,ul
+          &:not(:first-child)
+            margin-top: 10px
 
 %table_tipText
   // 以下可修改
@@ -562,6 +568,10 @@ $quote-TB-gap: 20px
 %table_markdown_style
   [data-center]
     text-align: center
+  [data-left]
+    text-align: left
+  [data-right]
+    text-align: right
   ol
     list-style: decimal
   ul
@@ -572,27 +582,7 @@ $quote-TB-gap: 20px
     line-height: 1.2
     &:not(:first-child)
       margin-top: 10px
-  h1
-    font-size: 28px
-    line-height: 1.2
-  h2
-    font-size: 26px
-    line-height: 1.2
-  h3
-    font-size: 24px
-    line-height: 1.2
-  h4
-    font-size: 22px
-    line-height: 1.2
-  h5
-    font-size: 20px
-    line-height: 1.2
-  h6
-    font-size: 18px
-    line-height: 1.2
   p
-    font-size: 16px
-    line-height: 1.2
     white-space: pre-wrap 
   em
     font-style: italic

package/src/layouts/_template.pug

@@ -26,6 +26,9 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
     link(rel="stylesheet", href=`/src/assets/css/pages/${css}.sass`)
     // 共用 JS
     script(defer type="module" src=`/src/assets/js/apps/${page}/page.js`) 
+    // 若 video4 有開 Ig reels, 引入以下網址
+    script(src="https://www.instagram.com/embed.js")
+
 
   body(class=`${css}-page`  data-overlayscrollbars-initialize)
     h1.visuallyhidden WDD F2E Framework!

package/src/pages/about.pug

@@ -2919,6 +2919,18 @@ block content
                   img: 'https://picsum.photos/id/961/900/500',
                   description: 'Description'
                 },
+                {
+                  videoAttributes: {
+                    "video-type":"instagram",
+                    "video-id":"",
+                    "highquality":'on',
+                    "video-starttime":'600',
+                    "video-target-route":"./ajax/ajax_igDemo.html",
+                    "video-target":"video-ig-template",
+                  },
+                  img: 'https://picsum.photos/id/961/900/500',
+                  description: 'Description'
+                },
                 {
                   videoAttributes: {
                     "video-id": '7449986489389272327' ,
@@ -2968,7 +2980,6 @@ block content
             typeTable:{
               articleType: 'typeTable',
               attributes: {
-                'swiper-autoplay': "off",
                 'data-table-markdown':'on'
               },
               H: 'This is the title of the Form',
@@ -2980,22 +2991,22 @@ block content
                 table: {
                   head: [
                     {
-                      A: '預設均分 (最小100)',
-                      B: '預設均分 (最小100)'
+                      A: '@center@預設均分 (最小100)@center@',
+                      B: '@center@預設均分 (最小100)@center@',
                     }
                   ],
                   body: [
                     {
-                      A: '@center@置中文字@center@ \n- 列點 \n - 列點 - **列點粗體**',
-                      B: '1. ~~列點斜體~~ \n 2. *列點斜體*'
+                      A: '@center@置中文字@center@ \n @left@置左文字@left@ \n @right@置右文字@right@',
+                      B: '1. ~~列點斜體~~ \n 2. *列點斜體* \n - 列點 \n - 列點 - **列點粗體**'
                     },
                     {
-                      A: '@center@置中文字@center@ \n- 列點 \n - 列點 - **列點粗體**',
-                      B: '1. ~~列點斜體~~ \n 2. *列點斜體*'
+                      A: '@center@置中文字@center@ \n @left@置左文字@left@ \n @right@置右文字@right@',
+                      B: '1. ~~列點斜體~~ \n 2. *列點斜體* \n - 列點 \n - 列點 - **列點粗體**'
                     },
                     {
-                      A: '@center@置中文字@center@ \n- 列點 \n - 列點 - **列點粗體**',
-                      B: '1. ~~列點斜體~~ \n 2. *列點斜體*'
+                      A: '@center@置中文字@center@ \n @left@置左文字@left@ \n @right@置右文字@right@',
+                      B: '1. ~~列點斜體~~ \n 2. *列點斜體* \n - 列點 \n - 列點 - **列點粗體**'
                     },
                   ],
                 },
@@ -3357,9 +3368,6 @@ block content
                     td(data-column="F" style='width:300px; min-width:300px;') 
                       span fff
 
-
   section.section2(data-noContent)
     .container
       .noData NO DATA
-
-

package/src/pages/ajax/ajax_igDemo.pug

@@ -2,4 +2,4 @@ modern-modal(data-modal-id="video-ig-template" video-template data-modal-templat
   .close-button(data-modal-destroy="data-modal-destroy")
   //- 純展示使用, 後端那邊會有自己的 ajax 燈箱結構
   //- 以下可自行修改, 放 ig 嵌入碼
-  <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/C1O1Sh-vAIW/?img_index=1"></blockquote><script async src="//https://www.instagram.com/embed.js"></script>
+  <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/reel/C8qIiGkqT0G/?utm_source=ig_embed&amp;utm_campaign=loading"></blockquote>

package/src/pages/index.pug

@@ -60,6 +60,10 @@ block content
         each li, key in data
           li.item(data-option= li)
             .category= li
+      multipurpose-nav(m4-type="collapse" m4-status="BIOS", m4-option= options)
+        each li, key in data
+          li.item(data-option= li)
+            .category= li
   section.section2
     .container
       h3 Image Preview 👇