Tuesday, February 24, 2009

继续阅读懒人加强版的参数设置细节

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

<script src="http://cjh829-easy-read-more.googlecode.com/files/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.1.0.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.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>


按順序逐一說明如下:
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.設定各頁面預設顯示方式,有三種:
  • 繼續閱讀(摘要) - abstract
  • 只有標題 - title
  • 全文 - full
設定blog首頁:(預設值:摘要)
EasyReadMoreSettings.Index_Page_Style = 'abstract';
設定標籤(tag)分類頁:(預設值:標題)
EasyReadMoreSettings.Tag_Page_Style = 'title';
設定blog存檔(archive)分類頁:(預設值:標題)
EasyReadMoreSettings.Archive_Page_Style = 'title';

9.是否啟用快速切換按鈕(預設值:啟用)
  • 啟用:EasyReadMoreSettings.Controller_Enabled = true;
  • 停用:EasyReadMoreSettings.Controller_Enabled = false;
10.快速切換按鈕是否放在預設位置(在文章列表的頭和尾各顯示一個)(預設值:是)
放在預設位置:
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>
快速切換按鈕會自動加在裡面

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

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

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

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



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

控制blogspot首页的显示方式--继续阅读懒人加强版

      blogspot的首页只能显示全部的文章,如果文章一多起来,那个页面,老长了,严重打击各位看官的心情,另外还涉及到缩短滚轮的寿命,不爽啊。那么,blogspot的首页页面太长怎么解决,比如只让其显示标题,或者文章的摘要,或者按照一定的长度显示部分文章呢。
      经过我5分钟不懈的努力,找到以下完美的解决办法,记录如下:

安裝前注意事項:
1.若有先前有安裝其他版本(阿土伯版本、本站的1.x版本)的繼續閱讀,請先完整移除後,再安裝
2.若你的模板本身有附繼續閱讀功能(ex:羊男的三欄式),可能會有衝突,請先想辦法移除,或是換其他模板....
3.某些特殊的模板(如:Blogcrowds的模板),因為模板結構和blogger預設的不相同,所以無法支援(安裝了也沒作用),請換其他模板之後,再安裝。

安裝步驟:

1.到Blogger的控制(後台)頁面
2.版面配置->網頁元素
3.按下「加入小工具」,出現可用的小工具清單
4.找一個名稱為「 HTML/JavaScript」,按下「加入BLOG」,會進入設定的頁面
5.「標題」欄位,請填入 ##EasyReadMore##
6.「內容」部份,請複製以下程式碼填入
<script src="http://cjh829-easy-read-more.googlecode.com/files/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.1.0.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.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.按「儲存變更」,安裝完成!!



原文见[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學,真诚感谢这位台湾台北的CJH朋友!

Monday, February 09, 2009

漂亮的烟花

        今天是元宵节,下班回来,从城铁出来的时候天已经黑了,宽阔的马路两边和小区里正不时的燃放着鞭炮和烟花,不绝于耳的爆炸声中突然有了一种温暖的感觉,烟花好漂亮!
        我定定的站在那里,看着一轮又一轮的烟花,在天空中灿烂的绽放,如此的临近,却又如此的遥远。
        然后,在黑夜的风中,我又独自前行......

Monday, February 02, 2009

自己动手增加blogspot的宽度

        一直想增加blogspot的宽度,不过因为需要考虑到需要html以及xml相关知识,故拖到现在才终于肯动手,虽然现在依然不会相关语法知识。偷偷告诉你,自己修改并不难。

        昨天下午半天主要是预备知识,看怎么修改blogspot的html,晚上主要是在各大网站上寻找中意的模版,要是能省事就省点事好了,不过好不容易找到几个满意的,结果发现,模版里面的图片都被删除了,遂作罢,决定自己修改模版,加宽blogspot。

        现行的blogspot大部分为两栏、三栏和四栏,其中三栏的居多,不过个人还是喜欢两栏的简约。修改前要是能先看看下面这张图,整个过程就简单多了:



        我选择的系统模版是老式的,不过代码以及样式差异不大,修改起来并不困难。我们需要做的就是把outer-wrapper、main-wrap1、main和body#layout #outer-wrapper的宽度均增加即可(sidebar觉得很合适,就不改动了):


/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:740px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:$startSide;
background:$mainBgColor url("http://www1.blogblog.com/rounders4/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://www1.blogblog.com/rounders4/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y $startSide;
padding:0;
width:485px;
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

... ...

body#layout #outer-wrapper {
width: 730px;
}

        关键是上面的几个width,我把这些width(除了sidebar)都增加了200,就是除了sidebar外的其他组件都向左扩展了200px,看起来就舒服多了。不过从html上可以看出,由于使用了背景图片和边角的处理,里面引用的图片和背景都是固定大小的,如果只是更改上面的几个width,那么背景图片会出现不能完全覆盖的情形,所以我把上面那些用到的需要更改的背景图片下载下来自己加宽了长度,然后放到了自己的picasa网络相册上面,最后更改一下html的引用即可。更改的部分代码如下:
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:940px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:685px;
float:$startSide;
background:$mainBgColor url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh307F5XCBNnAJzphJSlYc0yzET5bF98Li5f7mEncb6BmhyjmyagLie8ivBlz9cbeX-COxm81Sv4T4qF6_LPVMNkkFFGUpNF-ddDjYfFJSnDj5mvGgj9PrIPkIZqT0-qyeuiotN1w/") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZcKWpBhq6B9QM7BTywSXZR6cVs1bw6S9P2NVrYZS3BjrhgJJqzW7RXqU1763V4vZK0c6N3ZJ_CeLhEbmxMZ5SILKrBDP9euMjwWN5WMnKzQ1flzNyFHw-Dn48_ytASg5lPwfSg/") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aqtNJLecEurkbQer8fxXGBkLwkzJIXH4mHk0IY5lAcGl0xho-d9zfQcGf6ODZ0H0zx3SoLJM7SnH192iGxIyZLJY_NWy51p6HCgSZ-gaEBE3hw_bYg_joGb_MKMP4qfJzJyCWg/") repeat-y $startSide;
padding:0;
width:685px;
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

