2008-01-09

最新文章模組「終極版」

好一陣子都沒有更新這裡的文章,不是因為我偷懶,實在是不知道有什麼技術文章可以寫,尤其是 Blogger Hack,版面改得差不多後其實也沒什麼好調整的了。尤其是我不喜歡像某些人改樣板總要外引他人的 .js 去做,用起來好像很方便,但根本不知其所以然,尤其是該檔案裡面有些作者自己用的 Code 或是 Function,引用者常看都不看直接下載就用了(更狠的就是根本不下載、直接引用作者的連結檔案),不小心改爛樣板或是與其他 Hack 衝突就哭天喊地了。當然我多少也會肯定一些「懶人包」的作用,它們的確幫助很多人簡易地調整 Blogger 外觀功能,但我自己仍偏好修改程式碼,一方面有效率、又不用塞一些不必要的程式碼,另一方面我很清楚這些 Hack 的作用和功能,樣板比較不會改爛掉。廢話那麼多,主要還是提醒參考我 Hack 的人,除非很清楚你在改什麼,不然還是參考人家寫的教學文章來做,不要完全不懂改壞了才一直來求救,還劈頭就說「我什麼都不懂」。

關於「最新文章」的模組,相關文章我已經有兩篇,第一篇最單純,就是使用 JSON 來做、把 Feed 抓來的內容挑幾篇出來、依照格式作成列表,除了「最新文章」,依照引用的 Feed 網址,你可以把這個模組改成「最新回應」、「Blog 聯播」或是「主題推薦文章」。第二篇「其他最近的文章」,根據首頁需求做了調整,因為首頁也會顯示最新文章,另外掛一個「最新文章」模組好像怪怪的,所以我就調整顯示的篇數和起始點,首頁如果有五篇文章,那麼模組裡就另外列第六篇到第十五篇總共十篇的標題。而這一篇是根據網友的建議再做延伸,既然另外顯示了十篇文章標題列表,能不能參考 Neo 一些 Template 和 Hack 的作法、做出上一頁下一頁的連結,透過 JSON 不用重新 Load 整個頁面的好處,在該模組裡就能瀏覽所有的文章標題?我花點時間看了一下 Neo 的作法,其實不難,用我前兩篇的基礎加幾個函數處理上下頁的問題就好了,我覺得興奮的是,這樣修改的應用、可以套用在任何文章或留言列表、只要加個連結,讀者不用 Reload 就可以直接切換上下頁觀看搜尋或列表結果,進而改善瀏覽的速度和效果,這才是這個模組背後帶來的好處(不是單純提供最新文章列表那麼簡單)。

開始修改!在範本、網頁元素裡,請加入一個新的網頁元素 (HTML/Javascript)、或是直接編輯原有模組,直接塞入以下程式碼:

<div id="newPosts">
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
var nPostStartIndex = 6;
var nPostShow = 10;

