AHHA Demo サイトAHHA Demo サイト
AHHA Demo サイトサイト構築チュートリアル讓作品與商品擁有獨立內頁:「項目集」使用教學

讓作品與商品擁有獨立內頁:「項目集」使用教學

2026年7月2日モジュール紹介· Howshin Wang
項目集 · 內容詳情頁:讓作品與商品擁有獨立內頁

很多人用 AHHA 把作品或商品排成一面網格後,會遇到一個情境:訪客點了圖卡,卻沒有可以進去看細節的頁面。這篇教你用「項目集」模組,幫每一件作品、每一項商品建立含完整內容的獨立詳情頁,還能加上分類篩選。

先分清楚:你要的是「圖片集」還是「項目集」

這兩個很容易混淆,先用一句話區分:

  • 圖片集/相簿(頁面編輯器裡的展示區塊):在某一頁放一排照片,點開可放大瀏覽。沒有獨立網址、沒有內頁,適合純視覺陳列。
  • 項目集(含詳情頁)(側欄的獨立模組):每一項都有自己的網址與詳情頁,可以分類篩選,並自動帶上結構化資料。適合作品集、案例、房仲物件、商品。

判斷方式:只想放一排點開看大圖的照片,用圖片集就好;要每一項能被單獨點進去、被搜尋引擎與 AI 個別找到,用項目集

建立一個項目集

情境:假設你是設計工作室,想做一個「作品集」,每件作品有獨立頁面。

  1. 後台側欄 →「項目集(含詳情頁)」→「新增集合」。
  2. 名稱填「作品集」;網址 slug 填 works(單層英文,系統會即時把空白或斜線轉成 -,並顯示最終網址預覽)。
  3. 類型選「作品集/案例」。若是要賣的商品,選「商品」(見下方)。

建立後,系統自動準備好兩種頁面:列表頁 /works、詳情頁 /works/{項目}。你不需要一頁一頁手動開。

新增項目

點進剛建立的集合 →「新增項目」,填入:

  • 標題、圖片(第一張為主圖,建議正方或橫式、長邊 ≥ 1000px)、摘要、內文(支援 Markdown)、規格。
  • 狀態記得切成「已發布」,才會對外顯示。

完成後,這件作品就有了自己的網址(例如 /works/coastal-villa),訪客能點進去看多張圖、完整說明與規格,圖片還能點擊全螢幕放大。

加上分類篩選(選填)

情境:物件或商品變多,想讓訪客快速找到想看的。

  1. 在集合的「分類設定」新增維度,例如「類型」:住宅、商空;或「地區」:台北、台中。
  2. 回到每個項目的編輯畫面,幫它指定各維度的值。

列表頁上方就會自動出現篩選標籤,訪客可以多維度交叉篩選,純前端即時反應、不用重新整理。

商品也能有詳情頁與購物車

如果你賣商品,不必另外重做一套:

  1. 在「項目集」新增一個「商品」類型的集合(slug 例如 products)。
  2. 商品本身仍在「商品管理」維護——那裡可以設定商品的 slug、規格與分類值。

接上之後,每項商品自動擁有詳情頁(多圖、規格、價格、加入購物車),商品瀏覽列表也能直接加購。原本的訂單與匯款流程完全不變。

你不用額外設定,系統自動附上的

  • 每個詳情頁自動輸出 Schema.org 結構化資料(作品用 CreativeWork、商品用 Product),讓 Google 與生成式 AI 更容易個別辨識與引用你的內容。
  • 若集合設為顯示,導覽列會自動出現連結。
  • 支援多語:項目的標題與說明會跟著網站語言切換。

小結

把「一組會不斷增加的東西」交給項目集,而不是一頁一頁手動開,是讓網站內容能長期擴充又不亂的關鍵。作品、案例、物件、商品,都適用同一套做法。

想動手做,登入 AHHA 後台,從側欄「項目集(含詳情頁)」開始。

項目集作品集商品詳情頁教學

よくある質問

Q

項目集和圖片集有什麼不同?

圖片集是在某一頁放一排可放大的照片,沒有獨立網址;項目集讓每一項都有自己的詳情頁與網址,可分類篩選,並自動附上結構化資料。要每一項被單獨點進去、被搜尋到,就用項目集。

Q

賣商品也要另外建內容嗎?

不用。商品仍在「商品管理」維護,只要在「項目集」建立一個「商品」類型的集合,商品就自動有詳情頁、規格、價格與加入購物車,訂單與匯款流程完全不變。

Q

網址可以自訂嗎?

可以。每個集合與項目都能設定單層英文 slug,系統會即時把空白或斜線正規化為連字號,並顯示最終網址預覽。

コメント

会員のみコメントできます(スパム防止)。コメントはこのページに表示されます。

読み込み中…
← サイト構築チュートリアル