update

content/features/jared-liang/index.md

@@ -8,11 +8,12 @@ image: "/features/jared-liang/image_1.jpeg"
 tags: ["AI", "行銷", "專題"]
 ---
 
+<!--
 在生成式 AI 帶來巨大變化的此刻，品牌如何在資訊洪流中被看見，成為中小企業迫切需要思考的問題。搜尋引擎優化、廣告投放與社群經營曾是行銷的三大支柱，但隨著 ChatGPT、Gemini 等工具普及，使用者不再逐頁瀏覽搜尋結果，而是直接向 AI 提問。這樣的使用習慣，正悄悄重塑行銷規則。
 
 我們專訪了 ChoozMo 創辦人 Jared Liang。多年來，他深耕數位行銷領域，觀察到產業正面臨一場根本性的轉變。他直言，未來品牌的能見度將不再只是比拼廣告預算，而是取決於 AI 是否願意「引用」與「記住」你的內容。
 
-{{< figure src="image_1.jpeg" alt="Jared Liang" class="float-right" >}}
+{{< figure src="image_1.jpeg" alt="Jared Liang" class="float-left" >}}
 
 ### 從 SEO 到 AI 收錄
 
@@ -28,9 +29,37 @@ Jared 回顧過去的行銷策略，強調搜尋引擎曾經是品牌曝光的
 
 他舉例說明，與其撰寫一篇籠統的餐飲行銷指南，不如直接回應業者常見的具體問題，例如「新開的外送餐廳要如何在三十天內獲得第一批回頭客」。這樣的內容不僅讓讀者快速找到答案，也更有機會被 AI 引用作為範例。
 
-ChoozMo 在這方面扮演了輔助角色。Jared 解釋，他們的系統會蒐集來自論壇、社群平台與客服紀錄的真實問題，並分析哪些議題討論熱度最高，哪些領域仍缺乏足夠的好答案。這些資訊能幫助品牌挑選切入點，避免投入在無關緊要的內容上。
+ChoozMo 在這方面扮演了輔助角色。Jared 解釋，他們的系統會蒐集來自論壇、社群平台與客服紀錄的真實問題，並分析哪些議題討論熱度最高，哪些領域仍缺乏足夠的好答案。這些資訊能幫助品牌挑選切入點，避免投入在無關緊要的內容上。 -->
+
+{{< threecol >}}
+:::left
+![Jared Liang](image_1.jpeg)
 
-{{< figure src="image_2.jpg" alt="ChoozMo 系統介面" >}}
+:::middle
+在生成式 AI 帶來巨大變化的此刻，品牌如何在資訊洪流中被看見，成為中小企業迫切需要思考的問題。搜尋引擎優化、廣告投放與社群經營曾是行銷的三大支柱，但隨著 ChatGPT、Gemini 等工具普及，使用者不再逐頁瀏覽搜尋結果，而是直接向 AI 提問。這樣的使用習慣，正悄悄重塑行銷規則。
+
+我們專訪了 ChoozMo 創辦人 Jared Liang。多年來，他深耕數位行銷領域，觀察到產業正面臨一場根本性的轉變。他直言，未來品牌的能見度將不再只是比拼廣告預算，而是取決於 AI 是否願意「引用」與「記住」你的內容。
+
+:::right
+
+### 從 SEO 到 AI 收錄
+
+Jared 回顧過去的行銷策略，強調搜尋引擎曾經是品牌曝光的唯一舞台。只要能在 Google 排名靠前，就有機會吸引用戶點擊。然而生成式 AI 的崛起，讓這種規則失效。AI 的回覆往往只有一段文字，整合自少數來源，能否被選中才是關鍵。
+
+「讓品牌進入 AI 的知識庫，就像是讓它出現在新的搜尋引擎世界裡，」他說。這也是他最關心的議題：品牌要如何與 AI 建立對話，成為其答案的一部分，而不是被忽略的背景聲音。
+{{< /threecol >}}
+
+---
+
+### 結構化內容的必要
+
+{{< figure src="image_2.jpg" alt="ChoozMo 系統介面" class="float-right" >}}
+
+要讓 AI 能「看見」並引用，Jared 認為內容必須更清楚、更有邏輯。他觀察到，AI 偏好問答式的架構與具體的數據支撐。如果一篇文章能先用一句話點出結論，再輔以案例與可信來源，就更容易被系統辨識。
+
+他舉例說明，與其撰寫一篇籠統的餐飲行銷指南，不如直接回應業者常見的具體問題，例如「新開的外送餐廳要如何在三十天內獲得第一批回頭客」。這樣的內容不僅讓讀者快速找到答案，也更有機會被 AI 引用作為範例。
+
+ChoozMo 在這方面扮演了輔助角色。Jared 解釋，他們的系統會蒐集來自論壇、社群平台與客服紀錄的真實問題，並分析哪些議題討論熱度最高，哪些領域仍缺乏足夠的好答案。這些資訊能幫助品牌挑選切入點，避免投入在無關緊要的內容上。
 
 「數據能告訴我們市場正在談什麼，也能顯示哪些問題沒有被好好解決，」他說。「如果能在這些缺口裡放上品牌，等於是在新的資訊地圖上插下一面旗幟。」
 
