update

content/features/jared-liang/index.md

@@ -37,13 +37,16 @@ Jared 提到，這已經不只是傳統行銷的延伸，而是一個新的必
 
 > 重點：**符合 AI 可解析、可引用的內容結構**，是品牌必備能力。
 
----
 
 ## 數據分析的重要性  
 
-ChoozMo 提供各種數據分析工具，能精準判斷「哪些主題最適合被 GPT 收錄」，並幫助品牌決定 **該如何設計介紹內容**，讓資訊更容易被 AI 辨識與學習。  
+{{< figure src="image_2.jpg" alt="ChoozMo 系統圖片" class="float-left" >}}
+
+ChoozMo 提供各種數據分析工具，能精準判斷 **「哪些主題最適合被 GPT 收錄」**，並幫助品牌決定該如何設計介紹內容，讓資訊更容易被 AI 辨識與學習。
+
+這些工具不只是把資料收集起來而已，而是會進一步分析市場趨勢、關鍵字動態與競爭對手的內容策略，協助企業找出最值得投入的切入點。對中小企業來說，這相當於擁有一個「AI 導航儀」，能避免花時間寫沒人關心的內容，轉而聚焦在真正能被搜尋、被引用的議題上。
 
-{{< figure src="image_2.jpg" alt="ChoozMo 系統圖片" >}}
+同時，ChoozMo 的系統也會提供結構化的寫作建議，像是段落長度、標題層級、數據引用方式等，讓內容不僅好讀，更容易進入 AI 模型的知識庫。換句話說，它幫助品牌把知識「翻譯」成 AI 能快速理解的格式，進一步提高被引用與擴散的機會。
 
 Jared 補充說：  
 > 「數據能讓我們知道市場正在討論什麼，  
@@ -74,13 +77,12 @@ Jared 補充說：
 
 > 「不要追求一次寫百科全書。先把 10 題最常被問到的問題寫好、寫清楚，通常就會看到變化。」－Jared
 
----
 
 ## 被 AI 收錄，等於進入新時代  
 
 在 AI 的知識體系裡被記住，不僅僅是 SEO 的下一步，更是一種「品牌新生態定位」。這對中小企業尤其重要，因為他們可以藉由 **正確的主題策略**，快速與大型品牌站上同一個起跑點。  
 
-{{< figure src="image_3.jpg" alt="被 ChatGPT 收錄的 Google 搜尋結果" >}}
+{{< figure src="image_3.jpg" alt="被 ChatGPT 收錄的 Google 搜尋結果" class="float-left" >}}
 
 被 AI 收錄，其實就是在新的資訊地圖上「佔一個座標」。當使用者問到你的領域，AI 是否會把你當成一個可靠的答案、案例或參考來源。Jared 說，傳統做法是拚關鍵字與廣告曝光；現在更有效的方法，是讓內容本身能被機器與人同時理解：**清楚提問、直接回答、附上可信依據**，並且持續更新。
 
@@ -97,12 +99,24 @@ Jared 補充說：
 
 最後，不要忘記用簡單的方式**量測與調整**：固定每週用常見問句測試 AI 的回答，有沒有提到你；觀察從這些答案頁進來的流量與詢問；沒被提到時，回頭檢視題目是否夠明確、內容是否有可引用的段落。當你持續補齊這些「知識座標」，就會在新時代的資訊地圖上，為品牌畫出一條清楚的路徑。
 
----
 
 ## 結語  
 
 AI 正在重塑行銷規則。而 Jared 與 ChoozMo 提供的策略，正是幫助品牌 **在 AI 世界裡被看見的關鍵**。  
 
+過去的數位行銷著重於 **搜尋引擎最佳化（SEO）**、**廣告投放** 與 **社群經營**；然而在生成式 AI 的時代，品牌要思考的不只是「怎麼被找到」，而是「怎麼被 AI 自然引用」。這意味著內容需要更 **精準聚焦**、更 **結構化**，並能快速回答使用者的核心問題。  
+
+ChoozMo 的方法，就像為品牌打造一套 **AI 內容地圖**：  
+
+- **找對入口**：透過數據分析，判斷市場熱點與缺口。  
+- **寫對內容**：用簡明扼要的架構，讓 AI 容易吸收與引用。  
+- **驗證成果**：追蹤 AI 是否提及品牌、引用內容，以及是否轉換成實際行動。  
+
+這種策略，讓中小企業不需要與大品牌拼廣告預算，而能憑藉 **正確的內容設計** 在 AI 的新舞台上佔有一席之地。  
+
+
+{{< figure src="image_4.jpg" alt="ChoozMo｜Jared Liang" >}}
+
 專訪最後，Jared 強調：  
 > 「未來的行銷工作，不再是單純對人說話，而是要同時對 AI 說話。」  
 

static/css/style.css

