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.[進階功能]非官方模板,修改使能套用本程式 - 參考此篇說明

64 則留言:

  1. 謝謝!!

    真的很方便耶^^

    就是要這種複製貼上又講解詳細!!

    一下就完成哩!

    回覆刪除
  2. 請問 繼續閱讀要改顏色 要怎麼改阿?

    因為這樣會跟文章內文字的顏色一樣

    這樣會搞混~~ 可以幫忙一下嗎~?

    回覆刪除
  3. 真的方便且大助益啊!
    感謝。

    回覆刪除
  4. 超棒的!!
    省事多了,比我之前裝的還要人性化,貼心的啦!正!!

    回覆刪除
  5. [噴淚中]


    阿...終於有個人性化的HTML玩法...
    比起爆肝式的找代碼加來加去來的簡單多了!

    甘溫... "CJH" > 我有仔細看喔XD

    回覆刪除
  6. 相當棒的scripts,推一個!

    回覆刪除
  7. 非常感謝CJH
    剛剛在別的站,用其他的方法安裝
    "繼續閱讀" 怎麼也搞不定
    麻煩死了

    這個懶人法真的不錯..

    不過這邊我有遇到一個問題...
    "繼續閱讀"這個link會隨著 align 而改變位置,有時切到的地方 上一句是靠中還是靠右..那麼"繼續閱讀" 就會靠中或靠右!

    回覆刪除
  8. 有種被救贖的感動,真是太方便了,謝謝您^^

    回覆刪除
  9. 真的是簡單又好用,功能又強!
    太感謝了!

    回覆刪除
  10. 感謝您的分享~特好用的!

    回覆刪除
  11. 不好意思,使用時遇到一個問題 -若文章有插入圖片,顯示的摘要就不對勁了!我的兩篇文章幾乎沒有縮文(我的設定是第十一行後切掉),請問有解決方式嗎? 謝謝你用心寫的教學^^

    回覆刪除
  12. 真的很好,开始弄好了,还不知道,##ShowAll##这个符号留在页面上,总感觉工作没做完

    回覆刪除
  13. 謝謝謝謝 超好用的 這個
    簡明易暸阿!!

    回覆刪除
  14. "繼續閱讀"超方便,也很好用,但請問一下,因為我的blog的文章會從flickr連結大量圖片,雖然"繼續閱讀"可以讓我的版面乾淨很多,但是他好像還是會一直從flickr下載圖片,開啟網頁的流量還是一樣多...請問有辦法解決嗎??

    回覆刪除
  15. 太感謝你啦!! 你是CJH! ^__^

    回覆刪除
  16. 這個功能真的好方便
    謝謝CJH的分享耶~~

    回覆刪除
  17. 我剛用了一下發現我看到最底下有出現.繼續閱讀的字 但是不能點 那也沒文章 怎麼會勒

    我的部落 看看http://spire-spire.blogspot.com/

    回覆刪除
  18. 謝謝您辛苦的創作
    小的獲益良多~~

    回覆刪除
  19. ^^ 謝謝CJH!!!!

    超好用的!!
    :)

    回覆刪除
  20. CJH 您好 :
    我想請問您,我是用展開/收合的方式,如何設定按下收合之後,畫面位置會是下一篇文章?不然像我這樣收合之後,畫面會直接跑到未收合前捲軸的位置,是否也可以設定呢?
    附上我的http://drs425.blogspot.com 謝謝^^

    回覆刪除
  21. GOOGLE到這裡,一下就解決我的問題了
    謝謝

    回覆刪除
  22. 可不可以不要換行自動顯示繼續閱讀?
    這個EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
    改成EasyReadMoreSettings.Mode_Auto_MaxLine = 0;
    結果還是沒辦法!該改那裡呢?

    回覆刪除
  23. 感謝你~竟然上我這不懂語法的新手可以完成~功德無量啊!

    回覆刪除
  24. Good Good Use!
    不過請教版大,如果安裝的羊男的三欄式模板,該如何coding?

    回覆刪除
  25. 請問一下
    我設定完之後

    在工具列的地方會出現 ##EasyReadMore##
    請問怎麼讓他隱藏呢?
    謝謝

    回覆刪除
  26. 非常非常的好用喔!
    謝謝分享!

    回覆刪除
  27. 非常感谢啦。
    你的原文我引用一下,方便告知更多人,当然保留原地址和出处。^_^

    回覆刪除
  28. 剛剛研究好久都找不到程式碼,使用你的方式一會兒就搞定,真是太謝謝你的分享了... (膜拜)

    回覆刪除
  29. 請問有辦法在首頁開啟時, 每篇文章只讀取設定的繼續閱讀行數即可呢?
    可能我的圖檔比較多, 在開啟頁面時會花比較長的時間, 都會先看到全部的內容, 然後才縮成預設的三行
    這樣好像就失去原本繼續閱讀的本意了orz
    或是有其它方法可以改善開啟的速度呢?
    謝謝您

    回覆刪除
  30. 大推!非常詳細!!
    感謝分享!!!

    回覆刪除
  31. 感謝您的分享,受益良多 ^.^

    回覆刪除
  32. 你用的程式,我用了好久好久,超好用,但是問題來了,這次…我的網誌怎麼設定就是沒辦法,就連你的常見問題和回題回報,都不行…怎麼辦?還是我的網誌有問題?
    我的網誌:http://mingkaichen0329.blogspot.com/

    回覆刪除
  33. 辛苦了!您的教學很清楚,小弟獲益良多!
    非常感謝您的分享!

    回覆刪除
  34. 感恩,有下有推 (合掌膜拜)

    回覆刪除
  35. 謝謝您的分享^^這樣真的省事多了!

    回覆刪除
  36. 真的是太方便和好用了!

    謝謝您造福人群>///<

    回覆刪除
  37. 真的非常感謝CJH大
    很方便^^
    修改也很簡單
    教學清楚詳細!!

    回覆刪除
  38. 感謝CJH大的參數設定教學文章!!!!!
    實在是惠我良多ˇˇˇˇ

    回覆刪除
  39. 推推推!!! 太棒了
    這種方式

    回覆刪除
  40. 哇 太好了 剛才爬文爬的好頭痛 謝謝您讓我不再痛XDDD

    回覆刪除
  41. 你好!
    想請問版大這個
    13.快速切換按鈕是否放在預設位置

    我只想在文章列表的頭顯示,你說的這個
    read-more-controller
    是要放在哪個範本的html?
    我放在後台的html裡可是沒有改變,如果是要直接放在繼續閱讀的程式碼裡,那要改哪才能放??
    還請板大解惑,謝謝~

    回覆刪除
  42. 真的是太感謝這個程式了
    真好上手

    回覆刪除
  43. 請問用展開收和的方式看文章,是不是在文章後面就不會有留言的連結?

    回覆刪除
  44. 真的很好用,感謝~

    回覆刪除
  45. 真的節省了不少時間摸索!!!!
    感謝大大無私的分享~~

    回覆刪除
  46. 剛剛貼上原本想說沒有效果,但過一段時間再重整就ok了

    真的太好用了~~簡單明瞭~

    感謝大大分享^~^!!

    回覆刪除
  47. 謝謝CJH,藉由您的分享,補足了Google的不足,把Blogger的環境建構的更加舒適易用,讓我們能專注在寫作上,太謝謝您了.

    回覆刪除

注意事項:

**若要問問題/功能建議/裝了不能用,請到問題回報頁(在其他地方問,不予回應,抱歉)

**發問前,請先參考參數設定說明以及常見問題Q&A

作者是CJH
不是 阿土伯 也不是 Josh(不要搞錯\_/)

##EasyReadMore##