作品集篩選機制

content/規劃作品集/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung"
 image: "/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
 description: "總預算：88.1萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：17坪"
+weight: 
+tags: "大樓,20坪以下,80-99萬,三房"
 ---
 
 三房兩廳 / 17坪

content/規劃作品集/20_taiwanese_ping_slightly_sweet_milk_tea_color_beautiful_house_on_instagram_in_changhua/index.md

@@ -7,7 +7,7 @@ url: "/collection/20_taiwanese_ping_slightly_sweet_milk_tea_color_beautiful_hous
 image: "/img/collection/20_taiwanese_ping_slightly_sweet_milk_tea_color_beautiful_house_on_instagram_in_changhua.webp"
 description: "總預算：69.4萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房一廳<br>坪數：20坪"
 weight: 
-tag: ""
+tags: "大樓,20-35坪,60-79萬,兩房"
 ---
 
 兩房一廳 / 20坪

content/規劃作品集/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung"
 image: "/img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp"
 description: "總預算：111.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：25坪"
+weight: 
+tags: "大樓,20-35坪,100萬以上,三房"
 ---
 
 三房兩廳 / 25坪

content/規劃作品集/a_paradise_in_the_downtown/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/a_paradise_in_the_downtown"
 image: "/img/collection/6bb85ba684ed447a4d82e0da5d93f9e6.webp"
 description: "總預算：54.3萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：35坪"
+weight: 
+tags: "大樓,20-35坪,59萬以下,三房"
 ---
 
 ### **設計主題 | 鬧都中的世外桃源**

content/規劃作品集/boutique_hotel_slightly_drunk_chill_house/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/boutique_hotel_slightly_drunk_chill_house"
 image: "/img/collection/boutique_hotel_slightly_drunk_chill_house_2.webp"
 description: "總預算：130萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：30坪"
+weight: 
+tags: "大樓,20-35坪,100萬以上,三房"
 ---
 
 三房兩廳 / 30坪

content/規劃作品集/canvas_home/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/canvas_home"
 image: "/img/collection/6040957f638be72f7e23469f61e0ced5_1.webp"
 description: "總預算：67.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：兩房兩廳<br>坪數：27坪"
+weight: 
+tags: "透天,20-35坪,60-79萬,兩房"
 ---
 
 ### **設計主題 | 嚮家畫布**

content/規劃作品集/childlike_northern_europe/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/childlike_northern_europe"
 image: "/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp"
 description: "總預算：59.6萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房兩廳<br>坪數：35坪"
+weight: 
+tags: "大樓,20-35坪,60-79萬,兩房"
 ---
 
 ### **設計主題 | 童心北歐**

content/規劃作品集/chunhui_tranquility/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/chunhui_tranquility"
 image: "/img/collection/61abd99c7343c58f7a7f0e9a60a4b8ed.webp"
 description: "總預算：112.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：三房兩廳<br>坪數：36坪"
+weight: 
+tags: "透天,36-50坪,100萬以上,三房"
 ---
 
 ### **設計主題｜春暉謐境**

content/規劃作品集/color_day/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/color_day"
 image: "/img/collection/e3637db7a69a73dc7525abb999cebc07.webp"
 description: "總預算：45.1萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：27坪"
+weight: 
+tags: "大樓,20-35坪,59萬以下,三房"
 ---
 
 ### **設計主題｜Color Day**

content/規劃作品集/concrete_jungle/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/concrete_jungle"
 image: "/img/collection/d5bdfc8910c2b6626f4ff4e5dc796945.webp"
 description: "總預算：52.3萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天"
+weight: 
+tags: "透天,59萬以下"
 ---
 
 ### **設計主題 | 叢林湖畔旁的透天厝**

content/規劃作品集/cozy_house_for_a_family_of_three/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/cozy_house_for_a_family_of_three"
 image: "/img/collection/7694fdffbfc2392a1bb23cf1ae20cff8.webp"
 description: "總預算：57萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房兩廳<br>坪數：17坪"
+weight: 
+tags: "大樓,20坪以下,59萬以下,兩房"
 ---
 
 ### **設計主題 | 一家三口的溫馨宅**

content/規劃作品集/deep_sea_wandering/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/deep_sea_wandering"
 image: "/img/collection/a8e63a9f5c45b883b8343c1762e5bef6.webp"
 description: "總預算：114.9萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：20坪"
+weight: 
+tags: "大樓,20-35坪,100萬以上,三房"
 ---
 
 ### **設計主題｜深海徜徉**

content/規劃作品集/doll_and_drum_set/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/doll_and_drum_set"
 image: "/img/collection/7f6087c94211080bfe2edfb0180891a7.webp"
 description: "總預算：70萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：24坪"
+weight: 
+tags: "大樓,20-35坪,60-79萬,三房"
 ---
 
 ### **設計主題｜公仔與爵士鼓**

content/規劃作品集/dream_places/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/dream_places"
 image: "/img/collection/c96f4cf6b5214435bb57380c24225baf.webp"
 description: "總預算：91.8萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房一廳<br>坪數：23坪"
+weight: 
+tags: "大樓,20-35坪,80-99萬,兩房"
 ---
 
 ### **設計主題｜心之嚮往**

content/規劃作品集/enjoy_life_spacious_house/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/enjoy_life_spacious_house"
 image: "/img/collection/bdf492075d06c9353aa1523bcb9c0837.webp"
 description: "總預算：80.9萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：三房兩廳<br>坪數：32坪"
+weight: 
+tags: "透天,20-35坪,80-99萬,三房"
 ---
 
 ### **設計主題｜享生活寬敞宅**

content/規劃作品集/fancy_balance/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/fancy_balance"
 image: "/img/collection/09d9615f19d41ca754897860c7958800.webp"
 description: "總預算：82.3萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：四房兩廳<br>坪數：56坪"
+weight: 
+tags: "透天,51坪以上,80-99萬,四房"
 ---
 
 ### **設計主題｜繽紛豢養**

content/規劃作品集/fantasy_journey/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/fantasy_journey"
 image: "/img/collection/46c0c37fe8aff39685a3955c32e95a34.webp"
 description: "總預算：165萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：四房兩廳<br>坪數：60坪"
+weight: 
+tags: "大樓,51坪以上,100萬以上,四房"
 ---
 
 ### **設計主題｜奇幻旅程**

content/規劃作品集/gentle_and_pure/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/gentle_and_pure"
 image: "/img/collection/cf7b706e52e74459f931c66c52ac5e20.webp"
 description: "總預算：56.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房兩廳<br>坪數：18坪"
+weight: 
+tags: "大樓,20坪以下,59萬以下,兩房"
 ---
 
 ### **設計主題｜溫柔純良**

content/規劃作品集/gentle_gray_tone/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/gentle_gray_tone"
 image: "/img/collection/9809af6a5478905bd14f0275f2b1460d.webp"
 description: "總預算：43萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：22坪"
+weight: 
+tags: "大樓,20-35坪,59萬以下,三房"
 ---
 
 ### **設計主題｜灰調溫柔**

content/規劃作品集/go_home_and_relax/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/go_home_and_relax"
 image: "/img/collection/aa32f7bcc767333c8f0d587bb0abc372.webp"
 description: "總預算：53萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：兩房一廳<br>坪數：15坪"
