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，就可以有獨立文章連結的效果了。