Home

2008年7月31日 星期四

[文章] 裝完 TortoiseSVN 後 電腦變慢了

From: Polin Wei

  在前篇教學 [教學]Apache/2.2.4 (Win32) PHP/5.2.3 DAV/2 SVN/1.4.6的安裝[教學]Apache/2.0.59 (Win32) 與 SVN/1.4.3 的安裝 有說明 TortoiseSVN 如何與 SVN Server 作結合,但卻發現裝了 TortoiseSVN 電腦卻無緣無故變慢了,後來發現只要將 TSVNCache.exe 這個 Process Kill 後,速度就變正常了.




  後來才記起來,在裝完 TortoiseSVN 後還有些設定忘了要作,所以將電腦重灌後的工程真的很大,前言完...


  那要怎麼設定什麼呢,假設你將 TortoiseSVN 的儲存目錄設在 svn_doc 裡,那就對這個目錄按下滑鼠右鍵,依左圖顯示,選擇 Settings


  然後選擇 Icon Overlays ,先將所有的目錄排除 Exclude Path 設為 * , 再將你要的對 SVN Server 作存取的目錄加進來即可,以我的例子而言,就是在 Include Path 設為 D:\svn_doc\* 設好後,電腦果然恢復正常了耶



Google新對手 搜尋引擎cuil問世


圖片: http://www.cuil.com/
來自:

更新日期:2008/07/29 04:09

〔記者王萱儀、編譯管淑平/綜合報導〕曾協助 Google 建立其傲視群倫的搜尋引擎基石的前工程師自立門戶,二十八日推出新的搜尋引擎cuil,宣稱索引量、搜尋結果精準度都比老東家讚。Google不願發表評論。發言人華森在電子郵件中說,Google相信他們的索引量還是最龐大的。

cuil音同cool,是蓋爾語的「智慧」之意, Cuil故意丟掉一個字尾,讓大家方便記憶。共同創辦人、總裁帕特森說,cuil索引頁數有一千二百億頁,使用的搜尋引擎主機數量卻比Google少。Google近三年前停止公布其索引頁數,當時的數字是八十二億頁。

索引頁數規模是搜尋引擎相當重要的一環,因為網路資料、圖片和內容都需要搜尋引擎先建立索引存入資料庫後,才能被使用者搜尋到。

不像Google以連結到網頁的質和量來建立網頁級別,帕特森說,cuil是「鑽進」一個頁面的實際內容,呈現方式也不像Google垂直堆疊相關網頁連結,而是類似 雜誌 版面風格的橫向塊狀排列,顯示更多照片和網頁內容;還有側邊欄(sidebar)顯示相關主題連結,提高精準度。

cuil也強調,不會採用Google令隱私權監督團體感冒的做法,儲存使用者搜尋紀錄或者搜尋模式,希望這點有助於吸引網友轉換陣營。


##CONTINUE##

美國搜尋引擎專家兼Search Engine Land主編丹尼蘇利文表示,cuil強調它的搜尋是照「頁面內容」,不像Google是照頁面瀏覽排行得出結果(雖然Google參考的不止於此)。例如搜尋英文「哈利波特」,cuil的搜尋不只會出現使用這兩個字的網頁,也會出現關於「葛來芬多」的網頁,因為cuil搜尋系統能辨識「葛來芬多」是常與「哈利波特」出現在一起的字眼。

蘇利文認為,cuil新的建立頁面級別和呈現方式可能是個賣點,如果精準度高就可能打開知名度。

cuil另一個特點,是搜尋結果以類似雜誌頁面的方式,一次出現三欄,包括圖片,簡單美觀。此外,在最右一欄,讀者可看到進一步的分類,例如「哈利波特書籍」、「電影明星」等等讓讀者做進一步搜尋,這點Vivisimo與Yahoo!也有類似服務。

中文資料有限

cuil目前是英語系世界,台灣網友也無法從cuil得到什麼中文好處,查「梁朝偉」或「劉嘉玲」是絕對沒有,查「李安」或「王建明」往往也是添有英文的網頁才查得到部份條目。

迄至六月,Google在美國網路搜尋引擎市場的市佔率達六十一.五%,雅虎為二十.九%,微軟九.二%。除了cuil,新出現的挑戰者還包括微軟買下Powerset,維基百科創辦人推出Wikia等。

2008年7月29日 星期二

[文章] 初談 jQuery

From: Polin Wei

  這幾天在流灠有關於 Blogger 的網站, 總是有人談到 jQuery ,雖然本身在工作上是使用 ExtJS 2.1作為企業內的開發,但底層仍是 jQuery , 那到底什麼是 jQuery 呢? 它有什麼媚力呢? 若你有到 jQuery 的網站看的話, 就可以知道, 它開宗明義就有說明:

jQuery The Write Less, Do More !! jQuery is a new type of JavaScript library.
  jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

