update

content/features/_index.md

@@ -0,0 +1,6 @@
+---
+title: "專題報導"
+description: "專訪、深度報導，帶你認識品牌與 AI 行銷的新趨勢"
+layout: "features"        # 指定用 layouts/features/list.html
+summary: ""
+---

content/features/jared-liang/index.md

@@ -0,0 +1,132 @@
+---
+title: "專訪：Jared Liang｜AI 時代的行銷新戰場"
+date: "2025-09-05T00:00:00+08:00"  # 先給今天較早的時間，避免「未來」
+draft: false                        # 先發佈，確保會輸出
+type: "features"
+# layout: "features"                # 先拿掉（不影響網址；單篇會自動找 layouts/features/single.html）
+summary: ""
+image: "/features/jared-liang/image_1.jpeg"
+tags: ["專訪","AI","行銷"]
+url: "/features/jared-liang/"     # 建議先拿掉，避免和預設路徑衝突
+---
+
+_AI 時代下，品牌與中小企業如何被 AI 收錄與認識？_
+
+在生成式 AI 盛行的今天，消費者獲取資訊的方式正在被重新定義。  
+我們專訪了 **ChoozMo 的 Jared Liang**，一同探討品牌與中小企業，該如何在 AI 的浪潮中被「收錄」、被看見。
+
+　
+
+{{< figure src="image_1.jpeg" alt="Jared 專訪形象照" class="float-right" >}}
+
+{{< box class="quote-accent" >}}
+「讓品牌進入 AI 的知識庫，就像是讓它出現在新的搜尋引擎世界裡。」－Jared
+{{< /box >}}
+
+Jared 提到，這已經不只是傳統行銷的延伸，而是一個新的必爭之地。  
+
+他以 **集仕多 (ChoozMo)** 為例：過去我們會思考怎麼在 Google 搜尋排名靠前，但現在更重要的是，**如何讓 AI 模型在回答時，能夠自然地提及並引用品牌**。  
+
+這意味著，中小企業不能再只依靠傳統廣告，而是要學會和 AI 的知識收錄機制 對話，才能真正被未來的消費者看見；做法其實很簡單：把每個主題改成一問一答，一開始先用一句話重點講清楚；接著列出 2～3 個關鍵重點，並附上來源或數字。整篇用清楚的標題與小標分段，並連到站內與外部可信資料。頁面放上簡短摘要與關鍵字，幫助系統與 AI 更快理解內容。記得固定更新、標上日期，讓讀者放心也提高被採信的機會。最後，整理成容易複製的重點卡或示範段落（附來源與授權說明），讓 AI 在回答相關問題時，能自然引用你並帶出品牌連結。
+
+### 為什麼「被 AI 收錄」等於新一代曝光？
+
+- **使用情境轉移**：使用者越來越習慣直接問 AI，而不是逐頁比對搜尋結果。  
+- **答案型分發**：AI 回覆會彙整重點並「引用可信來源」。能被引用，才有機會被看見。  
+- **內容結構化**：AI 需要清晰的知識節點與上下文連結，勝過單篇長文。
+
+> 重點：**符合 AI 可解析、可引用的內容結構**，是品牌必備能力。
+
+---
+
+## 數據分析的重要性  
+
+ChoozMo 提供各種數據分析工具，能精準判斷「哪些主題最適合被 GPT 收錄」，並幫助品牌決定 **該如何設計介紹內容**，讓資訊更容易被 AI 辨識與學習。  
+
+{{< figure src="image_2.jpg" alt="ChoozMo 系統圖片" >}}
+
+Jared 補充說：  
+> 「數據能讓我們知道市場正在討論什麼，  
+>  同時也能判斷哪些內容缺口值得填補。  
+>  把品牌放進這些缺口，就像是把旗幟插在一個新的領地上。」
+
+**Q：你們怎麼決定要寫什麼？**  
+**Jared：** 我們先看大家「真的在問什麼」。工具會把論壇、社群、客服紀錄、搜尋建議等問題彙整成一份清單，標出熱度與價值。接著挑出品牌最能回答、而市場又缺少好答案的題目，這些就是第一波要做的內容。
+
+**Q：內容要怎麼寫，AI 比較讀得懂？**  
+**Jared：** 一題一頁，開頭先用一句話講重點，下面放 2～3 個關鍵說明與數字，再加一個簡單的示範或表格。標題、小標清楚，彼此有連結；有參考來源就附上，方便被引用。這樣做，AI 會更容易抓到重點，人也看得快。
+
+**Q：怎麼判斷成效？**  
+**Jared：** 我們看三件事：  
+1) **有沒有被提到**——測問相關問題，AI 是否自然提到品牌；  
+2) **有沒有被引用**——AI 回答裡是否引用你的片段或數字；  
+3) **有沒有帶來行動**——從這些頁面進來的人，有沒有留下詢問、訂閱或試用。  
+如果沒有，我們會回頭調整題目、結構或示範。
+
+**Q：可以舉個實際例子嗎？**  
+**Jared：** 例如大家常問「某功能到底適不適合我的店？」我們就做一頁：「先看三件事」的快速檢查表，下面放兩個真實情境與數據範例，最後附上延伸閱讀。這種頁面很容易被引用，因為它直接回答了使用者的疑問。
+
+**ChoozMo 的分析報告會提供：**  
+- **主題熱度**：這題目前討論多不多、值得不值得做。  
+- **常見問句**：同一主題下，使用者最常怎麼問。  
+- **內容缺口**：別人沒回答好的點，你可以補。  
+- **參考來源建議**：可引用的研究或數字，寫文時直接用。
+
+> 「不要追求一次寫百科全書。先把 10 題最常被問到的問題寫好、寫清楚，通常就會看到變化。」－Jared
+
+---
+
+## 被 AI 收錄，等於進入新時代  
+
+在 AI 的知識體系裡被記住，不僅僅是 SEO 的下一步，更是一種「品牌新生態定位」。  
+
+這對中小企業尤其重要，因為他們可以藉由 **正確的主題策略**，快速與大型品牌站上同一個起跑點。  
+
+{{< figure src="image_3.jpg" alt="被 ChatGPT 收錄的 Google 搜尋結果" >}}
+
+被 AI 收錄，其實就是在新的資訊地圖上「佔一個座標」。當使用者問到你的領域，AI 是否會把你當成一個可靠的答案、案例或參考來源。Jared 說，傳統做法是拚關鍵字與廣告曝光；現在更有效的方法，是讓內容本身能被機器與人同時理解：**清楚提問、直接回答、附上可信依據**，並且持續更新。
+
+他把「被看見」拆成三種方式：**被引用、被推薦、被當成例子**。  
+- **被引用**：你提供的說法或數字，被直接帶入 AI 的回覆。  
+- **被推薦**：AI 把你列為可延伸閱讀的來源。  
+- **被當成例子**：你的做法成為示範情境，被拿來說明概念。  
+
+要做到這三點，Jared 建議先建立一小套「一頁一答」的知識庫，每頁聚焦一個問題，用一句話先講重點，再補上 2～3 個關鍵說明與真實案例。標題與小標要清楚直白，像是會被直接問出口的句子；內容裡要固定出現**一致的品牌名稱與簡短定位**（例如「Choozmo－專做 XXX 的數據工具」），讓系統更快把品牌與主題連結起來。
+
+對小型品牌來說，**窄題深挖**尤其關鍵。越是具體、越貼近使用情境的主題，越容易脫穎而出──例如「外送新店如何在 30 天內拿到第一批回頭客」這種題目，就比「餐飲行銷指南」更容易被採用。Jared 也強調要把**第一手素材**做成可引用的段落：訪談片段、實驗結果、操作步驟、前後對比數據，這些都是 AI 衷愛的內容格式。
+
+> 「先把你最擅長、最常被問到的 10 個問題寫好。讓人一看就懂、讓機器一掃就抓到重點，你就已經贏在起跑點。」－Jared
+
+最後，不要忘記用簡單的方式**量測與調整**：固定每週用常見問句測試 AI 的回答，有沒有提到你；觀察從這些答案頁進來的流量與詢問；沒被提到時，回頭檢視題目是否夠明確、內容是否有可引用的段落。當你持續補齊這些「知識座標」，就會在新時代的資訊地圖上，為品牌畫出一條清楚的路徑。
+
+---
+
+## 結語  
+
+AI 正在重塑行銷規則。而 Jared 與 ChoozMo 提供的策略，正是幫助品牌 **在 AI 世界裡被看見的關鍵**。  
+
+專訪最後，Jared 強調：  
+> 「未來的行銷工作，  
+>  不再是單純對人說話，  
+>  而是要同時對 AI 說話。」  
+
+換句話說，好的內容不只要打動讀者，還要能被系統快速讀懂、記住、引用。與其追求一次寫到百科全書，不如建立一個能持續長大的「小型知識庫」：每次解決一個真問題，留下清楚的答案、可驗證的數字、與簡短的示範。這些就像是座標，讓 AI 在回答時能找到你、提到你。
+
+**現在就能做的三件事：**  
+1. 列出你的受眾最常問的 **10 個問題**，每題寫成一頁、先給一句重點。  
+2. 在答案裡放 **2～3 個關鍵說明與數字**，並附上來源連結。  
+3. 每週檢查一次：AI 回答相關問題時，**是否提到你、是否引用你的段落**；若沒有，就回頭調整題目與內容結構。
+
+**衡量成效，看三個指標：**  
+- **被提及**：AI 回覆裡自然提到品牌或產品。  
+- **被引用**：你的關鍵段落、數字、範例被帶入回答。  
+- **帶來行動**：從這些答案頁進來的使用者，有沒有留下詢問、訂閱或試用。
+
+**常見的陷阱要避免：**  
+- 題目太大、內容太空；  
+- 沒有明確結論與數據；  
+- 很久沒更新、沒有標示時間。  
+
+把內容做小、做深、做持續，中小企業同樣能在新一代的資訊地圖上佔有一席之地。Jared 說，最重要的是開始行動：**從第一個問題開始，讓每一篇內容都成為能被引用的答案。**
+
+---

