2007-03-20

標籤/搜尋頁面只列出標題 (Simplify the result of label and search)

Blogger 首頁允許你設定最多顯示的文章數量,但是,其他的地方就不一定了。像是標籤、搜尋、網頁存檔等等匯總的頁面,文章一多一點進去,嘩啦一狗票的文章就通通連內文一併列出來,預設最多會出來 20 篇左右,但如果是歷史文章存檔的匯總,搞不好上限是 999,那通通都列出來還得了!因此,我們可能希望當點到標籤、列出搜尋結果或是歷史文章存檔,可以只列出時間和標題,有需要詳細內容的再點進去觀看。

這類的 Hack 很簡單也很普遍,後面的參考文章也都有提,但是我的需求有一點點不一樣,我「只」希望在標籤和搜尋頁面列出標題,但是在存檔頁面 (Archive) 裡面還是像首頁列出原文(不然,我做那麼多「繼續閱讀」的 Hack 效果只出現在首頁也浪費了),根據我之前的文章介紹 Blogger 內的四種頁面判斷句,也做了一點點修改。Hack 的第一個步驟,同樣是編輯範本的完整 HTML(要展開小裝置範本),找到下面的這一段(如果你裝過其他 Hack,可能不是長這樣,不過,關鍵是紅色那一行):

<b:loop values='data:posts' var='post'>
  <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:if>
  <b:include data='post' name='post'/>
  <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.allowComments'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:loop>

解釋一下,這是樣版用來「列出文章」用的範本,「任何」一種狀況下適用,那段 date-header 的是列出日期,而紅色那一行的意思就是「列出全文」。我們要動的手腳正是:「只在某些條件下列出原文,其他情況,列出標題就好」,這樣的修改,只要把下面這一段判斷取代掉上述紅色的那一行即可:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <!-- Show article title only -->
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

上面這一段的意思是:當現在所在的頁面「不是首頁」,而且,PageType 為 index (標籤/搜尋) 的時候,只列出文章的標題,否則,維持原樣列出完整內文。好!這樣就改好了!(很簡單吧!)如果你是想改的是「除了首頁」以外的頁面都只列出標題(也就是存檔頁面也要只列出標題),那麼可以把上面那段的第二行改成:

<b:if cond='data:blog.pageType != "item"'>

這樣就是:當現在所在頁面「不是首頁」,而且也「不是單篇文章的內文」時,就通通只列標題。

此外,其實這個 Hack 還有很多變化型,可以更動「只列出標題」頁面的樣式,像是「只列出標題卻不含日期」(那你要把上面 date-header 列出日期那段也塞入判斷句裡),或是更改 <h3 class='post-title'> 的 CSS。如果你也有用到我 Comment Toggling 的 Hack,那麼建議你關於 Comment: <b:if cond='data:post.allowComments'> 那三行最好也塞入判斷句裡去,這樣原始碼也會比較簡潔。

本來想偷懶不寫這一篇,因為自己的樣版已經不夠「標準」了,要怎麼 Hack 有點忘了,不過剛好有網友再問,所以還是依照我參考的原文,還有自己的一點點心得,整理了這一篇。

參考文章:
Blog工事紀實-進入標籤頁面後只顯示文章標題
Blogger-Beta Hack之“简洁的搜索/标签结果”

回應: 69

 

2007-03-12

移除連結的虛線外框 (Remove the link outline)

不知道什麼時候開始,在瀏覽器上,當點到某些連結的時候,總會有個虛線外框在上面,尤其在我黑色的 Blog 樣版上格外明顯,一直以來都很礙眼。這兩天剛好看到一篇文章,解決了我長久以來的疑惑,原來這也是 CSS 屬性的一部份啊!雖然這個變數名稱很怪,而且不同瀏覽器還都不一樣,不過經測試,果然徹底的解決了這個問題,順手就寫篇文章記下來。

所謂連結的虛線外框就是像這樣,括在「發表時間」的外面:

怎麼拿掉呢?只要你在定義的 CSS 裡面,對基本標籤 <A> (標註連結用的)做樣式 Style 宣告做修改就好了,在自己網頁的 CSS 宣告區段(在 Blogger 裡面,就是範本 </head> 標籤前,一堆定義 ID & Class 的地方),放入下面這些 CSS Code(如果不是放在區段內的獨立宣告,記得以下整段要加上 style 的標籤前後括起來):