意思就是說:
jQuery 是一套 JavaScript 的 Library
  jQuery 主要是用在 HTML 上 DOM 文件的操作,它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」,在快速選取元素上可以讓你一次選取單一或多個的元素,然後你可以將這些被選取的元素做一些改變,例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。

  以下是一個完整的HTML實例,您可以Copy/Paste去跑看看,讓您更能瞭解 jQuery 的威力,至於所需要的 jQuery 可以到 jQuery 去下載,目前最新版為 1.2.6 :


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery 1.2.6 Demo</title>
        <script type="text/javascript" src='jQuery-1.2.6.js'>  => 載入 jQuery 的 Java Script Library
        </script>
        <style type="text/css">
            .changeStyle {
                background-color: blue;
                color: #FFFFFF;
            }
           
            .content1 {
                background-color: red;
            }
           
        </style>
        <script type="text/javascript">
            /**
             *  jQuery 基本函數練習
             */
   
           // 函數說明: $ 是 jQuery 的物件,使用 $("div") 就是用 jQuery 來選取元素,這個範例可以選取文件內所有的 <div> 元素,
           // 後面接著的 .addClass("changeStyle") 就是將所有的 div 都加上 changeStyle 的 Style 的 class

            function fDiv(){
                $("div").addClass("changeStyle");
            }
   
    // 函數說明: 選取 id 為 first 的元素都加上 changeStyle 的 Style 的 class      
            function fDivFirst(){
                $("div#first").addClass("changeStyle");
            }
           
   // 函數說明: 選取 body 的元素都加上 changeStyle 的 Style 的 class
            function fBody(){
                $("body").addClass("changeStyle");
            }
           
   // 函數說明: 選取 h2  的元素都加上 changeStyle 的 Style 的 class
            function fHeader(){
                $("h2").addClass("changeStyle");
            }
   
            // 函數說明: 選取 class 為 content1 的 <div> 所包住的所有下層的 <p>
            function fContent1P(){
                $("div.content1 p").addClass("changeStyle");
            }
           
   // 函數說明: 選取 body 的元素, 並移除  changeStyle 的 Style 的 class
            function fRemoveBodyClass(){
                $("body").removeClass("changeStyle");
            }
           
   // 函數說明: 選取所有 div 的元素, 並移除  changeStyle 的 Style 的 class
            function fRemoveDivClass(){
                $("div").removeClass("changeStyle");
            }
        </script>
    </head>
    <body>
     <!-- 以下 <button ...> </button...> 作為事件觸發時, 所要作的事項 -->
        <button onclick="fDiv()"> 選取所有  div 的 selector </button>
        <button onclick="fDivFirst()"> 選取 div id 為 first </button>
        <button onclick="fHeader()"> 選取 h2 的 Header </button>
        <button onclick="fContent1P()"> 選取content1 的 Paragraph </button>
        <button onclick="fBody()"> Change Body Background Color </button>
        <button onclick="fRemoveBodyClass()"> Remove Body Class </button>
        <button onclick="fRemoveDivClass()"> Remove Div Class </button> <br>
  
  <!-- 以下為 HTML 的本體  -->
        <h2>Header H2</h2> <br>
        <div id="first">
            Hello World !! Polin Wei 這是第一個 div id = first
            <div class="content1">
                <p>
                    jQuery 是一個 Java Script Liberary
                </p>
            </div>
        </div>
        <h3>Header H3</h3>
        <br>
        <div id="second">
            Why jQuery? 這是第二個 div id = second
        </div>
        <div id="content2">
            <p>
                jQuery 主要是用在 HTML 上 DOM 文件的操作,它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」,在快速選取元素上可以讓你一次選取單一或多個的元素,然後你可以將這些被選取的元素做一些改變,例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。
            </p>
        </div>
    </body>
</html>




2008年7月27日 星期日

[教學] Blogger 的文章可以輕鬆閱讀了

From: Polin Wei

 日前看到 Racklin's 阿土伯程式大觀園 中有一篇文章 輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)! 細讀了一下,才發現這真是一個好東西. 它可以將你在 Blogger 上的每一篇文章,只顯示出前幾行,其餘的可以隱藏起來,依網友個人的喜好再決定是否要繼續閱讀,重點是:要顯示多少行可以由部落格主自已決定.

  安裝會困難嗎?一點也不困難,因為 Josh 已經讓你只要按幾下滑鼠就可以輕鬆安裝好,所以整個步驟就只有一個. 只要到 Josh's Note之「超級無腦安裝Blogger外掛功能」功能更新 的網址,按下 ADD To BLOGGER 的圖示即可.

安裝完後,要如何使用呢? <節錄阿土伯文章的一段>繼續閱讀功能 Markup 語法:
您可能和小弟一樣,使用 Blogger 的 WYSISWYG 編輯器,為了加上 <div id="fullpost">或 <span id="fullpost"> 常要在 Edit Html 語法中切換來切換去,所以可以使用 Markup 語法來 偷懶,只要照你平常打字,在文章中打 ## CONTINUE ## 關鍵字(注意:##與CONTINUE之間不可以有空格),後面跟的內容就會自動支援繼續閱讀功能了。
所以只要在平常的 WYSISWYG 編輯器下,打一下 ## CONTINUE ## (注意:##與CONTINUE之間不可以有空格)就好了,非常直覺方便。

若你對細項設定要興趣的話,可以繼續往下看. PS: 感謝阿土伯同意讓本站可以轉載

