2006-11-30

Asus WL-500g 改機前言

手邊的這台 Asus WL-500g 無線頻寬分享器是當時辦 Sonet ADSL 送的贈品,當時換算了一下市價與其他贈品或方案比較,發現還蠻划算的,所以誤打誤撞就有了這個玩意。後來不經意發現這台分享器官方網站原來有釋出 GPL 的韌體原始碼,重點是有人開始改它並且釋出,從此就有了非官方版本的韌體出現。這類裝置核心都是 linux kernel 的 embedded system,本來只能用預設提供的介面 (Ex. Web) 來設定,修改過的韌體開放了完整的 linux 操作環境,所以使用者可以把分享器當作一台裝了 linux 的小電腦登入操作,進行各種修改和調整。

網路上找得到蠻詳盡的操作步驟文件,我也照了步驟修改完畢,中間還是有遇到一點問題需要修改,因此就把參考的文件用自己的方式重新翻譯改版,一方面作為自己改機的紀錄筆記,一方面也可以提供有需要的人參考。除了 WL500g,其他機種 (如 WL500b, WL500g Deluxe, WLHDD ..) 應該也大同小異,只是記得更新 firmware 的時候要抓到和裝置相對應的版本就行了。

這個記錄基本上也是根據 Oleg 的 firmwaremacsat 的 guides 來進行的,如果需要原文和相關資源可以到他們的網站和討論區找。由於是「筆記」,並不是完整操作手冊,所以會用比較精簡的方式紀錄改機流程以及該注意的部分,細節和背後該具備的知識這裡不再覆述。整個流程會包含(其中前 2-4 項有順序性和必要性,其他都是 optional 的):

  1. Asus WL-500g 硬體規格剖析
  2. Oleg 韌體更新與磁碟分割
  3. 基本環境設定 - ipkg 軟體套件系統安裝
  4. 更新 Asus WL-500g 的系統 C Library: uClibc
  5. SSH 伺服器設定
  6. 新增使用者群組及修改 Shell 啟動文件
  7. Samba 伺服器(網路芳鄰檔案分享)設定
  8. 支援 PHP 的網頁伺服器 (thttpd) 安裝設定
  9. 支援 PHP 的網頁伺服器 (lighttpd + FastCGI) 安裝設定
  10. 讓網頁伺服器支援 perl 的 CGI (microperl)
  11. 安全的 FTP Server: VSFTP
  12. 輕巧的 Mail Agent (esmtp)
  13. 安裝自動排程執行服務 (crontab)
  14. 設定流量監控網頁 (RRDTool)
  15. 其他應用程式補完

以上大部分是 macsat 的 guides 裡的內容,貪得無厭的我常常會亂裝一些有的沒的,也會一併記錄下來,放入最後一篇的其他應用程式補完。

機器本身的能力有限,加上並沒有提供全系列的 linux AP 支援 (要支援 MIPS CPU 版本的軟體才能裝),所以我並不會考慮去試一些 linux 上常見的 AP (像是 Apache、MySQL、常見的論壇和 Blog 程式、甚至在上面跑 BT 或驢子),純粹只是根據我個人的需求和興趣來安裝使用。如果我的 WL500g 又被我塞了什麼東西上去,這邊也會一併做更新。

回應: 46

 

2006-11-29

作者和一般回應的標示區別 (Author comment highlighting)

在自己的 Blog 裡會有一些路人針對文章來做回應或留言討論,身為作者,也可以針對這些一般的回應做出回答或解釋,如果不把作者的回應和一般人的做一點區分,當回應很多的時候都混在一起,也會搞不清楚自己是否回答過。因此,可以在樣版裡做一點手腳,如果判斷到發表回應的人是作者,就做一點樣式上的改變,用來區別作者和一般人的回應。我想過很多作法,不過有些複雜,改動的程式也要很多,算了,還是用最簡單、變動最少的方式,只更改作者回應的字型顏色就好。

打開範本 (Template) 直接修改 HTML,記得要展開 Widget,在 CSS 的區段先加入以下定義(指定作者回應的字型顏色):

/* Author Comment Styles */
#comments-block .author-comment {
  color: #f00;
}

接著,在範本的程式碼裡尋找下面這一行:

<dl id='comments-block'>

這一行下面開始的迴圈跑的就是在顯示文章一篇篇的回應留言。我把整段顯示回應的程式碼貼出來,新增和修改的部分用紅色標註,如果要用也可以直接直接複製下面整段,貼入蓋掉原來的部分。

<dl id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:comment.authorUrl'>
        <!-- Author Comment highlighting -->
        <b:if cond='data:comment.author == data:post.author'>
          <b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
            <b><data:comment.author/></b> :
          <b:else/>
            <a expr:href='data:comment.authorUrl' rel='nofollow'>
              <data:comment.author/></a> <data:commentPostedByMsg/>
          </b:if>
        <b:else/>
          <a expr:href='data:comment.authorUrl' rel='nofollow'>
            <data:comment.author/></a> <data:commentPostedByMsg/>
        </b:if>
      <b:else/>
        <data:comment.author/> <data:commentPostedByMsg/>
      </b:if>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><p><data:comment.body/></p></span>
      <b:else/>
        <!-- Author Comment highlighting -->
        <b:if cond='data:comment.author == data:post.author'>
          <b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
            <p class='author-comment'><data:comment.body/></p>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        <b:else/>
          <p><data:comment.body/></p>
        </b:if>
      </b:if>
    </dd>
    <dd class='comment-footer'>
      <span class='comment-timestamp'>
        <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
          <data:comment.timestamp/></a>
        <b:include data='comment' name='commentDeleteIcon'/>
      </span>
    </dd>
  </b:loop>
