設定 Blogger 首頁只顯示文章摘要

參照 放形浪High 的教學，在Blogger 的首頁隱藏全文而只顯示文章摘要的設定方法，這樣可以節省頁面並縮短首頁下載的時間。

首先進入「版面配置」→ 「修改HTML」→ 在小裝置範本前打勾
在</head>前加入下列程式碼：
<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
接下來找到下列程式碼，插入紅字的程式碼
<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'><a expr:name='data:post.id'/>
最後再找到下列程式碼，同樣插入紅字的程式碼
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>[+/-] 繼續閱讀...</a></p>
</span>

<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>[+/-] 只顯示摘要...</a></p>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + "<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> </div>
以上設定後，記得以後新增的文章內必須加入下列紅字程式碼 ↓
文章摘要部份 <span id="fullpost">被隱藏文章內容部份</span>

如果覺得麻煩，可以在「設定」→ 「格式」→ 「文章範本」內加入紅字程式碼 ↓ → 按「儲存」
<span id="fullpost">
</span>

這樣在每新增文章內容會自動帶出程式碼，就不需要在每篇文章內用手動鍵入。