如何找回 Blogger 文章快速編輯按鈕(鉛筆圖示)

前陣子有讀者在「讓 Blogger 文章標題及文末都出現編輯圖示」留言反應，原本文章頁面都會看到的快速編輯按鈕，也就是那個「鉛筆圖案」，現在都找不到了。當下覺得有點訝異，因為我明明時常在用，不清楚為何看不到。 但由於不只一個人如此反應，想必事有蹊蹺，所以到 Blogger 後台找了一下，才發現原本「版面配置」→ 編輯「網誌文章小工具」時，會看到的選項「顯示快速編輯」，現在已經找不到了！ 看起來 Blogger 官方在某次後台更新時，把這個功能拿掉了。我覺得有點可惜，這其實是很實用的功能，不必大費周章進入後台搜尋到某篇文章後，才能進行編輯。如果在文章頁面點擊鉛筆圖示就可編輯文章，是非常方便的事。 那麼本篇就來說明「快速編輯」連結產生的原理，以及如何自行修改範本，在文章頁面加入此功能。 (圖片出處: pixabay.com)

一、快速編輯網址連結格式

1. 原始語法失效首先要說明 Blogger「舊範本」有哪些：例如 Simple、Awesome 、Watermark、Ethereal、Travel 這幾個沒有 RWD 效果的範本。 原本 Blogger 範本中的快速編輯按鈕語法長得像這樣： <b:include data='post' name='postQuickEdit'/>這個語法在「舊範本」中依然是有效的，如果你使用舊範本的話，依照我之前寫的「讓 Blogger 文章標題及文末都出現編輯圖示」處理就行了。 但如果用的是官方 RWD 範本，那麼以上語法已經無效了，請繼續往下看如何處理。 2. 文章編輯頁面連結為了自製快速編輯連結，得先了解文章編輯頁面的網址格式，我們隨意編輯一篇文章，可看到網址都是長得像這樣： https://www.blogger.com/blog/post/edit/網站 ID/文章 ID

• 紅字部份的一串數字是網站 ID
• 藍字部份的一串數字是文章 ID

我們想辦法依照這樣的格式組合出連結網址，就能做出快速編輯連結了。 3. 鉛筆圖示連結如果這個連結依然想要使用原本的鉛筆圖示，那麼官方提供的小圖示網址如下： https://img2.blogblog.com/img/icon18_edit_allbkg.gif

二、自製快速編輯按鈕

1. 取得網站 ID 及文章 ID在範本中適當的位置，可以使用以下 Blogger 標記語言，來取得網站 ID 及文章 ID：

• 網站 ID：data:blog.blogId
• 文章 ID：data:post.id

2. 組合按鈕語法以下 Blogger 語法，可製作出快速編輯的鉛筆圖示連結： <a expr:href='"https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id' target='_blank'><img src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif'/></a>但是這個連結，並不是放在 Blogger 範本中任何地方都會生效，必須找到範本中的文章區塊才行。

三、新舊範本擺放位置

在修改範本之前，建議先閱讀「備份範本的訣竅」系列文章。 1. 官方舊範本官方舊範本請參考這篇「Blogger 範本文章區塊程式碼」：

• 如果要把快速編輯按鈕放在文章標題後面，在「三、文章區塊」→「1. 文章標題」可找到文章標題的相關程式碼。
• 如果要把快速編輯按鈕放在文末，在「三、文章區塊」→「3. 繼續閱讀」這段程式碼的後面，就是文末的位置

找到正確位置後，貼上前面提過的組合按鈕語法即可： <a expr:href='"https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id' target='_blank'><img src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif'/></a>2. 官方 RWD 範本官方 RWD 範本架構是完全不一樣的，如果要把快速編輯按鈕放在「文章標題」後面，請到後台「主題」→ "自訂"按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋以下字串，這就是文章標題的語法： <b:include data='post' name='postTitle'/>如果要把快速編輯按鈕放在「文末」的位置，請在範本中搜尋以下字串，這就是文章內容區塊的語法： <b:include data='post' name='postBody'/>以上語法找到後，在該位置的後面貼上前面提過的組合按鈕語法即可： <a expr:href='"https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id' target='_blank'><img src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif'/></a>