function showRecentPosts(nIndex) {
  if (!nIndex)
    nIndex = nPostStartIndex;
  var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
  var script = document.createElement('script');
  document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
  script.setAttribute('src', sFeedURL);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

function generatePosts(json) {
  function compareentry(a,b) {
    order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
    return 0-order;
  }
 
  var sHTML = '<ul>';
  var sortentry = json.feed.entry.sort(compareentry);
  var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
  for (var i = 0, Post; Post = sortentry[i]; i++) {
    if (i >= nPostShow)
      break;
    var title = Post.title.$t;
    var j = 0;
    while (j < Post.link.length && Post.link[j].rel != "alternate")
      j++;
    var link = Post.link[j].href;
    var timestamp=Post.published.$t.substr(0,10);
    sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  sHTML += '</ul>';
  sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
  document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
  var bOld = (nFetch > nPostShow);
  if (bOld) nFetch = nPostShow;
  var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'.&nbsp;&nbsp;';
  if (nIndex > nPostStartIndex)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">&lt;&lt;</a>&nbsp;&nbsp;';
  if (bOld)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">&gt;&gt;</a>';
  sResult += '</p>'; 
  return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>

直接存檔就好了。啥?那樣不是比用誰的教學文章更簡單更快嗎?而且,還不用改樣板原始碼?那是因為我把人家外引的 .js 檔裡面的宣告函式和呼叫直接寫在上面,總共有六十幾行(好多,比我的上一版多了一倍),用的方法和 Neo 大同小異,但程式碼至少比 Neo 少了四五倍(因為人家還有其他自用函式,不一定用在這裡的),單就以上功能上面那些就夠了。要使用本 Hack 前,同樣地請注意以上標紅的那幾行,照個人需求修改。變數 nPostStartIndex 是此模組要顯示的文章是從「第幾篇」開始,像我首頁顯示五篇文章,起始文章就從 6 開始,要從頭開始請設成 1 (尤其你用來顯示最新回應或其他 Blog 聯播時)。而 nPostShow 是該模組一次顯示「幾篇文章」的數量變數,預設是十篇。另外,在等待讀取的過程,以上範例我是用文字 "Loading" 顯示,如果想和我一樣改成動畫(其實是一個動態的 GIF 圖檔,有興趣可以去這個網站取用,多是免費授權使用的),請把範例程式碼裡第十四行 'Loading ...' 改成你圖檔連結的 HTML 程式碼就行了。同樣的,切換上下頁的連結,範例中是用 << >> 箭頭,當然也可以改成你喜歡的圖片。

有了上下頁,我想最棒的是,可以讓使用者跳到「某一頁」是最好,同時也列出「總共有幾頁」、「全部有幾篇文章」,不過就現在用 JSON 去逐篇拉出 Feed 裡文章標題和數量的方法,沒辦法一次就知道「總數」,分頁和顯示的問題也不容易處理,我知道還是有 Hack 好像能做到,但我還是偏好簡單、有效率又獨立安全的辦法。如果有找到,本文會再改個第四版「最後終極版」好了,哈哈~

回應: 92

Davin Chao 提到...

To Abin大大:
您實在太強了....
實在不得不佩服老大您的功力!
要不是回應區無法放上Gif,不然還真的想給你放煙火咧...

Abin 提到...

To davin:
別這麼說~也是你給我靈感讓我動手去改的,有其他需要和建議的話,歡迎您繼續給我意見,或是一起討論。

Susan 提到...

To:Abin大
不好意思,我想修改自己的部落格,上網搜尋資料找到這裏,覺得Abin大是個很熱心的人,所以厚著臉皮想請教一點點小問題,麻煩你了,大大感恩啊!
我的問題蠻蠢的,只是標題首圖弄不好。
我使用的版型放上圖片之後會有一圈邊框,到/* Blog Header成功去掉上下左三邊,檢查再三所有bottom我都設為0px,但圖片右邊還是有一條邊框去不掉。以下我附上改過的CSS請你幫我看一下為什麼會這樣,拜託了,非常非常謝謝你。
/* Blog Header
----------------------------------------------- */
#header-wrapper {
 background:$titleBgColor url("") no-repeat $startSide top;
margin-top:10px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("") no-repeat $startSide bottom;
padding:0 0px 0px;
}
#header h1 {
margin:0;
padding:20px 30px 10px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

匿名 提到...

在這裡學習很多東西...
特此感謝 !

Abin 提到...

To Susan L. :
光看你的 CSS 我沒辦法知道問題在哪裡,沒有實際的畫面和網頁,我只好用猜的。
標題的圖改法有很多種,如果你也是把圖用底圖 background 的語法去宣告,看了你的原始碼,我建議你要自訂 header-wrapper 的寬度 (width: ?px;),寬度的大小和你的底圖寬度一樣,這樣再去把 margin 和 padding 設成 0,才不會出現多餘的邊框。

Susan 提到...

Abin大,感謝你,我再試試看,^^

Unknown 提到...

真的好棒,謝謝Abin大~我從這增加好多東西~謝謝你~

Unknown 提到...

To Abin
感謝你的終極版大作,非常實用!!
我已經套用在我每一個部落格了~~
對了小建議 - 發文時間的格式似乎不能從原始碼調整,我只好順手移除timestamp...

Shiang 提到...

謝謝囉~很實用ㄉ東西 尤其是可以有頁數
可是我加ㄌ兩ㄍ 一個是最新文章 一個是最新回應 結果兩個好像發生衝突 我最新文章的下一頁連結按下去 跑的竟然是最新回應 而且原本應該是 recent 1-5 也變成comment 1-5......請問該怎麼辦 (我是把最新文章裡面的post全部改成comment) 還有...請問 相關文章他會跟底下的文章有一段空行 請問要怎麼刪除 然後"相關文章"的字體粗細又要怎麼改呢? 非常感謝!!!

Abin 提到...

To A. HSIANG:
我在相關的第一篇文章就有提到,如果你要用這段程式碼「同時」做最新回應和最新文章,會有「因為命名相同導致模組錯亂」的問題,就是你現在碰的的情況。可能有些全域變數命名不單是用 post 改成 comment 就能規避掉的,可能還要檢查其他變數是否共用到。(nStartIndex, nFlagIndex 也要小心)
相關文章的字體粗細牽扯到你自己樣板的 style 調整,請參閱你套用的 CSS 變數標籤。

Shiang 提到...

恩恩 謝謝你的回答
順便請問一下 我"上一頁"(<<)的標誌要怎麼放到recent articles的左邊呢 因為我用出來上一頁下一頁的標誌都在字的右邊(Recent Posts << >>)像這樣~

另外~ 時間的格式要怎麼改呢 你寫的語法是年-月-日 如果我要改成 日-月-年 請問要怎麼改 非常謝謝~(對不起 我是新手 什麼都不懂..)

Abin 提到...

To A. HSIANG:
上一頁下一頁的標誌我預設是這樣放的,如果你要改順序,請修改程式碼 generatePostLink() 函式裡第三、四、五行的順序(不是單純搬來搬去就好,尤其是第三行,樣式會亂掉)。
時間的格式是 Blogger 系統就提供的調整選項,到設定-格式-日期標題格式去調整。

Unknown 提到...

那想請問一下,如果要將日期移到文章標題之前要該怎麼修改呢?

Abin 提到...

To Indigo:
要改標題和日期顯示的順序,請修改 function generatePosts 第十六行:sHTML += '<li> ..
裡面的 "title" 變數就是標題,"timestamp" 變數就是日期,順序和格式可以自行調整。

mookio 阿默 提到...

謝謝你
你是我看過教學最清楚最簡潔的一位好手
我有用你的語法修改了blogger
告知你一聲,感謝呢
http://mookio.blogspot.com/

Unknown 提到...

Abin 大大,您真的太強了。
我是skyvee介紹我來這邊挖寶的,你們兩位都是高手啊~~

會持續來挖寶的。

我的部落格:

http://tzuche.blogspot.com

已經用上你的相關文章&最新文章hack,讚。

tzuche

Abin 提到...

To mookio & tzuche:

Hack 之所以有趣,就是要自己動手因應自己的需求改,而不是一昧地轉貼和套用,我的辦法很多也是臨摹別人的 Hack,只不過我一定會改、並且套用在自己的 Blog 上面,這樣才能做出與眾不同、連自己都沒得挑剔的 Blog,不是嗎~
Anyway, 謝謝兩位的支持和鼓勵!

Unknown 提到...

Abin大大:我很喜歡你的教學
我想請問你,我用了這個模組,再點選文章後,列表會回到第一頁,怎麼才可以讓它停留在點選的那一頁列表呢?不然閱讀者還要按下一頁去找剛剛點選那篇文章的頁數,謝謝你的慷慨解囊^^

Abin 提到...

To 焦糖 莫:

當你點到文章時,是連到該文章的永久連結,相當於是連往另外一個頁面,原來在模組裡的分頁的效果(包括目前在第幾頁),是沒有辦法保留的。如果你真的有瞭解這個 Hack 的原理,就會知道這樣做不到的。
如果你覺得麻煩,為什麼不另外開一個視窗或分頁,去瀏覽那一篇文章呢?

DOUBLE CHECK 提到...

Abin先生,你的blog改造對我來說超受用的,

但有幾個問題,關於上頁標誌放到左邊,我怎麼改都做不出來,看了你的回應,還是很懵懂,

可以再麻煩你解說詳細一點嗎。

還有想另外請教,如果我想要獨立顯示文章數還有回應數的話,該怎麼做呢?

很多問題,真是麻煩你了,先謝謝。

DOUBLE CHECK 提到...

不好意思,最後那個問題我在你blog有找到了。

呵呵,還是謝謝。

Shan Ni Lang 提到...

abin大您好:
從你這裡學到許多網頁技巧,其實剛使用blog的時候就是從你這裡開始的,現在手上有三個blogger絕大部分都是從這裡套用過去的,不知道該說什麼,非常感謝您的熱心教學,也幫助我順利完成許多受需求的功能。支持你!

炸機瑞 提到...

给Abin

我是高中tysh/大學生ntust IM
我心中非常感謝你的付出.

當時,大家都用無名,我偏偏不想用,
結果我的部落格很粗造.

哈哈!看了你的文章報告,讓我豁然開朗.
原來可以有這麼多變化..

謝謝你

希望有一天,我的程式語言的能力,可以有很大的進步.

我會繼續follow你的文章,期待你的每一篇文章!

匿名 提到...

謝謝你的模組:) 昨天才blog開張

poan 提到...

感謝您的教學,小弟成功套用了!

Quintin.醫觀點 提到...

哈囉!我套用了您的語法,但是最新文章的部份卻出現: loading....

不知道是為什麼呢?我的blog: http://quintinyang.blogspot.com

Abin 提到...

To 楊昆澈:
請看我程式碼紅色的部份(就是我說:請照個人需求狀況修改的部份):
var nPostStartIndex = 6;
var nPostShow = 10;
意思是,「最新文章」從第 6 篇開始顯示,最多顯示 10 篇文章。你的 Blog 還不到五篇文章,你覺得你照抄我的程式碼不修改,能夠有最新文章顯示得出來嗎?
以你的狀況,把 nPostStartIndex 的值從 6 改成 1 就行了。

Quintin.醫觀點 提到...

Ok.... 謝謝您的提醒!萬分感謝...

csyin 提到...

Abin您好:

我也是您的Blogger hack的愛用者. 我看了你的這篇"最新文章模組", 有了一個想法, 我打算在我的部落格最下方放這一段程式, 讓它自動把我所有寫過的文章連結全部列出來, 當作為總目錄之用. 我試用之後是沒有問題, 只是它會排成好長一串. 不知有沒有辦法讓它分成兩欄顯示呢?

我的部落格:
http://www.cp-toxin.blogspot.com/
(ps: 目前那段程式已經移除)

Abin 提到...

To csyin:
使用 Blogger 會發現,每個功能模組呈現和安排都是以單個區塊為單位,像列出文章這類功能,單純就是條列一篇篇的標題,程式碼裡不會顧及顯示還要分欄的狀況。因為有人會把該模組放在 Sidebar、有人會放在主要頁面、有人的模板就已經是分三欄四欄來安排模組,因此,您應該很少看過這類的功能模組,裡面的內容還會分欄的。
您的狀況,我建議可以自選兩個模組在您想放的區段裡,這樣就不會太寬,而顯示的單頁數量上可以再減少,應該會比硬要在模組裡切兩欄來得有彈性。

csyin 提到...

abin您好:

之前我說的文章分欄看來有解了! 其實有一種叫作Multi-column layout的方法就可以藉由css的設定讓文章自動分欄, 可參考一下http://www.css3.info/preview/multi-column-layout/
不過有缺點是只有Firefox有支援, ie不支援那個功能...

Felix 提到...

原來feedurl有callback的用法啊!受教了!

我個人是直接用google api來寫,
http://huahuas.blogspot.com/,參考看看囉!

匿名 提到...

[不小心改爛樣板或是與其他 Hack 衝突就哭天喊地了]

的確!!

剛開始接觸Blogger時.我無所適從.囧

該死!我看不懂英文~其實國外有很多玩家有提供很多 Hack !

一切都還在慢慢摸索inG~

你們都好強喔 .

ps. blogger回應似乎掛了 .
很多種 回應Hack 都是~~ 怪怪的 囧

Unknown 提到...

To Abin兄

最近似乎blogger有修改後台程式,最新文章模組會變成顯示留言,我搜尋了幾位使用這套模組的部落格,也有類似情況

能請教abin你該怎麼修改嗎?我非常仰賴你這個外掛><

感謝大德

CLHSU 提到...

您好! 我套用您的模組有一段時日了, 非常好用.
但最近點選最新文章時, 卻會出現 檔案下載-安全性警告 的對話窗, 無法連結.

請問, 我的網頁是哪邊出了問題呢?
要如何排除?

謝謝!

Abin 提到...

To 原先使用過這個使用過這個 Hack 的使用者:
如果先前使用正常、但這陣子以來文章連結出現問題的,請參考這篇文章,或重新套用這個 Hack 的程式碼,已修正!

追憶 提到...

Abin大大:

您好,我是最近才開始做blog,也透過google大神找到你的blog,使用了這個最新文章模組終極版,這個真的很好用,感謝您無私分享,謝謝您 :)

