2012年6月11日

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

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 相關文章:

18 則留言:

  1. 如果我想替換掉文章內文的超連結呢?
    開頭自己嘗試用「href」跟「outerHTML」替換但都無果
    EX:(前略).replace(/href:舊連結/g,"href:新連結")
    (以上的危險動作請勿模仿 XD)

    因為原本某篇文章是用「網頁」弄的,後來將其改為「新文章」po,想將插入該篇文章的連結的其他文章都置換掉。

    Blogger的「網頁」有點麻煩,改個標題,它會將文章的連結網址依標題做變化...,帶來不少麻煩。

    回覆刪除
  2. <8027756153414008709>(以上內容請勿刪除,從括號之後開始留言)
    1. 應該這麼用:(前略).replace(/http:\/\/yahoo.com.tw\//g,"http://wayne-fu.blogspot.com/")

    舊連結裡面的 "/" 要改成 "\/", 新連結不用

    2. blogger的「網頁」bug很多沒修正,沒有特別需求建議不要用,新開一篇文章代替即可,應該沒有什麼「文章」做不到而「網頁」能做到的功能才是。

    回覆刪除
  3. 作者已經移除這則留言。

    回覆刪除
  4. 喔喔~了解~

    舊連結裡面的"/"一律都改成"\/",新連結則不變

    .replace(/http:\/\/lasjargon.blogspot.com\/p\/microsoft-applocale.html/g,"http://lasjargon.blogspot.com/2005/08/microsoftmicrosoft-applocale.html")

    因為.html後面已經沒有,所以我拿掉其後的"\/"跟"/",
    這樣對嗎?謝謝~

    PS.這陣子Blogger真的改版動作頻繁,剛剛才發現範本修改的畫面也大不同了。(剛剛筆誤,重貼一次)

    回覆刪除
  5. 測試成功~~繼續跟標籤奮戰

    回覆刪除
  6. <463192592756652031>(以上內容請勿刪除,從括號之後開始留言)沒錯~恭喜成功 ^^

    回覆刪除
  7. 不好意思,想請問站長,如果想替換掉多篇文章內文的超連結,但是超連結網址卻不是固定的..就是如下每篇文章gdid的部分都不相同,而只想改掉32位元的servername的值.這樣有辦法取代嗎?

    http://xxxxx.com.tw/gdsale/gdsale.asp?gdid=4273352&co_servername=96562f656565ac98d4c0547de27c5982

    回覆刪除
  8. <8868051046014868535>(以上內容請勿刪除,從括號之後開始留言)可以的,要使用「正規表示式」。不過這必須有一點 js 的基礎才行,可 google 一下「正規表示式」,或是參考「正規表示式線上自動產生器

    回覆刪除
  9. 如果是要讓一堆表格加上橫拉條
    不知道這取代適用於html 原始碼否??

    回覆刪除
  10. <5158622850895993546>(以上內容請勿刪除,從括號之後開始留言)如果用 html 碼舉例,或許比較能了解你的問題在哪。

    回覆刪除
  11. <5588222952063448486>(以上內容請勿刪除,從括號之後開始留言)

    我的表格模式是
    <* ......(後面的各個表格參數不一項)



    想把它全部加上拉條
    變成
    <@ style="overflow: auto; width: 100%;"><*......



    不知道這個取代html的方式是否可行,因為要取代兩個地方,而且在編輯範本的時候,在<table 會被卡住

    *是table
    @是div
    以上 感謝您

    回覆刪除
  12. <5577705953398951473>(以上內容請勿刪除,從括號之後開始留言)那你的 js 碼是怎麼寫的?

    [quote]編輯範本的時候,在<table 會被卡住
    [/quote]看不懂這是什麼意思

    回覆刪除
  13. <5577705953398951473>(以上內容請勿刪除,從括號之後開始留言)
    後段被吃掉了!!!!

    要改成

    回覆刪除
  14. <7145722894115895124>(以上內容請勿刪除,從括號之後開始留言)

    在儲存html範本時,系統會說少了> or/>
    然後就不能儲存!!

    大概是這樣

    回覆刪除
  15. <705587168931133739>(以上內容請勿刪除,從括號之後開始留言)為了幫你縮短往返的時間:
    1. Blogger 留言輸入 < > 這些符號會異常,留言內容請先用這個網站進行編碼:http://www.htmlescape.net/htmlescape_tool.html

    2. 請完整寫出你原本的 HTML 內容,你要變更為什麼樣的 HTML 內容,你準備寫的 js 內容

    回覆刪除
  16. 回到最初的狀態,好像拿原始範本也找不到與step 1相同的段落
    而且已本範例為例(blogger-->部落格),放在相似段落後方好像無效( 相似的地方有三處XD 不知如何判斷該放哪個)

    回覆刪除
  17. <1076351928270583746>(以上內容請勿刪除,從括號之後開始留言)謝謝 alex 的回報,這篇是比較早期的文章,使用舊範本的語法當範例,現在大部份使用者幾乎都是用新範本,請見本文「2014/7/6 更新」的部份,這樣應該就可以了。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。