2008年7月17日 星期四

相關文章點播台 -- RPS 1.0 beta 測試

前一陣子開始改良『依相關度排序的相關文章』, 現在已經進入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"/>

然後, 如果一切順利的話, 就會看到類似底下的畫面

 2008-07-17_214909

.

  • 基本設定

如果沒有順利顯示, 或是位置不如預期, 可以加入以下的參數 :

<script type="text/javascript">

rpsOpt.LocateBoard = ['append', '.post-footer'];
rpsOpt.LocateLabels = ['.post-footer', '.post-labels', 'a'];

</script>

如果你的部落格網址太特別, 或是你想『顯示另一個 Blogger 部落格的相關文章』 , 或是調整每一頁的文章篇數:

<script type="text/javascript">

rpsOpt.blogRoot = 'http://eucaly61.blogspot.com/';
rpsOpt.Lines = 10;

</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]

.

如果上面對了, 至少會顯示『載入中』

2008-07-17_215300

再來是定位標籤資料, 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 = '相關文章載入中 ...';
rpsDisp.ListHead = '約有 %PostNum% 篇相關文章,以下是第 %PostNumFrom% 至 %PostNumTo% 篇';
rpsDisp.ListLine = '%PostRank% %PostTitle% - %PostDate%';

</script>

可以任意調換順序, 或者如果不想看到日期或相關度, 也可將 %PostRank% %PostDate% 等 拿掉。

<style>
#rpsBoard {
background: #F0F0F0;
border:2px dotted #ccc;
padding: 0px 5px 5px 15px;        /*上 右 下 左*/
margin: 10px 10px 5px 0px;        /*上 右 下 左*/
}
</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. 匿名 提到...

    您好:
    这个相关文章设计的非常不错,不知道为什么在我的博客上面会出现错误(只会再一个页面的文章数多于1的情况下。):firefox下面:rps$.Board.find is not a function
    https://lockice.googlecode.com/svn/rps-10-18.js
    Line 151.在ie6下面也会出现错误。
    在首页面,标签页面(该标签页面文章数多于1),这些页面出错,单篇日志页面不出错。在标签页面如果该标签的文章只有一篇,则也会显示相关文章(逻辑上似乎有点问题)。
    我刚接触blogger,望能帮助解决该问题,或者给予解决思路。

  2. 水瓶尤加利 / Eucaly61 提到...

    @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();
    });
    };

  3. 匿名 提到...

    非常感谢你能给我提出建议。至于那个googlecode我敢接触不是太了解。
    我不明白为什么我更换模板之后好了,可以正常使用了。我前天怎么换模板都是不行的。很奇怪,还好能用了。
    我今天才看到你的留言,看到后马上又装上了它。我修改了一些东西你可以看一下这里:
    http://www.lockice.com/2008/08/blogger-related-posts.html
    如果你准备修改这个相关文章的程序的话,我修改的两个地方或许可以考虑加进去。

  4. 高藥師 提到...

    我記得有留言

    怎麼都沒有出現
    是被您砍掉了嗎

  5. 水瓶尤加利 / Eucaly61 提到...

    @ 高藥師
    我只有刪除『依相關度排序 ---- 更有看頭的『相關文章』功能』那邊重 複的留言, 在目前這篇文章則沒有看到留言,

    我發了信給你, 你可以選擇用 mail 連絡。

  6. Sammi 提到...
    作者已經移除這則留言。
  7. Catherine Huang 提到...

    這篇文章研究了2天...
    終於使用成功了:)

    原因是因為從來沒有聽過"jQuery"...
    在這篇文章首次接觸到。

    因為您原先設定的顏色在我的部落格顯示較不清楚。
    框框背景也不曉得為什麼不能更改。

    所以我修改了一小下並存在自己的空間上使用...
    如果不可以的話請告知我,謝謝:)

  8. 水瓶尤加利 / Eucaly61 提到...

    @ 璘夜, 歡迎愛用呀, 要再次散播時註明出處即可,
    如果只是存在自己的空間上使用, 是沒有限制的

  9. 文博客 提到...

    我加了这句
    <script src="http://eucaly61-java.googlecode.com/svn/trunk/rps-10-mini.js" type="text/javascript"/>

    任务栏提示脚本出错,其它的什么也没显示

  10. 水瓶尤加利 / Eucaly61 提到...

    在『文博客-九牛一毛』看到介紹 jQuery, 但不知是幾個 Blog 那一個, 以及否有載入 jQuery 及 rps-10-mini.js。
    還是不行的話, 請留網址讓我去看一下。

  11. Scott 提到...

    我選了一個很奇怪的模版,不太適用,但實在很喜歡這個功能,因為其他都方法都沒有關連性,不知道有沒有辦法可以幫我看看,謝謝!

    http://mbatics.blogspot.com/

    原始模版:http://inferno1013.fileave.com/clean.xml

  12. 水瓶尤加利 / Eucaly61 提到...

    @侯彥行
    閣下選用的模版 (以及原始模版) 在單篇文章的後面沒有『標籤那一行』, 或許你可以試著從別的模版複製過來,
    『標籤』的版型, 可以參考 觀察 Blogger 版型 CSS 式樣 -- 實例說明
    希望這樣幫得上忙

  13. Scott 提到...

    太謝謝您的回復,我成功了^ ^

  14. 高藥師 提到...

    不好意思

    之前有請教您關於相關文章的問題

    但是後來套用別的版型就失敗了

    不知道可否再請教您的email

    網頁上找不到您的信箱

    arguskao@gmail.com

張貼留言