觀察 Blogger 版型 CSS 式樣 -- 實例說明

以下起源於和某網友討論到『相關文章點播台 -- RPS 1.0 beta』裡面有關 Blogger 版型的設定, 或者也可以當作『觀察 Blogger 版型 CSS 式樣』的 實例說明。

底下的例子, 不見得能適用到每種版型的變化, 但希望能達到一些『給他魚吃, 不如給他釣竿, 教他釣魚』的目的。

使用的工具, 就是 網頁的原始碼, 或是 Firebug ---- 部落客『玩網頁』的『神器』。

.

『相關文章點播台 -- RPS 1.0 beta』裡面, 提到以下兩個參數, 都和 Blogger 的版型有關 :

• rpsOpt.LocateBoard -- 相關文章點播台的『顯示位置』
• rpsOpt.LocateLabels -- 定位標籤資料

.

• post-footer 實例說明

我的單篇文章內文之後的 'post-footer' 版型是 :

<div class='post-footer'> <p class='post-footer-line post-footer-line-1'> </p> <p class='post-footer-line post-footer-line-2'> <span class="post-labels">   </span></p> <p class='post-footer-line post-footer-line-3'> </p> </div>

所以, 下面的參數會設定『相關文章點播台的顯示位置』在 class='post-footer' 『內部的最後面 』:

• rpsOpt.LocateBoard = ['append', '.post-footer'];

prepend	『內部』的最前面
append	『內部』的最後面
before	『外部』的前面
after	『外部』的後面

除此 CSS (Cascading Style Sheets) 位置表示語法, 還有『.』,『#』, 和 html tag

『.』句號	class
『#』井號	id
開頭都沒加	html tag

.

以下圖示 append, prepend ... 等的位置。一般情況下 before 和 prepend 的結果會很像, append 和 after 的結果會很像。但是在 class='post-footer' 之內的 prepend 和 append 的位置, 會繼承 'post-footer' 的式樣。

[before] <div class='post-footer'> [prepend] [append] </div> [after]

.

• 標籤格式 實例說明

我的『標籤』的版型是 :

<div class='post-footer'> ... <p class='post-footer-line post-footer-line-2'> <span class='post-labels'> 標籤： <a href='http://網址/search/label/標籤1' rel='tag'>標籤1</a>, <a href='http://網址/search/label/標籤2' rel='tag'>標籤2</a>, <a href='http://網址/search/label/標籤3' rel='tag'>標籤3</a>, ... </span> </p> ... </div>

定位標籤資料 (告訴程式『每一個標籤的 a href』) 就要寫成 :

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

不見得每一層都要寫出來, 因為 <div class='post-footer'> 裡面只包了一個 <span class='post-labels'> , 不會有誤解, 不一定要特別去指定 class='post-footer-line post-footer-line-2', 所以就被我省略了。

.

• 不一樣的版型

某個版型並沒有 'post-footer' , 而是

Posted in 標籤1, 標籤2 by 作者名

<div class="post"> ... 內文 ... <p class="postmetadata"> Posted in <a rel="tag" href="http://網址/search/label/標籤1">標籤1</a> , <a rel="tag" href="http://網址/search/label/標籤2">標籤2</a> , by 作者名 </p> ... </div> <div id="comments" class="comments"> ... </div>

我會建議將參數改為

• rpsOpt.LocateBoard = ['append', '.post'];
• rpsOpt.LocateLabels = ['.post', '.postmetadata', 'a'];

或是

• rpsOpt.LocateBoard = ['after', '.post', '.postmetadata'];
• rpsOpt.LocateLabels = ['.post', '.postmetadata', 'a'];

.

先這樣, 以後再補充