2009年3月10日 星期二

[BLOGGER]繼續閱讀懶人加強版 最新版本 v2.2.1(2009.5.8)

一、特點:

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


二、功能介紹:##ReadMore##

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

  • Auto模式:自動以行數(br)縮文
  • Custom模式:使用者自行插入特殊標記(標記格式可自訂),由標記處開始縮文
  • Mix模式:混合Auto和Custom模式(若有特殊標記,則由標記處縮文,若沒有特殊標記,則按照行數自動縮文)
2.提供 兩種 繼續閱讀連結樣式:
  • 直接連結:點選「繼續閱讀」,直接連到文章全文
  • 展開/收合:點選「繼續閱讀」,原處 展開/收合 隱藏的內容,並支援動畫效果
3.可設定各頁面(首頁、標籤(tag)分類頁、blog存檔(archive)頁)的文章顯示方式:
  • 全文:不做縮文動作
  • 摘要:縮文,並顯示繼續閱讀連結
  • 標題:只顯示標題
4.快速切換按鈕:
自動產生 全文|摘要|標題 的連結按鈕,可點選並快速切換檢視方式(按鈕名稱、擺放位置可自訂)

三、如何安裝:


請看安裝教學

四、細部設定:

請看參數設定說明


五、有問題/不會用:


請先參考參數設定說明常見問題Q&A
若看完仍有疑問,請到問題回報頁 留言詢問

六、原始碼:
http://cjh829-easy-read-more.googlecode.com/svn/trunk/



七、版本更新歷程:
1.3.0(2007.2.27)

-公開正式版本釋出
1.3.5(2007.2.28)
-修正IE顯示問題(自動排除未結束的錯誤tag) - 感謝 jealous0953(ptt)回報
1.4.1(2007.3.1)
-修正「較舊的文章」,點選後繼續閱讀無法顯示的問題 - 感謝 jealous0953(ptt)回報
-修改語法(用jQuery取代$、刪除不必要的register) - 感謝Rack Lin提供建議
1.4.2(2007.3.15)
-修正在單一文章頁面(ItemPage),快速切換按鈕不正常出現的問題
2.0.0(2007.9.30)
-1. bug fix - 某些特定blogger模板,只會縮文第一篇的問題
-2. 提供新的縮文方式(可每篇自訂位置)
-3. 縮文模式設定(固定行數、自訂位置、Mix Mode)
-4. 快速切換按鈕整合(不獨立發佈)(可自行決定是否使用)
-5. 升級jQuery版本(1.2.1)
-6. 改為獨立執行(不使用BloggerExt核心)
2.1.0(2007.10.1)
-修正在單一文章頁面(ItemPage),網頁元素(widget)沒有隱藏的問題
-新增"顯示全文"功能,在文章內插入特殊標記,會略過該文章,不做縮文動作
2.2.0(2009.3.5) - 慶祝2.1.0版本下載數破千萬
-1. 升級jQuery版本至1.3.2(改使用Google api連結,不再由google code提供)
-2. 修正_WidgetManager錯誤
-3. 修正##EasyReadMore##字樣不會自動隱藏的問題
-4. 修正切到表格會顯示不正常的問題(自動跳過表格)
-5. 修正文章內含有兩個以上縮文tag,會無法縮文的問題
-6. 展開/收合模式新增動畫效果(slide ,fade ,none)
-7. 新增自動偵測,程式碼的widget不限定一定要擺在文章列表下或右
-8. 刪除部份贅碼,不再針對IE下的錯誤語法做特殊處理(blogger文章編輯器現已可偵測錯誤語法並自動修復)
-9. 新增css設定,可支援自訂模板[進階使用者適用]
2.2.1(2009.5.8)
-1. 延展/收合模式下新增自動捲回機制,若文章很長,按下收合按鈕時會自動捲回文章標題

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]常見問題Q&A

