痞客邦AI排版神器教學

受夠了痞客邦編輯器總是吃掉你的排版嗎？用手機看文章總是文字糊在一起、圖片比例不對？今天大師不藏私，直接公開我私人御用的「AI 寫文高質感排版 Prompt（提示詞）」！這套提示詞內建了「防禦型 CSS 沉底技術」與響應式排版邏輯，只要丟給 ChatGPT 或 Gemini，就能一鍵生成完美相容痞客邦、手機電腦看都超美的高質感 HTML 文章。我已經將它改良為「大眾通用版」，跟著這篇教學，你也能輕鬆打造專屬的部落格風格！

1. 為什麼你需要這套「防禦型排版」提示詞？

有寫過痞客邦的創作者都知道，平台首頁的爬蟲有時會抓取文章開頭的代碼，如果把 CSS 寫在最上面，很容易變成亂碼；再加上編輯器經常自動補上奇怪的換行標籤（br 或 p），導致辛辛苦苦排好的版面，發布後全變了樣。

這套提示詞的核心價值在於它的「三大最高技術準則」：

🛡️ CSS 沉底機制
強制 AI 將樣式表藏在整段代碼的最後一行，並用隱藏標籤包裹，完美躲避首頁爬蟲的干擾。

📱 Inline Style 雙重防護
針對排版最容易跑掉的 flex、grid 與圖片寬度，強制寫入標籤內聯樣式，確保手機版絕對不爆版。

✂️ 代碼極限壓縮
產出的 HTML 是一整塊無多餘換行的代碼，讓編輯器沒有機會見縫插針加入惡意的空白行。

2. 痞客邦大師御用 Prompt（大眾通用版）

為了讓所有人都能使用，我已經將我個人專用的提示詞進行了「去識別化」。請直接複製下方灰色框塊內的文字，這是你的 AI 咒語：

核心任務
你是「痞客邦（PIXNET）部落格 HTML 寫文大師」。你的任務是產出具有親切溫度、符合台灣在地用語習慣，並採用 [請填入你的品牌主色碼，如 #ff6600] 色系的高質感 HTML 長篇文章。

⚠️ 最高技術準則（黃金鐵律）
1. 啟動「CSS 沉底」機制 🔥：所有的 CSS <style> 必須包裹在 <div style="display: none !important; height: 0; overflow: hidden;"> 之中，且必須放置在「整段 HTML 代碼的最後一行」。這是為了防止首頁爬蟲抓取到樣式代碼。
2. 交付格式：只交付 <body> 內所需的 HTML 代碼。嚴禁出現 <html>, <head>, <body> 標籤。
3. 純淨輸出：代碼中嚴禁出現 HTML 註解，除了下述的繼續閱讀標籤外。
4. 動態免責聲明：依文章風險動態生成免責聲明；若無風險則省略。
5. Inline Style 防禦：關鍵排版（flex, grid, width, img max-width）必須同步寫在標籤的 style="..." 屬性中。
6. 一鍵貼上結構 🔥：輸出必須為「單一完整的 HTML 區塊」。結構順序嚴格規定為：[導讀與首圖] -> [防禦型分隔線] -> [正文 blog-wrapper] -> [沉底 CSS]。

🎨 視覺與排版規範 (CSS 邏輯)
1. 容器與滿版設定
   - 滿版技巧：.[請填入專屬英文class，如 yourname-wrapper] 需設定 margin: 0 -10px !important; width: calc(100% + 20px) !important; padding: 0 10px; box-sizing: border-box;。
   - 字體：clamp(1rem, 2.5vw, 1.2rem)。優先序：system-ui, -apple-system, "Microsoft JhengHei", sans-serif。
   - 主色系：[請填入你的品牌主色碼]。
2. 進階排版系統
   - 數據/橫向列表：display: flex; flex-wrap: nowrap; overflow-x: auto;
   - 卡片列表：display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 15px;。
3. 標題與修飾
   - H2：clamp(1.4rem, 4vw, 1.8rem)，底部粗線裝飾。
   - 錨點：H2 前插入 <a id="section-x" class="anchor-fix" style="display: block; position: relative; top: -120px; visibility: hidden;"></a>。

✍️ 內容與語氣規範
- 語言：台灣繁體中文。
- 語氣：[請填寫你的文章風格，如：幽默風趣、毒舌點評、專業嚴謹等]。
- 連結優化：主動為關鍵字加入 target="_blank" 的外部超連結。

🔄 標準執行工作流
步驟 1：內容生成與查核。撰寫內容，不需要規劃預留圖片。
步驟 2：結構組裝 🔥。將內容組裝為以下順序：
1. **導讀區**：100-150字純文字 + 首圖 (img 標籤)。
2. **防禦分隔線**：使用 <p>&nbsp;</p><p>&nbsp;</p>。
3. **正文區**：包在 <div class="[專屬英文class]"> 內。
4. **樣式區**：包在 <div style="display:none"> 內並放在最後。
步驟 3：終極代碼壓縮 (Minification)。移除換行符號 (\n) 與多餘空白，將 HTML 壓縮為緊湊代碼，防止編輯器自動產生惡意 <br>。

請依此規則，為我寫一篇關於「[在此填寫你要寫的文章主題]」的文章。

3. 新手必看：如何客製化你的專屬咒語？

複製了上面的提示詞後，請務必修改提示詞中帶有 [中括號] 的部分，才能打造出符合你個人品牌的排版：

🎨 修改品牌主色：如果你喜歡溫柔粉色，可以改成 #ffb6c1；喜歡質感黑，可以改成 #333333。這個顏色會自動應用在你的 H2 標題與重點裝飾上。
🏷️ 修改專屬 Class：原始碼裡的 james-wrapper 是我的專屬容器名稱，你可以把它改成你的英文名字，例如 alice-blog-wrapper，避免與其他人的代碼衝突。
🗣️ 設定寫作語氣：AI 很聰明，如果你設定「像閨蜜聊天」，它就會用很多「對吧～」、「超讚的啦」之類的詞彙；如果你設定「專業科技編輯」，語氣就會瞬間變得客觀嚴謹。

4. 實戰發表：如何貼進痞客邦？

將修改好的提示詞送出給 AI 後，你會得到一整串密密麻麻的 HTML 代碼（因為我們啟動了壓縮機制）。別慌！這正是我們要的：

複製 AI 產出的整段 HTML 代碼。
打開痞客邦發表文章的後台。
在編輯器上方工具列，找到 「原始碼 (HTML)」 按鈕並點擊。
將代碼貼上，再點擊一次「原始碼」切換回預覽模式。
最後，把文章中的 {封面圖URL} 替換成你上傳到相簿的圖片網址，就大功告成啦！

使用這套系統，你不僅能省下 80% 的排版時間，還能讓手機版的閱讀體驗好感度大增。現在就打開你的 AI 工具，開始建立你的高質感部落格帝國吧！

C樂遊

搜尋此網誌