相關文章點播台 -- 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"/>

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

 

.

• 基本設定

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

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

.

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

再來是定位標籤資料, 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"
• 顯示每篇文章的標籤
• 選擇哪些標籤的優先權較高

.