以下列出較常見的問題及解決方式,供使用者參考
##ReadMore##
Q1.我按照說明一步一步安裝,但沒有生效?
A1:
(1)確認你是使用官方的模板(非官方的模板,因架構不同,沒有完全支援)[進階者可自行設定]
(2)程式會抓你的<br>符號判斷行數,所以如果是用Windows Life Writer這類的編輯器,按下enter換行時會插入<p>做換行,則程式無法抓到<br>就不能正常縮文,可改用"shift"+"enter"換行即可
(3)確認沒有裝其他版本的繼續閱讀


Q2.如何修改"繼續閱讀"和"顯示摘要"的顯示文字呢?
A2:請參考參數設定說明的第5,6點,進行修改

Q3."繼續閱讀"和"顯示摘要"的文字,有辦法改成圖片嗎?
A3:同上,請參考參數設定說明的第5,6點,文字改成<img src="圖檔">的語法即可

Q4.我的繼續閱讀在firefox下可以正常使用,但是IE底下就顯示不正常(或當掉)?
A4:這問題是因為文章內含有"未結束的tag",通常每個html符號,都要有對應的結束符號,如<span>和</span> , <div>和</div>等,IE比firefox笨,若文章內含有未結束的tag,則IE自己文章內部結構會亂掉,造成程式執行時出現錯誤

目前Blogger的文章編輯器已經可以自行排除此錯誤,所以若遇到此問題的話
(1)由上到下,照順序把文章一篇篇存成草稿(即不會在首頁顯示),一一查看是否問題排除
(2)用(1)的方式把問題文章抓出來,編輯該文章,先切換至"修改html",再按回"撰寫"模式,此時文章內的錯誤應該會自動被編輯器修正,存檔之後即可查看效果

Q5.有辦法不讀取,直接把要縮文的內容移除嗎?
A5:抱歉,目前程式架構無法達到此效果(尚未想到解法)

Q6.如何控制"繼續閱讀","顯示摘要"以及快速切換按鈕的位置呢?
A6:可使用css控制
(1)繼續閱讀的css class為"read-more-tag"
(2)顯示摘要的css class為"collapse-tag"
(3)快速切換按鈕的css class為"read-more-controller"


Q7.我的部落格之前是使用阿土伯or其他人的繼續閱讀,文章內是插入<span class='full-post">作縮文,要如何修改成懶人加強版呢?
A7:請參考參數設定說明的第3點,進行修改

Q8.用Auto或Mix模式,都會自動縮文,但我如果有文章不想縮文呢?
A8:可在文章內任意位置,加上##ShowAll##字樣即可(文章顯示時會自動去掉此字)

Q9.我的瀏覽器會出現"_WidgetManager錯誤"的提示,要怎麼清除呢?
A9:Blogger讀頁面時預設會抓一個.js檔案,而且這檔案很討厭的就是常換名字和路徑,照理說系統應該要自動把過期的檔案換成正確的,但有時候,系統會漏掉幫你更新(比較古老的模板,很久沒換過的模板,較容易發生),導致找不到此檔案,發生錯誤

解決方式
(1)進後台(管理介面),選擇"版面配置"->"修改HTML範本"
(2)勾選"展開小裝置範本" -> 按下"儲存範本"按鈕
(3)儲存完成,系統應該就已經幫你修正了WidgetManager的錯誤

Q10.為什麼只有首頁文章有繼續閱讀,其他頁面都會只顯示標題呢?
A10:請自行調整頁面顯示模式,參考參數設定說明的第11點

2007年10月1日 星期一

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]問題回報頁

針對2.x版本 有問題/不會設定/動作不正常或錯誤 請在此篇留言發問##ReadMore##

已知問題(Known Issues):將在下個新版本修正

  1. 暫無問題(版本2.2.0)
暫時無解:不會修正
  1. 非官方模板,有些結構很特殊,和blogger預設結構不同,會無法正常縮文
  2. auto縮文模式只會抓文章內的<br>標籤,所以用<p>分段時,無法正常縮文(通常是使用Windows Live Writer編輯,並使用'Enter'換行,才會造成此情況,可改用'Shift+Enter'換行,就會自動插入<br>標籤)。
  3. 圖片設成「文繞圖」時,因為圖片本身是在第一行,所以不會跟著隱藏起來(感謝 甘い 回報)
  4. 文章結構有問題(tag沒有正常結束)時,無法正常縮文

