2011年1月12日 星期三

讓Blogger有繼續閱讀...


特點:

1. 安裝簡易
不需懂程式、html語法,只要點點滑鼠、複製貼上即可使用
2. Auto縮文模式自動套用在整個blog,不需逐篇插入標記(懶人適用)


功能介紹:

1.提供 三種 縮文(繼續閱讀)模式:

  • Auto模式:自動以行數(br)縮文
  • Custom模式:使用者自行插入特殊標記(標記格式可自訂),由標記處開始縮文
  • Mix模式:混合Auto和Custom模式(若有特殊標記,則由標記處縮文,若沒有特殊標記,則按照行數自動縮文)
2.提供 兩種 繼續閱讀連結樣式:
  • 直接連結:點選「繼續閱讀」,直接連到文章全文
  • 展開/收合:點選「繼續閱讀」,原處 展開/收合 隱藏的內容,並支援動畫效果
3.可設定各頁面(首頁、標籤(tag)分類頁、blog存檔(archive)頁)的文章顯示方式:
  • 全文:不做縮文動作
  • 摘要:縮文,並顯示繼續閱讀連結
  • 標題:只顯示標題
4.快速切換按鈕:
自動產生 全文|摘要|標題 的連結按鈕,可點選並快速切換檢視方式(按鈕名稱、擺放位置可自訂)
安裝:
 
安裝前注意事項:
1.若有先前有安裝其他版本(阿土伯版本、本站的1.x版本)的繼續閱讀,請先完整移除後,再安裝
2.若你的模板本身有附繼續閱讀功能(ex:羊男的三欄式),可能會有衝突,請先想辦法移除,或是換其他模板....
3.某些特殊的模板(如:Blogcrowds的模板),因為模板結構和blogger預設的不相同,所以無法支援(安裝了也沒作用),請換其他模板之後,再安裝。

安裝步驟:
1.到Blogger的控制(後台)頁面
2.「版面配置」->「網頁元素
3.按下「新增小工具」,出現可用的小工具清單
4.找一個名稱為「 HTML/JavaScript」,按下滑鼠左鍵,會進入設定的頁面
5.「標題」欄位,請填入 ##EasyReadMore##
6.「內容」部份,請複製以下程式碼填入




7.按「儲存變更」,安裝完成!!

參數設定:

可設定部份為程式碼後段
按順序逐一說明如下:
1.縮文(繼續閱讀)模式設定(預設值:mix模式)
  • Auto模式:EasyReadMoreSettings.Read_More_Mode = 'auto';
  • Custom模式:EasyReadMoreSettings.Read_More_Mode = 'custom';
  • Mix模式:EasyReadMoreSettings.Read_More_Mode = 'mix';
2.Auto模式下,文章最大行數(超過就自動縮文) (預設值:3行)
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
數字'3'改成想要的行數即可

3.Custom模式下,代表繼續閱讀的特殊符號(預設值:##ReadMore##)
支援阿土伯版本的符號(##CONTINUE##)
以及一般常見的

範例:
相容阿土伯版本的符號
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##CONTINUE##';


相容
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'id';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = 'fullpost';


相容
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'class';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = 'fullpost';


4.設定繼續閱讀連結樣式(預設值:directlink(直接連結))
  • 直接連結:EasyReadMoreSettings.Link_Style = 'directlink';
  • 展開/收合:EasyReadMoreSettings.Link_Style = 'collapsible';
5.設定繼續閱讀按鈕顯示文字,以及連結的title屬性
顯示文字:
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
連結title屬性:
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';

6.設定收合按鈕顯示文字,以及連結的title屬性(只有在樣式設定為「展開/收合」時才有效)
顯示文字:
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
連結title屬性:
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';

7.文章展開後,收合按鈕是否移動(只有在樣式設定為「展開/收合」時才有效)(預設值:不移動)
不移動,取代繼續閱讀按鈕
EasyReadMoreSettings.Collapse_MoveToEnd = false;
繼續閱讀按鈕消失,收合按鈕出現在文章最後
EasyReadMoreSettings.Collapse_MoveToEnd = true;

8.按下收合按鈕時,文章是否自動捲回(只有在樣式設定為「展開/收合」,且收合按鈕設定移動到文章結尾,才有效)(預設值:自動捲回至文章標題)
自動捲回至「文章標題」
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'title';
自動捲回至「繼續閱讀連結處」
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'link';
不執行自動捲回
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'none';

9.設定展開/收和動畫效果(只有在樣式設定為「展開/收合」時才有效)(預設值:沒有動畫)
沒有動畫(none)
EasyReadMoreSettings.Collapse_Effect = 'none';
滑動(slide)
EasyReadMoreSettings.Collapse_Effect = 'slide';
淡入淡出(fade)
EasyReadMoreSettings.Collapse_Effect = 'fade';

10.設定展開/收和動畫速度(只有在樣式設定為「展開/收合」時才有效)(預設值:正常)
速度慢
EasyReadMoreSettings.Collapse_Effect_Speed = 'slow';
速度正常
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
速度快
EasyReadMoreSettings.Collapse_Effect_Speed = 'fast';

11.設定各頁面預設顯示方式,有三種:
  • 繼續閱讀(摘要) - abstract
  • 只有標題 - title
  • 全文 - full
設定blog首頁:(預設值:摘要)
EasyReadMoreSettings.Index_Page_Style = 'abstract';
設定標籤(tag)分類頁:(預設值:標題)
EasyReadMoreSettings.Tag_Page_Style = 'title';
設定blog存檔(archive)分類頁:(預設值:標題)
EasyReadMoreSettings.Archive_Page_Style = 'title';
註:按下「較舊的文章」、「較新的文章」顯示的頁面也是屬於archive分類頁

12.是否啟用快速切換按鈕(預設值:啟用)
  • 啟用:EasyReadMoreSettings.Controller_Enabled = true;
  • 停用:EasyReadMoreSettings.Controller_Enabled = false;
13.快速切換按鈕是否放在預設位置(在文章列表的頭和尾各顯示一個)(預設值:是)
放在預設位置:
EasyReadMoreSettings.Controller_Default_Position = true;
自訂位置(需自行修改範本html):
EasyReadMoreSettings.Controller_Default_Position = false;

註1:可用css操控快速切換按鈕,class為"read-more-controller"
註2:若要自訂顯示位置,請在範本的html內想要擺放的位置上插入:

快速切換按鈕會自動加在裡面

14.自訂快速切換按鈕的分隔符號(預設值: | )
EasyReadMoreSettings.Controller_Splitter = ' | ';
修改紅色字部份即可

15.修改快速切換按鈕的顯示文字
完整模式的顯示文字:
EasyReadMoreSettings.Controller_Full_Text = '完整';
摘要模式的顯示文字:
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
標題模式的顯示文字:
EasyReadMoreSettings.Controller_Title_Text = '標題';

16.設定文章為「顯示全文」(不縮文)的特殊符號(預設值:##ShowAll##)
在文章的任意地方,插入此特殊符號,則該篇文章就會被略過(不執行縮文動作)

可自訂特殊符號
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
修改紅色字部份即可 

書籤

加入書籤: MyShare HemiDemi Fiigo Baidu Google Bookmarks Yahoo! My Web PChome Del.icio.us Digg technorati furl 其他更多書籤
Powered By Blogger

fellow me

 

花花SBS Copyright 2008 All Rights Reserved Baby Blog Designed by Ipiet | All Image Presented by Tadpole's Notez