+weight: 
+tags: "大樓,20坪以下,59萬以下,兩房"
 ---
 
 ### **設計主題｜回家耍廢**

content/規劃作品集/home_blueprint/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/home_blueprint"
 image: "/img/collection/a8f497420254f51516bb1776f1dcba02.webp"
 description: "總預算：90.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：35坪"
+weight: 
+tags: "大樓,20-35坪,80-99萬,三房"
 ---
 
 ### **設計主題 | 家的藍圖**

content/規劃作品集/house_and_cat/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/house_and_cat"
 image: "/img/collection/6b11c7813dd618710c578db66d2c0478.webp"
 description: "總預算：66.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：35坪"
+weight: 
+tags: "大樓,30-39坪,60-79萬,三房"
 ---
 
 ### **設計主題｜悠居與貓**

content/規劃作品集/immersed_in/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/immersed_in"
 image: "/img/collection/7b41f4f01f9856dac4587cc00a93b562.webp"
 description: "總預算：70萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：30坪"
+weight: 
+tags: "大樓,20-35坪,60-79萬,三房"
 ---
 
 ### **設計主題｜沈浸其中**

content/規劃作品集/industrial_bar_house/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/industrial_bar_house"
 image: "/img/collection/cc0bcaa6118be06a992ef4e3621c15a4.webp"
 description: "總預算：120萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：26.5坪"
+weight: 
+tags: "大樓,20-35坪,100萬以上,三房"
 ---
 
 ### **設計主題｜工業簡約酒吧宅**

content/規劃作品集/jumping_color_and_simplicity/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/jumping_color_and_simplicity"
 image: "/img/collection/eb4334c20107460a87095211fa9fac6f.webp"
 description: "總預算：82.3萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：30坪"
+weight: 
+tags: "大樓,20-35坪,80-99萬,三房"
 ---
 
 ### **設計主題｜跳色簡約**

content/規劃作品集/light_japanese_industrial_style/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/light_japanese_industrial_style"
 image: "/img/collection/c3f3d87bfc353327906075aff458f72c.webp"
 description: "總預算：50.5萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：27坪"
+weight: 
+tags: "大樓,20-35坪,59萬以下,三房"
 ---
 
 ### **設計主題 | 輕日式工業**

content/規劃作品集/mystery_place/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/mystery_place"
 image: "/img/collection/d5a39a52da2d72d56249ac191f3e9bc7.webp"
 description: "總預算：126.5萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：五房三廳<br>坪數：90坪"
+weight: 
+tags: "透天,51坪以上,100萬以上,四房以上"
 ---
 
 ### **設計主題｜桃源秘境**

content/規劃作品集/northern_europe_scene/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/northern_europe_scene"
 image: "/img/collection/389f0c8cc6710716f333161e78fe021f_1.webp"
 description: "總預算：49.2萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：兩房兩廳<br>坪數：20坪"
+weight: 
+tags: "透天,20-29坪,45-59萬,兩房"
 ---
 
 ### **設計主題 | 北歐‧映像**

content/規劃作品集/pursuit_of_life/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/pursuit_of_life"
 image: "/img/collection/e625fed17a467962eb6b5126374b8f89.webp"
 description: "總預算：111.7萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：四房兩廳<br>坪數：56坪"
+weight: 
+tags: "大樓,51坪以上,100萬以上,四房"
 ---
 
 ### **設計主題｜一生追求**

content/規劃作品集/put_on_new_clothes/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/put_on_new_clothes"
 image: "/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp"
 description: "總預算：89.4萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：28坪"
+weight: 
+tags: "大樓,20-35坪,80-99萬,三房"
 ---
 
 ### **設計主題｜披上新衣**

content/規劃作品集/quite_northern_europe/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/quite_northern_europe"
 image: "/img/collection/5c755728f912a4145fb5844d4af53f05.webp"
 description: "總預算：70.1萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：23.5坪"
+weight: 
+tags: "大樓,20-35坪,60-79萬,三房"
 ---
 
 ### **設計主題｜寧靜北歐**

content/規劃作品集/refreshed/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/refreshed"
 image: "/img/collection/e2d47efb4ccbc07e386d54a6da3a62e6.webp"
 description: "總預算：96萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：35坪"
+weight: 
+tags: "大樓,20-35坪,80-99萬,三房"
 ---
 
 ### **設計主題｜心曠神怡**

content/規劃作品集/simple_warm_dream_house/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/simple_warm_dream_house"
 image: "/img/collection/d806b3ac64d5054c0e421b0e1125cf1a.webp"
 description: "總預算：110萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：三房兩廳<br>坪數：50坪"
+weight: 
+tags: "透天,36-50坪,100萬以上,三房"
 ---
 
 ### **設計主題｜黑白簡約的溫暖夢想屋**

content/規劃作品集/sunshine_family/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/sunshine_family"
 image: "/img/collection/42dce7fbc8f4b91c9b8f16cdf0b24fca.webp"
 description: "總預算：78萬<br>(含設計、裝修、系統櫃、家具）<br>房型：透天<br>格局：三房<br>坪數：48坪"
+weight: 
+tags: "透天,36-50坪,60-79萬,三房"
 ---
 
 ### **設計主題｜向陽的你們**

content/規劃作品集/the_growth_house_of_love/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/the_growth_house_of_love"
 image: "/img/collection/50a125ea19c3bdeb9a8bd17533ce993d.webp"
 description: "總預算：58萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：25坪"
+weight: 
+tags: "大樓,20-35坪,59萬以下,三房"
 ---
 
 ### **設計主題｜愛的成長宅**

content/規劃作品集/thet_fourth_power_of_love/index.md

@@ -6,6 +6,8 @@ type: "collection"
 url: "/collection/thet_fourth_power_of_love"
 image: "/img/collection/db978b041a9ea14bc66b68c81e768fa6.webp"
 description: "總預算：73萬<br>(含設計、裝修、系統櫃、家具）<br>房型：大樓<br>格局：三房兩廳<br>坪數：26坪"
+weight: 
+tags: "大樓,20-35坪,60-79萬,三房"
 ---
 
 ### **設計主題｜愛的四次方**

static/js/cz_filter.js