/* Remove the link outline */
a {
  noFocusLine:expression(this.onFocus=this.blur());
} /* For IE */
:focus {
  -moz-outline-style: none;
} /* For Firefox */

如果只想對一個連結這麼做,則只要在 <A> 標籤內設定屬性,範例如下(紅色的部分為屬性):

<a href="http://www.google.com" hidefocus="true">Google</a>

說實話我從來沒看過這些屬性和樣式變數,不過既然有用,當然就套用囉!這個 CSS Code 適用於各種瀏覽器、網頁文章和系統。

參考文章:
[CSS]hideFocus Property

回應: 2

 

2007-03-11

Blogger 與 Picasa Web Album 的完美結合

慶祝 3/8 婦女節 (?!),Google 的網路相簿服務:Picasa Web Album 又放出利多,不但增加了四倍的儲存容量,對 Blogger 的使用者來說,最重要的是 Picasa Web Album 變成了 Blogger 上傳圖片的檔案管理員!

原先我用過 Picasa Web Album,介面和功能沒有 Flickr 好,空間也沒有 Flickr 的大,最糟糕的問題是,放在相簿裡面的照片不提供外連!(之前以為能外連,其實是因為 Picasa 的 cookie or cache 沒有登出清掉造成的假象)因為不能外連的問題,所以我就直接宣布 Picasa 出局,偏偏 Blogger 雖然內建圖片上傳功能,但是不能管理(貼後不管),所以最後決議是連 Blog 所用的照片,只好在 Flickr 裡弄一個 Blog image 專用的相簿 (Set),專門拿來放 Blog 文章裡的圖。

沒想到還在整理文章的時候,馬上放出大利多,Picasa Web Album 空間從原來的 250M 暴增到 1G+ (+ 就是還會長),而原先在 Blogger 上傳過的圖片,根據不同的 Blog,在 Picasa Web Album 裡會多一個該 Blog 專用的相簿(有個前題,你在上傳圖片前,有個圖片將會被放入 Picasa 的協議要先同意),接著你可以去 Picasa 裡管理,對圖片下標題或是註解,讚啊!我就是在等這個啊!

不過,該功能還是有限制。還記得上面說過的致命傷:圖面不能外連的問題?該 Blog 專用相簿(相簿封面圖片會有個 B 的字樣),如果是透過 Blogger 上傳,該照片外連沒有問題,但是如果透過相簿上傳要貼連結到 Blog,這樣還是有外連的限制!而且當你殺掉那篇 Blog 文章,該上傳圖片也會一併從相簿裡消失,Blogger 和 Picasa Web Album 之間存在一些連動性,也維持原先 Picasa Web Album 不准隨意外連的限制。

Picasa 處理 Blogger 圖片的英文介面,屬於 Blog 的相簿封面左下有個 B 字樣

對我來說這樣就夠讚了!我本來就希望 Blog 圖片都放在 Picasa 上面(因為都是 Google 的服務,本來就應該這樣相互整合嘛),空間和功能不是重點,流程是寫完文章上傳圖片,然後連去網路相簿整理一下標題和註解,這次改版剛好就是這樣支援。如果可以上傳完原始圖片,預覽大小才選擇文章中的 Size (因為 Picasa 只提供大中小三種縮圖,而且上傳前就要決定,我哪知道把原圖會被弄成什麼大小啊),最好還有在上傳介面裡加入圖片標題設定,那對我寫 Blog 來說就無所挑剔啦!Anyway,瑕不掩瑜,我所有 Blogger.com 的 Blog,所有圖片位置都將改放到上面了(還好不多),除了日常照片之外(Flickr 還是無可取代,Google 還要再加油),我又多了一個愛用的網路相簿囉!(如果使用中文介面的 Picasa Web Album,現在可能還不能用,不過如果像我切換偏好語系,改成英文,新功能就跑出來啦!)

回應: 6

 

2007-03-10

Blogger 資料來源用法與整理 (Site Feed Usage)