</dl>

主要的改變有:更改顯示作者的樣式,作者名稱字型粗體沒有連結,並且以冒號結尾。另外指定作者回應的內文套用 CSS 樣式: "author-comment",也就是一開始另外定義的 Class,這些變動都可以依照個人配色和喜好去更改。

不過,這段程式碼用來判斷作者還是有瑕疵,如果回應的人自訂名稱,而自訂的名字「剛好」和 Blog 作者名字字串一模一樣,而且他也是 Blogger 的使用者,那他的回應也可以「假裝」是作者的,以上的程式碼並沒辦法作更嚴謹的檢查。這也是最後決定不要在上面玩太多手腳,只改一點樣式顏色作些區別就好了。

更新:因為 Blogger 曾新增部份樣板功能,像支援非 Blogger 帳號留言(因此留言者前面多了一個識別用小圖示),所以以上程式碼也做了一點修正,並且參照留言者(白花花)的建議,對作者回應的識別度稍稍加強。

再更新:因為 Blogger 新增的「回應頭像」功能,導致原來判斷作者的第二項檢查:cond='data:comment.authorClass == "blogger-comment-icon"' 會失效,如果要這個 Hack 正常無誤有兩種解決方法:請到「設定」、「意見」裡「在評論上顯示簡介圖片」功能勾選到「否」,這個 Hack 就會正常(而且禁用回應圖像,用 Blogger 小圖示),第二種則是拿掉上面提到「第二項檢查」的 if else 判斷句,這樣也可以搭配新的回應圖像功能使用。

參考文章:
Comment Notification and Author Comment Highlighting
Blogger beta:高亮作者评论
(新增)[分享] 終於研究成功的提高Blogger作者回應的識別度

回應: 70

 

2006-11-27

應用 JSON 實現「最新文章」、「最新回應」和「Blog 聯播」

之前在Blogger Buzz(Blogger.com的 Blog),看到一篇消息說 Blogger 支援 JSON,說實話我不知道那是啥(JSON = JavaScript Object Notation, 讓跨網站也可以讀取到的資料結構?!),不過有人實作出一些東西來,就知道這玩意的厲害了。

之前自己這篇提到如何利用 Feed 在 Blogger 裡加入最新文章和回應,但使用上有些限制,像是篇數(只允許五篇)還有格式內容,更新好像也不夠快,從小帽的 Blog 看到有利用 JSON 做出最新文章和回應的 Javascript,還可以做 Blog 聯播或是特定標籤的 Feed,這實在是太厲害了,因此參考兩位的文章也做出屬於自己的 Javascript,用來顯示最新回應、最新文章和 Blog 聯播。使用方法很簡單,只要在 Sidebar 的網頁元素(Page Elements)裡新增 HTML/JavaScript 程式碼,依自己的需求分別加入下面的元件,貼入程式碼就好了(紅色部分的程式碼要依個人設定和需求去更改,像有一行數字等於 10 代表的意思是要顯示十篇,另一個 temp 那行是表示顯示的內容和格式,可以自行修改)。

最新回應 (Recent Comments):

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

<script>
function handleComments(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 CommentShow = 10;
  var sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Comment; Comment = sortentry[i]; i++) {
    if (i >= CommentShow)
      break;
    var title=Comment.content.$t.substr(0,30);
    title=title.replace(new RegExp("BR","gm"), "");
    title=title.replace(new RegExp("</>","gm"), " ");
    var link=Comment.link[0].href.replace("#", "#comment-");
    var authorname=Comment.author[0].name.$t;
    var timestamp=Comment.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newComments").innerHTML = temp;
}
</script>

<script src="/feeds/comments/default?alt=json-in-script&callback=handleComments" type="text/javascript"/></script>

至於最新文章 (Recent Posts) 的部分,同樣是用上面那段程式碼,有小地方部分要修改,Feed 的網址也要改:

<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 sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Post; Post = sortentry[i]; i++) {
    if (i >= PostShow)
      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 authorname=Post.author[0].name.$t;
    var timestamp=Post.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newPosts").innerHTML = temp;
}
</script>

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

不過如果是用來顯示自己 Blog 的最新文章,作者也只有自己一個人,那麼 authorname 的欄位也可以自己選擇要不要拿掉。

最後是所謂的 Blog 聯播 (Blogrolls)。說穿了,其實聯播就是在自己的 Blog 首頁顯示別人 Blog 的文章,訂閱別人的 Feed URL,只要改「最新文章」的倒數第二行,把 Blog Feed 網址改成對方的就行了。所以有了這招,可以取代掉 Blogger 本來內建的 Feed 模組(因為該模組限制訂閱五篇,又限制顯示的格式)。

另外,上面提到的都是處理整個 Blog 最新文章的 Feed,如果想要訂閱的是某分類標籤的所有文章,那麼該如何處置?一樣,只要在訂閱的 Feed URL 動手腳就行了,改成下面這樣:

