如何在Blogger首页只显示文章的摘要内容

Blogger没有提供文章摘要功能,不过可以通过脚本实现类似功能。具体制作分为三步:
(例牌声明一下,修改Blogger模板前,请先备份!切记!!!)

一是在<./head>前加入如下代码:
<!– 隐藏文章内容 –>
<b:if
cond=’data:blog.pageType == “item”‘>
<style
type=’text/css’>
span.fullpost
{display:inline;}
</style>
<b:else/>
<style
type=’text/css’>
span.fullpost
{display:none;}
</style>
</b:if>

二是每次写文章时,将要隐藏的部分放在<span
class=”fullpost”></span>内(在Html编辑模式下)。比如要隐藏“隐形人”的话,就这样:
<span
class=”fullpost”>隐形人</span>
以上已经实现隐藏功能,但还是有点欠缺,用户会以为文章已经结束了。所以还要进行最后一步美化工作,在文章结尾加上“阅读全文”的链接(该链接会在首页所有文章尾部加上)。
当然,大家也知道Blogger网站,在后台也只有一个文件,假如就直接加上链接的话,那打开文章后,还会有“阅读全文”的尾巴。为了去除这个尾巴,需要多加个判断,继续往下看:
先找到模板中原来文章显示的代码,类似<data:post.body/>,将其换成如下代码:
<b:if
cond=’data:blog.pageType ==
“item”‘>
<data:post.body/><br/>
<b:else/>
<data:post.body/>

<br/><a expr:href=’data:post.url’>阅读全文…
</a>
</b:if>
如无意外,可以收工了!

经测试可行的另外一个办法:
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>

也可以将上述其中两行:<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>
两个文件上传到你自己的空间,然后将地址改为自己的链接地址。

更多