在 Blogger 介紹過的眾多 Hack 之中,詢問度最高、用的人最多的就是「最新回應」或「最新文章」,當然,我之前的文章也介紹過,程式碼都一樣,稍稍改一下 Feed 的來源就可以了。包含上一篇顯示相關文章的 Hack 也有提到,Blogger 提供很多種的 Feed 來源,上一篇用的是特定標籤的 Feed,而「最新回應」用的是 Comment 的 Feed,「最新文章」當然就是用整個 Blog 最基本的 Feed,最後一類比較冷門,叫做 Pre-post Comment,Blogger 有「意見管理」的功能,也就是「留言要經版主審核才能刊出」,如果有啟用這個功能,這個 Feed 就可以列出還沒刊出的留言。這四類的 Feed URL 整理如下:

新文章的 Feed(以下幾種都有一樣的效果):

  • http://你的Blog網址/feeds/posts/類型
  • http://你的Blog網址/rss.xml
  • http://你的Blog網址/atom.xml
  • http://beta.blogger.com/feeds/你的BlogID/posts/類型
最新回應留言的 Feed:
  • http://你的Blog網址/feeds/comments/類型
  • http://beta.blogger.com/feeds/你的BlogID/comments/類型
特定分類標籤的 Feed:
  • http://你的Blog網址/feeds/posts/類型/-/標籤
  • http://beta.blogger.com/feeds/你的BlogID/posts/類型/-/標籤
未審核的回應留言的 Feed:
  • http://你的Blog網址/feeds/特定文章ID/comments/類型
  • http://beta.blogger.com/feeds/你的BlogID/特定文章ID/comments/類型

以上有些屬性需要自己調整,說明如下:

  1. http://你的Blog網址:如果沒有用 Customized Domain Name,通常應該是 http://名稱.blogspot.com。這裡有個小技巧,如果在樣版裡面常常會用到「自己」的網址當作變數或 Feed URL,可以直接省略,也就是說 "http://你的Blog網址/" 等同於 "/",絕對路徑可以用相對路徑來表示。
  2. 類型:指的是 Feed 內容的類型,可以填的值有 default, full 和 summary,前兩個是提供完整的 Feed 內容,summary 則是僅提供部分(應該會比較快)。
  3. 你的BlogID:注意一下你的網址列,尤其在你登入編輯的時候看得到,找 blogID= 後面那個字串就是。這裡有官方說明
  4. 特定文章ID:在閱讀特定文章,要留言回應的時候注意一下網址列也可以看到,找 PostID= 後面那個字串就是。
  5. 標籤:你想要看的分類標籤名稱(大小寫有分別喔)。如果想同時看多個標籤的 Feed,也可以用 "標籤1/標籤2" 來取代(代表的是,同時有這兩個標籤的所有文章)。注意,如果有標籤名稱中間有空白,在整個網址一定要加雙引號,手動敲網址的話也可用 %20 或是 + 來替代。

以上是所有 Blogger 提供的 Feed URL,這些 Feed 網址還有一些參數可以下喔!基本常識:如果要在網址後面加參數,第一個參數和網址字串中間要加一個 ? 當連字號,如果後面不止一個參數,參數之間要用 & 當作連接符號。下面先介紹一些參數,連接的特殊符號在範例裡再看:

  1. alt=格式:可以把 Feed 內容的格式改成 RSS 2.0 (rss),預設是 ATOM (atom) 的格式,也支援 JOSN (json-in-script)。
  2. start-index=N:設定 Feed 內容的啟始文章標號,如果 Feed 裡面有十篇,index N 設成五的話,那就只會顯示從第五篇開始後面的內容。
  3. max-results=N:設定 Feed 內容最大的數量。值好像沒有上限(可以搞個 50 或 100 的,相對地文章多顯示會比較慢),預設沒有這個參數的話,內容是 20 篇。
  4. orderby=排序方法:設定 Feed 內容依照發文時間 (published) 排序,或是「更新時間」(updated) 來排序,如果用 published 這個參數不管舊文章怎麼更新,也不會干擾你的 RSS Feed 內容。