##CONTINUE##

* 源起:
在讀了 部落格會笑了!Blogger Smiley! 一文,發現讓 Blogger 利用 javascript 直接支援表情符號的確是一件方便且有趣的事,忍不住手癢也來擴充一下 Blogger 功能。
由於作者表示目前 Blogger Smiley 無法和 繼續閱讀功能 同時並存,有點可惜,再加上小弟我目前瘋狂愛上及學習 jQuery 中,於是重新利用 jQuery 實作了一些 Blogger 擴充功能。

* 功能簡介:
以目前 blogger_ext2 0.6b 來說,它提供了大部份 Blogger 所需的功能,且全部只要 6.3KB,相當的短小精幹唷。

對於不需要所有功能的進階使用者,您可以選用進階安裝,只要 1.1KB。


  • 可以隱藏 Blogger NavBar。

  • 可以使用 Blogger Smiley 介紹的表情符號功能。

  • 可以使用 繼續閱讀功能

  • 繼續閱讀功能支援 Markup 語法

  • 針對新版 Blogger 不需修改任何 CSS 及 Html Template

  • 所有功能支援設定選項來控制是否開啟

  • Sidebar 中的網頁元素 可以自定元素 "[-]折收/[+]展開" 功能。 (0.3b)

  • 繼續閱讀支援 Link 至 post 的 URL, 而非 [+][-] 展開內容。 (0.4b)

  • 支援 網誌作者回應時文章高亮度顯示。 (0.4b)

  • 表情符號可外掛及設定。(0.5b)

  • 標籤雲(Label Cloud) 功能。(0.5b)

  • Sidebar 網頁元素可以自動 NavIcon小圖示。(0.6b)

  • 加入了表情符號集 .js ,直接引用。(0.6.1b)

  • 作者回應高亮度顯示支援二個以上共筆作者。(0.6.1b)

  • 標籤雲支援顯示篇數而非只有字體變化大小。(0.6.1b)

  • Blogger NavBar 可設定隱藏或 hover (0.6.2b)。

  • 加入社群書籤功能。(0.6.2b)



* 運作方式:
由於 blogger_ext2 當初的發展目標就是給一般網誌站長即使不懂任何網頁基楚都能上手使用。所以 blogger_ext2並不需要修改您的 HTML Template 。
它是利用 "文件載入完成(document ready)"後,再重新為您的網誌加上新功能,可以想成 "重新為您的網誌排" 。
它是針對 New Blogger(beta)的內建功能加以擴充,讓您不懂 HTML 亦能輕鬆使用來豐富您的 Blogger。當然,舊版本的 Blogger 亦能使用。



* 如何使用(全自動安裝):
新版本 Blogger 可直接使用由 Josh 提供之 超級無腦安裝Blogger外掛功能 全自動安裝,強烈建議使用此一方式!!!

* 如何使用(快速安裝 all-in-one 8KB):


  • 舊版本的 Blogger 使用者:


    • 登入控制主頁 - 修改 Html TEMPLATE 找到 </head>,在上面加入以下JavaScript語法即可


    • <script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
      <script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js' type='text/javascript'></script>

    • OK!


  • 新版本的 Blogger 使用者:


    • 登入控制主頁 - 新增網頁元素(Page Element) - HTML/JavaScript Element

    • 然後 Title: 填入 ##HIDEME##

    • 在 Content: 填入

      <script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
      <script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js'type='text/javascript'></script>

    • OK!




* 進階安裝:
blogger_ext2 0.5版開始,已全面改為 plugins 的方式來擴充。
所以,如果您不會用到所有的功能或您熟悉網頁語法及設計,您可以使用進階安裝的方式來使用,讓 blogger_ext2 更具彈性。
整個 blogger_ext2 核心只要 1.1KB,滿足對大小及速度及客製化十分講究的玩家。
新舊版本的安裝差異同上,不再重覆,僅說明 Script 語法上的差異。


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js' type='text/javascript'></script>

其後再引入您所需要的功能 plugins ,如您需要 " 繼續閱讀功能" 則在上述二行後再加入一行:


<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js' type='text/javascript'></script>


* 隱藏 Blogger NavBar


  • 內建功能,不需安裝。

  • 功能設定:

    <script>
    // Blogger NavBar// true = 隱藏 false = 不隱藏
    BloggerExtOptions.hide_navbar = true;
    // Blogger NavBar// true = hover
    BloggerExtOptions.fade_navbar = true;
    </script>



* 隱藏 Widget


  • 內建功能,不需安裝。讓您可以加入任何的 Html/Javascript Element 來擴充 Blogger 只要 Title 是 ##HIDEME## 則會自動隱藏,不用去修改 Template。

  • 功能設定:

    <script>
    // true = 隱藏 false = 不隱藏
    BloggerExtOptions.hide_sidebar_html_markup = true;
    </script>