<script src="http://聯播或你的Blog網址/feeds/posts/summary/-/標籤名稱/?alt=json-in- script&callback=handlePosts" type="text/javascript"></script>

作者有提到一個標籤加上 Feed 的妙用:將你要推薦、頂置或公告的文章都加上一個特定標籤,然後訂閱這個標籤的 Feed 顯示在 Blog 的元件裡,這樣你在首頁就可以有動態的頂置或是公告區囉!如果嫌上面的程式還要修改很麻煩,可以用原作者自己寫的「程式產生器」來產生自己的程式碼,以上的程式產生器請參閱參考文章裡的連結。

參考文章:
小帽Blogger 聯播程式產生器 - 增加「最新文章與最新回應」與「標籤訂閱」程式產生器
Blogger(Beta) 最新回應程式產生器
Blogger聯播程式產生器(PartII)
Blogger(Beta)最新文章與最新回應JavaScript Code Part II

[注意]:
在回答網友問題的過程中發現,以上實現「最新文章」和「最新回應」的方法,如果同時使用(就是裝兩個以上),當瀏覽器是 IE 的時候,因為裡面有兩套相同的 Javascript 原始碼,內容會錯亂導致只有一個內容出得來(Firefox 正常)。請記得更改裡面的一些定義(像是把 "newComments" 字串在不同模組裡用不同的名稱),或是把 Javascript 的函式統一搬到範本裡面,每個 Element 負責用不同的 Feed URL 呼叫它就行了,如果直接用我範例的程式碼直接貼多個模組出來,IE 是可能會錯亂的喔!

[8/28 更新]:
由於 Blogger 更改了回應 的 RSS Comment Feed 的格式,本來 Feed 裡 Title 欄位有資料,是部分的 Comment 文字,更改之後 Title 欄位是空白的,會導致拿 Feed 來做「最新回應」模組時回應內容不見。因此,「最新文章」可以抓 title 當標題,而「最新回應」就要抓內容 content 的部分字串來用(還要修正 link、取代不必要的換行符號)。

回應: 28

 

2006-11-22

內嵌搜尋引擎來做 Blog 的全文搜尋 (Blog Search)

之前補充過,因為拿掉 NavBar,又希望使用 Blogger 內建的全文搜尋功能,所以補了一個 Search Engine 在 SideBar 上面,不過實際使用上,對最新的文章好像不夠快、UTF-8 中文好像也有點問題。於是找了一下,匯總了幾個能夠內嵌 HTML 的搜尋引擎語法,能夠針對個人的 Blog 提供全文搜尋功能。

第一個,當然是萬能的 Google 大神,利用 Google 的 Site Search 內嵌語法做修改,直接更改紅色的網址參數,就可以訂製自己的 Google Site Search:(CSS style 請依照自己的樣式去自訂)

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="32" maxlength="255" value="">
<input type="hidden" name="sitesearch" value="abintech.blogspot.com">
<input type="submit" name="btnG" value="Google search">
</form>

第二個,是用微軟的新服務:Windows Live Search,用 MSN (Live Passport) 帳號登入後可以試用,建立自己的搜尋巨集,方法請參閱我的另一篇文章。當有了屬於自己的搜尋巨集,找出自己巨集的名稱,利用下面的程式碼,把紅色的部分改成你自己巨集的名稱:

<form id="searchFrm" class="searchform" action="http://beta.search.live.com/results.aspx" method="get">
<input type="hidden" name="q1" value="macro:abinlee.livespace" />
<input TYPE=text id="q" name="q" size="15" name="s" maxlength="255"/>
<input type=submit name="go" value="Live Search">
</form>

原則上以上兩種,都是利用現成的搜尋引擎,將搜尋範圍縮小到特定的網站或網址,以達到特定 Blog 的全文搜尋目的。如果 Blog 的通告不靈或是那些引擎沒有到該網站去"拜訪",那麼最新的 Blog 文章可能還是找不到。很多人愛用的是專業的 Blog Search Service: Technorati,申請註冊後可以替 Blog 打造一個專用、支援 UTF-8 中文的 Blog 專用搜尋引擎,並且提供一些相關統計資料。註冊登記後它針對 Blog 有提供一段 Javascript 的程式碼供人嵌入使用,問題來了,沒錯,你可以直接貼進 HTML/Javascript 的 Page Element 裡面,不過,如果不喜歡那個樣式,想打造自己嵌入式的引擎,那又要自己偷程式碼了。我直接看在 Technorati 管理介面裡 Blog Search 原始碼抓出來的,一樣只要改紅色的地方就好:

<form method="get" action="http://technorati.com/search.php">
<input type="hidden" name="sub" value="searchlet" />
<input maxlength="255" value="" name="s" type="text"/>
<input value="http://abintech.blogspot.com" name="from" type="hidden"/>
<input type="submit" value="Technorati Search" />
</form>

