Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多

相片為主的 Blogger, 多是以飲食; 旅遊; 攝影... 等等. 大圖片正是他們的要求.
可是相片一多, 在 Blopspot 的首頁; 或是查詢結果時, 總是長長滿滿的一整頁.
好不容易, 才找到某個內容而切入主題網頁文章.

我之前也出過幾篇, 關於 "讓 Blogger 只顯示文章標題; 部分內文 &小圖片" 的文章,
它們有著不同的定位點. 但是, 都有一個相同的問題: ｢圖片太小了｣

可以顯示大圖片的方法是有的, 但是需要修改的地方過多, 不好理解.
找到了一個比較簡單, 跟以往一樣,  以標準的 Blogspot 的 Template(範本), 只是更換了 HTML 裡頭的一句...
<b:include data='post' name='post'/> 得出的效果算是不錯.

跟以往相比, 這一次的要求是...
~ 單一文章時, 全篇顯示. 其他的情況以"列表模式"顯示
~ 只顯示文章首幅圖片, 而且可以設定顯示大小.
~ 部分內文; 閱讀更多 同樣保留了
~ 新增了 留言; 標籤 兩項資訊

圖片可以設定顯示大小,
主要是利用 Javascript 找出 thumbnailUrl 內容, 以 replace 的方式改變了圖片大小設定值.
簡單的講解一下, 原本"小圖"是以 s72-c 這個數值為顯示預設.
s72 = 72px ; -c = 正方型(長型圖片以切頭切尾方式, 只剪裁中間的部份)
所以只要把這個更換, e.g. s400 便可以得到 400px 的比例圖片.

因應大圖片顯示方式, 可以選擇兩個不同的排版文效果.

置中排版; 比例圖片
只需要修改第 15 行"s400"這組數值, 便可以更新圖片大小設定值. e.g."s600"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 start-->

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s400"); // 設定圖片大小; s400 即是長邊是400px的比例圖片
      document.write("<img src='"+ pic +"' style='display:block; margin:auto;margin-top:10px;'/>");
    })()
 </script>
 </a>
 </div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=   "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
 </b:if>

<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 end-->

左右排版; 正方型圖片
只需要修改第 15 行"s200-c"這組數值, 便可以更新圖片大小設定值. e.g."s300-c"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s200-c"); // 設定圖片大小; s200-c 即是200px正方型
      document.write("<img src='"+ pic +"' />");
    })()
</script>
</a>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style="clear:both"></div>
 </div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link' >
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;' >
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

現時本網誌所使用的結構, 左右排版; 大圖示.

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s350");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"'/>"); 
    })()
</script>
</a>
<div><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style='clear:both'/></div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if></b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

需要修改 [範本](Template), 所以請先行備份, 以準備不時之需.
步驟為 [設計]> [範本]> [編輯HTML]>
在長長程式碼裡頭, 按下鍵盤上的 [Ctrl]+[F] , Search 欄位出現了.
尋找這一句, <b:include data='post' name='post'/> 全篇應該只有一句.
更換成為以上的分析流程...

有關 Toggle Visibility 功能

1. "function toggle_visibility" 前後的 ＜!-- & //--＞ 應該刪掉, 而且把這段 script 放到 ＜/body＞ 之前.
2. 按鈕可以更簡化 ＜button onclick="toggle_visibility('內容');"＞按此看看＜/button＞