2008年2月13日 星期三

Blogger首頁長篇文章的收合或繼續閱讀連結設定

這是針對Blogger首頁的單篇文章直接全部顯示出來佔到太多首頁版面的問題所做的修正設定,這樣您就可以自行決定該篇文章在首頁只要出現哪幾行摘要....(站長說明,這篇是舊的作法,目前Google Blogger已有內建繼續閱讀的功能,詳情請參考本站另一篇文章說明)

登入Blogger管理後台,版面配置/修改HTML,記得勾選「展開小裝置範本」,到最前面定義CSS Style的地方,隨便哪裡都可以,貼入以下基本的定義,其中那兩個<span> 用的 class "showDetail", "hideDetail" 是用來定義那個收合文章用的連結樣式,自己可以新增對該連結的設定:

/* Style of detail article toggle */

span.showDetail {

  float: right;

  border: 1px solid #333;

  font-size: 8pt;

  margin: 10px 0 10px 0;

  padding: 0 10px 0 10px;

}



span.hideDetail {

  display: none;

  float: right;

  border: 1px solid #333;

  font-size: 8pt;

  margin: 10px 0 10px 0;

  padding: 0 10px 0 10px;

}


找範本的 </head> 標籤,把下面幾行 javascript 貼到該標籤的前面:

<!-- User defined inline javascript -->

<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
  var spans = document.getElementById(id).getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')

      spans[i].style.display = 'inline';

    if (spans[i].id == 'showDetail')

      spans[i].style.display = 'none';

  }

}


function hideDetail(id) {

  var post = document.getElementById(id);

  var spans = post.getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')

      spans[i].style.display = 'none';

    if (spans[i].id == 'showDetail')

      spans[i].style.display = 'inline';

  }

  post.scrollIntoView(true);    

}



function checkDetail(id, link) {

  var spans = document.getElementById(id).getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail') {

      spans[i].style.display = 'none';

      document.write('&lt;span id=showDetail class=showDetail&gt;');

      document.write('&lt;a onclick=javascript:showDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;完整閱讀...&lt;/a&gt;');

      document.write('&lt;/span&gt;');

      document.write('&lt;span id=hideDetail class=hideDetail&gt;');

      document.write('&lt;a onclick=javascript:hideDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;文章收合...&lt;/a&gt;');

      document.write('&lt;/span&gt;');

    }

    else {

      if (spans[i].id == 'fullpost') {

        spans[i].style.display = 'none';

        document.write('&lt;span id=showDetail class=showDetail&gt;');

        document.write('&lt;a href=\"'+link+'\"&gt;閱讀全文...&lt;/a&gt;');

        document.write('&lt;/span&gt;');

      }

    }

  }

}

</script>


找到這一段(位置和版面可能會因樣版不同而有所差異):

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


改成:

<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->

<b:if cond='data:blog.pageType == "item"'>

      <p><data:post.body/></p>

<b:else/>

      <style>#detail, #fullpost {display:none;}</style>

      <p><data:post.body/></p>

      <script type='text/javascript'>

        checkDetail(&quot;post-&quot; + &quot;<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);

      </script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->


在Blogger的後台:設定/格式/文章範本裡加入下面這一行:

<span id="detail"></span>


以後每次要發表新文章的時候在切換到「修改Html」時就會出現以下標籤:
<span id="detail">

這是要隱藏剩下的完整內文

</span>

標籤內的文字就會在首頁被隱藏起來,而標籤外(不管是前面或後面)的文字就變成該文章的前言或摘要。以上是只有在首頁才會有的效果,如果是單篇獨立文章的連結,不會有展開折疊的連結。如果你不想使用文章收合的效果,要用固定連結,只要把上面的 id 名稱從 detail 改成 fullpost,就可以有獨立文章連結的效果了。


4 意見:

亨董 提到...

非常感謝您的努力 = = 問題是…我連 CSS 哪裡開始都不知道、如何插入相關語法呢?

創意眼 提到...

因為Google Blogger本身預設是沒有提供首頁長篇文章的收合或繼續閱讀連結設定,所以必須要用手動的方式插入與加上這些語法,若需要使用這樣的方法仍是需要稍微去瞭解語法的貼上插入點,一開始的語法也是貼入在</head>標籤之前!

黃文鴻 提到...

老師 您好
現在 Blog首頁文章編輯有繼續閱讀 連結設定
反而 下一階網頁沒有此功能
請教 如何在網頁的 HTML設定? Thanks

創意眼 提到...

這一篇的內容已經不合時宜了,直接使用Blogger後台編輯器裡面的繼續閱讀,應該就可以達成這樣的功能了,這跟你所謂的下一階網頁應該沒有關係...

張貼留言

若對於本篇文章有任何批評指教或鼓勵建議,歡迎您留言讓我知道...