2007年9月30日 星期日

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明

可設定部份為程式碼後段,如下所示紅色字的部份##ReadMore##

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.2.1.js" type="text/javascript"></script>
<script>
EasyReadMoreSettings.Enabled = true;
EasyReadMoreSettings.Read_More_Mode = 'mix';
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##ReadMore##';
EasyReadMoreSettings.Link_Style = 'directlink';
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';
EasyReadMoreSettings.Collapse_MoveToEnd = false;
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'none';
EasyReadMoreSettings.Collapse_Effect = 'none';
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
EasyReadMoreSettings.Index_Page_Style = 'abstract';
EasyReadMoreSettings.Tag_Page_Style = 'title';
EasyReadMoreSettings.Archive_Page_Style = 'title';
EasyReadMoreSettings.Controller_Enabled = true;
EasyReadMoreSettings.Controller_Default_Position = true;
EasyReadMoreSettings.Controller_Splitter = ' | ';
EasyReadMoreSettings.Controller_Full_Text = '完整';
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
EasyReadMoreSettings.Controller_Title_Text = '標題';
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
EasyReadMoreSettings.PostTitleClassSelector = 'post-title';
EasyReadMoreSettings.PostBodyClassSelector = 'post-body';
EasyReadMoreSettings.PostsBlockSelector = 'div.blog-posts';
</script>
<script>EasyReadMore.main()</script>


按順序逐一說明如下:
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##)
以及一般常見的<span id='fullpost'> 或 <span class='fullpost'>

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


相容<span id='fullpost'>
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'id';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = 'fullpost';


相容<span class='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內想要擺放的位置上插入:
<div class="read-more-controller"></div>
快速切換按鈕會自動加在裡面

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

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

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

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

17.[進階功能]非官方模板,修改使能套用本程式 - 參考此篇說明

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學

安裝前注意事項:
1.若有先前有安裝其他版本(阿土伯版本、本站的1.x版本)的繼續閱讀,請先完整移除後,再安裝
2.若你的模板本身有附繼續閱讀功能(ex:羊男的三欄式),可能會有衝突,請先想辦法移除,或是換其他模板....
3.某些特殊的模板(如:Blogcrowds的模板),因為模板結構和blogger預設的不相同,所以無法支援(安裝了也沒作用),請換其他模板之後,再安裝。
##ReadMore##
安裝步驟:
1.到Blogger的控制(後台)頁面
2.「版面配置」->「網頁元素
3.按下「新增小工具」,出現可用的小工具清單
4.找一個名稱為「 HTML/JavaScript」,按下滑鼠左鍵,會進入設定的頁面
5.「標題」欄位,請填入 ##EasyReadMore##
6.「內容」部份,請複製以下程式碼填入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.2.1.js" type="text/javascript"></script>
<script>
EasyReadMoreSettings.Enabled = true;
EasyReadMoreSettings.Read_More_Mode = 'mix';
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##ReadMore##';
EasyReadMoreSettings.Link_Style = 'directlink';
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';
EasyReadMoreSettings.Collapse_MoveToEnd = false;
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'title';
EasyReadMoreSettings.Collapse_Effect = 'none';
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
EasyReadMoreSettings.Index_Page_Style = 'abstract';
EasyReadMoreSettings.Tag_Page_Style = 'title';
EasyReadMoreSettings.Archive_Page_Style = 'title';
EasyReadMoreSettings.Controller_Enabled = true;
EasyReadMoreSettings.Controller_Default_Position = true;
EasyReadMoreSettings.Controller_Splitter = ' | ';
EasyReadMoreSettings.Controller_Full_Text = '完整';
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
EasyReadMoreSettings.Controller_Title_Text = '標題';
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
</script>
<script>EasyReadMore.main()</script>

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

##EasyReadMore##