jia wei 提到...

恩,版大您好:

我使用這個終極版最新聞張模組,
卻無法顯示出最新文章,2008-11/16
也就是它只顯示10個我舊文章標題 2008-11-06 以前文章

qwertgfdsa78 提到...

http://qwertgfdsa78.blogspot.com/

您好,您的文章非常棒
請教一下,我套用您的最新文章模組和最新回應模組,為何他不會靠左邊對齊呢?
像是這句"Pure Blue Japan SPW-005"
謝謝您

Abin 提到...

To 嘉瑋:
這個模組除了一開始兩個參數設定外(nPostStartIndex = 新文章起始篇號, nPostShow = 顯示文章數量),內容都是從 RSS Feed 資料抓來的,如果你參數沒設錯,請檢查你的 Feed 內容(直接用瀏覽器觀看 feed 的資料),通常最新的文章更新 Feed 需要一點時間,不會馬上出來。

Abin 提到...

To qwertgfdsa78:
不是不會靠左邊對齊,是你的樣板內對 li 這個標籤的樣式定義,讓這類條列式的內容,換行後第二行會自動「縮排」靠右。請檢查你樣板裡的 CSS 定義,調整在 .sidebar li 裡面對樣式的定義。

匿名 提到...

您好

我是最近才開始使用blogspot(本來都是用別的網站提供的^^;)
對網頁語法並不是很熟悉,
意外地瀏覽到您的網站,發現了許多清楚易瞭的分享文章
因此給了我許多幫助,真是很謝謝您^^