好,怎麼混用以上的 Feed URL 加上屬性和參數呢?以下有幾個範例:

  1. 範例一,顯示我的最新文章,強制用 RSS2.0、上限十篇完整內容: http://abintech.blogspot.com/feeds/posts/full?alt=rss&max-results=10
  2. 範例二,顯示我的最新回應,顯示從第五篇開始,總共顯示五篇部分的內容就好: http://abintech.blogspot.com/feeds/comments/summary?start-index=5&max-results=5
  3. 範例三,顯示同時有標籤 BLOGGER HACK 和 CSS 的文章: http://abintech.blogspot.com/feeds/posts/summary/-/CSS/BLOGGER+HACK

有很多的 Hack 都是利用這些 Feed URL 提供的內容來做變化,只要善用 Javascript 或是 JSON 和範例,相信可以做出各式各樣符合自己需求的 Hack,搭配 CSS 語法和 Blogger 的樣版彈性,自己的 Blog 要打造成什麼樣子都沒問題!

參考文章:
Blogger Beta Feeds
修正RSS Feed 依發文時間排序

回應: 11

 

2007-03-06

最新文章的加強版:其他的最新文章 (Other Recent Posts)

原來提過的「最新文章」模組,很單純是抓 Feed 裡面的資料,根據排序之後列出最前面的幾篇,不過在首頁顯示的時候有個問題,首頁不就已經顯示了最新文章嗎?假設你設定首頁列出十篇文章,「最新文章」模組裡面的標題也列出最新十篇,這不是都一樣嗎?這個模組放在首頁就很好笑了~我的加強版很簡單,主要有兩個部分,第一,把這塊模組放在 Blog 文章模組的下面,第二,修改之前的程式碼,只列出首頁沒出現的最新文章標題。

第一個問題,Blogger 除了提供範本原始碼 (Template HTML) 修改,另外也提供「網頁元素」一個視覺化的模組管理介面,如果想在 Blog 文章下面新拉一個模組(加入網頁元素),預設是不行的。不過呢只要偷改一下原始碼,把限制拿掉就可以了。打開範本的原始程式碼,原來 Blog 文章所在的區塊程式碼應該是這樣:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'>
............. (以下略過不表)

顧名思義,把上面紅色那段刪除,Blog 文章所在的 Section 才能夠新增「網頁元素」。儲存後回到範本的網頁元素分頁,接著就可以在 Blog 文章所在的上方點選「加入網頁元素」了!接下來解決第二個問題,可以參照我之前的文章,不過為了「最新文章」和「最新回應」兩個模組可能衝突的問題,我另外更改了函示和部分變數的名稱。首先加入一個新的 HTML/Javascript 元素,填入下面的程式碼:

<div id="newPosts">
  Loading...
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handlePosts(json) {

  function compareentry(a,b) {
    order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
    return 0-order;
  }
 
  var temp = '<ul>';
  var PostShow = 10;
  var StartIndex = 5;
  var sortentry = json.feed.entry.sort(compareentry);
  if (json.feed.entry.length > StartIndex)
  {
    for (var i=StartIndex, Post; Post = sortentry[i]; i++) {
      if (i >= PostShow+StartIndex)
        break;
      var title=Post.title.$t;
      var j=0;
      while (j < Post.link.length && Post.link[j].rel != "alternate")
        j++;
      var link=Post.link[j].href;
      var timestamp=Post.published.$t.substr(0,10);
      temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
    }
  }
  else
    temp+="<li>No further post !</li>";
  temp+="</ul>";
  document.getElementById("newPosts").innerHTML = temp;
}
</script>

<script src="/feeds/posts/summary?orderby=published&alt=json-in-script&callback=handlePosts" type="text/javascript"/></script>

和之前不一樣的,我改了一些函示名稱和變數名字,主要是怕和最新回應模組衝突。我也加了一些修改,上述程式其中有兩個紅色變數,PostShow 指的是這個模組想要列出來的標題數量,而 StratIndex 指的是要從第幾篇開始表列。以我上面的範例來說,我在首頁只顯示五篇文章,而這個模組「應該」是顯示從第五篇之後的新文章標題,總共列出十個,所以設定就是上面這樣。另外補充的是,我希望這個「網頁元素」只出現在首頁,所以搭配另一篇文章提到的 Hack,讓我這個 Other Recent Posts 模組只會出現在首頁,裡面只顯示除了首頁五篇最新文章外的其他最新文章標題,這樣是不是比一般的「最新文章」模組來得合理多了?

回應: 17

 

2007-03-05

加入相關文章功能 (Related Post)

