update blog

content/blog/0712/index.md

@@ -8,8 +8,8 @@ type: "blog"
 url: "/blog/0712"
 image: "/img/title/16cee02b48734b69ba99f6f27833fc5a.webp"
 categories: "預算準備"
-description: ""
-col1: "0712"
+description: "TEST"
+col1: "budget_preparation"
 col2: ""
 introduction: "TEST"
 question_box_intro: "TEST"

content/blog/0714-1/index.md

@@ -1,22 +0,0 @@
----
-meta_title: "0714-1"
-meta_description: "0714-1"
-title: "0714-1"
-date: 2022-07-14T16:31:08+08:00
-draft: false
-type: "blog"
-url: "/blog/0714-1"
-image: "/img/title/1.webp"
-categories: "預算準備"
-description: ""
-col1: "budget_preparation"
-col2: ""
-introduction: "0714-1"
-question_box_intro: "0714-1"
----
-
-
-<div class="container-fluid blog_article p-0">
-
-0714-1
-

content/blog/0719/index.md

@@ -0,0 +1,22 @@
+---
+meta_title: "0719"
+meta_description: "0719"
+title: "0719"
+date: 2022-07-19T11:44:04+08:00
+draft: false
+type: "blog"
+url: "/blog/0719"
+image: "/img/title/bd2e26f5599a4b97853b966fb2b3fa7d.webp"
+categories: "空間計畫"
+description: ""
+col1: "space_plan"
+col2: ""
+introduction: "0719"
+question_box_intro: "0719"
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+0719
+

content/blog/article2/index.md

@@ -1,23 +0,0 @@
----
-meta_title: "article2"
-meta_description: "metaaaaaaaaa"
-title: "article2"
-date: 2022-07-12T14:12:31+08:00
-draft: false
-type: "blog"
-url: "/blog/article2"
-image: "/img/title/2c66c809f84546fa8ca30963a234db48.webp"
-categories: ["article2"]
-description: "Another article here."
-col1: "article2"
-col2: ""
-introduction: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br><br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br><br>and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
-question_box_intro: "Sample text"
----
-
-
-<div class="container-fluid blog_article p-0">
-
-## Test
-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-

content/blog/check_in/index.md

@@ -0,0 +1,22 @@
+---
+meta_title: "驗收入住"
+meta_description: "Test"
+title: "驗收入住"
+date: 2022-07-19T11:48:09+08:00
+draft: false
+type: "blog"
+url: "/blog/check_in"
+image: "/img/title/1e188115466b44a9b7bcaf9084036afd.webp"
+categories: "驗收入住"
+description: ""
+col1: "check_in"
+col2: ""
+introduction: "Test"
+question_box_intro: "Test"
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+Test
+

content/blog/example-article1/index.md

@@ -5,7 +5,7 @@ title: "測試一 【認識裝修裝潢】 標題NotoJPBold22級字行距32pt置
 date: 2021-06-04T11:52:23+08:00
 draft: false
 type: "blog"
-url: "/blog/pre-sale_tenants_become_lazy_packs_copy/"
+url: "/blog/example-article1"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: "認識裝修裝潢"
 description: "「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」"

content/blog/example-article2/index.md

@@ -5,7 +5,7 @@ title: "測試三 【認識裝修裝潢】預售屋客變懶人包：客變什
 date: 2021-06-04T11:52:23+08:00
 draft: false
 type: "blog"
-url: "/blog/pre-sale_tenants_become_lazy_packs_copy/"
+url: "/blog/example-article2"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: "認識裝修裝潢"
 description: "「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」"

content/blog/example-article3/index.md

@@ -5,7 +5,7 @@ title: "測試二 【認識裝修裝潢】預售屋客變懶人包：客變什
 date: 2021-06-04T11:52:23+08:00
 draft: false
 type: "blog"
-url: "/blog/pre-sale_tenants_become_lazy_packs_copy/"
+url: "/blog/example-article3"
 image: "/img/blog/boutique_hotel_slightly_drunk_chill_house_2.webp"
 categories: "認識裝修裝潢"
 description: "「我買了預售屋，有很多客變的想法！建設公司通知我要客變了，但我不知道這樣做好不好？」"

