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沒有正常結束)時，無法正常縮文

張貼者： CJH 發表於 凌晨12:44:00 241 個回應

分類：

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="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/cjh829-easy-read-more/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.[進階功能]非官方模板，修改使能套用本程式 - 參考此篇說明

張貼者： CJH 發表於 晚上11:35:00 64 個回應

分類：

[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="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/cjh829-easy-read-more/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.按「儲存變更」，安裝完成！！

張貼者： CJH 發表於 晚上10:11:00 184 個回應

分類：

訂閱： 文章 (Atom)

##EasyReadMore##