網頁

2014年3月2日

|

排列查詢(Search);文章分類(Label);網誌封存(Archive),只顯示文章標題;部分內文;小圖片;閱讀更多

Views:
2014-09-28 已經推出更加版本, 提供參考


我之前出過兩篇 "讓 Blogger 只顯示文章標題; 部分內文 &小圖片"
使用一段時間之後, 發覺也有不足之處.
經過網上搜查之後, 找到三個可用的指令碼.
data:blog.searchQuery 即網誌左上角的 "排列查詢(Search)" 查得結果
data:blog.searchLabel 即網誌小工具的 "文章分類(Label)" 標籤結果
data:blog.pageType == "archive" 即網誌小工具的 "網誌封存(Archive)" 結果
其他形狀, 便會用回原有顯示方式.

(網誌封存(Archive)只可用在"月份"篩選, 不能用在"年份", 實在可惜)

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

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 讓 排列查詢(Search) 文章分類(Label) 網誌封存(Archive) 只顯示文章標題;部分內文;小圖片;閱讀更多 -->
 
<b:if cond='data:blog.searchQuery'>
<div><a expr:href='data:post.url' imageanchor='1' style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'><img expr:src='data:post.thumbnailUrl'/></a></div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<data:post.snippet/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<div><a expr:href='data:post.url' imageanchor='1' style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'><img expr:src='data:post.thumbnailUrl'/></a></div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<data:post.snippet/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div><a expr:href='data:post.url' imageanchor='1' style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'><img expr:src='data:post.thumbnailUrl' /></a></div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<data:post.snippet/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:if>
 
<!-- 讓 排列查詢(Search) 文章分類(Label) 網誌封存(Archive) 只顯示文章標題;部分內文;小圖片;閱讀更多 -->

_______________________________________________
6-Mar-2014 更新

有網友特定要求, "列表"模式只在首頁展示, 其他的, 用回原來樣子.
修正分析流程如下. (安裝跟上列方法相同)

<!-- <b:include data='post' name='post'/> 原有語句 -->
 
<!-- 讓 Blogger 只在首頁 只顯示文章標題;部分內文;小圖片;閱讀更多 -->
 
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div><a expr:href='data:post.url' imageanchor='1' style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'><img expr:src='data:post.thumbnailUrl'/></a></div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<data:post.snippet/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
 
<!-- 讓 Blogger 只在首頁 只顯示文章標題;部分內文;小圖片;閱讀更多 -->

12 則留言:

  1. emm ... 尝试了,但是图片太小了:P

    可以要求图片大一点?
    显示的字多一点?

    回覆刪除
    回覆
    1. 可以看到"圖片"及"文字"的2 句...
      img expr:src='data: post.thumbnailUrl'
      data: post.snippet/
      都是系統的內置指令, 未能自行設定. ::ee5132

      刪除
    2. 發現圖片可以自行設定大小, 方式如下... ::ee5126
      img expr:src='data: post.thumbnailUrl' width="100"
      只需要修改 width 的數值, 便可以出圖片大小.

      刪除
  2. 应该加在哪里? 我似乎出错了::cc9069

    回覆刪除
    回覆
    1. 我把這個 width 參數, 加回 blog 文裡頭 (6-Mar-2014 更新 那一段),
      應該是"綠"底色的第一句, 近尾的位置. ::_342
      img expr:src='data: post.thumbnailUrl' width="100"
      可以修改 100 到其他數值, 它是圖片的寬度, 數值大; 圖片大, 可惜解像度沒有改變.

      刪除
  3. 照片太模糊了 !
    我删除后,找不到位置加回 = =
    救命啊

    这是我要求的排法... 还是需要固定的才可以这样?
    http://www.dickens-au.com/

    回覆刪除
    回覆
    1. ::_358 弄回原来的样子了...

      刪除
    2. 到你的 blog 看過, 已經搞好了, 是嗎 ?
      排版方面, 應該系統有你的需求, 但是要人手一一加入.

      刪除
    3. 是的,我把之前下载的备份重新上载!
      有办法弄到自动大约文章和照片的一半显示(或自己自行在文章弄成: 閱讀更多) ?

      抱歉和谢谢你的耐心解答::vv4005

      刪除
    4. 自己在編輯時, 加入"插入繼續閱讀標示", 那是最簡單的做法, 而且可以自行設立空間大小.
      但是你已經有不小文章, 一一加入"read more"不是一個上策.
      我記得有網友寫過 "auto snippet ", 但是要找找看. ::kk3192

      刪除
    5. 這個可能是你需要的解決方案
      " 自動文章撮要(Yahoo Blog Style) "
      http://www.koosan.pw/2013/09/auto-summary-post-with-thumbnail-yahoo-blog-style.html

      刪除
    6. 谢谢你的耐心和分享 :)
      我星期一会进去试看:P
      周末愉快::kk3034

      刪除

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