* 表情符號 plugin:
直接在您的文章中打入表情符號之代碼,如同您在 IRC / MSN / AOL / Yahoo 等 IM 使用的代碼,本 plugin 會自動為您代換成圖片。
詳細說明,請參考部落格會笑了!Blogger Smiley! 一文。


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入: (1.7KB)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_replace_smiley-0.2.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    // 表情符號功能開關
    // true = 開 false = 關
    BloggerExtOptions.replace_smiley = true;
    // 自定的表情符號集,請參考下面範例置換
    BloggerExtOptions.smilies = [];
    </script>


當然,您可以自已加入您或設定您專屬的表情符號(0.5b 設定功能)
idben's表情符號集設定範例: (10)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_benjamin.js' type='text/javascript'></script>

Yahoo Messenger 動態表情符號集(0.5b default): (54)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_yahoo.js' type='text/javascript'></script>

MSN 動態表情符號集(0.6.1b GeniusKiKi提供): (60)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_msn.js' type='text/javascript'></script>


* 繼續閱讀功能:
您可以使用 繼續閱讀功能 這篇文章或 繼續閱讀功能的困惑 這篇文章介紹的方式,但不需要引入它的 Javascript 以及修改 css 和您的Blogger Html Template。
只要您的文章中有 <div id="fullpost"> 或 <span id="fullpost"> 便會自動支援文章繼續閱讀功能,一切都是自動的。
** 注意! 0.6.1 前版本請一定要設定 BloggerExtOptions.continue_markup_expand_title 及 BloggerExtOptions.continue_markup_collapse_title 否則會出現亂碼 **
(由於 google code 以 us-ascii charset 傳遞 javascript :( )


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(2.2KB)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    // 支援 繼續閱讀功能 // true = 開 false = 關
    BloggerExtOptions.replace_continue_markup = true;
    // 動態展開時,是否使用動畫效果
    BloggerExtOptions.replace_continue_markup_animate= false;
    // 繼續閱讀功能顯示之說明文字
    // 可以是圖 img 或任何 html 語法
    BloggerExtOptions.continue_markup_expand_title = ' [+]繼續閱讀全文....';
    BloggerExtOptions.continue_markup_collapse_title = '[-]取消繼續閱讀全文....';
    </script>


繼續閱讀功能 Markup 語法:
您可能和小弟一樣,使用 Blogger 的 WYSISWYG 編輯器,為了加上 <div id="fullpost">或 <span id="fullpost"> 常要在 Edit Html 語法中切換來切換去,所以可以使用 Markup 語法來 偷懶,只要照你平常打字,在文章中打 ## CONTINUE ## 關鍵字,後面跟的內容就會自動支援繼續閱讀功能了。
所以只要在平常的 WYSISWYG 編輯器下,打一下 ## CONTINUE ## 就好了,非常直覺方便。
繼續閱讀功能 URL 模式:
如果您不想讓內容以動態的方式在首頁展開,可以選擇傳統的 URL 模式,使用者點了 "繼續閱讀後,會連至該文章的 URL 中。


  • 功能設定:

    <script>
    // 使用 URL 連結文章而非 javascript 動態展開
    BloggerExtOptions.replace_continue_markup_as_link = true;
    </script>



* Sidebar 側邊網頁元素 折收/展功 功能:
側邊中的網頁元素,越加越多,整個側邊條長長長… 也來給他自動 收納 一下吧。
你只要先用 Browser 的 View-Source 看您的 Blog 頁面的原始碼,然後找 class='widget ' 就能找出每一個測邊功能的 id='xxx' ,然後把 id 填入設定中,這些功能表就自動收納啦!!!


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(1.2KB)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_sidebar_widget_expandable.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    //側邊功能 // true = 開 false = 關
    BloggerExtOptions.sidebar_widget_expandable = true;
    // 動態展開時,是否使用動畫效果
    BloggerExtOptions.sidebar_widget_expandable_animate= false;
    // 測邊展開的 html 語法,可以是圖 img 或任何 html 語法
    BloggerExtOptions.sidebar_widget_expan_title = '[+]';
    // 使用圖形而非文字範例
    BloggerExtOptions.sidebar_widget_expan_title='<img border="0" src="http://racklin.googlepages.com/expandall.gif" align="left"/>';
    // 測邊關閉的 html 語法,可以是圖 img 或任何 html 語法
    BloggerExtOptions.sidebar_widget_collapse_title = '[-]';
    // 使用圖形而非文字範例
    BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';
    // 要收納的元件 id
    BloggerExtOptions.sidebar_widget_expandable_ids = ['Label1','LinkList1','BlogArchive1'];
    </script>



* 讓網誌作者的回應文章高亮度顯示:
讓您的回應和訪客的回應擁有不同的 style 樣式。只要您的網誌中有放入 "關於我自已" 這個網頁元素,一切都全自動了。沒有放 "關於我自己" 元素的朋友也沒關係,只要您填入您自已的 profile ID 即可。
Profile ID 怎麼來,就自已寫一篇回應文章,然後移到自已的名字上,那個 URL 會長這樣 http://www.blogger.com/profile/00734471337083697849,最後面那個 00734471337083697849 就是您本人的 Profile ID 嘍。
效果及參考這篇 把部落主人的話給擦得火亮 但您不用改 html template 及 css 。


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(948Bytes)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_author_comment_highlighting.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    // 讓您本人的回應火亮火亮的
    BloggerExtOptions.author_comment_highlighting = true;
    // 您本人的 Profile ID ,空白則自動判斷,但您必須要有 "關於我自已" 的元素。
    BloggerExtOptions.author_comment_highlighting_profile = '';
    // 火亮的 css style
    BloggerExtOptions.author_comment_highlighting_style = { 'color': '#C30014', 'font-width': 'bold' };
    </script>



* 標籤雲 Label Cloud 功能:
讓您只要您在您的 Blog 加入 NewBlogger 的網頁元素(Page Element)下的"標籤(Labels)元素"即可擁有 "標籤雲" 功能嘍,就是這麼簡單容易。


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(1.4KB)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_labelcloud.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    // 標籤雲設定 // 開關
    BloggerExtOptions.labelcloud = true ;
    //blogger 內建 label 元素的 id
    BloggerExtOptions.labelcloud_widget_id = 'Label1' ;
    // 最大字體級數
    BloggerExtOptions.labelcloud_maxFontSize = 24 ;
    // 最小字體級數
    BloggerExtOptions.labelcloud_minFontSize = 10 ;
    // 最大字體顏色 RGB
    BloggerExtOptions.labelcloud_maxColor = [168,181,248] ;
    // 最小字體顏色 RGB
    BloggerExtOptions.labecloud_minColor = [0,0,0] ;
    </script>



* Sidebar 側邊網頁元素 Icon 圖示功能:
側邊中的網頁元素,只能顯示文字,覺得太單調了嗎,給它加個 Icon 圖示吧。
你只要先用 Browser 的 View-Source 看您的 Blog 頁面的原始碼,然後找 class='widget ' 就能找出每一個測邊功能的 id='xxx' ,然後把 id 填入設定中,再為它設個 Icon 圖示就 OK 啦!!!


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(595Bytes)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_sidebar_widget_icon.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    //側邊 Icon 功能 // true = 開 false = 關
    BloggerExtOptions.sidebar_widget_icon = true;
    // 使用圖形而非文字範例
    BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';
    // 要元件 id 所對映的 Icon
    BloggerExtOptions.sidebar_widget_icons= {'Label1':'<img src="http://racklin.googlepages.com/bkmrk_nav.gif" align="left"/>',
    'Profile1':'<img src="http://racklin.googlepages.com/home_nav.gif" align="left"/>',
    'BlogArchive1':'<img src="http://racklin.googlepages.com/tree_explorer.gif" align="left"/>',
    'LinkList1':'<img src="http://racklin.googlepages.com/discovery.gif" align="left"/>'
    };
    </script>




* 加入社群書籤功能:
讓您的 Blog 文章提供各個 社群書籤 的加入連結及圖示。


  • All-in-one 版本內建,不需安裝。若您使用進階安裝,請引入:(2109Bytes)

    <script src='http://blogger-ext2.googlecode.com/files/plugin_bookmark_buttons.pack.js' type='text/javascript'></script>

  • 功能設定:

    <script>
    //社群書籤功能 // true = 開 false = 關
    BloggerExtOptions.bookmark_buttons = true;
    // 社群書籤功能自定語法範本
    BloggerExtOptions.社群書籤功能='<span class="post-bookmarks">%BOOKMARK_BUTTONS%</span>';
    // 社群書籤設定 僅列出一個,其它請見 source code.
    BloggerExtOptions.bookmark_buttons_bookmarklets= [
    [
    'http://blogger.ext2.googlepages.com/hemidemi.gif',
    'HEMiDEMi',
    'http://www.hemidemi.com/user_bookmark/new?via=sticker&url=%URL%&title=%TITLE%&description=%DESC%'
    ]
    ];
    </script>




* Source Code:
本專案是一個完全 open source 的專案,歡迎大家使用及修改開發。
Source Code: http://blogger-ext2.googlecode.com/svn/trunk/
若您亦寫了 plugin ,請將您的 plugin link 給小弟,小弟把它加入我的說明中...

* 開發 plugin :
0.5b 後,blogger_ext2 已是一個 plugin base 的開發環境,所有在下寫的擴充也都是以 plugin 方式掛入。
您可以很容易的一起設計 plugin , 請參考 DIY 利用 blogger_ext 擴充 Blogger 功能!

* 其它功能:
待續

歡迎大家引用及給小弟建議。

建議大家直接使用,而不需另存,這樣小弟可以遠端為您 debug 或改版,您的網站可即時更新及享用。

* Change Log:


  • 0.6.3: registerHook API fixed。

  • 0.6.2b: NavBar 可設定為 滑鼠移到後顯示。

  • 0.6.2b: 文章加入社群書籤按鈕。

  • 0.6b: 加入 sidebar widget Icon 圖示功能。

  • 0.5b: 重新設計重新,plugins 導向設計。

  • 0.5b: 表情符號可外掛及設定。

  • 0.5b: 標籤雲(Label Cloud) 功能。

  • 0.4b: 加入 繼續閱讀 url mode 及 作者回應火亮火亮 功能。

  • 0.3b: 加入 sidebar widget 折收功能。

  • 0.2b: 加入 繼續閱讀相容 span,div id=fullpost 功能。

  • 0.1b: 加入 表情符號及繼續閱讀 Markup 語法功能。





2008年7月26日 星期六

[教學] Blogger 字距與行距調整

From: Polin Wei


  Blogger預設的字體是以英文為最佳化的,英文相對中文來說,適合閱讀的字體比較小,字距也比較小,難道這是中文的悲哀嗎?!

  為了自己或給網友在看自己部落格比較舒適一點,可以在預設的Blogger範本中作調整本文的字體大小、字距與行距,可以在「版面配置」–「修改HTML」,選取「展開小裝置範本」作修改尋找 .post.post div這類的CSS欄位,加入以下三行進行微調:

##CONTINUE##
字體大小
font-size: 115%;

字距
letter-spacing: 1.4px;

行距
line-height: 1.3em;

2008年7月25日 星期五

[教學] Blogger :Star Ratings 文章星等評價

From: Polin Wei

  想讓網友來票選你那一篇文章較受歡迎嗎? Josh's Note 有篇文章 Blogger in Draft:Star Ratings 很方便讓網友可以直接投票,而且不用登入 Blogger.首先登入到 draft.blogger.com,點選「版面配置」–「網頁元素」,編輯「網誌文章」,選取「顯示星號評等」後儲存。如下圖
##CONTINUE##




   Josh's Note 的文章提到要貼入兩段程式碼,經我測試過後,發現只要填入第一段就好,不然星號評等會出現二次.因為當你選取「顯示星號評等」時,Blogger 已幫你加入第二段程式碼了.

  若是加在文章底部時,文章底部有三個區塊,分別是 <div class='post-footer-line post-footer-line-1'>、<div class='post-footer-line post-footer-line-2'>、<div class='post-footer-line post-footer-line-3'> ,由你自己決定要放在那:

1.我是放在 <div class='post-footer-line post-footer-line-1'>末:

貼入下列的程式碼:


<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>

</div>
<div class='post-footer-line post-footer-line-2'>



2.然後在<head></head>之間
加入下列的 CSS 程式碼



.star-ratings {
float:right;
margin:-15px 0px 0px 0px;
}
.RatingPanelCustom {
width:155px;
}


3. 儲存範本即可

2008年7月24日 星期四

[教學] Blogger in Embedded Comment Form 意見嵌入文章中

From: Polin Wei

  今天到 Josh's Note 看到他推薦的一篇文章 Embedded Comment Form 讓我覺得這個功能實在很方便網友可以直接留言.因此依照他的文章登入到 draft.blogger.com,選擇「設定」–「意見」,在「意見表單位置」選擇「已內嵌下列文章」後儲存.如下圖
##CONTINUE##



  設定好後,原本也想照著 Josh's Note 的建議進入「修改HTML」,選取「展開小裝置範本」作修改,但本於好奇的心,先回 我與小崴崴的工作日記 的網誌測看看,結果不需作任何修改,就可以正常運作了耶. Blogger 修改 Bug 的速度還真快,大家可以試試

參考文獻:

Josh's Note 的一篇文章 Embedded Comment Form

[教學] 如何用 CSS 在 Blogger 作分頁

From : Polin Wei
  撰寫 Blogger 以來,總覺覺得缺少了什麼,直到看到別的網頁中的標題下都有分頁,知道那是CSS (Cascading Style Sheets) 的功能,但卻不知該如何在 Blogger 上使用,因此上網查了一下,其實要作到這樣的效果真的不難,趁記憶還熱騰騰時做個整理。

大致上有三個步驟:
1.進到 Blogger -> 版面配置 -> 修改HTML,找到這一行

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

將maxwidgets改為2,showaddelement改為yes,即為下行

b:section class='header' id='header' maxwidgets='2' showaddelement='yes'


##CONTINUE##


2.加入CSS
可以先到exploding-boy找喜歡的樣式,為了配合我的頁面,我選擇[Tab MenuJ]為例,先右鍵檢視原始碼
找到下面這一段:


/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}


