我的工作日記: [教學] 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>

新版本的 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>

* 進階安裝:
自 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 語法功能。

我的工作日記

Home

2008年7月27日星期日

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

1 則留言:

Home

2008年7月27日 星期日

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

1 則留言:

2008年7月27日星期日