@@ -38,7 +67,7 @@ ChoozMo 在這方面扮演了輔助角色。Jared 解釋，他們的系統會蒐
 
 ### 衡量成效的新方法
 
-{{< figure src="image_3.jpg" alt="ChoozMo 系統介面" class="float-right" >}}
+{{< figure src="image_3.jpg" alt="ChoozMo 系統介面" class="float-left" >}}
 
 在傳統行銷時代，流量與點擊率是衡量成效的主要指標。但 Jared 強調，AI 時代的評估方式已經不同。他更看重三個層面：品牌是否自然出現在 AI 的回答裡，是否被引用為資料來源，最終是否能帶來真實的行動，例如用戶留下詢問或進一步嘗試產品。
 
@@ -58,9 +87,9 @@ ChoozMo 在這方面扮演了輔助角色。Jared 解釋，他們的系統會蒐
 
 ### 與 AI 對話的未來
 
-在談到未來的行銷趨勢時，Jared 顯得語氣堅定。他認為，行銷人員需要徹底轉換思維，不再只專注於「對人說話」，而是要同時「對 AI 說話」。
+{{< figure src="image_4.jpg" alt="ChoozMo｜Jared Liang" class="float-right"  >}}
 
-{{< figure src="image_4.jpg" alt="ChoozMo｜Jared Liang" class="float-left"  >}}
+在談到未來的行銷趨勢時，Jared 顯得語氣堅定。他認為，行銷人員需要徹底轉換思維，不再只專注於「對人說話」，而是要同時「對 AI 說話」。
 
 「好的內容不只是要吸引讀者，還要能被系統快速讀懂、記住並引用，」他說。對他而言，這代表企業需要把內容轉化為一系列清楚的知識座標，讓 AI 在回覆問題時能找到並引用品牌。
 

static/css/style.css