news_templates/layouts/shortcodes/box.html

@@ -0,0 +1 @@
+<div class='{{ .Get "class" }}'>{{ .Inner | markdownify }}</div>

news_templates/static/css/style.css

@@ -244,14 +244,15 @@ body {
 .blog-post.content h4 a:hover {
   color: #fff !important;
 }
-.blog-post.content .back-link {
+
+.back-link {
   color: #000;
   display: block;
   text-align: center;
   text-decoration: none;
   transition: all 0.3s;
 }
-.blog-post.content .back-link:hover {
+.back-link:hover {
   opacity: 0.7;
 }
 

news_templates/static/css/style.scss

@@ -274,17 +274,17 @@ body {
       }
     }
   }
+}
 
-  .back-link {
-    color: #000;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    transition: all 0.3s;
+.back-link {
+  color: #000;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s;
 
-    &:hover {
-      opacity: 0.7;
-    }
+  &:hover {
+    opacity: 0.7;
   }
 }
 

news_templates/static/js/main.js

@@ -30,6 +30,8 @@ window.onscroll = () => {
     }
 };
 
-topBtn.addEventListener('click', () => {
-    document.documentElement.scrollTop = 0;
-}, false);
+if (topBtn) {
+    topBtn.addEventListener('click', () => {
+        document.documentElement.scrollTop = 0;
+    }, false);
+}