就搜尋的能力來講,我覺得 Technorati 的最快、功能最完整,可能是因為它並不是去「茫茫網海」裡去找,而是只搜尋那些 Blog 的 Feed,範圍就小了很多。當然,感覺好像有上面那段程式碼就不用註冊、直接偷用 Technorati 的引擎不就好了?不過實際上,還是建議先去註冊,因為註冊完可以登錄自己 Blog 的資訊進去,除了 Technorati 會去找登記過的 Blog 來縮小範圍外,它自己的通告系統也可以增加 Blog 的曝光度,搭配上面另外兩種現成搜尋引擎使用,可以讓 Blog 的靜態網頁和資料更容易被找到,網站全文搜尋也能夠更完整。如果拿上面的程式碼塞入你的網頁(或是測試),搜尋中文關鍵字發現找不大到,請確認網頁語系,我是都用 UTF-8,中文才不會有問題。

參考文章:
搜尋個人 Blog 的文章
Technorati 站內搜尋器教學(UTF-8)
Technorati 部落格裡的「google」─ 申請及使用教學

回應: 11

 

2006-11-16

增強標籤分類功能: 標籤雲 (Label Cloud)

最早看到類似標籤雲這種東西是在美味書籤 (del.icio.us)裡面,它是用一目了然的顯示方式用來列出所有你做分類的書籤群組、並且用字型顏色和大小來 highlight 群組內的數量,應用在 Blog 標籤 (Label) 上面,一方面可以列出所有分類的標籤、以及被標註的文章數量,方便讀者去找同類型的文章,另一方面可以知道這個 Blog 裡面哪類的文章最多最熱門,也可以提供閒逛的讀者參考。所以我就找來取代 Sidebar 上預設的標籤列表,並且作了一些調整和修改。

修改之前,先確定 Sidebar 上面要已經有標籤 (Label) 的網頁元素(如果沒有記得先加入:範本 Template -> 網頁元素 Page Elements -> 選定 Sidebar 加入網頁元素 -> 標籤 -> 加入 Blog)。我把參考來的作法分類處理了一下,切成三段修改:第一段是關於 CSS 樣式的部分,用來顯示 Label Cloud 裡面文字置中和行距之類的,第二段是 Javascript,實際上用來顯示排序和更改標籤的字型顏色和大小,最後一段是在標籤的 element 裡面 (widget),作為呼叫 Javascript 函示的進入點。

第一個步驟,打開樣版文件 Template,找到 CSS 樣式定義的部分,插入下面的定義:

/* Style for Label Cloud */
#labelCloud {
  text-align: center;
}

#labelCloud .label-cloud li{
  display: inline;
  background-image: none !important;
  padding: 0 5px;
  margin: 0;
  vertical-align: baseline !important;
  border: 0 !important;
}

#labelCloud ul{
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

#labelCloud .label-count {
  padding-left: 0.2em;
  font-size: 9px;
  color: #777;
}

接下來,找範本的 </head> 標籤,把下面幾行 javascript 貼到該標籤的前面(如果已經有自訂的 Javascript 函示,可以只貼 <script> 標籤內的那些段 function 進去)。請注意,紅色的部分是需要自行調整的,標籤的字型顏色或大小和網址請根據自己的 Blog 樣式來更改。

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Functions used for Label Cloud: adjustLabel(), generateLabels()-->
var labels = new Object;
function adjustLabel(min, max, weight, total) {
  if (min &gt; max)
    var temp=(min-max)/Math.log(total), result=min-Math.floor(Math.log(weight)*temp);
  else
    var temp=(max-min)/Math.log(total), result=Math.floor(Math.log(weight)*temp+min);
  return result;
}  

function generateLabels(){
  var blogURL = '';
  var maxFontSize = 18;
  var minFontSize = 11;
  var maxColor = [204,204,204];
  var minColor = [119,119,119];
  var showCount = true;
 
  var labelColor= [];
  var labelSize = 0;
  var labelCount = new Array(); 
 
  for (var i in labels)
    if (!labelCount[labels[i]])
      labelCount[labels[i]] = new Array(labels[i])
 
  total = labelCount.length-1;
  section = document.getElementById('labelCloud');
  ul = document.createElement('ul');
  ul.className = 'label-cloud';
 
  for(var tag in labels) {
    for (var i=0; i &lt; 3; i++)
      labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);
   
    labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
    li = document.createElement('li');
    li.style.fontSize = labelSize+'px';

    a = document.createElement('a');
    a.title = labels[tag]+' articles with Label: '+tag;
    a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
    a.href = blogURL+'/search/label/'+encodeURIComponent(tag);
   
    if (showCount) {
      span = document.createElement('span');
      span.innerHTML = '('+labels[tag]+') ';
      span.className = 'label-count';
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
      li.appendChild(span);
    }
    else {
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
    }
    ul.appendChild(li);
    ul.appendChild(document.createTextNode(' '));
  }
  section.appendChild(ul);   
}
</script>

第三步,修改網頁元素 (Page Element)。如果你開啟 Template 並編輯 HTML 時沒有展開 widget (小裝置?!),搜尋範本裡的下面這一行(如果你改過 Title,那麼下面紅色的字串就不一定是 Labels):

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

把它用下面的代碼取代:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <!-- Add Label Cloud -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'> 
  <div id='labelCloud'/>
    <script type='text/javascript'>
      <b:loop values='data:labels' var='label'>
        labels[&quot;<data:label.name/>&quot;] = <data:label.count/>;
      </b:loop>
      generateLabels();
    </script>
    <noscript>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>)
        </li>
      </b:loop>
      </ul>
    </noscript>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>   

