1. 安裝簡易:不需懂程式、html語法,只要點點滑鼠、複製貼上即可使用
2. Auto縮文模式:自動套用在整個blog,不需逐篇插入標記(懶人適用)
功能介紹:
1.提供 三種 縮文(繼續閱讀)模式:
- Auto模式:自動以行數(br)縮文
- Custom模式:使用者自行插入特殊標記(標記格式可自訂),由標記處開始縮文
- Mix模式:混合Auto和Custom模式(若有特殊標記,則由標記處縮文,若沒有特殊標記,則按照行數自動縮文)
- 直接連結:點選「繼續閱讀」,直接連到文章全文
- 展開/收合:點選「繼續閱讀」,原處 展開/收合 隱藏的內容,並支援動畫效果
- 全文:不做縮文動作
- 摘要:縮文,並顯示繼續閱讀連結
- 標題:只顯示標題
自動產生 全文|摘要|標題 的連結按鈕,可點選並快速切換檢視方式(按鈕名稱、擺放位置可自訂)
安裝:
安裝前注意事項:
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';
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';
顯示文字:
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
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;
放在預設位置:
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##';
修改紅色字部份即可