版型與內容的分離：為什麼改版不用重打內容

內容與外觀是分開的

這是動態網站最核心的設計概念，也是理解「改版」為什麼可行的關鍵。

• 內容存在資料庫——標題、內文、圖片、日期
• 版型存在檔案中——決定這些內容長什麼樣子、排在哪裡

顯示網頁時，系統把兩者組合起來。

用信件比喻

想像一份制式的通知信：

親愛的 ●●● 先生／女士：

您訂購的 ▲▲▲ 已於 ■■■ 出貨。

信的格式是版型，填進去的資料是內容。

同一份格式可以套用給一千位客戶，每個人看到的是自己的資料。網站的運作方式是一樣的——一個產品頁的版型，套用給所有產品。

這帶來三個實際的好處

一、改版不用重打內容

換一套新的版型，資料庫裡的內容不動。五百篇文章、三百項產品都會自動套用新設計。

這是改版最大的價值——你付的是設計與開發的費用，不是重新輸入內容的費用。

二、統一調整很容易

想把所有產品頁的價格改成紅色？改版型一處，三百頁一起變。

如果是寫死的，就要改三百次。

三、可以有多種呈現方式

同一筆資料，在列表頁顯示縮圖與標題，在內容頁顯示完整內文。取的是同一筆資料，只是套用不同的版型。

所以：內文中不要寫死樣式

這是實務上最重要的一個提醒。

在後台編輯內容時，很多人會直接調整字體大小、顏色、粗細，讓它看起來符合心中的樣子。

這會造成什麼問題

• 改版時這些設定會殘留——新版型套上去，但內文還是舊的顏色與字體，看起來很突兀
• 無法統一調整——想改樣式要一篇一篇改
• 手機上可能破版——寫死的寬度或字級在小螢幕上會出問題

正確的做法

• 用「標題」功能，不要用「放大加粗」——標題有層級意義，樣式由版型統一控制
• 用「清單」功能，不要自己打符號
• 不要在內文中設定固定的寬度或字級
• 從別處貼上文字時，先清除格式——這是最常見的問題來源

從文書處理軟體直接複製貼上，會帶入大量隱藏的格式設定，日後改版時特別麻煩。

詳細做法見後台編輯器怎麼用。

圖片也是同樣的道理

不要把文字做在圖片上

常見的做法是把整段文案做成一張圖直接放上去。這會造成：

• 搜尋引擎讀不到那些文字
• 手機上會縮到看不清楚
• 要改一個字就要重做整張圖
• 多語系網站要每個語言各做一張

正確做法是把文字放在圖片外面，或用網頁文字疊在圖上。

見圖片的替代文字與檔名該怎麼寫。

版型可以更換，內容是資產

這個觀念值得建立：

所以內容的乾淨程度很重要。 內文中殘留越多寫死的樣式，日後改版的整理成本就越高。

常見的問題與處理

改版後舊文章的排版很亂

通常就是內文中殘留了舊的樣式設定。處理方式：

• 用編輯器的清除格式功能
• 大量文章可請廠商批次處理
• 從現在開始養成不寫死樣式的習慣

某一篇文章特別想要不同的樣式

如果是偶爾的特殊需求，可以請廠商為該類型建立一個版型變體，而不是在內文中寫死。

想要每篇文章有不同的版面

這通常代表需要的是可選擇的版型——後台提供幾種版面讓編輯選擇。這是可以開發的功能，但要在規劃時提出。

驗收時可以確認的事

1. 後台編輯器有沒有「標題」層級可選
2. 有沒有清除格式的功能
3. 貼上文字時會不會自動處理格式
4. 編輯後在手機上看是否正常

版型的選擇與客製程度見版型、模組化與客製設計的差別。