... ...

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #476 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJhRpktlrlPvHKDRPs6H5MCx4NBnYw1bFCdXPLhXOazOWr5wk80Uv-WI9ocOYFeTD_kDjB4tmOz_V0LmNh9S6nWOjd9Q2tYlI52-MPNwDvGNyBu0v5p5KY_dagoH4Lv4LUvj51g/") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJoUOAf_I7FtSgGe_c5ASB4tYllsIgngLYVodCSB2VbaBxBthk_yXANylMX0PyY4lpP0jKap1j1L498VExtuQLIDG_rwRt5XXn8BCB7Oe6BqnCcsnnx3AEO5A9o53QLP7TpozmQ/") no-repeat $startSide bottom;
padding:0 15px 8px;
}

... ...

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:#447766 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJhRpktlrlPvHKDRPs6H5MCx4NBnYw1bFCdXPLhXOazOWr5wk80Uv-WI9ocOYFeTD_kDjB4tmOz_V0LmNh9S6nWOjd9Q2tYlI52-MPNwDvGNyBu0v5p5KY_dagoH4Lv4LUvj51g/") no-repeat $startSide top; color:$titleTextColor;
}
#footer {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lghOIw8iA0tHWLIror5BJNMsB0KUs9KrkQloRcwabKRXr6vMZevSzlVtI1LItmAGQ_GTku-bINJB2oDMaS57ymfmVS9C9yiZjinZC7IAOGbXMaOZIc4cHWZAvjVFfDpBE2FdwQ/") no-repeat $startSide bottom;
padding:8px 15px;
}

... ...

body#layout #outer-wrapper {
width: 930px;
}

        加宽过后的背景图片在这里:加宽后的背景图片,(需要说明一下的是,在浏览器中查看picasa相册的时候,图片的呈现区域可以往右扩展的,隐藏右边栏的相关区域,如果我们这里的940宽度的图片不扩展开的话,查看的时候将只会是720左右的宽度并成比例缩小,这样在blogspot上引用的时候会是缩小后的,因此如果自己把图片放到picasa的话,最好把图片区域扩展开)。其中header部分包括:
        corners_cap_top.gif, bg_hdr_bot.jpg;
        main部分包括:
        corners_main_bot.gif, corners_main_top.gif, rails_main.gif;
        footer部分包括:
        corners_cap_top.gif, corners_cap_bot.gif;
        修改了相关的4个width和7个background后,基本就大功告成了!

        另外,我们也可以修改blogspot的宽度为自适应,不过因为自适应的时候,宽度是可变的,因此这些固定长度的那些圆滑的边角的美化,就只能直接去掉,也就是这些corners_*.gif背景了。相关说明可以看这里:自己搞定了blogspot页面宽度自适应

        最后祝各位也能称心如意的更改自己的blogspot!