如果編輯的範本有展開 widget,那就是取代掉上面那一行一直到標籤 </b:widget> 裡面的內容。建議當你有多個標籤和很多文章以後再使用這個功能,不然效果會不顯著。

參考文章:
[筆記]標籤雲(Tag Cloud)
Blogger V3.0:添加标签云

回應: 67

 

2006-11-15

隱藏或更改預設的 Feed Link

供人訂閱 (Subscribe) 自己 Blog 的網站提供 (Feed) 是 Blogger 預設就有、也不允許使用者去修改的功能,這段連結文字通常是在主頁的最下面。如果使用了像是 FeedBurner 之類的服務,你可能希望對方使用另外燒出來的 Feed 來訂閱你的 Blog,是可以自己在主頁上擺上圖示和 Link,但自己也會希望拿掉或是更改 Blogger 送你的那段連結和文字。

這裡提供一些方法:首先掩耳盜鈴的方式,就是直接把叫那段文字不要顯示(但原始碼裡還有)。搜尋樣版文件裡關於 CSS 的設定,應該有設定 Feed Link 的 style,名稱是 feed-links,改成不要顯示就可以藏起來了。改成下面這樣:

.feed-links {
  display: none;
}

如果你想徹底刪除,或是修改它的內容,一樣,打開 Template 的 HTML 原始碼,展開所有 widget 的範本,找下面這段自己改:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

我的作法,是改 CSS 把它藏起來,然後在網頁元素 (Page Element) Footer (正下方的區塊) 裡加入一個 HTML 的元素,貼入 HTML 語法(包含各種訂閱工具連結網址和圖片位置),這樣就行了,模組化管理在未來變更時比較有彈性。

參考文章:
Blogger beta:改变/隐藏Feed订阅地址

2006-11-13

首頁長篇文章的收合

當內文太長或圖片多的時候,進到首頁不但會變慢,版面也會拉很長,所以很多人的 Blog 首頁都會加上「繼續閱讀」、「閱讀全文」的連結,並且在首頁的新文章都只顯示部分內容,有興趣的再深入閱讀下去。好處就是剛剛講的,首頁如果能夠顯示十篇文章,頁面就不會因此要往下拉拉到死,也不會塞爆圖片慢得要死。

網路上看到兩種處理的辦法,一種是進首頁的時候還是全部都 Load,只是用收合折疊的方式讓首頁不要太長精簡一點,另外一種是只 Load 部分顯示出來,要閱讀全文就請你連到該文章的固定靜態連結。前者的好處是在首頁點開可以一目了然,但是圖多還是一樣很慢,後者的好處是載入很快,但是要跳轉到下一頁去看該篇文章,算是各有利弊。如果該長篇內容都是文字,我比較想用第一種,但如果有很多照片,第二種就比較好。我利用兩個標籤去實作了這兩種方法(算前無古人吧),隨便想用哪一種,只要指定不同的 ID 就好。

首先,登入 Blogger 管理介面,編輯範本 Template 的 HTML(要勾選"展開小裝置範本"="Expand Widget Templates",用最完整的原始碼),先到最前面定義 CSS Style 的地方去,隨便哪裡都可以,貼入以下基本的定義:

/* Style of detail article toggle */
span.showDetail {
  float: right;
  border: 1px solid #333;
  font-size: 8pt;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
}

span.hideDetail {
  display: none;
  float: right;
  border: 1px solid #333;
  font-size: 8pt;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px; 
}

其中那兩個 <span> 用的 class "showDetail", "hideDetail" 是用來定義那個收合文章用的連結樣式,自己可以新增對該連結的設定。因為有文章收合的效果,需要用到 Javascript,我用 inline 的方式插入 template 裡面,可是要注意,script code 裡面的判斷符號像是 '<' 或是 '&' 要轉換,不然 template 格式檢查會失敗。這裡提供一個技巧,在自己電腦上測試 template 時,可以另存新檔,附檔名取 .xml,然後用瀏覽器打開,瀏覽器會幫你檢驗 template (XML) 的格式有沒有問題,如果有錯在第幾行,這樣可以幫助你 debug。找範本的 </head> 標籤,把下面幾行 javascript 貼到該標籤的前面:

<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
  var spans = document.getElementById(id).getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
      spans[i].style.display = 'inline';
    if (spans[i].id == 'showDetail')
      spans[i].style.display = 'none';
  }
}

function hideDetail(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
      spans[i].style.display = 'none';
    if (spans[i].id == 'showDetail')
      spans[i].style.display = 'inline';
  }
  post.scrollIntoView(true);     
}

function checkDetail(id, link) {
  var spans = document.getElementById(id).getElementsByTagName('span');
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == 'detail') {
      spans[i].style.display = 'none';
      document.write('&lt;span id=showDetail class=showDetail&gt;');
      document.write('&lt;a onclick=javascript:showDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;完整閱讀...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
      document.write('&lt;span id=hideDetail class=hideDetail&gt;');
      document.write('&lt;a onclick=javascript:hideDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;文章收合...&lt;/a&gt;');
      document.write('&lt;/span&gt;');
    }
    else {
      if (spans[i].id == 'fullpost') {
        spans[i].style.display = 'none';
        document.write('&lt;span id=showDetail class=showDetail&gt;');
        document.write('&lt;a href=\"'+link+'\"&gt;閱讀全文...&lt;/a&gt;');
        document.write('&lt;/span&gt;');
      }
    }
  }
}
</script>

