網頁

2014年9月28日

|

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

Views:
相片為主的 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 功能

12 則留言:

  1. 謝謝大大的文章,我已經依你的方法改好搜尋結果的頁面了~~

    回覆刪除
    回覆
    1. 合用真好, 謝謝留言 ^_^

      刪除
    2. 您好,想再請教一下喔,搜尋結果的頁面,我希望呈現三篇文章+縮圖排成一列的那種方式,而不是列表,請問該怎麼作呢?

      刪除
    3. 你的意思是 ?
      結果只出一列, 3 個文章.
      or
      3 個文章為一列, 結果可出多列.
      有沒有 link 給我看看.

      刪除
    4. 3 個文章為一列, 可出多列的搜尋結果,像下面的LINK
      https://www.onekingslane.com/live-love-home/?s=office&submit=Search

      刪除
    5. 應該可以, 不過需要多花一點時, 為版面排列測試.
      有結果後, 再回覆. ~O)

      刪除
    6. Claire
      以你的要求, 新的排版, 已經搞好. 可供參考.
      "Blogspot 文章間格排版"
      http://freetongdiy.blogspot.hk/2014/11/blogspot_22.html

      刪除
  2. CHING您好,想請教一下
    我以前用哩個方法排版,一直好好,最近有問題,你可去我個blog一睇
    http://kimmynet.blogspot.hk/

    如果用label,只有"金美玩字紀"/"金美亂噏yeah"有咁嘅問題
    唔知係咪我哩啲label嘅文章有用在一啲javascript

    詳見我另一篇blog
    http://kimmynet.blogspot.hk/2014/09/blogger.html

    回覆刪除
    回覆
    1. 查看出問題的網誌, 在圖片上方, 都有一個[按此]功能按鈕. 可能跟我所做的 javascript 有影響.
      先試試把這個功能放到圖片下方, 或是移除它們, 看看是不是由它引起的.

      刪除
    2. 我試把這個功能加到的的網誌裡, 在標籤列表顯示時, 並沒有出現任何問題.
      在這篇網誌最下方, 安上了這個 Toggle 按鈕, 你可以試試看.

      刪除
    3. CHING您好,謝謝你嘅幫助. 依家又無事, 唔知係咪Google blogspot之前有改動呢.

      刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