content/blog/furniture_appliances/index.md

@@ -0,0 +1,22 @@
+---
+meta_title: "家具家電"
+meta_description: "Test"
+title: "家具家電"
+date: 2022-07-19T11:46:47+08:00
+draft: false
+type: "blog"
+url: "/blog/furniture_appliances"
+image: "/img/title/1b9461fc57cb44859a7958d9d29d0328.webp"
+categories: "家具家電"
+description: ""
+col1: "furniture_appliances"
+col2: ""
+introduction: "Test"
+question_box_intro: "Test"
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+Test
+

content/blog/home_style/index.md

@@ -0,0 +1,22 @@
+---
+meta_title: "居家風格"
+meta_description: "Test"
+title: "居家風格"
+date: 2022-07-19T11:46:24+08:00
+draft: false
+type: "blog"
+url: "/blog/home_style"
+image: "/img/title/5452b41440f94ef8b7ebf70c1079d077.webp"
+categories: "居家風格"
+description: ""
+col1: "home_style"
+col2: ""
+introduction: "Test"
+question_box_intro: "Test"
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+Test
+

content/collection/0718/index.md

@@ -0,0 +1,37 @@
+---
+meta_title: "0718"
+meta_description: "0718"
+title: "0718"
+date: 2022-07-18T14:15:14+08:00
+draft: false
+type: "collection"
+url: "/collection/0718"
+image: "/img/title/fdb59dd04835410bb859b037cf1740ea.webp"
+cover_img: "/img/title/b40bf0538a824d1da799526a1c14b853.webp"
+collection_name: "0718"
+description: "0718"
+tags: [大樓,20坪以下,59萬以下,一房]
+banner_img_text: "0718"
+homeowner: "0718"
+owner_img: ""
+size: "20坪以下"
+house_size: "0718"
+bed_num: "一房"
+room_count: "0718"
+house_cat: "大樓"
+designer: "0718"
+space: "0718"
+loc: "台北"
+budget_range: "59萬以下"
+budget: "0718"
+construction: "0718"
+collection_description: "0718"
+comment: "img/f92efc1ebb494ad59c51881e03808778.webp"
+collection_slider: []
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+</div>
+

content/collection/cat_aqiu_s_lazy_nest/index.md

@@ -13,7 +13,7 @@ description: "台中 陳小姐｜大樓/新成屋<br>三房兩廳｜24 坪<br>
 tags: [大樓,20-35坪,100萬以上,三房]
 banner_img_text: "「以前我們是大家庭，所以我一直嚮往擁有屬於自己的空間。」 貓咪阿丘的媽媽跟阿嬤－陳小姐（三房兩廳｜24坪）"
 homeowner: "陳小姐"
-owner_img: "/img/title/d9006b81250a4f40bd18c02589e385d0.webp"
+owner_img: ""
 size: "20-35坪"
 house_size: "24坪"
 bed_num: "三房"

content/maincategories/0714/index.md

@@ -0,0 +1,22 @@
+---
+meta_title: "0714"
+meta_description: "0714"
+title: "0714"
+date: 2022-07-14T16:27:02+08:00
+draft: true
+type: "maincategories"
+url: "/maincategories/0714"
+image: "/img/title/1.webp"
+categories: "預算準備"
+description: ""
+col1: "budget_preparation"
+col2: ""
+introduction: "0714"
+question_box_intro: "0714"
+---
+
+
+<div class="container-fluid blog_article p-0">
+
+0714
+

layouts/blog/list.html

@@ -96,7 +96,9 @@
         fetch('http://localhost:9001/api/contents?url=/blog').then(res => res.json()).then(list => {
           contentsData = list;
           console.log('contentsData', contentsData);
-          filterCategory();
+          if (category !== null) {
+            filterCategory();
+          }
         })
       })();
 