在這裡想請問您一下,我也套用了您此篇的最新文章模組及最新回應模組
並且有修改了紅色程式碼的部分
但不知道為什麼兩者都一直呈現loading的狀態
是否能請您給我一些意見呢?
我的網址是http://chiuweikuo.blogspot.com/

謝謝^^

Abin 提到...

To chiu:
由於這些 Hack 都是透過 RSS Feed 去取得資料的,我檢查了你的網址,發現你 Blog 的 RSS Feed 根本沒有打開 (測試方法:直接連到 http://chiuweikuo.blogspot.com/feeds/comments/summary 上面就告訴你 not enabled)。
請到你的管理介面,在「設定」「網站提供」裡,允許網誌資訊提供(完整或簡短都可以),預設是開啟的,應該被您關閉了,所以需要這些資訊的 Hack 都找不到資料,才會一直停留在 Loading 狀態。

匿名 提到...

您好,

果然如您所說的,改了設定後就正常運作了,真的很謝謝您^^

Mochi 提到...

您好,剛套用您的方法很實用,另外想請問是否可以在hack內設定僅顯示前n篇文章,無需有下一頁功能呢?如blog內有100篇文章按照此hack都會顯示出來,但我僅想要顯示前10篇在最新文章地方。希望這樣解釋您能懂,謝謝。

Mochi 提到...

發現自己的問題耍笨了!其實直接blogger內的Recent Post及feed就可以囉!謝謝Abin。

Davin Chao 提到...

To Abin :
我套用這模組也好長一段時間了,但可能因為我版型的關係,導致這模組所顯現的字體在我的版型中相對過小。
我也曾經試著去改CSS的定義部份,但一改,整個文章主體的部份字體大小完全跑掉....XD
不知能否能請你幫我看一下我的CSS程式碼,然後敎我如何下手去更改.....
感恩咧!

Abin 提到...

To Davin:
我的原始碼裡面關於該模組的字型和樣式其實沒有定義,也就是說,沒有特別的 CSS 來處理該模組的字型大小,基本上,它是使用你模板裡一些基本的 HTML 標籤定義。這兩個標籤的定義正是 <ul> 和 <li>。
建議你可以試試定義一個新的 CSS,專門針對「最新文章」這個模組 (newPosts),去定義它裡面 ul 或 li 標籤的字型大小,像是這樣:
#newPosts li{
font-size: 15px;
}
這樣就搞定啦!而且不會影響到別的模組。

