前一陣子開始改良『依相關度排序的相關文章』, 現在已經進入beta 測試。
目前取的名字叫『相關文章點播台』-- RPS 1.0 (Related Posts Surf), 相較於 之前從 Abin's Tech Note 那邊修改過來的版本, 主要的不同為 :
- 以外掛的形式執行, 完全不用改模版, 只要一行就可以安裝
- 增加換頁功能
- 增加自訂設定
.
-
安裝
真的只要一行, 就像底下這樣, 只要在載入 jQuery 之後再執行就可以。程式會找到預設的位置顯示相關文章。
<script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-mini.js" type="text/javascript"/> |
然後, 如果一切順利的話, 就會看到類似底下的畫面
.
-
基本設定
如果沒有順利顯示, 或是位置不如預期, 可以加入以下的參數 :
<script type="text/javascript"> rpsOpt.LocateBoard = ['append', '.post-footer']; </script> |
如果你的部落格網址太特別, 或是你想『顯示另一個 Blogger 部落格的相關文章』 , 或是調整每一頁的文章篇數:
<script type="text/javascript"> rpsOpt.blogRoot = 'http://eucaly61.blogspot.com/'; </script> |
.
其中 'append', '.post-footer' 表示『顯示位置』的 CSS 設定,
- 'append', 也可以改成 'prepend' 或 'after' 或 'before', ---- 和 '.post-footer' 的關係如下所示,
- 第一個參數如果不是上述四個, 則會視為 CSS 位置表示語法, 並預設為 'append'
- 再來是 CSS (Cascading Style Sheets) 位置表示語法, 簡單的說, 『.』句號代表 class, 『#』井號代表 id, 開頭都沒加代表 html tag,
- 可以設定多個 CSS 位置表示語法, 會讓定位更精準, 記得都要加上引號
- 目前預設『必須剛好』找到一個位置, 才會顯示, 這是為了區別『單篇文章』,『首頁』和『瀏覽日期/標籤』。
如果改為 rpsOpt.LocateBoard = ['.post-footer', '.post-footer-line-1']; 則會顯示在 [B] 的位置。
[before] <div class='post-footer'> [prepend] <p class='post-footer-line post-footer-line-1'> ... 張貼者: XXXX 位於 ... </p> [B] <p class='post-footer-line post-footer-line-2'> ... 標籤:... </p> <p class='post-footer-line post-footer-line-3'> ... 這裡不一定每個人都有內容 ... </p> [append] </div> [after] |
.
如果上面對了, 至少會顯示『載入中』
再來是定位標籤資料, rpsOpt.LocateLabels = ['.post-footer', '.post-labels', 'a']; 如果你的模版和下面不一樣, 請自行修改
- 如果你的『標籤名稱』不是用 <a href="..."> 超連結包住,
.... 目前暫時無解, 請期待 下一版
<div class='post-footer'> <p class='post-footer-line post-footer-line-1'> ... 張貼者: XXXX 位於 ... </p> <p class='post-footer-line post-footer-line-2'> <span class="post-labels">標籤: <a href="..." rel="tag">標籤名稱1</a>,... </p> <a href="..." rel="tag">標籤名稱2</a>,... </p> </span> |
.
-
進階設定
<script type="text/javascript"> rpsDisp.Loading = '相關文章載入中 ...'; </script> |
可以任意調換順序, 或者如果不想看到日期或相關度, 也可將 %PostRank% %PostDate% 等 拿掉。
<style> |
替相關文章區塊上色 ...., 或 padding, margin 請依版面自行調整。
.
-
除錯
有問題的話, 可以試試以下的版本, 會有除錯訊息
[+/-] show/hide debug message
<script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-debug.js" type="text/javascript"/> <script type="text/javascript"> rpsDebug.mode = '%blog%label%jsOK%jsOK-full%'; </script> |
.
-
To Do
可能的問題, 或預計增加的功能
- 不同模版的相容性
- 不同瀏覽器的相容性 (FF3, IE6, IE7, ...)
- 載成更多 json Feed, 目前每個標籤只載入 20 篇
- 調整 相關度計算方式
- 顯示/隱藏文章摘要
想到但不一定會做的
- 抓取同一網頁的其他資料, e.g. feedjit "Visitors to this page also liked"
- 顯示每篇文章的標籤
- 選擇哪些標籤的優先權較高
.
14 意見:
發表您的回應您好:
这个相关文章设计的非常不错,不知道为什么在我的博客上面会出现错误(只会再一个页面的文章数多于1的情况下。):firefox下面:rps$.Board.find is not a function
https://lockice.googlecode.com/svn/rps-10-18.js
Line 151.在ie6下面也会出现错误。
在首页面,标签页面(该标签页面文章数多于1),这些页面出错,单篇日志页面不出错。在标签页面如果该标签的文章只有一篇,则也会显示相关文章(逻辑上似乎有点问题)。
我刚接触blogger,望能帮助解决该问题,或者给予解决思路。
2008年7月31日 下午3:28
@lockice
原先的設計就是要單篇文章才會顯示相關文章,
至於 "rps$.Board.find is not a function" 則是程式的問題, 要加入粗體的那一行
p.s. 你的 https://lockice.googlecode.com/svn/
我用 https: 無法查看, 但 http: 則可以
rpsFunc.main01 = function() {
jQuery(document).ready(function(){
rpsFunc.initVar();
rpsFunc.initBoard();
if (!rps$.Board) return;
rpsFunc.fatchLabel();
});
};
2008年7月31日 下午6:35
非常感谢你能给我提出建议。至于那个googlecode我敢接触不是太了解。
我不明白为什么我更换模板之后好了,可以正常使用了。我前天怎么换模板都是不行的。很奇怪,还好能用了。
我今天才看到你的留言,看到后马上又装上了它。我修改了一些东西你可以看一下这里:
http://www.lockice.com/2008/08/blogger-related-posts.html
如果你准备修改这个相关文章的程序的话,我修改的两个地方或许可以考虑加进去。
2008年8月2日 下午6:45
我記得有留言
怎麼都沒有出現
是被您砍掉了嗎
2008年9月14日 下午1:19
@ 高藥師
我只有刪除『依相關度排序 ---- 更有看頭的『相關文章』功能』那邊重 複的留言, 在目前這篇文章則沒有看到留言,
我發了信給你, 你可以選擇用 mail 連絡。
2008年9月14日 下午2:12
2009年2月26日 下午2:35
這篇文章研究了2天...
終於使用成功了:)
原因是因為從來沒有聽過"jQuery"...
在這篇文章首次接觸到。
因為您原先設定的顏色在我的部落格顯示較不清楚。
框框背景也不曉得為什麼不能更改。
所以我修改了一小下並存在自己的空間上使用...
如果不可以的話請告知我,謝謝:)
2009年3月7日 凌晨2:22
@ 璘夜, 歡迎愛用呀, 要再次散播時註明出處即可,
如果只是存在自己的空間上使用, 是沒有限制的
2009年3月9日 晚上9:15
我加了这句
<script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-mini.js" type="text/javascript"/>
任务栏提示脚本出错,其它的什么也没显示
2009年3月17日 晚上10:18
在『文博客-九牛一毛』看到介紹 jQuery, 但不知是幾個 Blog 那一個, 以及否有載入 jQuery 及 rps-10-mini.js。
還是不行的話, 請留網址讓我去看一下。
2009年3月17日 晚上10:57
我選了一個很奇怪的模版,不太適用,但實在很喜歡這個功能,因為其他都方法都沒有關連性,不知道有沒有辦法可以幫我看看,謝謝!
http://mbatics.blogspot.com/
原始模版:http://inferno1013.fileave.com/clean.xml
2009年4月4日 中午12:16
@侯彥行
閣下選用的模版 (以及原始模版) 在單篇文章的後面沒有『標籤那一行』, 或許你可以試著從別的模版複製過來,
『標籤』的版型, 可以參考 觀察 Blogger 版型 CSS 式樣 -- 實例說明
希望這樣幫得上忙
2009年4月6日 上午11:36
太謝謝您的回復,我成功了^ ^
2009年4月21日 晚上11:20
不好意思
之前有請教您關於相關文章的問題
但是後來套用別的版型就失敗了
不知道可否再請教您的email
網頁上找不到您的信箱
arguskao@gmail.com
2009年8月27日 中午12:14
張貼留言