@@ -140,11 +142,11 @@
 
       // 搜尋
       $('#blog_search').keyup(delay(function (e) {
-        console.log('Time elapsed!', this.value);
         // 取得輸入框的值
         let inputVal = $('#blog_search').val();
         matchContent = "";
-        contentsData.map(item => {
+        let falseItem = [];
+        contentsData.map((item, index) => {
           // 搜尋特定分類文章
           // if (item.categories) {
           //   if (item.categories.includes(category)) {
@@ -166,6 +168,10 @@
                   </div>
                 </div>`
           } else {
+            falseItem.push(item);
+          }
+
+          if (falseItem.length === contentsData.length) {
             matchContent = `
             <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">

layouts/collection/single.html

@@ -82,27 +82,35 @@
                 </div>
             </div>
             <div class="row px-0 mx-0 mt-3">
+
+                {{ if eq .Params.owner_img "" }}
+                <div class="col-12 pe-0">
+                    <div class="sec02_content_text mt-3 mt-lg-0">
+                        <h2 class="style_house_subtitle"> {{ .Params.collection_name }}</h2>
+                        <p>
+                           {{.Params.collection_description }}
+                        </p>
+                    </div>
+                </div>
+                {{ else }}
                 <div class="col-12 col-lg-5">
                     <img class="img-fluid" src={{ .Params.owner_img }} alt="">
                 </div>
                 <div class="col-12 col-lg-7 pe-0">
                     <div class="sec02_content_text mt-3 mt-lg-0">
                         <h2 class="style_house_subtitle"> {{ .Params.collection_name }}</h2>
-                        <!-- <p>內文NotoJPMedium14級字行距28pt </p> -->
                         <p>
-                            <!-- 都極度熱情，而且紳士般的協助拍攝團隊的黃先生，是個熱情 整個家裡，除了充滿精緻的氛圍，就像每一個家電，都被精心挑
-                選、設計、尺寸、擺放之外，地板、置物櫃更是乾淨得一塵不染， 就像是飯店的客房服務剛離開一樣，在拍攝團隊進行拍攝的過 程，更是熱切的協助我們調整燈光、道具等，黃先生真是一位超
-                貼心紳士暖男呢! -->
-                            {{.Params.collection_description }}
+                           {{.Params.collection_description }}
                         </p>
                     </div>
                 </div>
+
+                {{ end }}
             </div>
         </div>
     </div>
     <hr class="style_house_line">
     <div class="style_house_sec02" style="height: 50px;">
-        <!-- <h1 class="style_house_title">內部圖解｜經過精密計算的生活模式</h1> -->
         <div id="slider-loading" class="d-flex justify-content-center mb-5">
             <div class="spinner-border text-success" role="status" style="color: rgba(128, 143, 76, 1) !important;">
                 <span class="visually-hidden">Loading...</span>

resources/bhouse.js

@@ -0,0 +1,233 @@
+$(".responsive").slick({
+  dots: true,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  autoplay: true,
+  autoplaySpeed: 3000,
+  arrows: false,
+});
+
+// 直式輪播圖動態更改高度
+function changeHeight() {
+  let firstImg = $('.style_house_sec02_slide div:first-child img');
+  let firstImgHeight = firstImg.css('height');
+  $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
+}
+changeHeight();
+$(window).resize(function () {
+  setTimeout(() => {
+    changeHeight();
+  }, 100)
+});
+
+let imgCount = $(".slide_single_img").length;
+let heightImg = [];
+
+window.onload = function() {
+  console.log('onload');
+  $('.slide_single_img').each(function (i,array) { // jquery.each() 循環讀取所有圖片
+    
+    let height = $(this).height();
+    let width = $(this).width();
+    let x = (height / width);
+    console.log('height / width = ', x);
+    if (x >= 1) {
+      if (i===0) {
+        return;
+      }
+      heightImg.push($(this));
+      // 預設高度為 0
+      $(this).css({
+        'height': 0 + 'px',
+        "margin": 'auto',
+      });
+    }
+
+    if (i === imgCount-1) {
+      $('#slider-loading').addClass("slider_loading");
+      $('.style_house_sec02').css("height", "auto");
+      $('.style_house_sec02 .content').css('opacity', '1');
+      
+    }
+  });
+  
+  let heightImgIndex = [];
+  
+  function getAllIndex(arr) {
+    // 篩選符合條件 Index
+    for (i = 0; i < arr.length; i++) {
+      if (arr[i].height === 0)
+        heightImgIndex.push(i);
+    }
+    return heightImgIndex;
+  }
+  let allSlideImg = document.querySelectorAll('.slide_single_img');
+  getAllIndex(allSlideImg);
+  
+  // 取得 slick 當前的 Index
+  $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    for (i = 0; i < heightImgIndex.length; i++) {
+      console.log(heightImgIndex[i]);
+      if (nextSlide == heightImgIndex[i]) {
+        allSlideImg[nextSlide].style.cssText = `
+        height: 500px; 
+        margin: auto;
+      `;
+      } else {
+        allSlideImg[heightImgIndex[i]].style.height = '0px';
+      }
+    }
+  });
+  
+  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+    var height = $(this).height();
+    var width = $(this).width();
+    let x = (height / width);
+    if (x > 1) {
+      $(this).css({
+        'width': 100 + 'px',
+        "margin": 'auto',
+        "padding": "0px",
+      });
+    } else {
+      $(this).css({
+        "margin-top": '30px',
+        "padding": "5px",
+      });
+    }
+  });
+}
+// $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
+//   let height = $(this).height();
+//   let width = $(this).width();
+//   let x = (height / width);
+//   console.log('index', i);
+//   console.log('height / width = ', x);
+//   if (x >= 1) {
+//     console.log('長圖',i);
+//     if (i===0) {
+//       return;
+//     }
+//     heightImg.push($(this));
+//     // 預設高度為 0
+//     $(this).css({
+//       'height': 0 + 'px',
+//       "margin": 'auto',
+//     });
+//   }
+// });
+
+// let heightImgIndex = [];
+
+// function getAllIndex(arr) {
+//   // 篩選符合條件 Index
+//   for (i = 0; i < arr.length; i++) {
+//     if (arr[i].height === 0)
+//       heightImgIndex.push(i);
+//   }
+//   return heightImgIndex;
+// }
+// let allSlideImg = document.querySelectorAll('.slide_single_img');
+// getAllIndex(allSlideImg);
+
+// // 取得 slick 當前的 Index
+// $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+//   for (i = 0; i < heightImgIndex.length; i++) {
+//     console.log(heightImgIndex[i]);
+//     if (nextSlide == heightImgIndex[i]) {
+//       allSlideImg[nextSlide].style.cssText = `
+//       height: 500px; 
+//       margin: auto;
+//     `;
+//     } else {
+//       allSlideImg[heightImgIndex[i]].style.height = '0px';
+//     }
+//   }
+// });
+
+// $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
+//   var height = $(this).height();
+//   var width = $(this).width();
+//   let x = (height / width);
+//   if (x > 1) {
+//     $(this).css({
+//       'width': 100 + 'px',
+//       "margin": 'auto',
+//       "padding": "0px",
+//     });
+//   } else {
+//     $(this).css({
+//       "margin-top": '30px',
+//       "padding": "5px",
+//     });
+//   }
+// });
+
+$('.style_house_sec02 .slider-for').slick({
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  arrows: false,
+  fade: true,
+  asNavFor: '.slider-nav'
+});
+$('.style_house_sec02 .slider-nav').slick({
+  slidesToShow: 5,
+  slidesToScroll: 3,
+  asNavFor: '.slider-for',
+  dots: false,
+  arrows: false,
+  // centerMode: true,
+  focusOnSelect: true
+});
+
+$(document).on("click", ".article__readMore", function (event) {
+  $('.bhouseweb_loc_sec02').css('height', 'auto');
+  $('.article__readMore').hide();
+
+});
+
+$(document).on("click", ".bhouseweb_loc_type>label", function (event) {
+  $(this).siblings().removeClass('select');
+
+  $(this).toggleClass("select");
+
+});
+
+$(".bt_slogan_portfolio").click(function () {
+  $(".bt_slogan_portfolio").fadeOut();
+});
+
+
+$(".bt_slogan").click(function () {
+  $(".bt_slogan_portfolio").fadeIn();
+});
+
+// Navbar Icon
+function changeIcon(e) {
+  const item = document.querySelector('[data-toggle-class]');
+  item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
+}
+
+$('.furniture_design_content .slider-for').slick({
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  arrows: false,
+  fade: true,
+  asNavFor: '.slider-nav'
+});
+$('.furniture_design_content .slider-nav').slick({
+  slidesToShow: 3,
+  slidesToScroll: 1,
+  asNavFor: '.slider-for',
+  focusOnSelect: true
+});
+
+// 外部連結
+let fb_link = `https://www.facebook.com/sharer.php?u=${location.href}`;
+let collection_icon_fb = document.getElementById('collection_icon_fb');
+$("#collection_icon_fb").attr("href",fb_link);
+
+let line_link = `http://line.naver.jp/R/msg/text/?${location.href}`;
+let collection_icon_line = document.getElementById('collection_icon_line');
+
+$("#collection_icon_line").attr("href",line_link);

static/img/blog/line01_mb.svg

@@ -0,0 +1,3 @@
+<svg width="103" height="2" viewBox="0 0 103 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1H101.5" stroke="#78B142" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 5"/>
+</svg>

static/img/blog/line02_mb.svg

@@ -0,0 +1,3 @@
+<svg width="176" height="61" viewBox="0 0 176 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M175 1V17.1368C175 19.8982 172.761 22.1368 170 22.1368H6C3.23858 22.1368 1 24.3753 1 27.1368V60" stroke="#78B142" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 5"/>
+</svg>

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -14,7 +14,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: NSJP-300;
+  font-family: NSJP-300, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 @font-face {
@@ -2739,10 +2739,6 @@ input[type=search]::-webkit-search-cancel-button {
   opacity: 0.8;
 }
 
-.blog-categories .article .article-item:last-child {
-  border: none;
-}
-
 .blog-categories .article .article-item img {
   width: 240px;
   height: auto;
@@ -2752,13 +2748,12 @@ input[type=search]::-webkit-search-cancel-button {
 .blog-categories .nav-link {
   padding: 0;
   margin-bottom: 50px;
-  padding-top: 50px;
+  padding-top: 30px;
   text-align: center;
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 1px;
   color: var(--dark-color);
-  border-top: 1px solid var(--dark-gray);
 }
 
 @media (max-width: 991px) {
@@ -3019,6 +3014,7 @@ input[type=search]::-webkit-search-cancel-button {
      object-fit: contain;
   position: relative;
   z-index: 1;
+  cursor: pointer;
 }
 @media (max-width: 767px) {
   .blog-main .process section img {
@@ -3055,19 +3051,20 @@ input[type=search]::-webkit-search-cancel-button {
   margin-bottom: 10vw;
 }
 .blog-main .process_mb .row .mb_line_01 {
+  background-size: contain;
   background-repeat: no-repeat;
-  background-image: url("/img/blog/mobile_line_01.png");
+  background-image: url("/img/blog/line01_mb.svg");
   position: absolute;
   height: 5px;
-  width: 40vw;
+  width: 66%;
   top: 32%;
-  left: 55%;
+  left: 68%;
   z-index: 10;
 }
 .blog-main .process_mb .row .mb_line_02 {
   background-size: contain;
   background-repeat: no-repeat;
-  background-image: url("/img/blog/mobile_line_02.png");
+  background-image: url("/img/blog/line02_mb.svg");
   position: absolute;
   height: 125px;
   width: 100%;
@@ -3139,11 +3136,23 @@ input[type=search]::-webkit-search-cancel-button {
   left: 15vw;
   top: -10px;
 }
+@media (max-width: 1199px) {
+  .blog-main .article_list .article_item .img_box img:last-child {
+    left: 19vw;
+  }
+}
+@media (max-width: 991px) {
+  .blog-main .article_list .article_item .img_box img:last-child {
+    left: 23vw;
+    top: -25px;
+  }
+}
 @media (max-width: 767px) {
   .blog-main .article_list .article_item .img_box img:last-child {
     position: absolute;
     left: 65vw;
     width: 60px;
+    top: -10px;
   }
 }
 .blog-main .article_list .article_item .mobile_line img {

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -15,7 +15,8 @@
   padding: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  font-family: NSJP-300;
+  font-family: NSJP-300, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+    "Helvetica Neue", sans-serif;
 }
 
 @font-face {
@@ -1090,9 +1091,16 @@ input[type="search"]::-webkit-search-cancel-button {
   width: 12px;
   height: 12px;
   margin-left: 10px;
-  background:
-    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
-    linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
+  background: linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 43%,
+      #fff 45%,
+      #fff 55%,
+      rgba(0, 0, 0, 0) 57%,
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(135deg, transparent 0%, transparent 43%, #fff 45%, #fff 55%, transparent 57%, transparent 100%);
 }
 
 .bhouseweb_loc_search_box ::-webkit-input-placeholder {
@@ -2763,9 +2771,9 @@ input[type="search"]::-webkit-search-cancel-button {
 //   font-weight: bold;
 // }
 
-.blog-categories .article .article-item:last-child {
-  border: none;
-}
+// .blog-categories .article .article-item:last-child {
+//   border: none;
+// }
 
 .blog-categories .article .article-item img {
   width: 240px;
@@ -2776,13 +2784,13 @@ input[type="search"]::-webkit-search-cancel-button {
 .blog-categories .nav-link {
   padding: 0;
   margin-bottom: 50px;
-  padding-top: 50px;
+  padding-top: 30px;
   text-align: center;
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 1px;
   color: var(--dark-color);
-  border-top: 1px solid var(--dark-gray);
+  // border-top: 1px solid var(--dark-gray);
 }
 
 @media (max-width: 991px) {
@@ -3005,6 +3013,7 @@ input[type="search"]::-webkit-search-cancel-button {
         object-fit: contain;
         position: relative;
         z-index: 1;
+        cursor: pointer;
         @media (max-width: 767px) {
           width: auto;
         }
@@ -3042,19 +3051,20 @@ input[type="search"]::-webkit-search-cancel-button {
         margin-bottom: 10vw;
       }
       .mb_line_01 {
+        background-size: contain;
         background-repeat: no-repeat;
-        background-image: url("/img/blog/mobile_line_01.png");
+        background-image: url("/img/blog/line01_mb.svg");
         position: absolute;
         height: 5px;
-        width: 40vw;
+        width: 66%;
         top: 32%;
-        left: 55%;
+        left: 68%;
         z-index: 10;
       }
       .mb_line_02 {
         background-size: contain;
         background-repeat: no-repeat;
-        background-image: url("/img/blog/mobile_line_02.png");
+        background-image: url("/img/blog/line02_mb.svg");
         position: absolute;
         height: 125px;
         width: 100%;
@@ -3110,10 +3120,18 @@ input[type="search"]::-webkit-search-cancel-button {
           position: absolute;
           left: 15vw;
           top: -10px;
+          @media (max-width: 1199px) {
+            left: 19vw;
+          }
+          @media (max-width: 991px) {
+            left: 23vw;
+            top: -25px;
+          }
           @media (max-width: 767px) {
             position: absolute;
             left: 65vw;
             width: 60px;
+            top: -10px;
           }
         }
       }
@@ -3130,7 +3148,8 @@ input[type="search"]::-webkit-search-cancel-button {
         h4 {
           color: #649e2e;
           font-size: 35px;
-          font-family: NSJP-700, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;
+          font-family: NSJP-700, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell,
+            ‘Open Sans’, ‘Helvetica Neue’, sans-serif;
           @media (max-width: 767px) {
             font-size: 26px;
           }

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -240,4 +240,26 @@ $("#collection_icon_line").attr("href", line_link);
 function getCategories(item) {
   // 將分類名稱儲存至 localStorage
   localStorage.setItem('category', item);
-}
+}
+
+// 錨點
+$("*").each(function (index, element) {
+  $(this).click(function (e) {
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    if (target) {
+      //console.log("目標：" + target);
+      //console.log("時間：" + duration);
+      //console.log("位移：" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
+  });
+});