@@ -1,17 +1,17 @@
-// 選擇風格處理
-function change_style() {
-  style = this.value;
+// 選擇屋型處理
+function change_type() {
+  type = this.value;
 
   // 更新畫面資料
-  update_info(style, roomsize, budget);
+  update_info(type, ping, budget, rooms);
 }
 
 // 選擇坪數處理
-function change_roomsize() {
-  roomsize = this.value;
+function change_ping() {
+  ping = this.value;
 
   // 更新畫面資料
-  update_info(style, roomsize, budget);
+  update_info(type, ping, budget, rooms);
 }
 
 // 選擇預算處理
@@ -19,94 +19,162 @@ function change_budget() {
   budget = this.value;
 
   // 更新畫面資料
-  update_info(style, roomsize, budget);
+  update_info(type, ping, budget, rooms);
+}
+
+// 選擇格局處理
+function change_rooms() {
+  rooms = this.value;
+
+  // 更新畫面資料
+  update_info(type, ping, budget, rooms);
 }
 
 // 更新畫面資料
-function update_info(style, roomsize, budget) {
+function update_info(type, ping, budget, room) {
+  console.log(type + ',' + ping + ',' + budget + ',' + room); // test (大樓,全部坪數,全部預算,全部格局)
+
   var items = []; // 作品集資料清單
 
   // 讀取作品集資料(json)
-  fetch('http://127.0.0.1:1313/data/test.json')
+  fetch('http://localhost:5000/api/contents?url=/collection')
     .then(response => response.json())
-    .then(data => {
+    .then(items => {
       console.log('讀取作品集資料(json)....');
-      console.log(data['items']);
 
-      items = data['items'];
-      
-      console.log('載入符合篩選條件(' + style + ',' + roomsize + ',' + budget + ')的作品...........');
-  
       var content = "";
 
+      console.log('載入符合篩選條件(' + type + ',' + ping + ',' + budget + ',' + rooms + ')的作品...........');
+
+      var filter_num = 0; // 篩選條件數量
+      
+      if (!type.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!ping.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!budget.includes("全部")) {
+        filter_num += 1;
+      }
+
+      if (!rooms.includes("全部")) {
+        filter_num += 1;
+      }
+
+      console.log('篩選條件數: ' + filter_num); // test
+
       for(var i = 0; i < items.length; i++) {
-        var style_check = (style == '風格不限') ? true : (style == items[i]['style']);
-        var roomsize_check = (roomsize == '坪數不限') ? true : (roomsize == items[i]['roomsize']);
-        var budget_check = (budget == '預算不限') ? true : (budget == items[i]['budget']);     
-
-        if (style_check && roomsize_check && budget_check) {
-          console.log('作品' + i + '，符合篩選條件...');
-
-          content += ' \
-            <div class="col"> \
-              <div class="card h-100"> \
-                <a href="' + items[i]['url'] + '" target="_blank"> \
-                  <amp-img \
-                    class="card-img-top" \
-                    alt="' + items[i]['title'] + '" \
-                    src="' + items[i]['image'] + '" \
-                    height="533" \
-                    width="800" \
-                    layout="responsive"> \
+        if (items[i]['url'] && items[i]['url'] != '/collection') {
+          var tags = items[i]['tags'].replace('"', ''); // 各作品tag
+          var matched_num = 0; // 符合篩選條件數量
+          
+          if (tags.includes(type)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(ping)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(budget)) {
+            matched_num += 1;
+          }
+
+          if (tags.includes(rooms)) {
+            matched_num += 1;
+          }
+
+          console.log('符合篩選條件數: ' + matched_num); // test
+
+          if (matched_num == 4) {
+            content += ' \
+              <div class="col"> \
+                <div class="card h-100"> \
+                  <a class="link-collection" href="' + items[i]['url'] + '"> \
+                    <amp-img \
+                      alt="' + items[i]['title'] + '" \
+                      src="' + items[i]['image'] + '" \
+                      height="1" \
+                      width="1.4" \
+                      layout="responsive"> \
                     </amp-img> \
-                </a> \
-                <div class="card-body"> \
-                    <a href="' + items[i]['url'] + '" target="_blank"> \
-                        <h3 class="card-title"><b>' + items[i]['title'] + '</b></h3> \
-                    </a> \
-                    <p class="card-text">' + items[i]['description'] + '</p> \
+                  </a> \
+                  <div class="card-body"> \
+                      <a class="link-collection" href="' + items[i]['url'] + '"> \
+                          <div class="title-size"><b>' + items[i]['title'] + '</b></div> \
+                      </a> \
+                      <p class="card-text" style="color:#4D4D4D;">' + items[i]['description'] + '</p> \
+                  </div> \
                 </div> \
-              </div> \
-            </div>';
-        } else {
-          console.log('作品' + i + '，不符合篩選條件...');
+              </div>';
+          }
         }
-
-        console.log(items[i]);
       }
-    
+         
       // 載入符合篩選條件的作品
       var update_info = document.querySelectorAll('.update_info');
 
+      if (content) {
+        // 查無資料畫面
+        console.log('有資料'); // test
+      } else {
+        console.log('無資料'); // test
+
+        content += ' \
+          <div class="card bg-primary text-white text-center"> \
+            <div class="card-body p-5"> \
+              <div class="mb-3"> \
+                <b>找不到符合條件的作品</b> \
+              </div> \
+              <div class="mb-3"> \
+              ' + type + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + ping + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + budget + ' \
+              </div> \
+              <div class="mb-3"> \
+              ' + rooms + ' \
+              </div> \
+              <div> \
+                <a href="/collection" class="btn btn-primary">重新查詢</a> \
+              </div> \
+            </div> \
+          </div>';
+      }
+
       // 更新畫面
       for(var i = 0; i < update_info.length; i++) {
         update_info[i].innerHTML = content;  
       }
   }).catch((error) => {
-    console.log('error');
-    console.log('error',error);
-
     console.error('Error:', error);
   });
 }
 
 // 預設選項值
-var style = "風格不限"
-var roomsize = "坪數不限"
-var budget = "預算不限"
+var type = "全部屋型";
+var ping = "全部坪數";
+var budget = "全部預算";
+var rooms = "全部格局";
 
-// 風格
-var items = document.getElementsByClassName('style'); 
+// 屋型
+var items = document.getElementsByClassName('type'); 
 for(var i = 0; i < items.length; i++) {
-  console.log('選擇風格..........');
-  items[i].addEventListener("change", change_style);
+  console.log('選擇屋型..........');
+  items[i].addEventListener("change", change_type);
 }
 
 // 坪數
-var items = document.getElementsByClassName('roomsize'); 
+var items = document.getElementsByClassName('ping'); 
 for(var i = 0; i < items.length; i++) {
   console.log('選擇坪數..........');
-  items[i].addEventListener("change", change_roomsize);
+  items[i].addEventListener("change", change_ping);
 }
 
 // 預算
@@ -114,4 +182,11 @@ var items = document.getElementsByClassName('budget');
 for(var i = 0; i < items.length; i++) {
   console.log('選擇預算..........');
   items[i].addEventListener("change", change_budget);
+}
+
+// 格局
+var items = document.getElementsByClassName('rooms'); 
+for(var i = 0; i < items.length; i++) {
+  console.log('選擇格局..........');
+  items[i].addEventListener("change", change_rooms);
 }

static/js/cz_filter_2021120301.js

@@ -0,0 +1,117 @@
+// 選擇風格處理
+function change_style() {
+  style = this.value;
+
+  // 更新畫面資料
+  update_info(style, roomsize, budget);
+}
+
+// 選擇坪數處理
+function change_roomsize() {
+  roomsize = this.value;
+
+  // 更新畫面資料
+  update_info(style, roomsize, budget);
+}
+
+// 選擇預算處理
+function change_budget() {
+  budget = this.value;
+
+  // 更新畫面資料
+  update_info(style, roomsize, budget);
+}
+
+// 更新畫面資料
+function update_info(style, roomsize, budget) {
+  var items = []; // 作品集資料清單
+
+  // 讀取作品集資料(json)
+  fetch('http://127.0.0.1:1313/data/test.json')
+    .then(response => response.json())
+    .then(data => {
+      console.log('讀取作品集資料(json)....');
+      console.log(data['items']);
+
+      items = data['items'];
+      
+      console.log('載入符合篩選條件(' + style + ',' + roomsize + ',' + budget + ')的作品...........');
+  
+      var content = "";
+
+      for(var i = 0; i < items.length; i++) {
+        var style_check = (style == '風格不限') ? true : (style == items[i]['style']);
+        var roomsize_check = (roomsize == '坪數不限') ? true : (roomsize == items[i]['roomsize']);
+        var budget_check = (budget == '預算不限') ? true : (budget == items[i]['budget']);     
+
+        if (style_check && roomsize_check && budget_check) {
+          console.log('作品' + i + '，符合篩選條件...');
+
+          content += ' \
+            <div class="col"> \
+              <div class="card h-100"> \
+                <a href="' + items[i]['url'] + '" target="_blank"> \
+                  <amp-img \
+                    class="card-img-top" \
+                    alt="' + items[i]['title'] + '" \
+                    src="' + items[i]['image'] + '" \
+                    height="533" \
+                    width="800" \
+                    layout="responsive"> \
+                    </amp-img> \
+                </a> \
+                <div class="card-body"> \
+                    <a href="' + items[i]['url'] + '" target="_blank"> \
+                        <h3 class="card-title"><b>' + items[i]['title'] + '</b></h3> \
+                    </a> \
+                    <p class="card-text">' + items[i]['description'] + '</p> \
+                </div> \
+              </div> \
+            </div>';
+        } else {
+          console.log('作品' + i + '，不符合篩選條件...');
+        }
+
+        console.log(items[i]);
+      }
+    
+      // 載入符合篩選條件的作品
+      var update_info = document.querySelectorAll('.update_info');
+
+      // 更新畫面
+      for(var i = 0; i < update_info.length; i++) {
+        update_info[i].innerHTML = content;  
+      }
+  }).catch((error) => {
+    console.log('error');
+    console.log('error',error);
+
+    console.error('Error:', error);
+  });
+}
+
+// 預設選項值
+var style = "風格不限"
+var roomsize = "坪數不限"
+var budget = "預算不限"
+
+// 風格
+var items = document.getElementsByClassName('style'); 
+for(var i = 0; i < items.length; i++) {
+  console.log('選擇風格..........');
+  items[i].addEventListener("change", change_style);
+}
+
+// 坪數
+var items = document.getElementsByClassName('roomsize'); 
+for(var i = 0; i < items.length; i++) {
+  console.log('選擇坪數..........');
+  items[i].addEventListener("change", change_roomsize);
+}
+
+// 預算
+var items = document.getElementsByClassName('budget'); 
+for(var i = 0; i < items.length; i++) {
+  console.log('選擇預算..........');
+  items[i].addEventListener("change", change_budget);
+}

static/js/reservation.js

@@ -0,0 +1,17 @@
+console.log('reservation.js'); // test
+
+// 點擊立即預約
+function click_reservation() {
+  console.log('點擊立即預約..........');
+
+  // 更新導頁連結
+  console.log('Before..........'); // test
+  window.location.href('http://www.w3schools.com');
+  console.log('After..........'); // test
+}
+
+// 立即預約
+var items = document.getElementsByClassName('reservation'); 
+for(var i = 0; i < items.length; i++) {
+  items[i].addEventListener("click", click_reservation);
+}

themes/hugo-lamp/layouts/_default/baseof.html

@@ -36,6 +36,8 @@
       </script> 
     </amp-analytics>
 
+    <amp-script layout="container" height="4096" src="/js/reservation.js">
+
     {{ partial "header.html" . }} 
     {{ partial "sidebar.html" . }}
 	</br>
@@ -51,7 +53,7 @@
       </amp-img>
     </a>
 
-    <a href="https://lihi1.com/9tO7F" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="線上預約" data-vars-event-col2="官網右下角預約圈圈">
+    <!-- <a href="https://lihi1.com/9tO7F" data-vars-event="accuhit" data-vars-event-type="9" data-vars-event-col1="線上預約" data-vars-event-col2="官網右下角預約圈圈"> -->
       <amp-img
       class="img-fluid reservation"
       alt="立即預約"
@@ -59,7 +61,7 @@
       height="80"
       width="80">
       </amp-img>
-    </a>
+    <!-- </a> -->
 
     {{ partial "footer.html" . }}
   </body>

themes/hugo-lamp/layouts/collection/list.html

@@ -1,7 +1,6 @@
 {{ define "main" }}
 
-<!-- <amp-script layout="container" height="4096" src="/js/cz_filter.js"> -->
-
+<amp-script layout="container" height="4096" src="/js/cz_filter.js">
 
 <div class="page-wrapper">
     <div class="container mb-5">
@@ -13,209 +12,216 @@
         
         <!-- 手機版 -->
         <div class="d-block d-md-none">
-            <div class="row">
-                <!-- <div class="col-md-3">
-                    <div class="mb-4 list-group">
-                        <div class="list-group-item list-group-item-action active" aria-current="true">
-                            風格
-                        </div>
-                        <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="m_風格不限" name="m_style" value="所有風格" checked/>
-                            <label for="m_風格不限">不限</label>   
-                      
-                            <input class="style ms-1" type="radio" id="m_北歐風" name="m_style"  value="北歐風" />
-                            <label for="m_北歐風">北歐風</label>
-                     
-                            <input class="style ms-1" type="radio" id="m_現代風" name="m_style" value="現代風" />
-                            <label for="m_現代風">現代風</label>
-                     
-                            <input class="style ms-1" type="radio" id="m_日式風" name="m_style"  value="日式風" />
-                            <label for="m_日式風">日式風</label>
-                     
-                            <input class="style ms-1" type="radio" id="m_工業風" name="m_style"  value="工業風" />
-                            <label for="m_工業風">工業風</label>
-                     
-                            <input class="style ms-1" type="radio" id="m_混搭風" name="m_style" value="混搭風" />
-                            <label for="m_混搭風">混搭風</label>
-                        </div>
-                    </div>
-                    <div class="mb-4 list-group">
-                        <div class="list-group-item list-group-item-action active" aria-current="true">
-                            坪數
-                        </div>
-                        <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="m_坪數不限" name="m_roomsize" value="所有坪數" checked/>
-                            <label for="m_坪數不限">不限</label>    
-                        
-                            <input class="roomsize ms-1" type="radio" id="m_10~20坪" name="m_roomsize" value="10~20坪" />
-                            <label for="m_10~20坪">10~20坪</label>    
-                        
-                            <input class="roomsize ms-1" type="radio" id="m_21~30坪" name="m_roomsize" value="21~30坪" />
-                            <label for="m_21~30坪">21~30坪</label>    
-                        
-                            <input class="roomsize ms-1" type="radio" id="m_31~40坪" name="m_roomsize" value="31~40坪" />
-                            <label for="m_31~40坪">31~40坪</label>    
-                        
-                            <input class="roomsize ms-1" type="radio" id="m_41~50坪" name="m_roomsize" value="41~50坪" />
-                            <label for="m_41~50坪">41~50坪</label>    
-                        
-                            <input class="roomsize ms-1" type="radio" id="m_51坪以上" name="m_roomsize" value="51坪以上" />
-                            <label for="m_51坪以上">51坪以上</label>    
-                        </div>
-                    </div>
-                    <div class="list-group">
-                        <div class="list-group-item list-group-item-action active" aria-current="true">
-                            預算
-                        </div>
-                        <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="m_預算不限" name="m_budget" value="所有預算" checked/>
-                            <label for="m_預算不限">不限</label>    
-                       
-                            <input class="budget ms-1" type="radio" id="m_35萬以下" name="m_budget" value="35萬以下" />
-                            <label for="m_35萬以下">35萬以下</label>    
-                        
-                            <input class="budget ms-1" type="radio" id="m_36~50萬" name="m_budget" value="36~50萬" />
-                            <label for="m_36~50萬">36~50萬</label>    
-                      
-                            <input class="budget ms-1" type="radio" id="m_51~70萬" name="m_budget" value="51~70萬" />
-                            <label for="m_51~70萬">51~70萬</label>    
-                        
-                            <input class="budget ms-1" type="radio" id="m_70~99萬" name="m_budget" value="70~99萬" />
-                            <label for="m_70~99萬">70~99萬</label>    
-                        
-                            <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
-                            <label for="m_100萬以上">100萬以上</label>    
-                        </div>
-                    </div>
-                </div> -->
-                <div class="col-md-12">
-                    <div class="row row-cols-1 row-cols-sm-3">
-                        {{ $paginator := .Paginate .Data.Pages }}
-                        {{ range $paginator.Pages }}
-                        <div class="col">                
-                            <div class="card h-100">
-                                <a href="{{ .RelPermalink }}" style="color:#444444;">
-                                    <amp-img
-                                        alt="{{ .Title }}"
-                                        src="{{ .Params.Image | relURL }}"
-                                        height="1"
-                                        width="1.4"
-                                        layout="responsive">
-                                    </amp-img>
+            <div class="row mb-1">
+                <div class="col-2">
+                    類型
+                </div>
+                <div class="col-10">
+                    <input class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked/>
+                    <label for="m_全部類型">全部</label>
+                
+                    <input class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
+                    <label for="m_大樓">大樓</label>
+
+                    <input class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
+                    <label for="m_透天">透天</label>
+                </div>
+            </div>
+            <div class="row mb-1">
+                <div class="col-2">
+                    坪數
+                </div>
+                <div class="col-10">
+                    <input class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
+                    <label for="m_全部坪數">全部</label>    
+                
+                    <input class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
+                    <label for="m_20坪以下">20坪以下</label>    
+                
+                    <input class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
+                    <label for="m_20-35坪">20-35坪</label>    
+                
+                    <input class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
+                    <label for="m_36-50坪">36-50坪</label>    
+                
+                    <input class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
+                    <label for="m_51坪以上">51坪以上</label>
+                </div>
+            </div>
+            <div class="row mb-1">
+                <div class="col-2">
+                    預算
+                </div>
+                <div class="col-10">
+                    <input class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
+                    <label for="m_全部預算">全部</label>    
+                
+                    <input class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
+                    <label for="m_59萬以下">59萬以下</label>    
+                
+                    <input class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
+                    <label for="m_60-79萬">60-79萬</label>    
+                
+                    <input class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
+                    <label for="m_80-99萬">80-99萬</label>    
+                
+                    <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
+                    <label for="m_100萬以上">100萬以上</label>
+                </div>
+            </div>
+            <div class="row mb-1">
+                <div class="col-2">
+                    格局
+                </div>
+                <div class="col-10">
+                    <input class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
+                    <label for="m_全部格局">全部</label>    
+                
+                    <input class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
+                    <label for="m_兩房">兩房</label>    
+                
+                    <input class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
+                    <label for="m_三房">三房</label>    
+                
+                    <input class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
+                    <label for="m_四房">四房</label>    
+                
+                    <input class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
+                    <label for="m_四房以上">四房以上</label>
+                </div>
+            </div>
+            <div class="update_div col-md-12">
+                <div class="update_info row row-cols-1 row-cols-sm-3">
+                    {{ $paginator := .Paginate .Data.Pages }}
+                    {{ range $paginator.Pages }}
+                    <div class="col">                
+                        <div class="card h-100">
+                            <a class="link-collection" href="{{ .RelPermalink }}">
+                                <amp-img
+                                    alt="{{ .Title }}"
+                                    src="{{ .Params.Image | relURL }}"
+                                    height="1"
+                                    width="1.4"
+                                    layout="responsive">
+                                </amp-img>
+                            </a>
+                            <div class="card-body">
+                                <a class="link-collection" href="{{ .RelPermalink }}">
+                                    <div class="title-size"><b>{{ .Title }}</b></div>
                                 </a>
-                                <div class="card-body">
-                                    <a href="{{ .RelPermalink }}" style="color:#444444;">
-                                        <div class="title-size"><b>{{ .Title }}</b></div>
-                                    </a>
-                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
-                                </div>
+                                <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
                             </div>
                         </div>
-                        {{ end }}
                     </div>
+                    {{ end }}
                 </div>
             </div>
         </div>
         <!-- 電腦版 -->
         <div class="d-none d-md-block">
             <div class="row">
-                <!-- <div class="col-md-3">
+                <div class="col-md-3">
                     <div class="mb-4 list-group">
                         <div class="list-group-item list-group-item-action active" aria-current="true">
-                            風格
+                            類型
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="風格不限" name="style" value="風格不限" checked/>
-                            <label for="風格不限">不限</label>
+                            <input class="type ms-1" type="radio" id="全部類型" name="type" value="全部類型" checked/>
+                            <label for="全部類型">全部</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="北歐風" name="style" value="北歐風" />
-                            <label for="北歐風">北歐風</label>
-                        </div>                                                    
+                            <input class="type ms-1" type="radio" id="大樓" name="type" value="大樓" />
+                            <label for="大樓">大樓</label>
+                        </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="現代風" name="style" value="現代風" />
-                            <label for="現代風">現代風</label>
+                            <input class="type ms-1" type="radio" id="透天" name="type" value="透天" />
+                            <label for="透天">透天</label>
+                        </div>
+                    </div>
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            坪數
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="日式風" name="style"  value="日式風"/>
-                            <label for="日式風">日式風</label>
+                            <input class="ping ms-1" type="radio" id="全部坪數" name="ping" value="全部坪數" checked/>
+                            <label for="全部坪數">全部</label>    
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="工業風" name="style"  value="工業風"/>
-                            <label for="工業風">工業風</label>
+                            <input class="ping ms-1" type="radio" id="20坪以下" name="ping" value="20坪以下" />
+                            <label for="20坪以下">20坪以下</label>    
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="style ms-1" type="radio" id="混搭風" name="style" value="混搭風"/>
-                            <label for="混搭風">混搭風</label>
+                            <input class="ping ms-1" type="radio" id="20-35坪" name="ping" value="20-35坪" />
+                            <label for="20-35坪">20-35坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="36-50坪" name="ping" value="36-50坪" />
+                            <label for="36-50坪">36-50坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="51坪以上" name="ping" value="51坪以上" />
+                            <label for="51坪以上">51坪以上</label>    
                         </div>
                     </div>
                     <div class="mb-4 list-group">
                         <div class="list-group-item list-group-item-action active" aria-current="true">
-                            坪數
-                        </div>
-                        <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="坪數不限" name="roomsize" value="坪數不限" checked/>
-                            <label for="坪數不限">不限</label>    
+                            預算
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="10~20坪" name="roomsize" value="10~20坪" />
-                            <label for="10~20坪">10~20坪</label>    
+                            <input class="budget ms-1" type="radio" id="全部預算" name="budget" value="全部預算" checked/>
+                            <label for="全部預算">全部</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="21~30坪" name="roomsize" value="21~30坪" />
-                            <label for="21~30坪">21~30坪</label>    
+                            <input class="budget ms-1" type="radio" id="59萬以下" name="budget" value="59萬以下" />
+                            <label for="59萬以下">59萬以下</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="31~40坪" name="roomsize" value="31~40坪" />
-                            <label for="31~40坪">31~40坪</label>    
+                            <input class="budget ms-1" type="radio" id="60-79萬" name="budget" value="60-79萬" />
+                            <label for="60-79萬">60-79萬</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="41~50坪" name="roomsize" value="41~50坪" />
-                            <label for="41~50坪">41~50坪</label>    
+                            <input class="budget ms-1" type="radio" id="80-99萬" name="budget" value="80-99萬" />
+                            <label for="80-99萬">80-99萬</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="roomsize ms-1" type="radio" id="51坪以上" name="roomsize" value="51坪以上" />
-                            <label for="51坪以上">51坪以上</label>    
+                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
+                            <label for="100萬以上">100萬以上</label>
                         </div>
                     </div>
                     <div class="list-group">
                         <div class="list-group-item list-group-item-action active" aria-current="true">
-                            預算
+                            格局
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="預算不限" name="budget" value="預算不限" checked/>
-                            <label for="預算不限">不限</label>    
+                            <input class="rooms ms-1" type="radio" id="全部格局" name="rooms" value="全部格局" checked/>
+                            <label for="全部格局">全部</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="35萬以下" name="budget" value="35萬以下" />
-                            <label for="35萬以下">35萬以下</label>    
+                            <input class="rooms ms-1" type="radio" id="兩房" name="rooms" value="兩房" />
+                            <label for="兩房">兩房</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="36~50萬" name="budget" value="36~50萬" />
-                            <label for="36~50萬">36~50萬</label>    
+                            <input class="rooms ms-1" type="radio" id="三房" name="rooms" value="三房" />
+                            <label for="三房">三房</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="51~70萬" name="budget" value="51~70萬" />
-                            <label for="51~70萬">51~70萬</label>    
+                            <input class="rooms ms-1" type="radio" id="四房" name="rooms" value="四房" />
+                            <label for="四房">四房</label>
                         </div>
                         <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="70~99萬" name="budget" value="70~99萬" />
-                            <label for="70~99萬">70~99萬</label>    
-                        </div>
-                        <div class="list-group-item list-group-item-action">
-                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
-                            <label for="100萬以上">100萬以上</label>    
+                            <input class="rooms ms-1" type="radio" id="四房以上" name="rooms" value="四房以上" />
+                            <label for="四房以上">四房以上</label>
                         </div>
                     </div>
-                </div> -->
-                <div class="col-md-12">
+                </div>
+                <div class="col-md-9">
                     <!-- 更新內容區塊 -->
                     <div class="update_info row row-cols-1 row-cols-sm-3">
                         {{ $paginator := .Paginate .Data.Pages }}
                         {{ range $paginator.Pages }}
                         <div class="col">                
                             <div class="card h-100">
-                                <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                <a class="link-collection" href="{{ .RelPermalink }}">
                                     <amp-img
                                         alt="{{ .Title }}"
                                         src="{{ .Params.Image | relURL }}"
@@ -225,7 +231,7 @@
                                     </amp-img>
                                 </a>
                                 <div class="card-body">
-                                    <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                    <a class="link-collection" href="{{ .RelPermalink }}">
                                         <div class="title-size"><b>{{ .Title }}</b></div>
                                     </a>
                                     <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
@@ -237,8 +243,6 @@
                 </div>
             </div>
         </div>
-
-
     </div>
 </div>
 </amp-script>

themes/hugo-lamp/layouts/collection/list_2021120301.html

@@ -0,0 +1,246 @@
+{{ define "main" }}
+
+<!-- <amp-script layout="container" height="4096" src="/js/cz_filter.js"> -->
+
+
+<div class="page-wrapper">
+    <div class="container mb-5">
+        <section class="section15" style="padding-top:60px;">
+            <div class="text-center mb-4">
+                <div class="title"><b>{{ .Title }}</b></div>
+            </div>
+        </section>
+        
+        <!-- 手機版 -->
+        <div class="d-block d-md-none">
+            <div class="row">
+                <!-- <div class="col-md-3">
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            風格
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="m_風格不限" name="m_style" value="所有風格" checked/>
+                            <label for="m_風格不限">不限</label>   
+                      
+                            <input class="style ms-1" type="radio" id="m_北歐風" name="m_style"  value="北歐風" />
+                            <label for="m_北歐風">北歐風</label>
+                     
+                            <input class="style ms-1" type="radio" id="m_現代風" name="m_style" value="現代風" />
+                            <label for="m_現代風">現代風</label>
+                     
+                            <input class="style ms-1" type="radio" id="m_日式風" name="m_style"  value="日式風" />
+                            <label for="m_日式風">日式風</label>
+                     
+                            <input class="style ms-1" type="radio" id="m_工業風" name="m_style"  value="工業風" />
+                            <label for="m_工業風">工業風</label>
+                     
+                            <input class="style ms-1" type="radio" id="m_混搭風" name="m_style" value="混搭風" />
+                            <label for="m_混搭風">混搭風</label>
+                        </div>
+                    </div>
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            坪數
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="m_坪數不限" name="m_roomsize" value="所有坪數" checked/>
+                            <label for="m_坪數不限">不限</label>    
+                        
+                            <input class="roomsize ms-1" type="radio" id="m_10~20坪" name="m_roomsize" value="10~20坪" />
+                            <label for="m_10~20坪">10~20坪</label>    
+                        
+                            <input class="roomsize ms-1" type="radio" id="m_21~30坪" name="m_roomsize" value="21~30坪" />
+                            <label for="m_21~30坪">21~30坪</label>    
+                        
+                            <input class="roomsize ms-1" type="radio" id="m_31~40坪" name="m_roomsize" value="31~40坪" />
+                            <label for="m_31~40坪">31~40坪</label>    
+                        
+                            <input class="roomsize ms-1" type="radio" id="m_41~50坪" name="m_roomsize" value="41~50坪" />
+                            <label for="m_41~50坪">41~50坪</label>    
+                        
+                            <input class="roomsize ms-1" type="radio" id="m_51坪以上" name="m_roomsize" value="51坪以上" />
+                            <label for="m_51坪以上">51坪以上</label>    
+                        </div>
+                    </div>
+                    <div class="list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            預算
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="m_預算不限" name="m_budget" value="所有預算" checked/>
+                            <label for="m_預算不限">不限</label>    
+                       
+                            <input class="budget ms-1" type="radio" id="m_35萬以下" name="m_budget" value="35萬以下" />
+                            <label for="m_35萬以下">35萬以下</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_36~50萬" name="m_budget" value="36~50萬" />
+                            <label for="m_36~50萬">36~50萬</label>    
+                      
+                            <input class="budget ms-1" type="radio" id="m_51~70萬" name="m_budget" value="51~70萬" />
+                            <label for="m_51~70萬">51~70萬</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_70~99萬" name="m_budget" value="70~99萬" />
+                            <label for="m_70~99萬">70~99萬</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
+                            <label for="m_100萬以上">100萬以上</label>    
+                        </div>
+                    </div>
+                </div> -->
+                <div class="col-md-12">
+                    <div class="row row-cols-1 row-cols-sm-3">
+                        {{ $paginator := .Paginate .Data.Pages }}
+                        {{ range $paginator.Pages }}
+                        <div class="col">                
+                            <div class="card h-100">
+                                <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                    <amp-img
+                                        alt="{{ .Title }}"
+                                        src="{{ .Params.Image | relURL }}"
+                                        height="1"
+                                        width="1.4"
+                                        layout="responsive">
+                                    </amp-img>
+                                </a>
+                                <div class="card-body">
+                                    <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                        <div class="title-size"><b>{{ .Title }}</b></div>
+                                    </a>
+                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 電腦版 -->
+        <div class="d-none d-md-block">
+            <div class="row">
+                <!-- <div class="col-md-3">
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            風格
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="風格不限" name="style" value="風格不限" checked/>
+                            <label for="風格不限">不限</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="北歐風" name="style" value="北歐風" />
+                            <label for="北歐風">北歐風</label>
+                        </div>                                                    
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="現代風" name="style" value="現代風" />
+                            <label for="現代風">現代風</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="日式風" name="style"  value="日式風"/>
+                            <label for="日式風">日式風</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="工業風" name="style"  value="工業風"/>
+                            <label for="工業風">工業風</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="style ms-1" type="radio" id="混搭風" name="style" value="混搭風"/>
+                            <label for="混搭風">混搭風</label>
+                        </div>
+                    </div>
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            坪數
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="坪數不限" name="roomsize" value="坪數不限" checked/>
+                            <label for="坪數不限">不限</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="10~20坪" name="roomsize" value="10~20坪" />
+                            <label for="10~20坪">10~20坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="21~30坪" name="roomsize" value="21~30坪" />
+                            <label for="21~30坪">21~30坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="31~40坪" name="roomsize" value="31~40坪" />
+                            <label for="31~40坪">31~40坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="41~50坪" name="roomsize" value="41~50坪" />
+                            <label for="41~50坪">41~50坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="roomsize ms-1" type="radio" id="51坪以上" name="roomsize" value="51坪以上" />
+                            <label for="51坪以上">51坪以上</label>    
+                        </div>
+                    </div>
+                    <div class="list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            預算
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="預算不限" name="budget" value="預算不限" checked/>
+                            <label for="預算不限">不限</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="35萬以下" name="budget" value="35萬以下" />
+                            <label for="35萬以下">35萬以下</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="36~50萬" name="budget" value="36~50萬" />
+                            <label for="36~50萬">36~50萬</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="51~70萬" name="budget" value="51~70萬" />
+                            <label for="51~70萬">51~70萬</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="70~99萬" name="budget" value="70~99萬" />
+                            <label for="70~99萬">70~99萬</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
+                            <label for="100萬以上">100萬以上</label>    
+                        </div>
+                    </div>
+                </div> -->
+                <div class="col-md-12">
+                    <!-- 更新內容區塊 -->
+                    <div class="update_info row row-cols-1 row-cols-sm-3">
+                        {{ $paginator := .Paginate .Data.Pages }}
+                        {{ range $paginator.Pages }}
+                        <div class="col">                
+                            <div class="card h-100">
+                                <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                    <amp-img
+                                        alt="{{ .Title }}"
+                                        src="{{ .Params.Image | relURL }}"
+                                        height="1"
+                                        width="1.4"
+                                        layout="responsive">
+                                    </amp-img>
+                                </a>
+                                <div class="card-body">
+                                    <a href="{{ .RelPermalink }}" style="color:#444444;">
+                                        <div class="title-size"><b>{{ .Title }}</b></div>
+                                    </a>
+                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</div>
+</amp-script>
+
+{{ end }}

themes/hugo-lamp/layouts/collection/list_2021120601.html

@@ -0,0 +1,254 @@
+{{ define "main" }}
+
+<amp-script layout="container" height="4096" src="/js/cz_filter.js">
+
+<div class="page-wrapper">
+    <div class="container mb-5">
+        <section class="section15" style="padding-top:60px;">
+            <div class="text-center mb-4">
+                <div class="title"><b>{{ .Title }}</b></div>
+            </div>
+        </section>
+        
+        <!-- 手機版 -->
+        <div class="d-block d-md-none">
+            <div class="row">
+                <div class="col-md-3">
+                    <div class="mb-3 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            屋型
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="type ms-1" type="radio" id="m_全部屋型" name="m_type" value="全部屋型" checked/>
+                            <label for="m_全部屋型">全部</label>   
+                      
+                            <input class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
+                            <label for="m_透天">透天</label>
+                     
+                            <input class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
+                            <label for="m_大樓">大樓</label>
+                        </div>
+                    </div>
+                    <div class="mb-3 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            坪數
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
+                            <label for="m_全部坪數">全部</label>    
+                        
+                            <input class="ping ms-1" type="radio" id="m_19坪以下" name="m_ping" value="19坪以下" />
+                            <label for="m_19坪以下">19坪以下</label>    
+                        
+                            <input class="ping ms-1" type="radio" id="m_20-29坪" name="m_ping" value="20-29坪" />
+                            <label for="m_20-29坪">20-29坪</label>    
+                        
+                            <input class="ping ms-1" type="radio" id="m_30-39坪" name="m_ping" value="30-39坪" />
+                            <label for="m_30-39坪">30-39坪</label>    
+                        
+                            <input class="ping ms-1" type="radio" id="m_40坪以上" name="m_ping" value="40坪以上" />
+                            <label for="m_40坪以上">40坪以上</label>
+                        </div>
+                    </div>
+                    <div class="mb-3 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            預算
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
+                            <label for="m_全部預算">全部</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_45-59萬" name="m_budget" value="45-59萬" />
+                            <label for="m_45-59萬">45-59萬</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
+                            <label for="m_60-79萬">60-79萬</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
+                            <label for="m_80-99萬">80-99萬</label>    
+                        
+                            <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
+                            <label for="m_100萬以上">100萬以上</label>
+                        </div>
+                    </div>
+                    <div class="list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            格局
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
+                            <label for="m_全部格局">全部</label>    
+                       
+                            <input class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
+                            <label for="m_兩房">兩房</label>    
+                        
+                            <input class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
+                            <label for="m_三房">三房</label>    
+                      
+                            <input class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
+                            <label for="m_四房">四房</label>    
+                        
+                            <input class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
+                            <label for="m_四房以上">四房以上</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="update_info row row-cols-1 row-cols-sm-3">
+                        {{ $paginator := .Paginate .Data.Pages }}
+                        {{ range $paginator.Pages }}
+                        <div class="col">                
+                            <div class="card h-100">
+                                <a class="link-collection" href="{{ .RelPermalink }}">
+                                    <amp-img
+                                        alt="{{ .Title }}"
+                                        src="{{ .Params.Image | relURL }}"
+                                        height="1"
+                                        width="1.4"
+                                        layout="responsive">
+                                    </amp-img>
+                                </a>
+                                <div class="card-body">
+                                    <a class="link-collection" href="{{ .RelPermalink }}">
+                                        <div class="title-size"><b>{{ .Title }}</b></div>
+                                    </a>
+                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 電腦版 -->
+        <div class="d-none d-md-block">
+            <div class="row">
+                <div class="col-md-3">
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            屋型
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="type ms-1" type="radio" id="全部屋型" name="type" value="全部屋型" checked/>
+                            <label for="全部屋型">全部</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="type ms-1" type="radio" id="透天" name="type" value="透天" />
+                            <label for="透天">透天</label>
+                        </div>                                                    
+                        <div class="list-group-item list-group-item-action">
+                            <input class="type ms-1" type="radio" id="大樓" name="type" value="大樓" />
+                            <label for="大樓">大樓</label>
+                        </div>
+                    </div>
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            坪數
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="全部坪數" name="ping" value="全部坪數" checked/>
+                            <label for="全部坪數">全部</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="19坪以下" name="ping" value="19坪以下" />
+                            <label for="19坪以下">19坪以下</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="20-29坪" name="ping" value="20-29坪" />
+                            <label for="20-29坪">20-29坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="30-39坪" name="ping" value="30-39坪" />
+                            <label for="30-39坪">30-39坪</label>    
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="ping ms-1" type="radio" id="40坪以上" name="ping" value="40坪以上" />
+                            <label for="40坪以上">40坪以上</label>    
+                        </div>
+                    </div>
+                    <div class="mb-4 list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            預算
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="全部預算" name="budget" value="全部預算" checked/>
+                            <label for="全部預算">全部</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="45-59萬" name="budget" value="45-59萬" />
+                            <label for="45-59萬">45-59萬</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="60-79萬" name="budget" value="60-79萬" />
+                            <label for="60-79萬">60-79萬</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="80-99萬" name="budget" value="80-99萬" />
+                            <label for="80-99萬">80-99萬</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
+                            <label for="100萬以上">100萬以上</label>
+                        </div>
+                    </div>
+                    <div class="list-group">
+                        <div class="list-group-item list-group-item-action active" aria-current="true">
+                            格局
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="全部格局" name="rooms" value="全部格局" checked/>
+                            <label for="全部格局">全部</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="兩房" name="rooms" value="兩房" />
+                            <label for="兩房">兩房</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="三房" name="rooms" value="三房" />
+                            <label for="三房">三房</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="四房" name="rooms" value="四房" />
+                            <label for="四房">四房</label>
+                        </div>
+                        <div class="list-group-item list-group-item-action">
+                            <input class="rooms ms-1" type="radio" id="四房以上" name="rooms" value="四房以上" />
+                            <label for="四房以上">四房以上</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9">
+                    <!-- 更新內容區塊 -->
+                    <div class="update_info row row-cols-1 row-cols-sm-3">
+                        {{ $paginator := .Paginate .Data.Pages }}
+                        {{ range $paginator.Pages }}
+                        <div class="col">                
+                            <div class="card h-100">
+                                <a class="link-collection" href="{{ .RelPermalink }}">
+                                    <amp-img
+                                        alt="{{ .Title }}"
+                                        src="{{ .Params.Image | relURL }}"
+                                        height="1"
+                                        width="1.4"
+                                        layout="responsive">
+                                    </amp-img>
+                                </a>
+                                <div class="card-body">
+                                    <a class="link-collection" href="{{ .RelPermalink }}">
+                                        <div class="title-size"><b>{{ .Title }}</b></div>
+                                    </a>
+                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</amp-script>
+
+{{ end }}

themes/hugo-lamp/static/css/chuz.css

@@ -29,7 +29,7 @@
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --font-family-sans-serif: "Roboto Condensed", sans-serif;
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
 ;
 }
 
@@ -1835,9 +1835,9 @@ nav {
   margin: 0;
   padding: 0;
   background-color: #FFFFFF;
-  /* Since we'll have the "ul li" "float:left"
+  /* Since we'll have the "ul li" "float:left"
 	* we need to add a clear after the container. */
-  /* Removing padding, margin and "list-style" from the "ul",
+  /* Removing padding, margin and "list-style" from the "ul",
 	* and adding "position:reltive" */
   /* Styling the links */
 }
@@ -1854,7 +1854,7 @@ nav ul {
   margin: 0;
   list-style: none;
   position: relative;
-  /* Hide Dropdowns by Default
+  /* Hide Dropdowns by Default
 		* and giving it a position of absolute */
 }
 
@@ -1876,9 +1876,9 @@ nav ul ul {
   /* top: 60px;  */
   top: 50px;
   /* Fisrt Tier Dropdown */
-  /* Second, Third and more Tiers	
-			* We move the 2nd and 3rd etc tier dropdowns to the left
-			* by the amount of the width of the first tier.
+  /* Second, Third and more Tiers	
+			* We move the 2nd and 3rd etc tier dropdowns to the left
+			* by the amount of the width of the first tier.
 			*/
 }
 
@@ -1920,7 +1920,7 @@ li > a:only-child:after {
   content: '';
 }
 
-/* Media Queries
+/* Media Queries
 --------------------------------------------- */
 @media all and (max-width: 768px) {
   nav {
@@ -2980,6 +2980,37 @@ amp-accordion div .start {
   border-radius: 20px;
 }
 
+.btn-primary {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
+}
+.btn-check:focus + .btn-primary, .btn-primary:focus {
+  color: #fff;
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
+}
+.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #0a58ca;
+  border-color: #0a53be;
+}
+.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
+}
+.btn-primary:disabled, .btn-primary.disabled {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+
 .btn-outline-white {
   color: #fff;
   border-color: #fff;
@@ -3586,4 +3617,8 @@ amp-accordion div .start {
   right: 0;
   bottom: 0;
 }
+
+.link-collection {
+  color: #444444;
+}
 /*# sourceMappingURL=chuz.css.map */

themes/hugo-lamp/static/css/chuz.scss

@@ -1987,4 +1987,5 @@ input[type="radio"][class="style"]:checked + label {
 @import 'templates/_common.scss';
 @import 'templates/_background-image.scss';
 @import 'templates/_page-title.scss';
-@import 'templates/_home.scss';
+@import 'templates/_home.scss';
+@import 'templates/_collection.scss';

themes/hugo-lamp/static/css/templates/_collection.scss

@@ -0,0 +1,3 @@
+.link-collection {
+  color: #444444;
+}