當 Blogger 遇上「水土不服」的模板：從頭打造你的完美個人網站

你是否也曾在 Blogger 上架設網站，作為自己的知識管理工具，卻發現預設的模板總是不盡人意？你對網站的想像，可能充滿了簡潔的排版、專業的設計，但現實卻是複雜且難以修改的預設框架。

這時，你可能像我一樣，興起了一個念頭：「不如自己設計一個吧！」

這個念頭很棒，因為一個符合你想法的介面，不僅能提升你的使用體驗，也能讓你的知識更容易被他人發現。但現實是，在茫茫的免費模板海中，找到一個「看得上眼」又「能用」的模板，並不是件容易的事。

這篇文章將以我的經驗為例，帶你解析 Blogger 模板的「水土不服」問題，並提供一份從零開始、打造專屬完美網站的實戰指南。

一、 Blogger 模板的「水土不服」：舊模板為何無法使用？

我在 BTemplates 網站上找到一個名為「MANDARIN Free」的模板，看起來簡潔又符合 SEO 原則，滿懷期待地想套用到我的網站。結果，卻發現 Blogger 無法成功還原。經過一番研究與比對，我找到了問題的根源：

「MANDARIN Free」這個 2019 年發佈的模板，其結構與語法已經與 Blogger 當前的平台版本不相容了！

這就好像你把一個 Windows 95 的軟體，硬塞進 Windows 11 的作業系統一樣，自然會因為語法與規範的差異而無法運行。

我將新舊模板進行詳細比對，發現了幾個關鍵的「不相容」點：

<html> 標籤屬性過時：新版模板在 <html> 標籤中，會包含多個 Blogger 專有屬性，例如 b:responsive='true'（響應式）和 b:templateVersion='1.3.3'（版本號）。舊模板則缺少這些關鍵屬性，導致系統無法正確識別。
title 標籤語法過時：新版模板使用 data:view.title.escaped/ 來生成頁面標題，這是目前推薦的寫法。而舊模板仍使用 data:blog.pageTitle/ 等舊式語法，在新版中可能會被拒絕或處理不當。
<b:skin> 標籤缺少版本屬性：新模板會明確標註 <b:skin version='1.3.3'>，舊模板則沒有這個屬性，導致 Blogger 無法正確解析 CSS。

結論：舊模板的主要問題在於其結構和核心屬性未能符合當前 Blogger 平台的要求。這也告訴我們一個重要的教訓：選擇模板時，除了設計，相容性與發布年份同樣重要。

既然現成的舊模板無法使用，那麼不如我們就自己動手，從頭打造一個完美符合我們需求的模板吧！以下是我的實戰建議：

別從零開始，這會耗費大量時間與精力。最好的做法是：

下載一個目前可以正常運作的全新 Blogger 模板。這個模板將成為你的「骨架」，因為它已經是 Blogger 兼容的最新結構，可以避免上傳時的版本問題。
從這個骨架開始修改，這比從頭開始寫程式碼要輕鬆得多。

在開始動手寫程式碼前，先思考你的「i-29 Lab」網站理想中的模樣。

你可以參考其他你喜歡的網站，學習他們的設計巧思，但別盲目複製，而是思考「他們為什麼這樣設計」。

在技術層面上，你需要關注以下幾個重點：

響應式設計 (Responsive)：這不僅是美觀，更是 SEO 的關鍵。你可以運用 Flexbox 或 Grid 等 CSS 框架，讓網站版面能根據不同裝置（電腦、平板、手機）的螢幕尺寸自動調整。
SEO 優化：
- 標題標籤：合理規劃 H1、H2、H3 等標題層級，告訴搜尋引擎你的文章重點。
- 結構化資料：學習如何在模板中整合 Schema Markup，讓搜尋引擎更好地理解你的內容，並在搜尋結果中呈現更豐富的資訊。
- 載入速度：精簡你的 CSS 和 JavaScript，優化圖片大小，讓網站載入更快。
Blogger 模板語法：熟悉 b:template-skin、b:if、b:loop 等 Blogger 專有標籤的最新用法，這是客製化模板的必備技能。

沒有一次到位的設計，只有不斷的優化。

從尋找現成模板，到自己動手設計，這是一個從被動使用者轉變為主動創作者的過程。雖然這條路可能充滿挑戰，但當你最終看到一個完全符合你理想的個人網站時，那份成就感將是無可比擬的。

如果你在自訂模板的過程中遇到任何具體問題，例如特定元素的排版或功能的實現，我很樂意繼續提供幫助！