Blogger 能否一次修改多篇文章的文字或內容？

曾在 BBS 看過有人詢問能否一次編輯多篇文章的內容，得到的回答是只能一篇篇修改；由於當時沒有這樣的需求所以沒有深究這個問題。等到最近自己遇上幾個類似的問題──想要一次修改全部文章的標籤名稱、一次修改文章內部標題的顏色，尋找答案後發現要達到這個目的還真是困難。一般而言，要修改後台的資料庫，除非該部落格平台有提供工具，否則幾乎沒有可以下手的地方。


一、變通方法

由於改後台資料很困難，那麼由前台（螢幕端）下手是個可行的管道。文章的實際的內容雖然動不了，但最終總得顯示在螢幕上，如果在螢幕輸出時用語法動點手腳，就能改成我們想要顯示的內容了，以下就用我的實際案例來說明。本篇雖然都是用 Blogger 來舉例，但這個概念用到其他支援 javascript 的部落格都是可行的。


二、案例 1──改文章內部標題顏色

以前的文章內部的大標題都是使用藍色(語法為<span style="color:blue;">)，當版面配置顏色換了以後，覺得這個顏色不太搭，但又不可能把近百篇文章一個個叫出來改標題顏色。

步驟 1: 先找出修改區塊的位置、特性

打開範本檢查，Blogger 的文章區塊內容類似以下程式碼：

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<description><data:post.body/></description>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

步驟 2: 修改的程式碼

在步驟 1 的程式碼後面，加入以下程式碼：


2014/7/6 更新：步驟 1 是舊範本的內容，如果新範本的話不容易據此找到對應位置，不過以下程式碼可改為放在範本中這個字串 <b:if cond='data:post.hasJumpLink'> 的前一行即可。


<script type='text/javascript'>
var POSTBODYid="post-body-"+"<data:post.id/>"
document.getElementById(POSTBODYid).innerHTML=document.getElementById(POSTBODYid).innerHTML.replace(/color:blue/g,"color:#0b5394")
</script>
以上程式碼的意思為，用 getElementById 取得文章的區塊的 innerHTML，再用 replace 替換文章區塊的內容，把所有紅字 color:blue 的字串全部替換為 color:#0b5394 這樣的顏色。


結果：除了 IE 以外的瀏覽器都會生效，而 IE 會失效的原因查了很久，才發現 IE 對於 innerHTML 能否修改有限制，請參考「Javascript 語法教學、技巧 (筆記)」→ Javascript 語法技巧 → IE 下 innerHTML.replace() 出問題的原因。

不過改顏色畢竟是小事，IE 不支援就算了，開發部落格工具的過程早就不知為了 IE 撞了多少牆，我也早就在網站下方宣告瀏覽器「避免使用IE」(不過除了改顏色這等小事，開發的工具還是得想辦法相容 IE)。而這個技巧其實主要是可以應用在修改文章內容上，在 IE 下用這個方法修改文字就沒問題了。


應用：如果想要把網站全部文章內容含 "部落格" 的文字，全部替換為 "Blogger" 這個字串，那麼就可以把步驟 2 的程式碼改為以下：

<script type='text/javascript'>
var POSTBODYid="post-body-"+"<data:post.id/>"
document.getElementById(POSTBODYid).innerHTML=document.getElementById(POSTBODYid).innerHTML.replace(/部落格/g,"Blogger")
</script>
以後要大量修改文章內容就是一件很簡單的事了。



三、案例 2──改標籤文字

由於使用「樹狀標籤」，我的標籤名稱格式為「AAA-BBB-CCC」。為了讓版面好看一些，想將 "-" 符號換成 "»" 成為「AAA»BBB»CCC」，如果手動一個個改可是會累死人。

步驟 1: 先找出標籤區塊的位置、特性

檢視網頁原始檔後，發現 Blogger 將標籤放在 <span class='post-labels'> 或 <div class='post-labels'> 的區塊內。


步驟 2: 安裝 jquery

由於目標區塊不像案例 1 固定，使用 jquery 的選擇器才會讓程式比較好寫。如果範本中沒有裝過 jquery，請到 Blogger 後台 → 範本 → 編輯 HTML → 在 </head> 之前插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

步驟 3: 修改的程式碼

在 </head> 之前、jquery 程式碼的後面插入以下程式碼：


B：網頁內容全載入時執行 C 行

C：選擇所有 class 為 post-labels 的區塊裡面的 a 標籤，針對每個 a 標籤執行 D 行。

D：把 a 標籤的 innerHTML 用 javascript 的 replace，將文字中內所有 "-" 字元置換為 "»" 字元。


結果：一開始標籤仍是會顯示 "AAA-BBB-CCC" 的格式，但等到頁面載入完，jquery 程式啟動，便會馬上將所有標籤置換成 "AAA»BBB»CCC" 的格式，可以由本篇文章上方標籤的變化看到效果。


應用：

1. 如果熟悉 jquery 語法，不要用 $(function(){}) 的方法等到頁面讀取完才執行，可以將置換文字的程式碼放在最後一個標籤的程式碼後面立刻執行，那麼置換文字的速度會比較快。

2. 這個方法可以同樣用來置換別的區塊的文字，例如有幾十篇的文章標題想批次更改，把所有標題文字 "部落格" 更改為 "Blogger"，那麼就可以先找到文章標題的區塊，利用「jquery 語法 (筆記)」→ Jquery 參考書 → 選擇器範例 來選擇區塊，接著「步驟 3」的 replace 語法換成 replace(/部落格/g,"Blogger")就可以實現要修改的效果。


四、其他技巧

以上的例子都是用於一次置換所有文章的內容，但有時只要修改特定文章時，如果是 Blogger 可以利用技巧縮小範圍，例如只要修改特定標籤名稱為 "站務" 的文章時，只要在以上例子的修改程式碼前後，加上以下程式碼即可：

<b:if cond='data:label.name == "站務"'>
修改的程式碼
</b:if>
如果要修改的標籤為 "非站務" 以外的所有文章，那麼就改為：

<b:if cond='data:label.name != "站務"'>
修改的程式碼
</b:if>
注意 "==" 與 "!=" 的區別，相信利用以上的技巧搭配組合，可以解決大部分置換文字的問題。


How to Find text and replace using jQuery

Blogger 相關文章：