Davin Chao 提到...

To Abin :
感恩咧~~

我來研究一下囉!

Chuck Sun 提到...

作者已經移除這則留言。

Xavier 提到...

不好意思又來問問題了
請問一下不要讓時間顯示出來是不是只要把這段刪除掉就好了

- '+timestamp+'

Abin 提到...

To Xavier:
沒錯。試一下就知道了~

Unknown 提到...

Abin大大,想請問一下,可以加入語法讓文章標題上下的行距稍微開一點嗎?

Abin 提到...

To Acedia:
我是用 <li> 標籤來控制每一筆資料的顯示,如果你要調行距 (line-height),請自行調整該標籤的 CSS 定義(就 line-height 調大一點)。

Unknown 提到...

感謝Abin大大的指導 ^^

匿名 提到...

老大你太强悍了~~~我期待你的最后终极版 哈哈

mILazI 提到...

我是来纯表谢意的,太强大了,太强大了,无语啊,怎么会如此简单的实现如此强大的功能,太强大了,对面的blogger们太强大了。

匿名 提到...

我有一個簡單的問題想請教一下你。

我想問同時一個Blog(網頁元素)裡可以放兩個最新文章模組嗎?
我試過十幾次,好像不行。

因為我想在sidebar顯示最新文章,然後再顯示一個特定標籤的文章(用http://聯播或你的Blog網

址/feeds/posts/summary/-/標籤名稱,在你的教學找到的。)
結果只能顯示其中一個。是不是真的不可能同時存在相同的code?還是要做一點修改呢?

