2012年6月1日 星期五

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

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

Wayne Fu 0 A+

(Pic from: openclipart.org)
曾在 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 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP