2008年9月15日 星期一

觀察 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'>
image
</p>
<p class='post-footer-line post-footer-line-2'>
<span class="post-labels">
image 
</span></p>
<p class='post-footer-line post-footer-line-3'>

image
</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' 之內的 prependappend 的位置, 會繼承 'post-footer' 的式樣。

[before]
<div class='post-footer'>
[prepend]
image
[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'];

.

先這樣, 以後再補充

0 意見:

發表您的回應

張貼留言