接下來,搜尋下面這一行的程式:

<div class='post-header-line-1'/>

把上面那行後面幾行,本來應該是這樣的程式碼:(位置和版面會因樣版不同而有所差異)

<div class='post-body'>
      <p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

改成這樣(變動的地方標註成紅色):

<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
      <p><data:post.body/></p>
<b:else/>
      <style>#detail, #fullpost {display:none;}</style>
      <p><data:post.body/></p>
      <script type='text/javascript'>
        checkDetail(&quot;post-&quot; + &quot;<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);
      </script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

樣版存檔,搞定!這個是版面樣式的 Template,接著我們到 Settings -> Formatting 最下面編輯文章發表用的 Post Template,加入下面一行:

<span id="detail"></span>

以後每次要發表新文章的時候,只要被 span 標籤像這樣包圍起來:

<span id="detail">
這是要隱藏剩下的完整內文
</span>

標籤內的文字就會在首頁被隱藏起來,而標籤外(不管是前面或後面)的文字就變成該文章的前言或摘要。以上是只有在首頁才會有的效果,如果是單篇獨立文章的連結,不會有展開折疊的連結,至於在 RSS Feed 裡面,因為大部分的 Feed Reader 都會濾掉格式的標籤,所以全部的內文也還是看得到。如果你不想使用文章收合的效果,要用固定連結,只要把上面的 id 名稱從 detail 改成 fullpost,就可以有獨立文章連結的效果了。

參考文章:
讓首頁文章可開啟/摺疊 for Blogger Beta
Expandable posts with Peekaboo view
有關 Blogger in Beta

[更新]:
1. 增加 ID: "fullpost",整合了網路上兩種「閱讀全文」的作法,如果 span 裡面指定成這個 ID,則連結前往該篇完整文章,不使用展開收合的效果。
2. 修正如果瀏覽器 script 功能關掉,看不到全文的問題(如果不支援 Javascript,則文章不隱藏,直接秀全文出來)。

回應: 40

 

2006-11-07

Template 的基本內容和結構

Blogger Beta 可以改造的彈性真的好大,越碰越覺得無法自拔~哈哈!不過每次看到新增額外功能總要去改樣版文件 (Template),不管是版面配置、CSS 還是 Javascript,都有點心虛:因為只會 Find -> Replace -> Save -> Apply 這些步驟,對樣版文件的內容和架構完全沒有概念,如果我想動版面風格而換了一套 Template,不是之前做的變動都要重來一次嗎?偏偏,我對這些預設基礎的版型都不是很滿意,遲早也要去動,不如在 Blog 功能補齊之前,先動手研究 Blogger Beta 的樣版文件。

一開始是偷懶,想先去找喜歡的樣版來修改,不過 Google 了半天沒有半個堪用的,好吧!自己改!眼高手低的下場就是不知道從何改起~不過認真一會敗讀文章後,終於對 Blogger 基礎樣版文件有一點點瞭解了,至少,要改也知道從哪動手。

所有版面物件都以區塊來定義,整個頁面最外層定義的名稱 (ID) 叫 outer-wrapper,像是整個 Blog 的 container。在 outer 裡面從上到下分成三大塊,分別是 header-wrapper, content-wrapper 和 footer-wrapper。顧名思義,這三塊就是分別用來放最上方的標題列(頁首)、內文以及頁尾。其中表現內文的那一塊 content-wrapper 裡面又分了兩個區塊,ID 分別是 main-wrapper 和 sidebar-wrapper,就是用來顯示 Blog 文章和旁邊 sidebar 的。到這裡,整個 Blogger Beta 的樣版區塊大致的配置就瞭解了。下面是階層關係:

- outer-wrapper
    - header-wrappe
    - content-wrapper
        - main-wrapper
        - sidebar-wrapper
    - footer-wrapper

以上只是版面區塊的定義名稱,搭配 CSS 的 style 設定和標準的 HTML,再用 <div> 標籤實作以上區塊,大致的版型就出來了,不過 Blogger 真正的重頭戲:Page Element 還沒出現哩!在此之前,要先知道控制 Page Element 的專屬語法:

<b:section class="'sidebar'" id="'sidebar1'" preferred="'yes'">

其中兩個重要的參數:class 是這個 section 的類別,會在 CSS 裡定義,id 則是這個 section 識別用的名字。上面提到 content-wrapper 裡面又分了兩個物件:main-wrapper 和 sidebar-wrapper,實作的結構用巢狀結構表示如下:

<div id='content-wrapper'>
  <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
    </b:section>
  </div>
  <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'/>
      <b:widget id='Label1' locked='false' title='ARTICLE LABELS' type='Label'/>
      <b:widget id='BlogArchive1' locked='false' title='ARCHIVED POSTS' type='BlogArchive'/>
    </b:section>
  </div>
</div> <!-- end content-wrapper -->

看得出關連嗎?<div>用來分割出版面的區塊物件,而 Page Element 區塊則是用 <b:section> 標籤讓系統認得,至於每個 Element 的實際內容和功能定義,就是在 <b:widget> 裡面。以上面的例子解釋,在 Sidebar 裡有三個 Elements,分別是個人資料(Profile)、分類標籤(Label)和封存的舊文章(BlogArchive)。這些概念瞭解以後,再去看看自己的 Template,即使要改至少也知道要改那個地方了吧~