@@ -552,15 +552,15 @@ body {
 
 .feature-article .float-right {
   float: right;
-  max-width: 40%;
-  margin: 0 0 1rem 1rem;
+  max-width: 60%;
+  margin: 1rem 0 0 1rem;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 .feature-article .float-left {
   float: left;
   max-width: 60%;
-  margin: 1rem 1rem 1rem 0;
+  margin: 1rem 1.5rem 0 0;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
@@ -586,6 +586,8 @@ body {
 .feature-article h1 {
   font-size: 3.5rem;
   margin: 3rem auto;
+  padding-top: 1.5rem;
+  border-top: 12px solid var(--sub-color);
 }
 .feature-article h2 {
   padding: 1.5rem 0;
@@ -599,7 +601,7 @@ body {
 }
 .feature-article h3,
 .feature-article h4 {
-  margin: 3rem 0 1rem;
+  margin-bottom: 1rem;
   color: var(--sub-color);
 }
 .feature-article hr {
@@ -614,6 +616,7 @@ body {
 .feature-article .lead {
   display: inline-block;
   padding: 0.5rem 1.5rem;
+  margin-bottom: 1.5rem;
   background-color: #f8f8f8;
   border-left: 5px solid var(--sub-color);
   border: 2px dotted #ccc;

static/css/style.scss

@@ -713,8 +713,8 @@ body {
 .feature-article {
   .float-right {
     float: right;
-    max-width: 40%;
-    margin: 0 0 1rem 1rem;
+    max-width: 60%;
+    margin: 1rem 0 0 1rem;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
@@ -723,7 +723,7 @@ body {
   .float-left {
     float: left;
     max-width: 60%;
-    margin: 1rem 1rem 1rem 0;
+    margin: 1rem 1.5rem 0 0;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
@@ -755,6 +755,8 @@ body {
   h1 {
     font-size: 3.5rem;
     margin: 3rem auto;
+    padding-top: 1.5rem;
+    border-top: 12px solid var(--sub-color);
   }
 
   h2 {
@@ -788,7 +790,7 @@ body {
 
   h3,
   h4 {
-    margin: 3rem 0 1rem;
+    margin-bottom: 1rem;
     color: var(--sub-color)
   }
 
@@ -808,6 +810,7 @@ body {
   .lead {
     display: inline-block;
     padding: .5rem 1.5rem;
+    margin-bottom: 1.5rem;
     background-color: #f8f8f8;
     border-left: 5px solid var(--sub-color);
     border: 2px dotted #ccc;

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

@@ -20,7 +20,7 @@
                   <small>{{ .Date | time.Format ":date_long" }}</small>
                 </section>
                 <h2 class="post-title">
-                  <a href="{{ .Params.url }}">{{ .Params.title }}</a>
+                  <a href="{{ .Permalink }}">{{ .Params.title }}</a>
                 </h2>
               </article>
             </div>

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

@@ -9,12 +9,12 @@
       </header>
 
       <!-- TOC  -->
-      {{ if .TableOfContents }}
+      <!-- {{ if .TableOfContents }}
       <nav class="toc">
         <p class="toc-title">目錄</p>
         {{ .TableOfContents }}
       </nav>
-      {{ end }}
+      {{ end }} -->
 
       <div class="feature-body">
         {{ .Content }}

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

@@ -0,0 +1,53 @@
+{{/* 內文用 :::left / :::middle / :::right 分段；不需任何參數 */}}
+{{ $raw := .InnerDeindent }}
+{{ $lm := split $raw ":::middle" }}
+{{ $leftRaw := (replace ((index $lm 0 | default "")) ":::left" "") }}
+{{ $midright := (index $lm 1 | default "") }}
+{{ $mr := split $midright ":::right" }}
+{{ $middleRaw := (index $mr 0 | default "") }}
+{{ $rightRaw := (index $mr 1 | default "") }}
+
+{{ $left := trim $leftRaw "\n\r\t " }}
+{{ $middle := trim $middleRaw "\n\r\t " }}
+{{ $right := trim $rightRaw "\n\r\t " }}
+
+<style>
+  .threecol-grid {
+    display: grid;
+    gap: 20px;
+    align-items: start
+  }
+
+  .threecol-grid p:first-child {
+    margin-top: 0;
+  }
+
+  .threecol-grid img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (max-width:640px) {
+    .threecol-grid {
+      grid-template-columns: 1fr
+    }
+  }
+
+  @media (min-width:641px) and (max-width:1024px) {
+    .threecol-grid {
+      grid-template-columns: 1fr 1fr
+    }
+  }
+
+  @media (min-width:1025px) {
+    .threecol-grid {
+      grid-template-columns: 1fr 1fr 1fr
+    }
+  }
+</style>
+
+<div class="threecol-grid">
+  <div class="h-100">{{ $left | markdownify }}</div>
+  <div>{{ $middle | markdownify }}</div>
+  <div>{{ $right | markdownify }}</div>
+</div>