Blog 文章一多,分類標籤的運用在找尋特定文章時就很重要。當有些讀者從外面的搜尋引擎或 RSS 連進來看 Blog 特定文章的時候,在文章的後面隨機列出一些相關文章的標題,一方面可以讓讀者找到更多對方可能會感興趣的 Post,另一方面也可以吸引讀者多去瀏覽自己其他的文章。Blogger 系統所有的文章都有靜態連結網址,看起來頁面內容並不是「動態」從資料庫抓出來的(除了那些要去即時收集的模組),所以在單篇文章的後面亂數挑出一些相關的文章表列出來,應該也不會太花時間。

原理其實很簡單,透過文章分類標籤的 RSS Feed,找出一些和該篇文章有相同標籤的文章,它們就是「相關文章」,然後亂數挑出幾篇,過濾內容將標題、連結和日期列出就大功告成了。在網路上找到了一些範例,其實不大滿意,因為有個 bug:相關文章應該是排除本文之外有相同分類標籤的文章,偏偏這些範例挑亂數的時候有可能會挑到本文,這樣就會看到相關文章模組內還有本文標題在裡面的奇怪情況(邏輯上是沒錯啦)。所以看到這些範例除了例行性會去修改增加可讀性外,還要自己去解決這個 Bug。這個 Hack 應該是我 Blog 最後一個大規模的修改,之後除了調整 CSS 和外觀外,差不多想弄得功能都弄完了~

老樣子,要修改之前要先備份樣版。首先,塞入以下這段 Javascript (在 </head> 標籤前):

<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();

function RelatedLabels(json) {
  var regex1=/</g, regex2=/>/g;
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedPostsNum] = (entry.title.$t.replace(regex1, '&lt;')).replace(regex2, '&gt;');
    relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == 'alternate') {
        relatedUrls[relatedPostsNum] = entry.link[j].href;
        relatedPostsNum++;
        break;
      }
    }
  }
}

function RemoveDuplicatedPosts(PostUrl) {
  var tmpUrls = new Array(0);
  var tmpTitles = new Array(0);
  var tmpDates = new Array(0);
  function contains(a, e) {
    for(var j = 0; j < a.length; j++)
      if (a[j]==e)
        return true;
    return false;
  }
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
      tmpUrls.length += 1;
      tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
      tmpTitles.length += 1;
      tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
      tmpDates.length += 1;
      tmpDates[tmpDates.length - 1] = relatedDates[i];
    }
  }
  relatedTitles = tmpTitles;
  relatedUrls = tmpUrls;
  relatedDates = tmpDates;
}

function ShowRelatedPosts(PostUrl) {
  RemoveDuplicatedPosts(PostUrl);
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  if (relatedTitles.length > 0) {
    document.write('Related Posts: <ul>');
    while (i < relatedTitles.length && i < 5) {
      document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
      if (r < relatedTitles.length - 1)
        r++;
      else
        r = 0;
      i++;
    }
    document.write('</ul>');
  }
}
//]]>
</script>

獨獲創見的部分就是把該篇本文的 URL 當變數傳入 Javascript Function 裡,在剔除重複文章的時候把自己一併從陣列裡刪掉,這樣就解掉上述的 Bug 啦!此外,函示裡紅字的部分,是用來控制相關文章的數量,我預設用五篇,請依個人需要修改。接下來,就是塞入收集相關文章的 Javascript,找到下面這段在文章內容後面顯示分類標籤的程式:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

在迴圈結束 </b:loop> 前面塞入呼叫收集相關文章的函示,像這樣:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <!-- Fixed for Related Posts -->
    <b:if cond='data:blog.pageType == "item"'>
       <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

同樣的,紅色的部分也是用來限制數量,每個標籤抓出最近的幾篇文章來匯總(該數字至少要 >= 上面 Javascript 裡定義顯示的數量。數字加大,可以增加相關文章的亂數樣本,也就是相關文章可以顯示越多舊的相關文章)。抓完文章當然就是找地方顯示囉!只有一個限制:一定放要在文章分類標籤那段的後面(就是一定要呼叫過上面那段,這樣也才會有相關文章可以顯示啊~),所以我就直接放在後面(上面這段 </b:if> 標籤的後面就可以,位置依自己的樣版外觀調整),這部分呼叫顯示相關文章的程式碼如下:

