update

content/furniture_design_list/cabinet/3.回家電視櫃/index.md

@@ -2,96 +2,106 @@
 title: "回家電視櫃"
 date: 2021-06-27T15:01:57+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/go_home_tv_cabinet"
-image: "/system_cabinet/go_home_tv_cabinet/1.webp"
+type: "cabinet"
+url: "/furniture_design/cabinet/go_home_tv_cabinet"
+image: "/furniture_design/cabinet/go_home_tv_cabinet/1.webp"
 description: "回家電視櫃  / 系統板材（塑合板） / 回家，大家下班回到家，聚在電視前面吃飯、看八點檔、聊隔壁阿花的相親對象！對我來說就是最幸福的時光"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/go_home_tv_cabinet">回家電視櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 回家電視櫃"
-              >
-<amp-img
-  alt="小寶優居 | 回家電視櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 回家電視櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 回家電視櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 回家電視櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 回家電視櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 回家電視櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 回家電視櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 回家電視櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 回家電視櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 回家電視櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>回家電視櫃</b></div>
-            <div class="description">
-<b>回家，大家下班回到家，聚在電視前面吃飯、看八點檔、聊隔壁阿花的相親對象！對我來說就是最幸福的時光</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">回家電視櫃 </h3>
+            <p class="mb-5">回家，大家下班回到家，聚在電視前面吃飯、看八點檔、聊隔壁阿花的相親對象！對我來說就是最幸福的時光</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,800</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1200 X 深400 X 高400(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $8,800</div>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<div>尺寸(mm) ： 寬1200 X 深400 X 高400</div>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 可客製加寬為160公分與200公分，實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">可客製加寬為160公分與200公分，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 回家電視櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 回家電視櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到電視櫃
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 回家電視櫃"
-  src="s1.webp"
-  height="2380"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/cabinet/4.樂天電視吊櫃/index.md

@@ -2,96 +2,106 @@
 title: "樂天電視吊櫃"
 date: 2021-06-27T15:01:56+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/optimism_tv_cabinet"
-image: "/system_cabinet/optimism_tv_cabinet/1.webp"
+type: "cabinet"
+url: "/furniture_design/cabinet/optimism_tv_cabinet"
+image: "/furniture_design/cabinet/optimism_tv_cabinet/1.webp"
 description: "樂天電視吊櫃  / 系統板材（塑合板） / 雙層的隔板設計，就是為了收納我一台又一台的電玩主機，讓我快樂每一天"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/optimism_tv_cabinet">樂天電視吊櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 樂天電視吊櫃"
-              >
-<amp-img
-  alt="小寶優居 | 樂天電視吊櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 樂天電視吊櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 樂天電視吊櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 樂天電視吊櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 樂天電視吊櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 樂天電視吊櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 樂天電視吊櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 樂天電視吊櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 樂天電視吊櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 樂天電視吊櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>樂天電視吊櫃</b></div>
-            <div class="description">
-<b>雙層的隔板設計，就是為了收納我一台又一台的電玩主機，讓我快樂每一天</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">樂天電視吊櫃 </h3>
+            <p class="mb-5">雙層的隔板設計，就是為了收納我一台又一台的電玩主機，讓我快樂每一天</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,800</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 樂天電視吊櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 樂天電視吊櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到電視櫃
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 樂天電視吊櫃"
-  src="s1.webp"
-  height="2380"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/cabinet/5.海天視聽櫃/index.md

@@ -2,102 +2,106 @@
 title: "海天視聽櫃"
 date: 2021-06-27T15:01:55+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/see_and_sky_cabinet"
-image: "/system_cabinet/see_and_sky_cabinet/1.webp"
+type: "cabinet"
+url: "/furniture_design/cabinet/see_and_sky_cabinet"
+image: "/furniture_design/cabinet/see_and_sky_cabinet/1.webp"
 description: "海天視聽櫃  / 系統板材（塑合板） / 海天一線，讓視廳飄揚隨著海闊天空，人生如戲，知足矣"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/see_and_sky_cabinet">海天視聽櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 海天視聽櫃"
-              >
-<amp-img
-  alt="小寶優居 | 海天視聽櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 海天視聽櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 海天視聽櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 海天視聽櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 海天視聽櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 海天視聽櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 海天視聽櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 海天視聽櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 海天視聽櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 海天視聽櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>海天視聽櫃</b></div>
-            <div class="description">
-<b>海天一線，讓視廳飄揚隨著海闊天空，人生如戲，知足矣</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">海天視聽櫃 </h3>
+            <p class="mb-5">海天一線，讓視廳飄揚隨著海闊天空，人生如戲，知足矣</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,800</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 海天視聽櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 海天視聽櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到電視櫃
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 海天視聽櫃"
-  src="s1.webp"
-  height="1637"
-  width="4129"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 海天視聽櫃"
-  src="s2.webp"
-  height="1637"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/cabinet/good_friends_cabinet/index.md

@@ -2,90 +2,106 @@
 title: "友直視廳櫃｜小寶優居・設計家具"
 date: 2021-05-28T17:00:41+08:00
 draft: false
-type: "living_room"
-url: "/living_room/good_friends_cabinet"
-image: "/living_room/good_friends_cabinet/1.webp"
+type: "cabinet"
+url: "/furniture_design/cabinet/good_friends_cabinet"
+image: "/furniture_design/cabinet/good_friends_cabinet/1.webp"
 description: "友直視廳櫃 - 客廳 / 梣木 / 人生路深長不見盡頭， 不論多長總有些面孔熟悉著、陪伴著， 一通電話相聚交心，人生路上有橫有豎， 朋友， 想我就來我家看電視"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/good_friends_cabinet">友直視廳櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 友直視廳櫃"
-              >
-<amp-img
-  alt="小寶優居 | 友直視廳櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 友直視廳櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直視廳櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 友直視廳櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 友直視廳櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 友直視廳櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 友直視廳櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 友直視廳櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 友直視廳櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 友直視廳櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>友直視廳櫃</b></div>
-            <div class="description">
-<b>人生路深長不見盡頭， 不論多長總有些面孔熟悉著、陪伴著， 一通電話相聚交心，人生路上有橫有豎， 朋友， 想我就來我家看電視</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">友直視廳櫃 </h3>
+            <p class="mb-5">人生路深長不見盡頭， 不論多長總有些面孔熟悉著、陪伴著， 一通電話相聚交心，人生路上有橫有豎， 朋友， 想我就來我家看電視</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $20,800</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1800 X 深400 X 高450(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $20,800</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色</div>
-<div>尺寸(mm) ： 寬1800 X 深400 X 高450</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 友直視廳櫃"> -->
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 友直視廳櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到電視櫃
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/cabinet/sleek_cabinet/index.md

@@ -2,90 +2,106 @@
 title: "圓滑處事電視櫃｜小寶優居・設計家具"
 date: 2021-05-28T17:00:42+08:00
 draft: false
-type: "living_room"
-url: "/living_room/sleek_cabinet"
-image: "/living_room/sleek_cabinet/1.webp"
+type: "cabinet"
+url: "/furniture_design/cabinet/sleek_cabinet"
+image: "/furniture_design/cabinet/sleek_cabinet/1.webp"
 description: "圓滑處事電視櫃 - 客廳 / 山毛櫸 /  人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/sleek_cabinet">圓滑處事電視櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 圓滑處事電視櫃"
-              >
-<amp-img
-  alt="小寶優居 | 圓滑處事電視櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 圓滑處事電視櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事電視櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事電視櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 圓滑處事電視櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事電視櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事電視櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 圓滑處事電視櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事電視櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事電視櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>圓滑處事電視櫃</b></div>
-            <div class="description">
-<b>人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">圓滑處事電視櫃 </h3>
+            <p class="mb-5">人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $25,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1800 X 深400 X 高450(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $25,500</div>
-<div>顏色 ： 自然色、謐白色</div>
-<div>尺寸(mm) ： 寬1800 X 深400 X 高450</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">山毛櫸</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 圓滑處事電視櫃"> -->
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 圓滑處事電視櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到電視櫃
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/desk/18.隨心工作桌/index.md

@@ -2,96 +2,106 @@
 title: "隨心工作桌"
 date: 2021-06-27T16:20:50+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/follow_your_heart_desk"
-image: "/custom_made_system_cabinet/follow_your_heart_desk/1.webp"
+type: "desk"
+url: "/furniture_design/desk/follow_your_heart_desk"
+image: "/furniture_design/desk/follow_your_heart_desk/1.webp"
 description: "隨心工作桌  / 系統板材（塑合板）/ 工作總是充滿挑戰，我們也要充滿彈性應對，隨心工作桌隨你心情、隨你順手，任意搭配，這就是我工作時的好夥伴啊！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/follow_your_heart_desk">隨心工作桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 隨心工作桌"
-              >
-<amp-img
-  alt="小寶優居 | 隨心工作桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 隨心工作桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 隨心工作桌|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 隨心工作桌|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 隨心工作桌">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>隨心工作桌</b></div>
-            <div class="description">
-<b>工作總是充滿挑戰，我們也要充滿彈性應對，隨心工作桌隨你心情、隨你順手，任意搭配，這就是我工作時的好夥伴啊！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">隨心工作桌 </h3>
+            <p class="mb-5">工作總是充滿挑戰，我們也要充滿彈性應對，隨心工作桌隨你心情、隨你順手，任意搭配，這就是我工作時的好夥伴啊！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 隨心工作桌">
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 隨心工作桌"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 隨心工作桌"
-  src="s1.webp"
-  height="8032"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/desk/19.靜思書桌/index.md

@@ -2,96 +2,106 @@
 title: "靜思書桌"
 date: 2021-06-27T16:20:49+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/calm_desk"
-image: "/custom_made_system_cabinet/calm_desk/1.webp"
+type: "desk"
+url: "/furniture_design/desk/calm_desk"
+image: "/furniture_design/desk/calm_desk/1.webp"
 description: "靜思書桌  / 系統板材（塑合板）/ 每天的腳步總是飛快，多久沒有好好靜下心來，聽聽自己內在聲音，或是靜下心來好好讀一本好書呢！靜思書桌，是你閱讀與思考的小書僮"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/calm_desk">靜思書桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 靜思書桌"
-              >
-<amp-img
-  alt="小寶優居 | 靜思書桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 靜思書桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 靜思書桌|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 靜思書桌|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 靜思書桌">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 靜思書桌">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 靜思書桌">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 靜思書桌">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 靜思書桌">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 靜思書桌">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>靜思書桌</b></div>
-            <div class="description">
-<b>每天的腳步總是飛快，多久沒有好好靜下心來，聽聽自己內在聲音，或是靜下心來好好讀一本好書呢！靜思書桌，是你閱讀與思考的小書僮</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">靜思書桌 </h3>
+            <p class="mb-5">每天的腳步總是飛快，多久沒有好好靜下心來，聽聽自己內在聲音，或是靜下心來好好讀一本好書呢！靜思書桌，是你閱讀與思考的小書僮</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 靜思書桌">
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 靜思書桌"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 靜思書桌"
-  src="s1.webp"
-  height="1693"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/desk/40.裊裊文書桌/index.md

@@ -2,90 +2,106 @@
 title: "裊裊文書桌｜小寶優居・設計家具"
 date: 2021-06-12T22:38:59+08:00
 draft: false
-type: "study_room"
-url: "/study_room/curly_desk"
-image: "/study_room/curly_desk/1.webp"
+type: "desk"
+url: "/furniture_design/desk/curly_desk"
+image: "/furniture_design/desk/curly_desk/1.webp"
 description: "裊裊文書桌 - 書房 / 梣木 / 麻雀雖小， 萬事俱全，收納你的文書， 充滿你的電力！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/study_room">書房</a> > <a href="/study_room/curly_desk">裊裊文書桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 裊裊文書桌"
-              >
-<amp-img
-  alt="小寶優居 | 裊裊文書桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 裊裊文書桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 裊裊文書桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 裊裊文書桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
               </div>
             </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 隨心工作桌">
+              </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 隨心工作桌">
+              </div> -->
+            </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>裊裊文書桌</b></div>
-            <div class="description">
-<b>麻雀雖小， 萬事俱全，收納你的文書， 充滿你的電力！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">隨心工作桌 </h3>
+            <p class="mb-5">工作總是充滿挑戰，我們也要充滿彈性應對，隨心工作桌隨你心情、隨你順手，任意搭配，這就是我工作時的好夥伴啊！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $22,500</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬1200 X 深600 X 高760</div>
-<div>材質 ： 梣木</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <!-- <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 隨心工作桌"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 隨心工作桌"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/desk/41.工業時代大桌/index.md

@@ -2,90 +2,106 @@
 title: "工業時代大桌｜小寶優居・設計家具"
 date: 2021-06-12T22:38:58+08:00
 draft: false
-type: "study_room"
-url: "/study_room/industrial_desk"
-image: "/study_room/industrial_desk/1.webp"
+type: "desk"
+url: "/furniture_design/desk/industrial_desk"
+image: "/furniture_design/desk/industrial_desk/1.webp"
 description: "工業時代大桌 - 書房 / 山毛櫸 / 人人依舊懷抱著工業夢，期待在黑色烤漆水管中， 找到自己的個性"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/study_room">書房</a> > <a href="/study_room/industrial_desk">工業時代大桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 工業時代大桌"
-              >
-<amp-img
-  alt="小寶優居 | 工業時代大桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 工業時代大桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 工業時代大桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 工業時代大桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 工業時代大桌">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 工業時代大桌">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 工業時代大桌">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 工業時代大桌">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 工業時代大桌">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 工業時代大桌">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>工業時代大桌</b></div>
-            <div class="description">
-<b>人人依舊懷抱著工業夢，期待在黑色烤漆水管中， 找到自己的個性</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">工業時代大桌 </h3>
+            <p class="mb-5">人人依舊懷抱著工業夢，期待在黑色烤漆水管中， 找到自己的個性</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span>  $5,980</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬1200 X 深600 X 高740(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,980</div>
-<div>顏色 ： 自然色</div>
-<div>尺寸(mm) ： 寬1200 X 深600 X 高740</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85"> 山毛櫸</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 工業時代大桌"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 工業時代大桌"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/desk/42.當個文青桌/index.md

@@ -2,90 +2,106 @@
 title: "當個文青桌｜小寶優居・設計家具"
 date: 2021-06-12T22:38:58+08:00
 draft: false
-type: "study_room"
-url: "/study_room/hipster_desk"
-image: "/study_room/hipster_desk/1.webp"
+type: "desk"
+url: "/furniture_design/desk/hipster_desk"
+image: "/furniture_design/desk/hipster_desk/1.webp"
 description: "當個文青桌 - 書房 / 山毛櫸 / 獨立電影、唱片音樂、單眼相機、抑鬱因子，我們一起當個微文青吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/study_room">書房</a> > <a href="/study_room/hipster_desk">當個文青桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 當個文青桌"
-              >
-<amp-img
-  alt="小寶優居 | 當個文青桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 當個文青桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 當個文青桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 當個文青桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 當個文青桌">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 當個文青桌">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 當個文青桌">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 當個文青桌">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 當個文青桌">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 當個文青桌">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>當個文青桌</b></div>
-            <div class="description">
-<b>獨立電影、唱片音樂、單眼相機、抑鬱因子，我們一起當個微文青吧！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">當個文青桌 </h3>
+            <p class="mb-5"> 獨立電影、唱片音樂、單眼相機、抑鬱因子，我們一起當個微文青吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $5,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬980 X 深600 X 高770(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,500</div>
-<div>顏色 ： 自然色</div>
-<div>尺寸(mm) ： 寬980 X 深600 X 高770</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 當個文青桌"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 當個文青桌"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/dining_chair/26.幸福餐椅/index.md

@@ -2,9 +2,9 @@
 title: "幸福餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:55+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/happy_dining_chair"
-image: "/dining_room/happy_dining_chair/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/happy_dining_chair"
+image: "/furniture_design/dining_chair/happy_dining_chair/1.webp"
 description: "幸福餐椅 - 餐廳 / 梣木 / 靠背的仰角設計，定位出用餐的「最適」角度，使坐姿既可放鬆又能挺立，幸福的相聚時光沒有拘謹的限制，只有自在的舒適！"
 ---
 <script>

content/furniture_design_list/dining_chair/27.無憂餐椅/index.md

@@ -2,9 +2,9 @@
 title: "無憂餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:54+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/worry_free_dining_chair"
-image: "/dining_room/worry_free_dining_chair/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/worry_free_dining_chair"
+image: "/furniture_design/dining_chair/worry_free_dining_chair/1.webp"
 description: "無憂餐椅 - 餐廳 / 梣木 / 細木工匠的榫接技法，讓結構更加穩實，不使用五金作釘合，讓每一塊原木的優雅完整體現"
 ---
 <script>

content/furniture_design_list/dining_chair/28.無慮餐椅/index.md

@@ -2,9 +2,9 @@
 title: "無慮餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:53+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/worry_free_dining_chair_2"
-image: "/dining_room/worry_free_dining_chair_2/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/worry_free_dining_chair_2"
+image: "/furniture_design/dining_chair/worry_free_dining_chair_2/1.webp"
 description: "無慮餐椅 - 餐廳 / 梣木 / 無憂無慮， 夫復何求"
 ---
 <script>

content/furniture_design_list/dining_chair/29.樂天餐椅/index.md

@@ -2,9 +2,9 @@
 title: "樂天餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:52+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/optimism_dining_chair"
-image: "/dining_room/optimism_dining_chair/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/optimism_dining_chair"
+image: "/furniture_design/dining_chair/optimism_dining_chair/1.webp"
 description: "樂天餐椅 - 餐廳 / 山毛櫸 / 特殊的高背式餐椅，能紓解乘坐時「腰椎」所承受的壓力，讓坐感與撐護力，都擁有全新的體驗"
 ---
 <script>

content/furniture_design_list/dining_chair/30.幸福中島椅/index.md

@@ -2,9 +2,9 @@
 title: "幸福中島椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:51+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/happy_island_chair"
-image: "/dining_room/happy_island_chair/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/happy_island_chair"
+image: "/furniture_design/dining_chair/happy_island_chair/1.webp"
 description: "幸福中島椅 - 餐廳 / 梣木 / 能和相愛的人，彼間而坐，喝杯咖啡，就是最幸福的事情了"
 ---
 <script>

content/furniture_design_list/dining_chair/31.無憂中島椅/index.md

@@ -2,9 +2,9 @@
 title: "無憂中島椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:50+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/worry_free_island_chair"
-image: "/dining_room/worry_free_island_chair/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/worry_free_island_chair"
+image: "/furniture_design/dining_chair/worry_free_island_chair/1.webp"
 description: "無憂中島椅 - 餐廳 / 梣木 / 深夜喝上一杯，cheers！把今天的憂愁都忘掉吧！"
 ---
 

content/furniture_design_list/dining_chair/32.幸福長凳/index.md

@@ -2,9 +2,9 @@
 title: "幸福長凳(雙人)｜小寶優居・設計家具"
 date: 2021-06-12T16:41:49+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/happy_bench"
-image: "/dining_room/happy_bench/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/happy_bench"
+image: "/furniture_design/dining_chair/happy_bench/1.webp"
 description: "幸福長凳(雙人) - 餐廳 / 梣木 / 兩個人的幸福， 你儂我儂，讓顏色隨心情， 盡情奔放"
 ---
 <script>

content/furniture_design_list/dining_chair/33.一期一會長凳/index.md

@@ -2,9 +2,9 @@
 title: "一期一會長凳(雙人)｜小寶優居・設計家具"
 date: 2021-06-12T16:41:48+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/once_in_a_lifetime_bench"
-image: "/dining_room/once_in_a_lifetime_bench/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/once_in_a_lifetime_bench"
+image: "/furniture_design/dining_chair/once_in_a_lifetime_bench/1.webp"
 description: "一期一會長凳(雙人) - 餐廳 / 梣木 / Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！"
 ---
 

content/furniture_design_list/dining_chair/43.小寶心情凳/index.md

@@ -2,9 +2,10 @@
 title: "小寶心情凳｜小寶優居・設計家具"
 date: 2021-06-12T22:38:58+08:00
 draft: false
-type: "other_furniture"
-url: "/other_furniture/bhouse_stool"
-image: "/other_furniture/bhouse_stool/1.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/bhouse_stool"
+image: "/furniture_design/dining_chair/bhouse_stool/1.webp"
+description: "小寶心情凳， 帶給你每日的好心情，布套可拆洗，還能讓屁股香香的。"
 ---
 
 <script>

content/furniture_design_list/dining_chair/a_small_stool_for_a_while/index.md

@@ -2,9 +2,9 @@
 title: "一期一會小凳｜小寶優居・設計家具"
 date: 2021-06-12T16:41:48+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/a_small_stool_for_a_while"
-image: "/dining_room/a_small_stool_for_a_while/b73d95c7-fce1-463b-a163-852c35899112.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/a_small_stool_for_a_while"
+image: "/furniture_design/dining_chair/a_small_stool_for_a_while/1.webp"
 description: "一期一會小凳 - 餐廳 / 梣木 / Hi，朋友！在此生有幸認識你，於我而言是不容錯過的一期一會，讓我們時常聯絡、把酒言歡、共享歡聚時光！"
 ---
 

content/furniture_design_list/dining_chair/good_seat_dining_chair/index.md

@@ -2,10 +2,12 @@
 title: "好座餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:46+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/good_seat_dining_chair"
-image: "/dining_room/good_seat_dining_chair/01da6735-ebdc-46b4-abfd-905bd25730e4.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/good_seat_dining_chair"
+image: "/furniture_design/dining_chair/good_seat_dining_chair/1.webp"
 description: "好座餐椅 - 餐廳 / 梣木+墊裝 / 坐與臥是居家生活花費最多的時間，你的屁股與脊椎，值得好好座也好好坐，讓你好好吃飯、好好讀書、好好寫字。"
+a:
+b:
 ---
 
 <script>

content/furniture_design_list/dining_chair/happiness_stool/index.md

@@ -2,9 +2,9 @@
 title: "幸福小凳｜小寶優居・設計家具"
 date: 2021-06-12T16:41:49+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/happiness_stool"
-image: "/dining_room/happiness_stool/d0eeb177-72c5-467f-9cb1-794eea3dc82b.webp"
+type: "dining_chair"
+url: "/furniture_design/dining_chair/happiness_stool"
+image: "/furniture_design/dining_chair/happiness_stool/1.webp"
 description: "幸福小凳 - 餐廳 / 梣木+墊裝 / 一個人， 也可以很幸福，讓顏色隨心情， 隨心所欲"
 ---
 

content/furniture_design_list/dining_chair/sif_dining_chair/index.md

@@ -3,8 +3,8 @@ title: "希芙餐椅｜小寶優居・設計家具"
 date: 2021-06-12T16:41:47+08:00
 draft: false
 type: "dining_chair"
-url: "/dining_room/sif_dining_chair"
-image: "/dining_room/sif_dining_chair/1.webp"
+url: "/dining_chair/happiness_stool/sif_dining_chair"
+image: "/dining_chair/happiness_stool/sif_dining_chair/1.webp"
 description: "希芙餐椅 - 餐廳 / 梣梣木+墊裝木 / 希芙是北歐神話的女神，雷神索爾的妻子，代表土地和五穀，也象徵麥穗與黃金，105度的神祕傾斜角度，不只乘坐更舒適，也期盼我們的生活，總是豐盛而有餘裕。"
 ---
 

content/furniture_design_list/dining_table/22.友直餐桌/index.md

@@ -2,9 +2,9 @@
 title: "友直餐桌｜小寶優居・設計家具"
 date: 2021-06-12T16:41:59+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/good_friends_dining_table"
-image: "/dining_room/good_friends_dining_table/1.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/good_friends_dining_table"
+image: "/furniture_design/dining_table/good_friends_dining_table/1.webp"
 description: "友直餐桌 - 餐廳 / 梣木 / 桌腳以橫、豎交叉排列，巧妙打造屬於每個人的用餐空間，找到彼此最剛好的吃飯黃金距離"
 ---
 <script>

content/furniture_design_list/dining_table/23.森命餐桌/index.md

@@ -2,9 +2,9 @@
 title: "森命餐桌｜小寶優居・設計家具"
 date: 2021-06-12T16:41:58+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/forest_life_dining_table"
-image: "/dining_room/forest_life_dining_table/1.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/forest_life_dining_table"
+image: "/furniture_design/dining_table/forest_life_dining_table/1.webp"
 description: "森命餐桌 - 餐廳 / 梣木 / 森林的生命，伴隨晚宴走進家裡"
 ---
 

content/furniture_design_list/dining_table/24.裊裊餐桌/index.md

@@ -2,9 +2,9 @@
 title: "裊裊餐桌｜小寶優居・設計家具"
 date: 2021-06-12T16:41:57+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/curly_dining_table"
-image: "/dining_room/curly_dining_table/1.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/curly_dining_table"
+image: "/furniture_design/dining_table/curly_dining_table/1.webp"
 description: "裊裊餐桌 - 餐廳 / 梣木 / 裊裊炊煙，呼喚遠方的遊子回家吃飯，裊裊餐桌，乘載我們家團聚的美好記憶。"
 ---
 

content/furniture_design_list/dining_table/25.舉杯餐桌/index.md

@@ -2,9 +2,9 @@
 title: "舉杯餐桌｜小寶優居・設計家具"
 date: 2021-06-12T16:41:56+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/toast_dining_table"
-image: "/dining_room/toast_dining_table/1.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/toast_dining_table"
+image: "/furniture_design/dining_table/toast_dining_table/1.webp"
 description: "舉杯餐桌 - 餐廳 / 梣木 / 精心挑選這個季節的花束，擺上燭火讓光在桌前化開來，等著在意的人一一入座，今天不是什麼特別的日子，只是想舉杯，慶祝每個平凡的日子裡， 有你有我"
 ---
 

content/furniture_design_list/dining_table/46.喆翔餐桌/index.md

@@ -2,9 +2,9 @@
 title: "喆翔餐桌｜小寶優居・設計家具"
 date: 2021-06-12T16:41:46+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/zhe_xiang_dining_table"
-image: "/dining_room/zhe_xiang_dining_table/1.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/zhe_xiang_dining_table"
+image: "/furniture_design/dining_table/zhe_xiang_dining_table/1.webp"
 description: "喆翔餐桌 - 餐廳 / 梣木 / 「餐桌」乘載著生活中的喜怒哀樂，開心歡樂時，大口吃肉，生氣悲傷時，大口喝酒，讓喆翔餐桌帶領你的情緒，優雅飛翔吧！"
 ---
 

content/furniture_design_list/dining_table/light_rhyme_dining_table/index.md

@@ -2,9 +2,9 @@
 title: "輕韻餐桌｜小寶優居・設計家具"
 date: 2021-10-05T13:26:47+08:00
 draft: false
-type: "dining_room"
-url: "/dining_room/light_rhyme_dining_table"
-image: "/dining_room/light_rhyme_dining_table/33ab2825-e86a-482d-b0ef-0f45c28baf2f.webp"
+type: "dining_table"
+url: "/furniture_design/dining_table/light_rhyme_dining_table"
+image: "/furniture_design/dining_table/light_rhyme_dining_table/1.webp"
 description: "輕韻餐桌 - 餐廳 / 梣木 / 外型輕巧，平易近人，簡單，卻不簡單，生活中各種時令的美好，與家中四季的笑聲，都被帶入了輕韻餐桌"
 ---
 

content/furniture_design_list/mattress/35.条条團圓/index.md

@@ -2,9 +2,9 @@
 title: "条条團圓｜小寶優居・設計家具"
 date: 2021-06-12T22:38:58+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/stripe_circle_bed"
-image: "/master_bedroom/stripe_circle_bed/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/stripe_circle_bed"
+image: "/furniture_design/mattress/stripe_circle_bed/1.webp"
 description: "条条團圓 - 臥室 / 雲杉實木骨架 / 工匠手縫條條的紋理，包上整片泡棉，不怕孩子碰撞，彷彿是媽媽的環抱，安心、溫柔"
 ---
 <script>

content/furniture_design_list/mattress/36.雙人枕頭/index.md

@@ -2,9 +2,9 @@
 title: "雙人枕頭｜小寶優居・設計家具"
 date: 2021-06-12T22:38:57+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/two_pillow_bed"
-image: "/master_bedroom/two_pillow_bed/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/two_pillow_bed"
+image: "/furniture_design/mattress/two_pillow_bed/1.webp"
 description: "雙人枕頭 - 臥室 / 雲杉實木骨架 / 專超大防蹣羽絨枕心，頭靠、背靠 都有得靠，雙人枕頭，真正靠得住"
 ---
 <script>

content/furniture_design_list/mattress/37.玩色格格/index.md

@@ -2,9 +2,9 @@
 title: "玩色格格｜小寶優居・設計家具"
 date: 2021-06-12T22:38:56+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/color_grid_bed"
-image: "/master_bedroom/color_grid_bed/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/color_grid_bed"
+image: "/furniture_design/mattress/color_grid_bed/1.webp"
 description: "玩色格格 - 臥室 / 雲杉實木骨架 / 軟綿的色彩格子，可以設計專屬配色，延伸做成床頭牆面，睡也要睡出自己的風格！"
 ---
 

content/furniture_design_list/mattress/38.步步高昇/index.md

@@ -2,9 +2,9 @@
 title: "步步高昇｜小寶優居・設計家具"
 date: 2021-06-12T22:38:55+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/rising_bed"
-image: "/master_bedroom/rising_bed/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/rising_bed"
+image: "/furniture_design/mattress/rising_bed/1.webp"
 description: "步步高昇 - 臥室 / 雲杉實木骨架 / 學業高升、事業高升、健康高升、步步高昇，一款伴隨你成長的床架"
 ---
 

content/furniture_design_list/mattress/39.圓滿床架/index.md

@@ -2,9 +2,9 @@
 title: "圓滿床架｜小寶優居・設計家具"
 date: 2021-06-12T22:38:54+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/perfect_bed"
-image: "/master_bedroom/perfect_bed/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/perfect_bed"
+image: "/furniture_design/mattress/perfect_bed/1.webp"
 description: "圓滿床架 - 臥室 / 松木 / 你都吃圓了，都滿出床了，而我還是愛你，這就是所謂的圓滿吧！"
 ---
 

content/furniture_design_list/mattress/44.酣然相擁/index.md

@@ -2,9 +2,9 @@
 title: "酣然相擁｜小寶優居・設計家具"
 date: 2021-06-12T22:38:53+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/hug_to_sleep"
-image: "/master_bedroom/hug_to_sleep/1.webp"
+type: "mattress"
+url: "/furniture_design/mattress/hug_to_sleep"
+image: "/furniture_design/mattress/hug_to_sleep/1.webp"
 description: "酣然相擁 - 臥室 / 山雲杉實木骨架 / 對稱的翅膀，就像包覆你的港灣，彎彎的臂彎，環抱著你入睡，被抱著入睡，做一場美夢吧！"
 ---
 

content/furniture_design_list/other_furniture/12.老王方塊櫃/index.md

@@ -2,96 +2,106 @@
 title: "老王方塊櫃"
 date: 2021-06-27T15:01:52+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/wang_cube_cabinet"
-image: "/system_cabinet/wang_cube_cabinet/1.webp"
+type: "other_furniture"
+url: "/furniture_design/other_furniture/wang_cube_cabinet"
+image: "/furniture_design/other_furniture/wang_cube_cabinet/1.webp"
 description: "老王方塊櫃  / 系統板材（塑合板） / 一格一格四四方方的格子，就像樂高積木一樣，任我堆疊"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/wang_cube_cabinet">老王方塊櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 老王方塊櫃"
-              >
-<amp-img
-  alt="小寶優居 | 老王方塊櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 老王方塊櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 老王方塊櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 老王方塊櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>老王方塊櫃</b></div>
-            <div class="description">
-<b>一格一格四四方方的格子，就像樂高積木一樣，任我堆疊</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">老王方塊櫃 </h3>
+            <p class="mb-5"> 一格一格四四方方的格子，就像樂高積木一樣，任我堆疊</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $5,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 老王方塊櫃">
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 老王方塊櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 老王方塊櫃"
-  src="s1.webp"
-  height="1555"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/other_furniture/34.圓滑處事化妝桌/index.md

@@ -2,90 +2,106 @@
 title: "圓滑處事化妝桌｜小寶優居・設計家具"
 date: 2021-06-12T22:38:59+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/sleek_vanity"
-image: "/master_bedroom/sleek_vanity/1.webp"
+type: "other_furniture"
+url: "/furniture_design/other_furniture/sleek_vanity"
+image: "/furniture_design/other_furniture/sleek_vanity/1.webp"
 description: "圓滑處事化妝桌 - 臥室 / 山毛櫸 / 專為台灣偉大的女性們，化妝與收納習慣創造的化妝桌。從設計到製作都來自台灣，更是體現匠師手工的工藝品！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/sleek_vanity">圓滑處事化妝桌</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 圓滑處事化妝桌"
-              >
-<amp-img
-  alt="小寶優居 | 圓滑處事化妝桌"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 圓滑處事化妝桌"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事化妝桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事化妝桌|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 老王方塊櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 老王方塊櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 老王方塊櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>圓滑處事化妝桌</b></div>
-            <div class="description">
-<b>專為台灣偉大的女性們，化妝與收納習慣創造的化妝桌。從設計到製作都來自台灣，更是體現匠師手工的工藝品！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">老王方塊櫃 </h3>
+            <p class="mb-5"> 一格一格四四方方的格子，就像樂高積木一樣，任我堆疊</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $26,500</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬840 X 深400 X 高1250(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $26,500</div>
-<div>顏色 ： 自然色、謐白色</div>
-<div>尺寸(mm) ： 寬840 X 深400 X 高1250</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">山毛櫸</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 老王方塊櫃"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 老王方塊櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/desk/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到書桌/工作桌
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_cabinet/16.圓滑處事套几（小）/index.md

@@ -2,90 +2,106 @@
 title: "圓滑處事套几(小)｜小寶優居・設計家具"
 date: 2021-05-28T17:00:45+08:00
 draft: false
-type: "living_room"
-url: "/living_room/sleek_small_chair"
-image: "/living_room/sleek_small_chair/1.webp"
+type: "side_cabinet"
+url: "/furniture_design/side_cabinet/sleek_small_chair"
+image: "/furniture_design/side_cabinet/sleek_small_chair/1.webp"
 description: "圓滑處事套几(小) - 客廳 / 山毛櫸 /  人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/sleek_small_chair">圓滑處事套几(小)</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 圓滑處事套几(小)"
-              >
-<amp-img
-  alt="小寶優居 | 圓滑處事套几(小)"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 圓滑處事套几(小)"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事套几(小)|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事套几(小)|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 圓滑處事套几(小)">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事套几(小)">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事套几(小)">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 圓滑處事套几(小)">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事套几(小)">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事套几(小)">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>圓滑處事套几(小)</b></div>
-            <div class="description">
-<b>人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">圓滑處事套几(小) </h3>
+            <p class="mb-5">人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $5,500 </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬450 X 深300 X 高490(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $5,500</div>
-<div>顏色 ： 自然色、胡桃色、謐白色</div>
-<div>尺寸(mm) ： 寬450 X 深300 X 高490</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">山毛櫸</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6> -->
+          <!-- <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 圓滑處事套几(小)"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 圓滑處事套几(小)"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/side_cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到邊櫃/邊几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_cabinet/21.圓滑處事邊櫃/index.md

@@ -2,90 +2,106 @@
 title: "圓滑處事邊櫃｜小寶優居・設計家具"
 date: 2021-06-30T11:26:59+08:00
 draft: false
-type: "master_bedroom"
-url: "/master_bedroom/sleek_side_cabinet"
-image: "/master_bedroom/sleek_side_cabinet/1.webp"
+type: "side_cabinet"
+url: "/furniture_design/side_cabinet/sleek_side_cabinet"
+image: "/furniture_design/side_cabinet/sleek_side_cabinet/1.webp"
 description: "圓滑處事邊櫃 - 臥室 / 山毛櫸 /  人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/sleek_side_cabinet">圓滑處事邊櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 圓滑處事邊櫃"
-              >
-<amp-img
-  alt="小寶優居 | 圓滑處事邊櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 圓滑處事邊櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事邊櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 圓滑處事邊櫃|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 圓滑處事邊櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事邊櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事邊櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 圓滑處事邊櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 圓滑處事邊櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 圓滑處事邊櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>圓滑處事邊櫃</b></div>
-            <div class="description">
-<b>人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">圓滑處事邊櫃 </h3>
+            <p class="mb-5">人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $12,200 </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、謐白色</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬500 X 深390 X 高560(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $12,200</div>
-<div>顏色 ： 自然色、謐白色</div>
-<div>尺寸(mm) ： 寬500 X 深390 X 高560</div>
-<div>材質 ： 山毛櫸</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">山毛櫸</div>
             </div>
+            <!-- <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
+            </div> -->
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6> -->
+          <!-- <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 圓滑處事邊櫃"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 圓滑處事邊櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/side_cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到邊櫃/邊几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_cabinet/53.幸運邊几/index.md

@@ -2,104 +2,105 @@
 title: "幸運邊几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:40+08:00
 draft: false
-type: "living_room"
-url: "/living_room/lucky_side_table"
-image: "/living_room/lucky_side_table/1.webp"
+type: "side_cabinet"
+url: "/furniture_design/side_cabinet/lucky_side_table"
+image: "/furniture_design/side_cabinet/lucky_side_table/1.webp"
 description: "幸運邊几 - 客廳 / 梣木+鐵件 / 擷取一瓣幸運草葉，他可以是希望、是付出或是愛，輕巧外型，是各種隨手愜意的擺放，讓你創造家中的無限彈性可能。"
 ---
-
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/lucky_side_table">幸運邊几</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 幸運邊几"
-              >
-<amp-img
-  alt="小寶優居 | 幸運邊几"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸運邊几"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 幸運邊几"
-  src="63043cbf-8cb4-42df-afaf-73cc9e762493.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運邊几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運邊几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="63043cbf-8cb4-42df-afaf-73cc9e762493.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 幸運邊几|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 幸運邊几">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 幸運邊几">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 幸運邊几">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 幸運邊几">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 幸運邊几">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 幸運邊几">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>幸運邊几</b></div>
-            <div class="description">
-<b>擷取一瓣幸運草葉，他可以是希望、是付出或是愛，輕巧外型，是各種隨手愜意的擺放，讓你創造家中的無限彈性可能。</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">幸運邊几 </h3>
+            <p class="mb-5">擷取一瓣幸運草葉，他可以是希望、是付出或是愛，輕巧外型，是各種隨手愜意的擺放，讓你創造家中的無限彈性可能。</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> $8,880</span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">寬450 X 深325 X 高600(mm)</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $8,880</div>
-<div>顏色 ： 自然色、胡桃色、橡木色、謐白色、曜石灰</div>
-<div>尺寸(mm) ： 寬450 X 深325 X 高600</div>
-<div>材質 ： 梣木+鐵件</div>
-<div>備註 ： 共兩色，謐白色層板與曜石灰層板可供選擇，實際產品請洽門市人員</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">梣木+鐵件</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">共兩色，謐白色層板與曜石灰層板可供選擇，實際產品請洽門市人員</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <!-- <h6>尺寸規格</h6> -->
+          <!-- <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 幸運邊几"> -->
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 幸運邊几"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/side_cabinet/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到邊櫃/邊几
+            </p>
+          </a>
         </div>
       </div>
-
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/side_table/1.漂浮茶几/index.md

@@ -2,9 +2,9 @@
 title: "漂浮茶几"
 date: 2021-06-27T15:01:59+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/floating_coffee_table"
-image: "/system_cabinet/floating_coffee_table/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/floating_coffee_table"
+image: "/furniture_design/side_table/floating_coffee_table/1.webp"
 description: "漂浮茶几  / 系統板材（塑合板） / 飄浮，讓世界跟著輕快；起飛，乘載著客廳所有生活"
 ---
 

content/furniture_design_list/side_table/2.金磚茶几/index.md

@@ -2,9 +2,9 @@
 title: "金磚茶几"
 date: 2021-06-27T15:01:58+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/golden_brick_coffee_table"
-image: "/system_cabinet/golden_brick_coffee_table/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/golden_brick_coffee_table"
+image: "/furniture_design/side_table/golden_brick_coffee_table/1.webp"
 description: "金磚茶几  / 系統板材（塑合板） / 金磚象徵著大富大貴，也象徵著無瑕的單純金磚生活無暇設計"
 ---
 <script>

content/furniture_design_list/side_table/four_seasons_big_chair/index.md

@@ -2,9 +2,9 @@
 title: "四時不惑大几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:43+08:00
 draft: false
-type: "table"
-url: "/furniture_design/table/four_seasons_big_chair"
-image: "/furniture_design/table/four_seasons_big_chair/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/four_seasons_big_chair"
+image: "/furniture_design/side_table/four_seasons_big_chair/1.webp"
 description: "四時不惑大几 - 客廳 / 梣木 / 40不惑，不再疑惑"
 ---
 <script>

content/furniture_design_list/side_table/good_friends_chair/index.md

@@ -2,9 +2,9 @@
 title: "友直茶几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:44+08:00
 draft: false
-type: "living_room"
-url: "/living_room/good_friends_chair"
-image: "/living_room/good_friends_chair/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/good_friends_chair"
+image: "/furniture_design/side_table/good_friends_chair/1.webp"
 description: "友直茶几 - 客廳 / 梣木 / 人生路深長不見盡頭， 不論多長總，有些面孔熟悉著、陪伴著， 一通電話相聚交心；人生路上有橫有豎， 朋友， 這兒永遠有你的位置"
 ---
 <script>

content/furniture_design_list/side_table/lucky_coffee_table/index.md

@@ -2,9 +2,9 @@
 title: "幸運茶几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:41+08:00
 draft: false
-type: "living_room"
-url: "/living_room/lucky_coffee_table"
-image: "/living_room/lucky_coffee_table/736a1950-fdd4-4152-9957-797b984b0161.webp"
+type: "side_table"
+url: "/furniture_design/side_table/lucky_coffee_table"
+image: "/furniture_design/side_table/lucky_coffee_table/1.webp"
 description: "幸運茶几 - 客廳 / 梣木+鐵件 / 希望、付出和愛代表了幸運草的三片葉子，是一個家的組成必備三元素，無條件的付出，而我們的未來，就在愛裡延續著。"
 ---
 <script>

content/furniture_design_list/side_table/matured_toast/index.md

@@ -2,9 +2,9 @@
 title: "熟成吐司｜小寶優居・設計家具"
 date: 2021-05-28T17:00:48+08:00
 draft: false
-type: "living_room"
-url: "/living_room/matured_toast"
-image: "/living_room/matured_toast/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/matured_toast"
+image: "/furniture_design/side_table/matured_toast/1.webp"
 description: "熟成吐司 - 客廳 / 梣木、樺木積層板 / 熟成你的家庭，讓客廳井然有序"
 ---
 <script>

content/furniture_design_list/side_table/round_table/index.md

@@ -2,9 +2,9 @@
 title: "緣圓大几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:49+08:00
 draft: false
-type: "living_room"
-url: "/living_room/round_table"
-image: "/living_room/round_table/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/round_table"
+image: "/furniture_design/side_table/round_table/1.webp"
 description: "緣圓大几 - 客廳 / 梣木 / 人生有三圓，家圓情圓友團圓，三角圓圓，闔家緣圓"
 ---
 <script>

content/furniture_design_list/side_table/sleek_big_coffee_chair/index.md

@@ -2,16 +2,16 @@
 title: "圓滑處事大茶几｜小寶優居・設計家具"
 date: 2021-05-28T17:00:47+08:00
 draft: false
-type: "living_room"
-url: "/living_room/sleek_big_coffee_chair"
-image: "/living_room/sleek_big_coffee_chair/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/sleek_big_coffee_chair"
+image: "/furniture_design/side_table/sleek_big_coffee_chair/1.webp"
 description: "圓滑處事大茶几 - 客廳 / 山毛櫸 /  人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事"
 ---
 
 <section class="section44 mb-5">
     <div class="container">
       <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/sleek_big_coffee_chair">圓滑處事大茶几</a>
+        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/furniture_design/side_cabinet/sleek_big_coffee_chair">圓滑處事大茶几</a>
       </div>
       <div class="row">
         <div class="col-md-5 col-sm-12">

content/furniture_design_list/side_table/sleek_small_chair/index.md

@@ -2,16 +2,16 @@
 title: "圓滑處事套几(小)｜小寶優居・設計家具"
 date: 2021-05-28T17:00:45+08:00
 draft: false
-type: "living_room"
-url: "/living_room/sleek_small_chair"
-image: "/living_room/sleek_small_chair/1.webp"
+type: "side_table"
+url: "/furniture_design/side_table/sleek_small_chair"
+image: "/furniture_design/side_table/sleek_small_chair/1.webp"
 description: "圓滑處事套几(小) - 客廳 / 山毛櫸 /  人生中，在無數的挫折裡學會堅強，在高壓的社會大學中磨練成長而茁壯，時間磨去了我們的稜角，於是我們學會圓滑處事"
 ---
 
 <section class="section44 mb-5">
     <div class="container">
       <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/living_room/sleek_small_chair">圓滑處事套几(小)</a>
+        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/living_room">客廳</a> > <a href="/furniture_design/side_cabinet/sleek_small_chair">圓滑處事套几(小)</a>
       </div>
       <div class="row">
         <div class="col-md-5 col-sm-12">

content/furniture_design_list/wardrobe/10.邂逅穿鞋椅/index.md

@@ -2,96 +2,106 @@
 title: "邂逅穿鞋椅｜小寶優居・系統家具"
 date: 2021-06-27T15:01:53+08:00
 draft: false
-type: "system_cabinet"
+type: "wardrobe"
 url: "/system_cabinet/met_my_family_shoes_trying_stool"
 image: "/system_cabinet/met_my_family_shoes_trying_stool/1.webp"
 description: "邂逅穿鞋椅  / 系統板材（塑合板） / 小時候，媽媽坐在門口的椅子教我穿鞋子。長大後，我坐在門口的椅子教我的孩子穿鞋子，門口的椅子，邂逅了我們家三代"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/met_my_family_shoes_trying_stool">邂逅穿鞋椅</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 邂逅穿鞋椅"
-              >
-<amp-img
-  alt="小寶優居 | 邂逅穿鞋椅"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 邂逅穿鞋椅"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 邂逅穿鞋椅|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 邂逅穿鞋椅|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>邂逅穿鞋椅</b></div>
-            <div class="description">
-<b>小時候，媽媽坐在門口的椅子教我穿鞋子。長大後，我坐在門口的椅子教我的孩子穿鞋子，門口的椅子，邂逅了我們家三代</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">把鞋子吊起來 </h3>
+            <p class="mb-5">媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $6,800</div>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<div>尺寸(mm) ： 寬900 X 深410 X 高480</div>
-<div>材質 ： 系統板材（塑合板）</div>
-<span></span>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把鞋子吊起來">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把鞋子吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 邂逅穿鞋椅"
-  src="s1.webp"
-  height="1265"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/11.午後臥榻/index.md

@@ -2,96 +2,106 @@
 title: "午後臥榻｜小寶優居・系統家具"
 date: 2021-06-27T16:20:56+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/afternoon_couch"
-image: "/custom_made_system_cabinet/afternoon_couch/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/afternoon_couch"
+image: "/furniture_design/wardrobe/afternoon_couch/1.webp"
 description: "午後臥榻  / 系統板材（塑合板） / 坐在午後臥榻，手拿著電腦與咖啡，也跟著踏上了旅程"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/afternoon_couch">午後臥榻</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 午後臥榻"
-              >
-<amp-img
-  alt="小寶優居 | 午後臥榻"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 午後臥榻"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 午後臥榻|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 午後臥榻|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>午後臥榻</b></div>
-            <div class="description">
-<b>坐在午後臥榻，手拿著電腦與咖啡，也跟著踏上了旅程</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">把鞋子吊起來 </h3>
+            <p class="mb-5">媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把鞋子吊起來">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把鞋子吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 午後臥榻"
-  src="s1.webp"
-  height="1059"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/13.今晚餐櫃/index.md

@@ -2,88 +2,106 @@
 title: "今晚餐櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:55+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/tonight_cabinet"
-image: "/custom_made_system_cabinet/tonight_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/tonight_cabinet"
+image: "/furniture_design/wardrobe/tonight_cabinet/1.webp"
 description: "今晚餐櫃 / 系統板材（塑合板） / 今天晚上吃什麼？小時候看著廚房裡大家忙進忙出，我唯一能做的工作就是問「今晚吃什麼？」"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/tonight_cabinet">今晚餐櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 今晚餐櫃"
-              >
-<amp-img
-  alt="小寶優居 | 今晚餐櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 今晚餐櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <!-- <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div> -->
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div> -->
+            </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>今晚餐櫃</b></div>
-            <div class="description">
-<b>今天晚上吃什麼？小時候看著廚房裡大家忙進忙出，我唯一能做的工作&nbsp;就是問「今晚吃什麼？」</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">把鞋子吊起來 </h3>
+            <p class="mb-5">媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把鞋子吊起來">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把鞋子吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 今晚餐櫃"
-  src="s1.webp"
-  height="5228"
-  width="4129"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 今晚餐櫃"
-  src="s2.webp"
-  height="460"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/14.愛中島系列/index.md

@@ -2,157 +2,107 @@
 title: "愛中島系列｜小寶優居・系統家具"
 date: 2021-06-27T16:20:54+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/love_island"
-image: "/custom_made_system_cabinet/love_island/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/love_island"
+image: "/furniture_design/wardrobe/love_island/1.webp"
 description: "愛中島系列 (愛妻/愛家/愛料理/享生活中島) / 系統板材（塑合板） / 白天是廚房料理空間的延伸，晚上搖身一變，成為品酒的小吧檯，客製的規格，許你一個獨一無二的中島夢。單邊延伸檯面，相愛兩人窩一塊"
 custom_title_value: "（標準版/釋壓加強版/彈力加強版）"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/love_island">愛中島系列 (愛妻/愛家/愛料理/享生活中島)</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-              >
-<amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="3.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="4.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="5.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=2)">
-            <amp-img
-              src="3.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=3)">
-            <amp-img
-              src="4.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=4)">
-            <amp-img
-              src="5.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+                  <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>愛中島系列 (愛妻/愛家/愛料理/享生活中島)</b></div>
-            <div class="description">
-<b>白天是廚房料理空間的延伸，晚上搖身一變，成為品酒的小吧檯，客製的規格，許你一個獨一無二的中島夢。單邊延伸檯面，相愛兩人窩一塊</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">愛中島系列 </h3>
+            <p class="mb-5">白天是廚房料理空間的延伸，晚上搖身一變，成為品酒的小吧檯，客製的規格，許你一個獨一無二的中島夢。單邊延伸檯面，相愛兩人窩一塊</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把鞋子吊起來">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把鞋子吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="eb4bb350-d24b-4bd0-a035-f91f1c462dff.webp"
-  height="1029"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="3cabf640-e639-4f1b-a4ec-9a136d4a54ab.webp"
-  height="1097"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="383bc20f-089e-4bd7-bd69-db91ab13a7a5.webp"
-  height="1068"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 愛中島系列 (愛妻/愛家/愛料理/享生活中島)"
-  src="bf9e2301-f2e0-4bdd-a048-002da5e4b0d2.webp"
-  height="1121"
-  width="1600"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/15.谷溜儲物櫃/index.md

@@ -2,96 +2,106 @@
 title: "谷溜儲物櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:53+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/sleek_cabinet"
-image: "/custom_made_system_cabinet/sleek_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/sleek_cabinet"
+image: "/furniture_design/wardrobe/sleek_cabinet/1.webp"
 description: "谷溜儲物櫃  / 系統板材（塑合板） / 谷溜谷溜，環境收的淨溜溜！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/sleek_cabinet">谷溜儲物櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 谷溜儲物櫃"
-              >
-<amp-img
-  alt="小寶優居 | 谷溜儲物櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 谷溜儲物櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 谷溜儲物櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 谷溜儲物櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 谷溜儲物櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 谷溜儲物櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 谷溜儲物櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 谷溜儲物櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 谷溜儲物櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 谷溜儲物櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>谷溜儲物櫃</b></div>
-            <div class="description">
-<b>谷溜谷溜，環境收的淨溜溜！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">谷溜儲物櫃 </h3>
+            <p class="mb-5">谷溜谷溜，環境收的淨溜溜！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 谷溜儲物櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 谷溜儲物櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 谷溜儲物櫃"
-  src="s1.webp"
-  height="7866"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/16.我愛衣櫃/index.md

@@ -2,102 +2,106 @@
 title: "我愛衣櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:52+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/love_wardrobe"
-image: "/custom_made_system_cabinet/love_wardrobe/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/love_wardrobe"
+image: "/furniture_design/wardrobe/love_wardrobe/1.webp"
 description: "我愛衣櫃  / 系統板材（塑合板） / 「八種」衣櫃身懷不同功能，找一款符合你的衣櫃吧！或組在一起，直接打造一間個人更衣室！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/love_wardrobe">我愛衣櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 我愛衣櫃"
-              >
-<amp-img
-  alt="小寶優居 | 我愛衣櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 我愛衣櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 我愛衣櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 我愛衣櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 我愛衣櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 我愛衣櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 我愛衣櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 我愛衣櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 我愛衣櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 我愛衣櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>我愛衣櫃</b></div>
-            <div class="description">
-<b>「八種」衣櫃身懷不同功能，找一款符合你的衣櫃吧！或組在一起，直接打造一間個人更衣室！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">我愛衣櫃 </h3>
+            <p class="mb-5">「八種」衣櫃身懷不同功能，找一款符合你的衣櫃吧！或組在一起，直接打造一間個人更衣室！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 我愛衣櫃">
+           <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 我愛衣櫃">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 我愛衣櫃"
-  src="s1.webp"
-  height="12871"
-  width="8256"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 我愛衣櫃"
-  src="s2.webp"
-  height="819"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/17.海量_我愛_今晚斗櫃/index.md

@@ -2,108 +2,108 @@
 title: "海量/我愛/今晚斗櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:51+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/tonight_dresser"
-image: "/custom_made_system_cabinet/tonight_dresser/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/tonight_dresser"
+image: "/furniture_design/wardrobe/tonight_dresser/1.webp"
 description: "海量/我愛/今晚斗櫃  / 系統板材（塑合板）/ 一斗兩斗三斗櫃，四斗五抽六斗櫃，海量收納都看我！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/tonight_dresser">海量/我愛/今晚斗櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 海量/我愛/今晚斗櫃"
-              >
-<amp-img
-  alt="小寶優居 | 海量/我愛/今晚斗櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 海量/我愛/今晚斗櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 海量/我愛/今晚斗櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 海量/我愛/今晚斗櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 海量/我愛/今晚斗櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>海量/我愛/今晚斗櫃</b></div>
-            <div class="description">
-<b>一斗兩斗三斗櫃，四斗五抽六斗櫃，海量收納都看我！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">海量/我愛/今晚斗櫃 </h3>
+            <p class="mb-5">一斗兩斗三斗櫃，四斗五抽六斗櫃，海量收納都看我！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 海量/我愛/今晚斗櫃">
+           <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 海量/我愛/今晚斗櫃">
+               <img class="w-100 h-100" src="s3.webp"
+            alt="小寶優居 | 海量/我愛/今晚斗櫃">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 海量/我愛/今晚斗櫃"
-  src="s1.webp"
-  height="6992"
-  width="8256"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 海量/我愛/今晚斗櫃"
-  src="s2.webp"
-  height="8094"
-  width="8256"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 海量/我愛/今晚斗櫃"
-  src="s3.webp"
-  height="8070"
-  width="8256"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/6.有餘電器櫃/index.md

@@ -2,96 +2,106 @@
 title: "有餘電器櫃｜小寶優居・系統家具"
 date: 2021-06-27T15:01:54+08:00
 draft: false
-type: "system_cabinet"
-url: "/system_cabinet/surplus_cabinet"
-image: "/system_cabinet/surplus_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/surplus_cabinet"
+image: "/furniture_design/wardrobe/surplus_cabinet/1.webp"
 description: "有餘電器櫃  / 系統板材（塑合板） / 如果你剛好電器有餘，我也剛好設計一個有餘電器櫃，收納你的有餘 也祝福今年有餘"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/system_cabinet">模組系統櫃單品</a> > <a href="/system_cabinet/surplus_cabinet">有餘電器櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 有餘電器櫃"
-              >
-<amp-img
-  alt="小寶優居 | 有餘電器櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 有餘電器櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 有餘電器櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 有餘電器櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 有餘電器櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 有餘電器櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 有餘電器櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 有餘電器櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 有餘電器櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 有餘電器櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>有餘電器櫃</b></div>
-            <div class="description">
-<b>如果你剛好電器有餘，我也剛好設計一個有餘電器櫃，收納你的有餘 也祝福今年有餘</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">有餘電器櫃 </h3>
+            <p class="mb-5">如果你剛好電器有餘，我也剛好設計一個有餘電器櫃，收納你的有餘 也祝福今年有餘</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 有餘電器櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 有餘電器櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 有餘電器櫃"
-  src="s1.webp"
-  height="2589"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/7.穿雲櫃/index.md

@@ -2,96 +2,106 @@
 title: "穿雲櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:59+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/through_the_clouds_cabinet"
-image: "/custom_made_system_cabinet/through_the_clouds_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/through_the_clouds_cabinet"
+image: "/furniture_design/wardrobe/through_the_clouds_cabinet/1.webp"
 description: "穿雲櫃 / 梣木+墊裝 / 坐與臥是居家生活花費最多的時間，你的屁股與脊椎，值得好好座也好好坐，讓你好好吃飯、好好讀書、好好寫字。"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/through_the_clouds_cabinet">穿雲櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 穿雲櫃"
-              >
-<amp-img
-  alt="小寶優居 | 穿雲櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 穿雲櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 穿雲櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 穿雲櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 穿雲櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 穿雲櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 穿雲櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 穿雲櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 穿雲櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 穿雲櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>穿雲櫃</b></div>
-            <div class="description">
-<b>地面延伸到天花板，好像穿過雲層一樣</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">穿雲櫃 </h3>
+            <p class="mb-5">地面延伸到天花板，好像穿過雲層一樣</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 穿雲櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 穿雲櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 穿雲櫃"
-  src="s1.webp"
-  height="838"
-  width="1983"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/8.平安喜樂團圞鞋櫃/index.md

@@ -2,96 +2,106 @@
 title: "平安/喜樂/團圞鞋櫃｜小寶優居・系統家具"
 date: 2021-06-27T16:20:58+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/safe_happiness_reunion_shoe_cabinet"
-image: "/custom_made_system_cabinet/safe_happiness_reunion_shoe_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/safe_happiness_reunion_shoe_cabinet"
+image: "/furniture_design/wardrobe/safe_happiness_reunion_shoe_cabinet/1.webp"
 description: "平安/喜樂/團圞鞋櫃 / 系統板材（塑合板）/ 我此生最大的榮幸，就是被說：「我們家的鞋子都放這裡」"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/safe_happiness_reunion_shoe_cabinet">平安/喜樂/團圞鞋櫃</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 平安/喜樂/團圞鞋櫃"
-              >
-<amp-img
-  alt="小寶優居 | 平安/喜樂/團圞鞋櫃"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 平安/喜樂/團圞鞋櫃"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 平安/喜樂/團圞鞋櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 平安/喜樂/團圞鞋櫃|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>平安/喜樂/團圞鞋櫃</b></div>
-            <div class="description">
-<b>我此生最大的榮幸，就是被說：「我們家的鞋子都放這裡」</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">平安/喜樂/團圞鞋櫃 </h3>
+            <p class="mb-5">我此生最大的榮幸，就是被說：「我們家的鞋子都放這裡」</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 平安/喜樂/團圞鞋櫃">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 平安/喜樂/團圞鞋櫃"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 平安/喜樂/團圞鞋櫃"
-  src="s1.webp"
-  height="9732"
-  width="4129"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/9.把鞋子吊起來/index.md

@@ -2,96 +2,106 @@
 title: "把鞋子吊起來｜小寶優居・系統家具"
 date: 2021-10-02T16:20:57+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/hang_your_shoe_cabinet"
-image: "/custom_made_system_cabinet/hang_your_shoe_cabinet/1.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/hang_your_shoe_cabinet"
+image: "/furniture_design/wardrobe/hang_your_shoe_cabinet/1.webp"
 description: "把鞋子吊起來 / 系統板材（塑合板） / 媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/hang_your_shoe_cabinet">把鞋子吊起來</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 把鞋子吊起來"
-              >
-<amp-img
-  alt="小寶優居 | 把鞋子吊起來"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 把鞋子吊起來"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 把鞋子吊起來|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 把鞋子吊起來|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把鞋子吊起來">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把鞋子吊起來">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>把鞋子吊起來</b></div>
-            <div class="description">
-<b>媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">把鞋子吊起來 </h3>
+            <p class="mb-5">媽媽要掃地了，把腳抬起來，乾脆就把臭鞋子們騰空收納，以後就讓掃地機器人負責吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把鞋子吊起來">
+                      <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把鞋子吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 把鞋子吊起來"
-  src="8f26136b-5b8b-408b-a725-4de880b392ae.webp"
-  height="1600"
-  width="930"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

content/furniture_design_list/wardrobe/hang_up_clothes/index.md

@@ -2,96 +2,106 @@
 title: "把衣服吊起來｜小寶優居・系統家具"
 date: 2021-10-01T16:20:57+08:00
 draft: false
-type: "custom_made_system_cabinet"
-url: "/custom_made_system_cabinet/hang_up_clothes"
-image: "/custom_made_system_cabinet/hang_up_clothes/969e3330-1dcc-4235-a1b4-d9c22fe09790.webp"
+type: "wardrobe"
+url: "/furniture_design/wardrobe/hang_up_clothes"
+image: "/furniture_design/wardrobe/hang_up_clothes/1.webp"
 description: "把衣服吊起來  / 系統板材（塑合板）/ 我是「把鞋子吊起來」鞋櫃的好朋友，專門解救家裡掛滿衣服的那張椅子，回到家，把明天還要穿的外套放進我肚子裡。"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/custom_made_system_cabinet">客製模組系統櫃</a> > <a href="/custom_made_system_cabinet/hang_up_clothes">把衣服吊起來</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 把衣服吊起來"
-              >
-<amp-img
-  alt="小寶優居 | 把衣服吊起來"
-  src="969e3330-1dcc-4235-a1b4-d9c22fe09790.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 把衣服吊起來"
-  src="bd4a00f3-2d7f-4201-8757-741fa46d6f47.webp"
-  height="1200"
-  width="1200"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="969e3330-1dcc-4235-a1b4-d9c22fe09790.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 把衣服吊起來|小寶優居・系統家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="bd4a00f3-2d7f-4201-8757-741fa46d6f47.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 把衣服吊起來|小寶優居・系統家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 把衣服吊起來">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 把衣服吊起來">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 把衣服吊起來">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 把衣服吊起來">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 把衣服吊起來">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 把衣服吊起來">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>把衣服吊起來</b></div>
-            <div class="description">
-<b>我是「把鞋子吊起來」鞋櫃的好朋友，專門解救家裡掛滿衣服的那張椅子，回到家，把明天還要穿的外套放進我肚子裡。</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">把衣服吊起來 </h3>
+            <p class="mb-5">我是「把鞋子吊起來」鞋櫃的好朋友，專門解救家裡掛滿衣服的那張椅子，回到家，把明天還要穿的外套放進我肚子裡。</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span> </span>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">門市擁有43種板材顏色，依規劃客製挑選</div>
+            </div>
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
             </div>
-            <hr>
-            <div class="detail">
-<span></span>
-<div>顏色 ： 門市擁有43種板材顏色，依規劃客製挑選</div>
-<span></span>
-<div>材質 ： 系統板材（塑合板）</div>
-<div>備註 ： 實際價格將依需求規劃客製而定</div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">系統板材（塑合板）</div>
+            </div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 把衣服吊起來">
+           <!-- <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 把衣服吊起來"> -->
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/wardrobe/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到衣櫃/收納櫃/中島
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 把衣服吊起來"
-  src="688780b1-fa62-44e1-a5a9-e8dc5b149e19.webp"
-  height="1600"
-  width="1536"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>

layouts/_default/single.html

@@ -0,0 +1,41 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ partial "headers.html" . }}
+</head>
+
+<body>
+  <!-- <div class="header-template"></div> -->
+  {{ partial "nav.html" . }}
+  
+ 
+  <div>
+    {{ .Content }}
+</div>
+
+  <!-- <div class="footer-template"></div> -->
+
+  {{ partial "footer.html" . }}
+
+  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+
+  <script async defer src="./js/index.js"></script> -->
+  {{ partial "scripts.html" . }}
+  <script>
+
+  </script>
+
+</body>
+
+</html>