由此可知,Template 裡面非標準 CSS、自己定義 & HTML的標籤就都是 Blogger Beta 的專屬標籤,像上面範例出現用來分割區間的 <b:section> 和表示特定 page element 的 <b:widge> 就是,除此之外還有像是判斷條件用的 <b:if>, <b:else>、迴圈 <b:loop> 等等,詳細用法這邊就不提了,我整理一下 Blogger 自己說明文件的分類:

最後一項 Layouts Data Tag 也是上面範例中,可以拿來做 class 類別的 layout 物件列表,以上標籤的詳細用法請詳讀官方文件囉~

參考文章:
Beta Template 版面改造

回應: 6

 

2006-11-04

程式碼的標記區塊

這邊有很多技術文件會扯到程式碼,或是在提示符號要下的命令,一直苦無好的區塊表示法來顯示,剛好拜讀國良先生的 Blog 時看到超有質感的表現方式,熱心的國良先生也不吝指導,所以就被我偷學會了~

原理很簡單,不過我總是記不得 CSS 的語法和使用方式。只要在 CSS 定義一個自用的標籤像是 <code></code>,把這個標籤的樣式外觀都記錄在樣版的 CSS 裡,以後寫文章的時候直接套用該標籤就搞定了。我還修改補充了一下,除了「程式碼」外,我還會用到「命令」,所以我就多做了一個屬性叫 .cmd 的(好習慣,都用小寫),調整一下變成下面兩段 CSS,把它加入 Template 的 CSS 定義那邊:

code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(http://abinlee.link.googlepages.com/BG_CODE.gif) left top repeat-y;
}

code.cmd {
  font-size: 10pt;
  color: #ccc;
  background: #000 url(http://abinlee.link.googlepages.com/BG_CMD.gif) left top repeat-y;
}

假設以後有一段程式碼或命令要表示,就把 HTML 的原始碼寫成像是:

<code>這是原始碼</code>
<code class='cmd'>這是命令</code>

就可以顯示成下面這樣啦!

這是原始碼

這是命令

區塊裡用到的兩張背景圖我也是放在 Googlepages 裡面,以便樣版能夠外連。雖然 Blogger 也可以用貼圖的方式來放圖,但是會討厭地縮圖和改檔名,又不能管理,所以只好用外連的囉!另外要提的,一開始本來我是想另外訂一個標籤 <cmd> 給「命令」專用,內容幾乎完全和 <code> 一樣,但不知為何 Firefox 顯示正常,IE 就跑不出來?我可是 follow 標準的 CSS 語法寫的耶!難怪有人說 IE 這個瀏覽器對標準語法的支援反倒有問題,這次倒是第一次見識到了!(害我 debug 了好久,氣!)

參考國良先生的原文指導:
[筆記]在文章裡顯示優質的程式碼區

[注意]:
程式碼或命令行在網頁區塊裡顯示還有一個問題,就是換行。一種解法,如果把改字型(Arial)或是大小可以在一行內多顯示一些字元,可以「儘量」不要換行,不過還是很難避免過長的程式,而且會造成閱讀困難。我的處理方法還是讓它換行,因為這樣還算能閱讀,而且要直接複製貼上也沒有影響,但這樣會遇到 FireFox 裡超長的英文字段(像是網址)不會換行(但 IE 會),目前無解,只能從內容上儘量避免囉!(中間塞空白,或是帶入中文說明,這樣就會被自動斷行了)

回應: 19

 

2006-11-03

增加站內的全文搜尋

拿 Blog 來當作筆記,關鍵字搜尋就變成很重要的功能之一。在 Blogger 裡面的 Navbar 上面也內建了這個功能,但如果你和我一樣不喜歡 Navbar 拿掉了,怎麼在Slide-bar 裡加上搜尋的能力呢?

參考了幾篇文章,首先是 Navbar 上 "SEARCH THIS BLOG" 的功能搬進來,在 Sidebar 上面增加一個網頁元素 (Page element),接下來是再調整搜尋的結果,讓符合條件的文章只列標題,這樣比較一目了然。登入管理模式,再到樣版->網頁元素的頁面下,Sidebar 的區域加入一個網頁元素,選擇 HTML/JavaScript 元件,內容如下:

<form id="searchthis" action="http://abintech.blogspot.com/search" method="get">
<input id="query" maxlength="255" name="q" type="text"/>
<input id="searchbtn" value="搜尋" type="submit"/>
</form>

只有第一行要修改指定自己的 Blog 網址,第二、三行裡面可以使用 CSS style 參數來定製自己搜尋用的表單元件的外觀,像是大小顏色和邊框,依據自己 Blog 的樣版配色去調整。不過呢,據我實測的結果,這個所謂的站內全文搜尋,對中文的支援能力似乎不好,英文關鍵字卻可以百發百中,看來,文章裡我要多加點英文關鍵字,要找的話儘量用英文來找,這樣比較找得到~

參考文章:
Blogger / blogspot Beta 側邊加內建的文章搜尋
如何为Blogger Beta增加站内搜索功能

回應: 1

 

隱藏 Navbar