如果閣下有空的話,給小弟一個回應吧!

在此先謝謝你網誌的教學分享!

Abin 提到...

To dickson:
在之前的文章我有提過,如果想擺兩個一樣的模組,會有什麼問題。主要會有的障礙是,因為是用 Javascript 來實作,如果你用兩個「網頁元素」來做、填入一樣的 Code,等同在一個頁面宣告了兩次一樣的函式,裡面還有一樣的變數宣告,在使用上根本沒辦法知道你哪個模組是用那個函式那個變數,錯亂的結果當然兩個模組都會不大正常。
要應付這種需求,如果不會改寫程式,最簡單就是換名字。把所有的函數名稱和變數名稱都換掉,改成像是 nPostStartIndex1 或是 showRecentPosts1(nIndex),名字改好再加入這兩個網頁元素應該就不會相互干擾,資料可以正常出來。
正統的改法是將函式定義放在 header 裡面,網頁元素裡只定義廣域變數名稱(當然名稱也不要重複)、以及要呼叫函式的部份,這樣就可以顯示多個最新文章的模組了。

匿名 提到...

如果Blogger權限設為「僅限這些讀者」或「僅網路作家」,最新文章就會一直呈現"Loading..."耶,這是什麼原因阿?請問有方法解決嗎?謝謝您呀。

Abin 提到...

To chunno01:
這個功能是利用「公開」的文章 RSS 來達成的,如果你的 Blog 設了權限、不允許「所有的人」來閱讀,那麼 RSS 也會被封閉,自然這個功能就不能使用了。

Jonathan 提到...

請問一下Abin ^^
假如我不想在每個文章標題後面顯示日期,該怎麼修改呢?
感謝喔!

Abin 提到...

To Jonathan:
請看我的回應#14,把:
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
這一行裡面的 timestamp 拿掉,改成這樣:
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a></span></li>';
就不會顯示時間了。

Jonathan 提到...

在這個網站學到不少有用的技巧
感謝您Abin : )

Jhewei 提到...

版主你好@@,想請問一下,可以把最新文章標題部分縮短,然後縮短的部份用「...」取代嗎?
然後日期的部分,可以顯示月、日就好嗎?

Abin 提到...

To Jhewei:
原始碼裡的變數 title 就是最新文章的標題,而 timestamp 就是日期,你可以自己用函式 substr(開始字元,字元數量) 來截斷縮短成你要的長度和內容。
像原來的標題你只想顯示前五個字,那就在顯示前補一句 title = title.substr(0,5);,標題就會只顯示五個字元。同樣的,你可以自己截斷 timestamp 的長度,看你高興顯示什麼內容自己決定。

BBoy Yentz 燕子 提到...

作者已經移除這則留言。

oc 提到...

Abin兄,你的這篇真的非常簡單,我只有一個小問題,如果要像Wordpress那樣,列表顯示被回應的文章標題,而不是回應的摘要內容,有解嗎?

Abin 提到...