<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
  <script type='text/javascript'>
    ShowRelatedPosts(&#39;<data:post.url/>&#39;);
  </script>
</b:if>

改完儲存再來看效果吧!還記得之前一篇文章提到,if cond='data:blog.pageType == "item"' 這個判斷句代表的意思是什麼吧!就是當目前所在頁面是特定文章的連結內頁才會發生,所以上述的顯示相關文章效果,在首頁是看不到的,要隨便點入一篇文章的內頁連結(當然,那篇文章要有加註標籤被分類過),在顯示標籤的後面才會跑出來。不過最後提醒一下,Blog 文章分類的標籤不要亂用,我知道分類的 Label 可大可小,最簡單的可以只當分類來用,一篇文章只有一個標籤,搞大一點也有人愛亂標標籤,每篇文章都給它搞個七八個 Label,這樣不但會拖慢這個 Hack 的速度,Label 那麼多讀者也很難從你的一堆標籤裡找出適當的分類,這樣不就失去分類的意義嗎?

參考文章:
Blogger相关文章模块升级版
给Blogger添加相关文章功能

回應: 132

 

2007-03-01

計算頁面產生時間

Blogger 提供很多能夠 Hack 的彈性,和我一樣花俏的人就會在上面搞一堆的功能,雖然可以產生所有自己想要的效果,不過,功能越多卻又沒有兼顧效能的話,會浪費讀者等待的時間。問題來了,到底讀者看一個頁面,從開始讀取到頁面產生完畢,到底要花使用者多少時間?還有,裝了某些 Hack,對整個頁面產生的效率會造成什麼效能上的影響?這個數據對使用者和站長來說都可以作為效能的參考。有些 Blog 系統甚至還提供資料庫的 Query 數量,讓自己判斷程式的效能和執行時間,這個在 Blogger 上做不到,只能利用 Javascript 做個簡單的 Timer,計算使用者從頁面讀取到完成的時間,這是個影響變數很多、也很粗糙的評估方式,僅用來參考網站的效能。

首先,在頁面一開始的地方宣告啟始一個計時器 (Timer),這是個 Javascript 的全域變數 (Global Variable),所以要放在 <head> 標籤裡面(或是自行定義的 Javascript 區段中間),<HTML> 前面,塞入下面這幾行:

<script type='text/javascript'>
<!-- Global variable for calculating page generation time-->
var PageInitTime = new Date();
</script>

再來,就是在頁面的「最後」也放入一個計時器,兩個計時器的時間相減就是頁面產生過程所花費的時間了。問題來了,哪裡是頁面的最後?每個人的頁面樣版都不一樣,所以如果要放入自己首頁的最後一行,就要自行判斷囉!基本上有兩種地方可以放,第一,直接塞在樣版 HTML 完整的原始碼裡面,不過每個 Widget 出現在頁面上的順序不一定會照程式碼裡面的先後,你要很清楚倒底哪一段程式或 Widget 才是最後一個(可以由實際網頁原始碼裡面知道)。第二個地方,是直接編輯放入特定 HTML/Javascript 模組裡面。像我的頁面,最下面有一個 Javascript「網頁元素」放在 Footer 區段裡面(就是最下面顯示網站訂閱圖示那一塊),它絕對是「最後」一個載入執行的模組,所以計算和顯示執行時間的程式碼當然就直接放在裡面就行了!上面在頁首放了一個計時器,接著計算和顯示的程式碼如下:

<script type="text/javascript">
var PageEndTime = new Date();
document.write ("Page used "+(PageEndTime.getTime()-PageInitTime.getTime())/1000+" secs");
</script>

請注意,一定要放在頁面最後才會比較準,亂塞在 Sidebar 裡甚至標題列裡就不行囉!由於計算的 Javascript 程式是在 Client 端讀者的瀏覽器上執行,所以如果時間太長,可能牽扯到的因素除了頁面的 Hack 外掛之外,Blogger 官方的網路和伺服器效能、閱讀者的網路狀況、電腦速度和瀏覽器效能也都有影響。所以要評估自己 Blog 的效率,要在固定時間、固定電腦上測試才有意義,畢竟,這只是參考用的啊~

回應: 3