@@ -557,6 +557,23 @@ body {
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+.feature-article .float-left {
+  float: left;
+  max-width: 60%;
+  margin: 1.5rem 1.5rem 0 0;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 768px) {
+  .feature-article .float-right,
+  .feature-article .float-left {
+    float: none;
+    display: block;
+    max-width: 100%;
+    margin: 1rem auto;
+    /* 圖片置中 */
+  }
+}
 .feature-article figure {
   margin: 2rem 0;
   text-align: center;
@@ -571,32 +588,23 @@ body {
   margin: 3rem auto;
 }
 .feature-article h2 {
-  margin-bottom: 1rem;
-  position: relative;
-  display: inline-block;
-  line-height: 1.2;
-  isolation: isolate;
+  padding: 1.5rem 0;
+  margin: 2.5rem auto;
+  border-top: 1px solid var(--sub-color);
+  border-bottom: 1px solid var(--sub-color);
+  text-align: center;
+  color: var(--sub-color);
+  font-size: 2.5rem;
+  font-weight: 500;
 }
-.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 {
+.feature-article h3,
+.feature-article h4 {
   margin: 3rem 0 1rem;
 }
 .feature-article hr {
   margin: 3rem 0;
 }
-.feature-article p {
+.feature-article .feature-body p {
   margin: 1.5rem 0 0;
   line-height: 1.8;
   font-size: 1.05rem;
@@ -604,7 +612,7 @@ body {
 }
 .feature-article em {
   display: inline-block;
-  margin-bottom: 2rem;
+  margin: 2.5rem 0 2rem;
   padding: 0.5rem 1.5rem;
   background-color: #f8f8f8;
   border-left: 5px solid var(--sub-color);
@@ -620,15 +628,42 @@ body {
 .feature-article strong {
   font-weight: 700;
 }
+.feature-article .toc {
+  background: #f9f9f9;
+  padding: 1rem 1.5rem;
+  border-left: 4px solid var(--sub-color);
+  font-size: 0.95rem;
+}
+.feature-article .toc .toc-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 1rem 0;
+}
+.feature-article .toc ul {
+  list-style: none;
+  padding-left: 0;
+}
+.feature-article .toc ul li {
+  margin: 0.25rem 0;
+}
+.feature-article .toc ul li a {
+  text-decoration: none;
+  color: var(--sub-color);
+}
+.feature-article .toc ul li a:hover {
+  text-decoration: underline;
+}
+.feature-article .toc ul li:empty {
+  display: none;
+}
 .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);
+  border-top: 4px solid var(--sub-color);
 }
 .feature-article .quote-accent::before {
   content: "“";

static/css/style.scss

@@ -719,6 +719,28 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
+
+  .float-left {
+    float: left;
+    max-width: 60%;
+    margin: 1.5rem 1.5rem 0 0;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+
+  .float-right,
+  .float-left {
+    @media (max-width: 768px) {
+      float: none;
+      display: block;
+      max-width: 100%;
+      margin: 1rem auto;
+      /* 圖片置中 */
+    }
+  }
+
+
   figure {
     margin: 2rem 0;
     text-align: center;
@@ -736,28 +758,36 @@ body {
   }
 
   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 {
+    padding: 1.5rem 0;
+    margin: 2.5rem auto;
+    border-top: 1px solid var(--sub-color);
+    border-bottom: 1px solid var(--sub-color);
+    text-align: center;
+    color: var(--sub-color);
+    font-size: 2.5rem;
+    font-weight: 500;
+    // 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,
+  h4 {
     margin: 3rem 0 1rem;
   }
 
@@ -765,16 +795,18 @@ body {
     margin: 3rem 0;
   }
 
-  p {
-    margin: 1.5rem 0 0;
-    line-height: 1.8;
-    font-size: 1.05rem;
-    color: #222;
+  .feature-body {
+    p {
+      margin: 1.5rem 0 0;
+      line-height: 1.8;
+      font-size: 1.05rem;
+      color: #222;
+    }
   }
 
   em {
     display: inline-block;
-    margin-bottom: 2rem;
+    margin: 2.5rem 0 2rem;
     padding: .5rem 1.5rem;
     background-color: #f8f8f8;
     border-left: 5px solid var(--sub-color);
@@ -794,15 +826,50 @@ body {
     font-weight: 700;
   }
 
+  .toc {
+    background: #f9f9f9;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--sub-color);
+    font-size: 0.95rem;
+
+    .toc-title {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin: 1rem 0;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+
+      li {
+        margin: 0.25rem 0;
+
+        a {
+          text-decoration: none;
+          color: var(--sub-color);
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        // 解決空 li 造成的空白
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+
   .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);
+    border-top: 4px solid var(--sub-color);
 
     &::before {
       content: "“";

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

@@ -8,6 +8,14 @@
         {{ with .Params.summary }}<p class="lead">{{ . }}</p>{{ end }}
       </header>
 
+      <!-- TOC  -->
+      {{ if .TableOfContents }}
+      <nav class="toc mb-4">
+        <p class="toc-title">目錄</p>
+        {{ .TableOfContents }}
+      </nav>
+      {{ end }}
+
       <div class="feature-body">
         {{ .Content }}
       </div>