把這段程式碼貼到<head></head>之間


3.回到檢視原始碼的視窗,往下找,會找到下面這一段:


<h2>Tab Menu J</h2>
<div id="tabsJ">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>


<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>





  再到Blogger 管理頁面中,版面配置->網頁元素,於標題列加入一個HTML/JavaScript,貼上上述內容,標題可略。這樣就可以了。


  若你想直接用 Label 作為分頁的選項,則可以新加入一個 Label 的 widget ,然後再到Blogger管理頁面 -> 版面配置 -> 修改HTML 將此 Lable 的 widget 作下面的修改

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>



參考文獻:
http://joshnote.blogspot.com/2007/01/label.html

2008年7月23日 星期三

[文章] 關懷弱勢 你我一起來



From : Polin Wei



  台灣的東半部-台東,沒有現代文明的污染,風光明媚,綠蔭盎然;沒有台北的繁華喧囂,只有那陣陣蟬鳴;沒有那爾虞我詐的生存法則,只有那純樸率真的人性.


  這裡的家庭,年長者大多務農;而青壯年者則在外地工作,以尋求更好的生活品質;而無力往外發展的家庭,只能固守家園;因此這裡大部份的家庭,仍過著日出而作,日落而息的生活,也因此大部份家庭的家長工作情形並不穩定,經濟狀況也不好;不僅學生家中的情況如此,連學校也常因缺乏資源而苦惱。


  



 


  別看這一些的電腦堆積如山,這些可是從台灣各地捐贈而來,只是這些電腦往往只能開機,卻無法執行現在社會所常用的軟體,如:Windows XP,Word,Excel...等;更別奢求要連上網 InterNet 去搜尋世界各地的現代新知了.


  學習新知並非只有上網一圖,但部分國中學校內,卻苦於沒有足夠的資源建設圖書館,連學校老師們想要鼓勵學生多多閱讀課外讀物,以增廣見聞、充實自己,卻也得要面臨學生們沒有書可以看的窘況。


 



 


  這裡雖然沒有像樣的操場,也沒有完善的體育設備,但孩童們天真無邪的笑臉上,卻從來都沒有間斷過。


  台東縣地形呈長條狀,因此幅員廣大,一個鄉鎮只有一間國中,有些學生因為要走1、2個小時到學校而對上學感到意興闌珊。交通不便更成為阻撓學生們學習的另一大要素.


  這些學童們正急需你我及社會大眾的協助,期盼大家本著「老無老以及人之老,幼無幼以及人之幼。」的精神,共同伸出援手;有錢的出錢,有力的出力,讓這些學童們都能有接受同等教育的機會.


 


  您愛心的捐助請上「希望工場 ~台東縣弱勢學生補助計劃」官方部落格:http://www.hopemaker.com.tw 查詢.


