2007年3月1日 星期四

輕鬆擴充 天空部落 功能: yam_ext.js

* 源起:
由於推出了 輕鬆擴充 Blogger 功能: Blogger_ext2.js 後,接下來便是把 blogger_ext2 porting 到 Yam/天空部落 上,希望對大家會喜歡!!


* 功能簡介:
以目前 yam_ext 0.1.0 來說,它提供了大部份 天空部落 Blog 所需的功能,且全部只要 3.3 KB,相當的短小精幹唷。

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

  • 可以使用 Blogger Smiley IRC/MSN/YAHOO Like 介紹的表情符號功能。

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

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

  • 表情符號可外掛及設定。如: :) :D

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



* 運作方式:
它是利用 "文件載入完成(document ready)"後,再重新為您的網誌加上新功能,可以想成 "重新為您的網誌排" 。
它是針對 天空部落 的內建功能加以擴充,讓您不懂 HTML 亦能輕鬆使用來豐富您的 Blog。

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

  • 先進入管理者後台 http://admin.blog.yam.com/


    • 功能設定 - 個人資料

    • 在 部落格描述: 中填入 

      <script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
      <script src='http://blogger-ext2.googlecode.com/files/yam_ext-0.1.0.pack.js' type='text/javascript'></script>
      <script type='text/javascript'>
      // 設定下一行開始
      BloggerExtOptions.sidebar_widget_expandable_ids = ['人氣指數','RSS 訂閱','贊助商'];
      </script>

    • OK!





* 進階安裝:
由於 yam_ext 全面採用 plugins 的方式來擴充。
所以,如果您不會用到所有的功能或您熟悉網頁語法及設計,您可以使用進階安裝的方式來使用,讓 yam_ext更具彈性。
整個 yam_ext核心只要  1.1KB,滿足對大小及速度及客製化十分講究的玩家。
同手動快速安裝,一樣是將語法放在 "Blog 基本設定-說明" 中,同上,不再重覆,僅說明 Script 語法上的差異。

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

其後再引入您所需要的功能 plugins ,如您需要 "表情符號功能" 則在上述二行後再加入一行:

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


* 隱藏 Widget

  • 內建功能,不需安裝。讓您可以加入任何的 Html 自訂元素 來擴充你的 Blog, 只要 Title 是 ##HIDEME## 則會自動隱藏。

  • 功能設定:

    // true = 隱藏 false = 不隱藏
    BloggerExtOptions.hide_sidebar_html_markup = true;



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

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

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

  • 功能設定:

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


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

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

Yahoo Messenger 動態表情符號集(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>



* Sidebar 側邊網頁元素 折收/展功 功能:
側邊中的網頁元素,越加越多,整個側邊條長長長… 也來給他自動 收納 一下吧。
你只要在後台點選 "設定插入欄位",然後把 "標題" 填入設定中,這些 "插入欄位" 就自動收納啦!!!

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

    <script src='http://blogger-ext2.googlecode.com/files/yam_plugin_sidebar_widget_expandable-0.1.pack.js' type='text/javascript'></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="你的圖片位址" align="left"/>';
    // 測邊關閉的 html 語法,可以是圖 img 或任何 html 語法
    BloggerExtOptions.sidebar_widget_collapse_title = '[-]';
    // 使用圖形而非文字範例
    // BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="你的圖片位址" align="left"/>';
    // 要收納的元件標題
    BloggerExtOptions.sidebar_widget_expandable_ids = ['人氣指數','RSS 訂閱','贊助商'];




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

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

* 其它功能:
待續

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


* DEMO:
http://blog.yam.com/racklin

* Change Log:

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

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

  • 0.1.0: 加入 sidebar widget 折收功能。

  • 0.1.0: 加入 表情符號功能。



Technorati Tags: , ,

4 則留言:

匿名 提到...

親愛的阿土伯,啥咪時後也幫PIXNET寫一個折疊插件呢?期待好久了說~

匿名 提到...

阿土伯您好,我照著步驟用,卻完全出不來耶?就是直接複製在「部落格描述」那邊嗎?
屋...

dllee 提到...
作者已經移除這則留言。
匿名 提到...

不好意思,不是想炒冷飯,是最近才發現 :P

感謝您的分享,已套用到我的blog了。
http://blog.yam.com/dllee

最近天空改版,在部落格描述中已無法使用 HTML 的 TAG 了,也無法加入 script,只能放到自定欄位內。

文章加入 FunP 推文按鈕也要感謝您的分享 ^_^