覺得 Blogger 強制置入的導覽工具列 Navbar 和你的版面格格不入嗎?可是官方除了變換顏色之外並沒有取消拿掉的辦法,這時候就只好修改樣版想辦法隱藏它囉!(要改樣版,好習慣是要備份喔!)

登入後到 Template 樣版編輯的頁面,選擇直接 Edit HTML,看你的樣版裡有沒有 Global 這段註解,如果有,就把下面程式加在後面,如果沒有,那就找像 Header 或 Footer 之類的註解,把下面整段貼到註解前。(依照你使用的版面不同,樣版程式碼的內容也不會一樣)

/* Global ----------------------------------------------- */

#navbar #Navbar1 iframe{
  height:0px;
  display:none;
  visibility:hidden;
}

儲存更新之後就會生效了(如果該招式失效,本文也會一併更新,因為我也是用這一招)。另外,也有其他的辦法,接用畫面模組拖拉的,我也成功過,可以一併參考。

參考文章:
如何隐藏Blogger Beta的Navbar
Blogger in BETA 隱藏 Navbar 大法

另外,如果不想完全隱藏,想變成:平常隱藏、游標移過去就會出現的效果,也可以參考這篇文章:隐藏blogger导航栏

補充:
網友們回應了其他幾種方法,可以用更少的 Code 達到一樣的效果,我測試過也都有效,感謝大家集思廣益,我把方法附註在後:

#navbar-iframe {
  display: none;
}

或是更短的:

#navbar {
  display: none;
}

回應: 6

 

增加「最新文章」和「最新回應」模組元件

開始擴充 Blogger Sidebar 的模組元件(Page Element)。首先,是不是缺少了像「最新發表的文章」(Recent Posts) 和「最新的文章回應」(Recent Comments) 之類的列表哩?沒錯,預設的樣版模組裡就缺了這兩塊,要能夠出現這兩塊,主要還是用 Feed 這個模組,只要找到你 Blog 文章和回應的 Feed URL,利用自訂的 Feed 就可以有最新文章和回應的效果。

這些 Feed URL 是有命名規則的,像我的 Blog 是這樣:

http://abintech.blogspot.com/feeds/posts/default

所以只要把上面的網址改成自己的就好。另外一個「最新回應」的 Feed URL 為:

http://abintech.blogspot.com/feeds/comments/default

同樣加入這個 Feed 區塊,就有最新回應的模組囉!

參考文章:
Blogger beta技巧:输出评论
Blooger Beta Feed URLs

[更新]:
後來看見幾篇文章,發現用這個辦法有三個問題:第一,Blogger 的 Feed 更新過慢,所以新文章或是最新回應用 Feed 訂閱來顯示,都會有不夠即時的問題,不管你怎麼處理那個 Feed,源頭不改善此問題無法根治。第二,Blogger Feed 的模組有最多顯示五篇文章的限制,如果你是大站很多回應,最新回應的部分很快就被洗版了。第三,早期有發生過 Blogger Feed 內容爛掉導致 Blogger 的樣版和頁面毀掉的前科!雖然我沒碰到,但聽起來有點毛毛的。

解決方法,第一點只能等 Blogger 系統更新,第二點,可以使用會把 Feed 轉換成 Javascript code 的服務,像是 NewsgatorGoogle Reader,把程式碼貼到 HTML/Javascript 的 Page Element 裡面,就可以顯示超過五篇的連結。第三點,除了祈禱改善了不會再發生之外,也可以用 FeedBurner 之類的服務做出穩定、統一的 Feed,在模組內改訂閱這個,多了一層也可以保護 Feed 故障導致版面爛掉。(不過更新會更慢...)

參考文章:
我們都是谷哥的人
換上燒烤飼料

回應: 3

 

Hello World!

Blogger 的進步和功能新增已經到了可以接受的程度,私底下又有很多自己在玩的東西技術文章想一併整理公諸於世,所以就從這裡開始,把所有什麼改機、軟體、Hack 的文件在這邊做整理,一方面可以分享給有需要的人,能夠一起討論,另一方面是留下記錄,方便以後有需要用到的時候方便自己做查詢。

這邊是以技術文章為主,初期計畫會有的分類 Label 像是 Asus WL-500g Router 和 Buffalo LinkStation HG 的改機文件和心得、Blogger/Blogspot 的 Hack 和版面語法研究、Firefox 和 flickr 的密技和特殊用法等等,第二階段要開始研究在家裡自己架設 Blog 系統的可能性,目前可能採用的 Simple PHP Blog,它不需要資料庫處理速度又是最快的,不過還有很多可以調整和修改的空間。最後的階段是把 Windows Live Space 裡一狗票的文章慢慢逐一地備份到穩定的地方(可能是家裡,也可能是 Blogger),然後停止使用微軟的服務,利用它來通告我最後使用的 Blog,一切就算順利也是一項大工程。

既然利用這邊來開始,在初期計畫裡的第一步當然是先研究 Blogger。除了主要公布的這個 Blog 之外,我還會有另一個 Blog 做測試使用,一旦樣版和語法都搞定,還想搞一個拿來寫匿名日記,所以光在 Blogger 我就會有三個 Blog,加上架設在家裡的、還在 Windows Live Space 的,全盛時期會有五個 Blog 在運作!當然代表號還是會只有一個啦!

以上列出來的工作聽起來就很可怕,這篇文章只是打算先踏出第一步,希望可以完成。

回應: 3