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 好像能做到,但我還是偏好簡單、有效率又獨立安全的辦法。如果有找到,本文會再改個第四版「最後終極版」好了,哈哈~

回應: 88

Davin 提到...

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

Abin 提到...

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

Susan L. 提到...

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 L. 提到...

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

小束 提到...

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

Joyce 提到...

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

A. HSIANG 提到...

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

Abin 提到...

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

A. HSIANG 提到...

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

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

Abin 提到...

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

indigo 提到...

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

Abin 提到...

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

mookio 提到...

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

tzuche 提到...

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

會持續來挖寶的。

我的部落格:

http://tzuche.blogspot.com

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

tzuche

Abin 提到...

To mookio & tzuche:

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

焦糖 莫 提到...

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

Abin 提到...

To 焦糖 莫:

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

lionel 提到...

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

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

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

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

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

lionel 提到...

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

呵呵,還是謝謝。

ShanNiLang 提到...

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

炸機瑞 提到...

给Abin

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

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

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

謝謝你

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

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

Meatloaf Sisters 肉塊姐妹 提到...

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

阿厝 提到...

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

楊昆澈 提到...

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

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

Abin 提到...

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

楊昆澈 提到...

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 都是~~ 怪怪的 囧

Joyce 提到...

To Abin兄

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

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

感謝大德

C.L. HSU 提到...

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

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

謝謝!

Abin 提到...

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

追憶 提到...

Abin大大:

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

嘉瑋 提到...

恩,版大您好:

我使用這個終極版最新聞張模組,
卻無法顯示出最新文章,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 裡面對樣式的定義。

chiu 提到...

您好

我是最近才開始使用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 狀態。

chiu 提到...

您好,

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

麻糬 提到...

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

麻糬 提到...

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

Davin 提到...

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

Abin 提到...

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

Davin 提到...

To Abin :
感恩咧~~

我來研究一下囉!

Deric 提到...

作者已經移除這則留言。

Xavier 提到...

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

- '+timestamp+'

Abin 提到...

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

Acedia 提到...

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

Abin 提到...

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

Acedia 提到...

感謝Abin大大的指導 ^^

匿名 提到...

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

mILazI 提到...

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

dickson 提到...

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

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

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

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

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

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

Abin 提到...

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

chunno01 提到...

如果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我拿走摟~
我剛碰這類東西
以後還請多多指教呢

Haleny 提到...

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

Nawio 提到...

樓上可以看回應 # 63

[啵啵啾小公主Kaylin | Life 写真の日記] 提到...

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

jijiong 提到...

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

NightSpirit 提到...

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三款就都跑得出來了…謝謝

阿飛 提到...

超級非常好多謝你!!

W-P-G-2010 提到...

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

WFU 提到...

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

幻舞 提到...

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

WFU 提到...

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

Wu Emma 提到...

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

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

Christy Chiu 提到...

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

匿名 提到...

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

張貼留言

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