:::

Blogger安裝文章自動摘要的方法

2月 01, 2007 , 14 Comments Edit Copy Download

布丁式自動文章摘要

  1. 自動模式:可選擇要摘要的字數範圍,則程式會自動幫你顯示一定範圍的文字喔!還會聰明地辨識出文章告一段落,做一範圍內的切割點喔。
  2. 手動模式:分成<!--Digest-->手動制定切割點、<!--Hidden All-->隱藏全文、<!--Show All-->顯示全文三種模式。
  3. 特殊的HTML標籤問題完全解決,可以放心在你的文章中擺入任何標籤喔。

接下來開始安裝的方法:

一、取得JavaScript程式碼

http://puddingchen.35.googlepages.com/digest_blogbody.js

以下是該支程式的原始碼


二、修改Blogger範本 (自行上傳檔案的時候)

因為Blogger舊式範本(template)與新式範本差別非常大,我在這邊僅示範新式範本的修改方式。

首先,到Blogger的管理畫面中,[範本]→[修改HTML]→[修改範本],把旁邊的[展開小裝置範本]打勾。畫面請看下圖:

三、增加.link_fullpost的CSS樣式表

然後到[修改範本]下面的大表單的一堆程式碼當中,找到這個標籤:

  </head>

在他下面加入一段程式碼,變成:

  </head>
<script type="text/javascript" src="http://puddingchen.35.googlepages.com/digest_blogbody.js"></script>
<style tyle="text/css">
.post-body .link_fullpost {
  font-size: 80%;
  margin: 1em;
  display:block;
}
</style>

四、加上返回摘要的錨點

然後找到下面這段程式碼:

<b:includable id='post' var='post'>
  <div class='post'>

加入一段程式碼:

<b:includable id='post' var='post'>
  <div class='post'>
    <a expr:id='data:post.id + "-post-body-post-title"' expr:name='data:post.id + "-post-body-post-title"'></a>

五、安裝自動文章摘要

再找到下面這段程式碼:

    <div class='post-body'>
   <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

修改成下面的程式碼:

    <div class='post-body' expr:id='data:post.id + "-post-body"'>
   <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
   <script type="text/javascript">
   digest_blogbody('<data:post.id/>'+'-post-body', '<data:post.url/>', location.href);
   </script>

以上,這樣就大功告成了,接下來就交給程式去運作就好了,十分簡單吧。

如果你覺得那個閱讀全文的標籤不好看的話,那麼可以修改第三部裡面寫的.link_fullpost樣式內容,就請發揮創意吧。


Q&A:

1. 要怎麼使用手動摘要?
  • <!--Digest-->,請於你設定的文章切割點插入這段文字。那麼切割點之前會是摘要內容,之後會隱藏起來
  • <!--Hidden All-->與<!--Show All-->,一個是隱藏全文、一個是顯示全文,插入在文章任何地方皆可
2. 手動摘要與自動摘要的順序是?

<!--Digest--> > <!--Hidden All--> > <!--Show All--> > 自動摘要

3. 什麼叫做自動摘要的字數範圍?

就是指定你摘要內容最少要顯示幾個字、最多則是不能超過幾個字。在這個範圍內,如果遇到結尾標籤(如:</p>),則程式會自動判定該標籤之後為切割點。

4. 要怎麼設定自動摘要的字數範圍?

可以在程式開頭第三行以下設定:

  //自動文章摘要的變數設定
  var word_min = 50; //字數最少要到這種程度
  var word_max = 100; //字數最多要到這種程度

所以預設值最少是50字,最多是100字

總共14 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 您好,
    看過您做的摘要覺得很好用,
    但是請問一下,
    步驟一所說的javaScript整段程式要複製到那邊呢??

    謝謝您

    回覆刪除
  2. 步驟一的JavaScript請製作成一個js檔,並上傳,以供步驟三時連結js時使用。你也可以直接用我的js檔就好。

    回覆刪除
  3. 你好,這個摘要滿好用的,我已經安裝了但是在繼續閱讀的連結部份變成了亂碼~"~
    http://chingx0117.blogspot.com/

    javaScript我是牽貴站的聯結過去的,因為我自己改了英文版的js檔無法執行...
    可能是字碼再存取的時候被破壞了還是CHMOD權限錯誤~"~

    可以教一下正確的寫法嗎?

    回覆刪除
  4. 我把在我空間上的js檔改成以UTF-8編碼之後就可以了

    回覆刪除
  5. 恩,看到摟@v@
    非常感謝^^~

    回覆刪除
  6. 第四點後面
    a expr:id='data:post.id + "-post-body-post-title"' expr:name='data:post.id + "-p

    這後面是不是有缺少東西呢

    我照做後,無法儲存耶

    不知到哪邊出錯了

    回覆刪除
  7. 建議您改用布丁式Blogger自動摘要功能(jQuery版)看看!
    http://pulipuli.blogspot.com/2009/03/bloggerjquery.html

    回覆刪除
  8. 謝謝你的教學
    很清楚,滿好懂的

    回覆刪除
  9. 謝謝您的支持!
    以後我只會維護jQuery版本,有興趣的話也可以參考看看喔。連結在上面。

    回覆刪除
  10. 这个方法很不错,但是他默认会将独立页面默认显示摘要,有没有其他好多办法,如做个判断语句什么的,我想的是做个判断语句,但是还不清楚在哪里判断!
    这是独立页面的效果:
    http://blog.kban.info/p/about-me_21.html

    回覆刪除
  11. 在文章中加入
    他就會判斷摘要到此為止了。

    文內我也有說明喔XD
    請再仔細看一次吧

    回覆刪除
  12. 博主的这个代码真是完善,已经弄好了,多谢博主!

    回覆刪除