To oc:
你說的是「最新回應」裡列表顯示的不是內容,而是文章標題嗎?我在這篇「最新回應」模組第二段有提到,很抱歉,Blogger 的回應 RSS Feed 裡並沒有提供原文章標題的欄位,我試了很多辦法都抓不到,除非根據文章連結、反向去找標題欄位比對才有機會,不過還挺麻煩的。

希锐亚 提到...

A bin大大,我想知道如果我想讓最新文章輸入大約30個字的摘要,我應該怎樣修改代碼呢?
期望你的解答,謝謝!

希锐亚 提到...

我想我找到了,是“summary”謝謝A bin的程式。

哈酷桑的玩具世界 提到...

哇好厲害
你的CODE我拿走摟~
我剛碰這類東西
以後還請多多指教呢

小千 提到...

我有一點疑問..我不要他後面的日期顯示..請問怎麼拿掉??
謝謝。

Nawio 提到...

樓上可以看回應 # 63

Kaylin Life 提到...

請問一下!可以幫各忙嗎?!我滴首頁原本設定文章篇數為8篇,但不知到怎嚕後來變成只能出現三篇!!!後台也都設定8篇不知道是我哪裡設定有問題??!!請您幫各忙可以嗎??
http://kaylinbaby.blogspot.com/

jijiong 提到...

回樓上的,abin大的最新文章已指出這一切問題囉…^^^

nightspirit622 提到...

Abin兄您好:
感謝您的模組,小弟利用你的模組為原型開發了附縮圖的回應插件:http://blog.nightspirit.tw/2010/03/blogger-ajax.html,還望您不吝給予批評指教。 (_ _)

jijiong 提到...

abin兄你好:想請問,我套用這個模組到sidebar後,在IE、FF都正常,但到google瀏覽器看時,卻只出現「Loading...」,最新回應也是如此,是我的template原碼那邊有問題嗎?? 還請不吝指教
http://jijiong2.blogspot.com

水雲 提到...

您好,想請教一下#65曾提及過的問題

把標題縮短的部分,在大大的教學下已經成功了

然而要把縮短部以省略號表示(...),卻一直想不出個所以來

敬希大大撥冗賜教

jijiong 提到...

abin兄你好,關於在google瀏覽器內無法顯示此模組的問題,小弟已解決了,感謝你囉!原來是字型函示如果放在head前面,google瀏覽器無法辬別的樣子,所以我將函示移到他處就解決囉!!IE,FF,google三款就都跑得出來了…謝謝

阿飛 提到...

超級非常好多謝你!!

Wen-Kan 提到...

太棒了!你做的真好 好棒!
我找文章找半天沒看到你能呈現這麼棒的效果的。
對了 這樣的排列很棒 可以加上縮圖顯示嗎?

Wayne Fu 提到...

感謝不嫌多,小弟的BLOG用了好多從您的大作學來的工具~

幻舞 提到...

感謝大大 解決我很大的問題 我帶走了

Wayne Fu 提到...

Abin 大,借用了您本篇的程式碼,將最新文章模組修改加上了 "縮圖" 功能,
引用文章為「Blogger 最新文章模組加上任意尺寸縮圖」,特此告知。

Unknown 提到...

是不是沒辨法 For 僅網誌作者
我很苦腦,每一個程式都一定要權限:任何人

就是沒有For 僅網誌作者... 不知這位仁兄可以為我解決這個問題了嗎??

Christy's Pianoforte鋼琴補帖 提到...

謝謝站長!連我這種電腦不靈光的都可以一次ok!太感謝囉!

匿名 提到...

網誌管理員已經移除這則留言。

cara menggugurkan hamil 提到...

now present in your city

Cara Menggugurkan Kandungan 提到...

A very good article and very easy to understand.

Dokter Spesialis Kandungan

klinik aborsi jakarta 提到...

Good article, it’s very helpful to all.
I am very impressed about that you mentioned in this article,
thanks for sharing this post. I got best useful information from your site’s blog.

klinik aborsi
klinik raden saleh
biaya aborsi
tindakan aborsi
cara menggugurkan kandungan
klinik aborsi jakarta
klinik aborsi
klinik raden saleh

Klinik raden saleh 提到...

This is my first visit to your blog! We are a team of volunteers and new initiatives in the same niche

Hey there, You’ve done a fantastic job. I’ll certainly digg it and personally
recommend to my friends. I’m sure they’ll be benefited from this site.

Klinik raden saleh
Klinik aborsi
Cara menggugurkan kandungan

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!