news_templates/themes/hugo-bootstrap-5/layouts/partials/head.html

@@ -8,7 +8,7 @@
 <!-- Google Font -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
 
 {{ with .Site.Params.style }}
 <link href="{{ "/css/style" | relURL }}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">

static/css/style.css

@@ -292,14 +292,15 @@ body {
 .blog-post.content h4 a:hover {
   color: #fff !important;
 }
-.blog-post.content .back-link {
+
+.back-link {
   color: #000;
   display: block;
   text-align: center;
   text-decoration: none;
   transition: all 0.3s;
 }
-.blog-post.content .back-link:hover {
+.back-link:hover {
   opacity: 0.7;
 }
 
@@ -541,4 +542,102 @@ body {
   .news-main .bottom-content {
     height: 50vw;
   }
+}
+
+.tags-list .cover-img {
+  height: 230px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.feature-article .float-right {
+  float: right;
+  max-width: 40%;
+  margin: 0 0 1rem 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+.feature-article figure {
+  margin: 2rem 0;
+  text-align: center;
+}
+.feature-article figure img {
+  width: 100%;
+  height: auto;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+}
+.feature-article h1 {
+  font-size: 3.5rem;
+  margin: 3rem auto;
+}
+.feature-article h2 {
+  margin-bottom: 1rem;
+  position: relative;
+  display: inline-block;
+  line-height: 1.2;
+  isolation: isolate;
+}
+.feature-article h2::after {
+  content: "";
+  position: absolute;
+  left: -10px;
+  right: -2px;
+  bottom: -4px;
+  height: 20px;
+  background: rgba(255, 234, 0, 0.4);
+  transform: skewX(-30deg);
+  transform-origin: left bottom;
+  z-index: -1;
+  pointer-events: none;
+}
+.feature-article h3 {
+  margin: 3rem 0 1rem;
+}
+.feature-article hr {
+  margin: 3rem 0;
+}
+.feature-article p {
+  line-height: 1.8;
+  font-size: 1.05rem;
+  color: #222;
+}
+.feature-article em {
+  display: inline-block;
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  background-color: #f8f8f8;
+  border-left: 5px solid var(--sub-color);
+  border: 2px dotted #ccc;
+}
+.feature-article ul {
+  list-style: disc;
+}
+.feature-article ol {
+  list-style: auto;
+}
+.feature-article b,
+.feature-article strong {
+  font-weight: 700;
+}
+.feature-article .quote-accent {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 1rem 0;
+  margin-top: 1rem;
+  font-size: 2rem;
+  font-weight: 600;
+  border-top: 5px solid var(--sub-color);
+}
+.feature-article .quote-accent::before {
+  content: "“";
+  flex: 0 0 auto;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 2.8em;
+  line-height: 0.6;
+  color: var(--sub-color);
+  margin-top: 0.1em;
+}
+.feature-article .quote-accent > p {
+  margin: 0;
 }/*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -329,17 +329,17 @@ body {
       }
     }
   }
+}
 
-  .back-link {
-    color: #000;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    transition: all 0.3s;
+.back-link {
+  color: #000;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s;
 
-    &:hover {
-      opacity: 0.7;
-    }
+  &:hover {
+    opacity: 0.7;
   }
 }
 
@@ -701,4 +701,120 @@ body {
   //     }
   //   }
   // }
+}
+
+.tags-list {
+  .cover-img {
+    height: 230px;
+    object-fit: cover;
+  }
+}
+
+.feature-article {
+  .float-right {
+    float: right;
+    max-width: 40%;
+    margin: 0 0 1rem 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  figure {
+    margin: 2rem 0;
+    text-align: center;
+  }
+
+  figure img {
+    width: 100%;
+    height: auto;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  }
+
+  h1 {
+    font-size: 3.5rem;
+    margin: 3rem auto;
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+    line-height: 1.2;
+    isolation: isolate;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: -10px;
+      right: -2px;
+      bottom: -4px;
+      height: 20px;
+      background: rgba(255, 234, 0, 0.4);
+      transform: skewX(-30deg);
+      transform-origin: left bottom;
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+
+  h3 {
+    margin: 3rem 0 1rem;
+  }
+
+  hr {
+    margin: 3rem 0;
+  }
+
+  p {
+    line-height: 1.8;
+    font-size: 1.05rem;
+    color: #222;
+  }
+
+  em {
+    display: inline-block;
+    margin-bottom: 2rem;
+    padding: .5rem 1.5rem;
+    background-color: #f8f8f8;
+    border-left: 5px solid var(--sub-color);
+    border: 2px dotted #ccc;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  b,
+  strong {
+    font-weight: 700;
+  }
+
+  .quote-accent {
+    display: flex;
+    align-items: flex-start;
+    gap: .5rem;
+    padding: 1rem 0;
+    margin-top: 1rem;
+    font-size: 2rem;
+    font-weight: 600;
+    border-top: 5px solid var(--sub-color);
+
+    &::before {
+      content: "“";
+      flex: 0 0 auto;
+      font-family: Georgia, "Times New Roman", serif;
+      font-size: 2.8em;
+      line-height: .6;
+      color: var(--sub-color);
+      margin-top: .1em;
+    }
+
+    &>p {
+      margin: 0;
+    }
+  }
 }

static/js/main.js

@@ -30,6 +30,8 @@ window.onscroll = () => {
     }
 };
 
-topBtn.addEventListener('click', () => {
-    document.documentElement.scrollTop = 0;
-}, false);
+if (topBtn) {
+    topBtn.addEventListener('click', () => {
+        document.documentElement.scrollTop = 0;
+    }, false);
+}

themes/hugo-bootstrap-5/layouts/_default/taxonomy.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="container my-5">
   <div class="row">
-    <div class="col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 tags-list">
       <div class="row align-items-center">
         {{ range .Paginator.Pages }}
         <div class="col-12">
@@ -33,7 +33,7 @@
       </div>
     </div>
 
-    <div class="col-12 col-lg-4 col-xl-3">
+    <div class="col-12 col-lg-4">
       {{ partial "sidebar.html" . }}
     </div>
   </div>

themes/hugo-bootstrap-5/layouts/features/list.html

@@ -0,0 +1,45 @@
+{{ define "main" }}
+<div class="container my-5">
+  <div class="row">
+    <div class="col-12 col-lg-8 tags-list">
+      <div class="row align-items-center">
+        {{ range .Paginator.Pages }}
+        <div class="col-12">
+          <div class="row">
+            <div class="col-12 col-md-6">
+              <a href="{{ .Permalink }}">
+                <img class="img-fluid cover-img" src="{{ .Params.image | relURL }}" alt="" />
+              </a>
+            </div>
+            <div class="col-12 col-md-6 d-flex">
+              <article class="my-auto">
+                <section class="news-info">
+                  {{ range (.GetTerms "categories") }}
+                  <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+                  {{ end }}
+                  <small>{{ .Date | time.Format ":date_long" }}</small>
+                </section>
+                <h2 class="post-title">
+                  <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+                </h2>
+              </article>
+            </div>
+            <span class="line line mb-2 mb-md-0">
+              <hr>
+            </span>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </div>
+
+    <div class="col-12 col-lg-4">
+      {{ partial "sidebar.html" . }}
+    </div>
+  </div>
+<div class="py-3">
+  {{ template "_internal/pagination.html" . }}
+</div>
+</div>
+
+{{ end }}

themes/hugo-bootstrap-5/layouts/features/single.html

@@ -0,0 +1,27 @@
+{{ define "main" }}
+<article class="container feature-article">
+  <div class="row justify-content-center">
+    <div class="col-8">
+
+      <header class="feature-hero">
+        <h1>{{ .Title }}</h1>
+        {{ with .Params.summary }}<p class="lead">{{ . }}</p>{{ end }}
+      </header>
+
+      <div class="feature-body">
+        {{ .Content }}
+      </div>
+    </div>
+
+    <a href="javascript:;" onclick="historyBack()" class="back-link mb-5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left mb-1"
+        viewBox="0 0 16 16">
+        <path fill-rule="evenodd"
+          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
+      </svg>
+      <span>回到上一頁</span>
+    </a>
+  </div>
+
+</article>
+{{ end }}

themes/hugo-bootstrap-5/layouts/partials/head.html

@@ -20,7 +20,7 @@
 <!-- Google Font -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
 
 {{ with .Site.Params.style }}
 <link href="{{ "/css/style" | relURL }}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">

themes/hugo-bootstrap-5/layouts/partials/header.html

@@ -44,6 +44,9 @@
                 </li>
                 <li class="nav-item">
                     <a href="/tags/esg/" class="nav-link" style="color: white;">ESG新聞</a>
+                </li>
+                 <li class="nav-item">
+                    <a href="/features/" class="nav-link" style="color: white;">專題報導</a>
                 </li>
                 <li class="nav-item">
                     <a href="/free-pr-service/" class="nav-link" style="color: white;">新聞發布服務</a>

themes/hugo-bootstrap-5/layouts/shortcodes/box.html

@@ -0,0 +1 @@
+<div class='{{ .Get "class" }}'>{{ .Inner | markdownify }}</div>