用了blogger之後,才發現這兒不像Xuite、無名…等其它網誌有自動摘要的功能...文章一多之後,如果文章太長,就會讓首頁看起來很「落落長」,記錄一下我使用的方法,google一下有很多不同的版本,我選一個不太自動,但適合我的寫作習慣的方式來用,原作者文章教學網址在這兒...

step1. 先到版面配置->修改HTML,並且把 展開小裝置範本 打勾,程式碼搜尋找到 <b:skin><![CDATA[ ,<b:skin>這個tag之間都是放CSS的地方,在這裡找個位置貼上第一部份程式碼。
<b:skin><![CDATA[ 第一部份程式碼 ]]></b:skin>
第一部份程式碼:
span.showDetail {
float: left;
border: 0px;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 0px;
}

span.hideDetail {
display: none;
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}

step2. 接著在]]></b:skin>和</head>之間找位置貼上第二部份程式碼,要注意的是,這邊要把程式碼先把"<"替換成&lt ;。
]]></b:skin> 第二部份程式碼 </head>
第二部份程式碼:
<!-- 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>

step3.
找到 <div class='post-header-line-1'/> 這一行
<div class='post-header-line-1'/>
第三部份程式碼:修改加入下列紅色字體的程式碼。
<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("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>

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

第三部份程式碼會因為使用的Blogger TEMPLATE而有所差異,在im93使用的版型沒有 <div class='post-body'>這個<div>標籤,如下圖:

所以,修改這一段時,要在 <div class='post-header-line-1'/> 這一行的下方自己加一個<Div>標籤。
修改前:
<div class='post-header-line-1'/>

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

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

修改後:
<div class='post-header-line-1'/>
<div 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("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>

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


step4. 使用方法,發佈新文章時,把摘要部份打在前面,想要隱藏的文章內容放在
<span id="detail"></span> 或 <span id="fullpost"></span> 裡面就可以了
例如:
這是文章的摘要,這是文章的摘要,這是文章的摘要...<span id="fullpost">這是剩餘文章的內容</span>

至於 "detail" 和 "fullpost" 的差別 是,前者文章會直接顯示在目前頁面,後者則會將頁面連結到所屬的文章獨立連結頁面做全文顯示 (聽不懂的話...就自己試試咩 冏...)

另外一個小技巧是,可以到blogger管理後台,設定->格式,然後找到最下方文章範本的地方,設定預設格式

以我為中心的宇宙 發表在 痞客邦 PIXNET 留言(0) 人氣()