2008年7月20日 星期日

[教學] 如何將 Blogger 的標籤改為 Label Cloud 標籤雲

來源: Polin Wei


  當文章愈來愈多,分類也變得一大串,部落格版面上的列表也變得一大串,若變成下圖右方的 Label Cloud 標籤雲,是不是比較簡潔呢?現在我們就來簡化一下我們的版面吧.



##CONTINUE##

首先到 版面配置 -> 修改 HTML 裡,將展開小裝置範本的選項打勾,並且找到

]]></b:skin>


在這之前貼上第一段程式碼


/* Label Cloud Styles
------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#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 a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}




  然後在到

]]></b:skin> 與 </head>

之間貼上第二段程式碼


<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>





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



<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
........
原來的程式
.........
</b:widget>



將原本的 Widget 程式全部置換成下面的程式碼



<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</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>





額外補充:若要修改標籤的字型大小,顏色則參改下表


var cloudMin = 1; -> 最小顯示的標籤數量,"1"代表只要有一個標纖都會顯示出來
var maxFontSize = 20; -> 最多標籤的字型大小
var maxColor = [0,0,255]; -> 最多標籤的字型顏色
var minFontSize = 10; -> 最少標籤的字型大小
var minColor = [0,0,0]; -> 最少標籤的字型顏色


參考文獻:

http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html



[文章] 我在 "愛情" 找到我的圓滿生活

來源: Polin Wei




初章:回憶

  回憶...年過三十的我,曾在這茫茫人海之中,努力的學習一個人過生活,雖然身處擁擠的人潮裡,卻難掩心中的孤寂,眼中偶而掠過一絲絲對愛情的光芒,但總是瞬眼即逝.僅管是如此,我仍然保持著慣有的樂觀,快樂的融入人群之中.

第一章:聚會

  有一天...朋友邀約戶外聚會,「去吧!!認識不同類型的朋友也不錯」,「嗯...當作是去親近大自然好了」隨口爽快的答應了.但是就在聚會當天,雖然騎著摩托車,但心中卻有點猶豫,擔心自己在這群不熟悉的人群中,是否仍然可以處之泰然.


  果然,在烤肉活動結束後,大夥提議去騎腳踏車時,自己就藉故提前離席,至於大夥後來的鐵馬之旅完全沒有參與,哈...(這件事後來常被小崴崴拿來當作取笑我的話題)


第二章:出現


  聚會過後一個月餘,朋友問我對其中的一位女孩是否有印象,「ㄟ!哈...」尷尬的不知如何回應,只是傻笑一下,「吃個飯彼此認識一下吧」心中難掩雀躍,但在飯局中,友人的這個女性朋友( 就是小崴崴啦 )似乎靦腆的不知該如何融入我們的話題;飯局之後,我想她應該是徹底的鬆了一口氣才對吧.





第三章:過程

  認識...交往...到成為戀人,這段令人稱羨的過程,有經歷過這段歷程的戀人應該都知道固中的甜蜜才是,;我們當然也不例外囉,每次與小崴崴出遊總是令我感到快樂,從不覺得累,我想這就是愛情的魔力吧,而這個魔力則始終是來自小崴崴...





末章:結局


  相信愛情...有情人終成眷屬,在親朋好友的祝福及見證下,我們步入了禮堂;人家說「婚姻是愛情的墳墓」是這樣的嗎?其實結婚後才是我們快樂家庭生活的開始...你還是單身嗎?!只要你相信愛情...就會在愛情中找到你圓滿的生活,而我已經在愛情中找到屬於我倆的圓滿生活了哦...



2008年7月17日 星期四

[教學] Eclipse 與 Apache Tomcat 的整合開環境

來源:Polin Wei



環境:

OS : WinXP-SP3

Apache Tomcat : Apache-Tomcat-6.0.14 下載: http://tomcat.apache.org/
解壓在 C:\AppServ\apache-tomcat-6.0.14

Eclipse IDE : Ganymede 下載: http://www.eclipse.org/downloads/index.php

Java : jdk1.5.0_12 下載: http://java.sun.com/



  基本的環境變數,請看 [教學]Eclipse 與 Subversion 的整合運作 這篇介紹,接下來我們來看看在 Eclipse IDE 環境要如何設定.


##CONTINUE##

  在 Eclipse -> Preferences 中選擇 Server -> Runtime Environments


  按下 Add 增加 Apache 伺服器中的 Apache Tomcat v6.0


  若你的環境變數有事先設好,那下面的值應該是自動帶出來的,若沒有則手動選擇 Tomcat 安裝的路徑

  按下 Finishe 後,下方的 Servers 頁次應該會有 "Apache Tomcat v6.0.14 at localhost" ,在右邊則會有多一個 Servers 的目錄,然後可以按下滑鼠右鍵,選 "Add and Remove Projects"


  將你要 Publish 的專案加入進來這個 Local 的 Apache Tomcat 伺服器內即可,這樣你的專案就可以從流灠器 ( IE, FireFox ) 中流灠了.



2008年7月15日 星期二

[文章] 建立 我與小崴崴工作日記 的心路歷程





建立  我與小崴崴的工作日記  本來只是純粹是好玩,寫寫自己的生活感想,將出遊的過程記錄下來,也把生活中的瑣碎的事留下記念,將部落格生活化而己。



  但無心插柳,柳卻成蔭;建立 我與小崴崴的工作日記 讓我認識了不同國界的朋友,而且現在每天都會上自己的部落格,去看看今天有誰來光臨過;也會去朋友的部落格看看有什麼新鮮事,更好玩的是:若假日不曉得往那裡跑時,只要看一下朋友的部落格就有一些的情報可以供參考;若不曉得吃什麼時,也只要看一下朋友的部落格,也會有不錯的建議。

  記得有一次我們的 苗栗南庄桂花巷半日遊 剛寫完, Post 到網站不久,店家就前來留言,前後不到二個小時,就有人注意到了吔!!當時連小崴崴都興奮不已呢

  在建立部落格之初,因為要摸索部落格的功能,需要花多一點時間;且有時我在寫部落格寫得過頭時,小崴崴也會有點不高興,因為沒有去陪她啦!!幸好現在不用在摸索啦!!寫部落格已是家常便飯,不用再花太多時間了哦。




  還有寫部落格也讓我學習到更多的網頁技術,而且對現行網站所提供的新功能也能更迅速的運用,不僅在部落格的建置上可以運用,也讓我在工作上有更多的 idea 想法,這些都是在建立 我與小崴崴的工作日記 之初沒有想過的。或許等我與小崴崴老的時候,在看這個 我與小崴崴的工作日記 時,不但會有更多的回憶外,更能將我們以前的事跟親朋好友分享喔。



更多關於我們的事都在



Yahoo:我與小崴崴的生活日記
MSN : 我與小崴崴的電影日記
Blogger: 我與小崴崴的工作日記

2008年7月11日 星期五

[文章] Windows Live & MSN、網路電話讓你更方便打國際電話



來源: Polin Wei


就是要比Skype低! 微軟進軍MSN網路電話每分鐘0.66元




  網路電話是因 Skype 而開始流行,為了不讓Skype專美於前,微軟推出MSN網路電話服務,通話費率一公布,全都咬著Skype費率,每通都比Skype低,硬是比 Skype 還低,而且每分鐘只要 0.66 元而已哦!!


  但打電話就一定要看資費才準,不然若只是口號,就沒有什麼意思了。所以就來看一下 MSN 的網路電話究竟是不是有比較省呢?






  • 使用本服務,除了依通話時間及目的地費率以分計費之外,每一通通話尚需收取話務接取費新台幣 0.8 元。

看起來這樣一通網路電話就要 0.66 + 0.8 = 1.46 耶....


  再來就是看它的影相品質如何囉!! 下面的相片應該是可以符合一般人的要求才對,我的小崴崴是多麼清晰可見啊,或許可能現在的網路流量比較不擁塞才會如此吧。不過可以知道的是,未來網路的頻寛應該是會愈來愈大的才對。




  符合基本要求後,那它還提供什麼優質服務呢?別急,MSN 還提供你個人化的網路電話按鈕哦!! 可以讓你與眾不同。




  還有,還有 MSN 還提供非常 Cute 的表情符號!! 可以順著你的心情隨時更換。





  MSN 網路電話還有很多的寶藏,值得你去挖掘喔!!更多的資訊都在http://livecall.spaces.live.com/blog/部落格中,至於它是不是比 Skype 便宜,通話品質是不是符合你的要求,那就見仁見智囉。