網頁

2013年10月2日

|

讓 Blogger 分類/標籤/搜尋頁面 只顯示文章標題; 部分內文 & 小圖片

Views:
2Mar2014 再有更新版本, 可供參考.
排列查詢(Search);文章分類(Label);網誌封存(Archive),只顯示文章標題;部分內文;小圖片;閱讀更多

Blogspot 的編寫自由度很大,  每一篇網誌都可以寫入長長的文字; 大量的圖片.
一旦按下 分類/ 標籤/搜尋 , 它的結果文章, 好大可能出現極長的顯示. 由以極多圖片的網誌最嚴重. :))

所以參考了他人的"Blogspot 語法特效", 再加上我的一點點修改,
而得出這個 "讓 Blogger 分類/標籤/搜尋頁面 只顯示文章標題; 部分內文 & 小圖片"
可以參考本網誌的主頁, 並由 [文章分類] 那裡點下看看成果. 多篇文章時, 好找得多.

這個特效需要修改 [範本](Template), 所以請先行備份, 以準備不時之需.
步驟為 [設計]> [範本]> [編輯HTML]>
在長長程式碼裡頭, 按下鍵盤上的 [Ctrl]+[F] , Search 欄位出現了.

尋找這一句, 全篇應該只有一句.
<b:include data='post' name='post'/>

用以下的新的編碼替代.
<!-- xxxxxxx --> 是 remark 備註, 方便日後有需要時更容易找它出來.
<!-- <b:include data='post' name='post'/> 原有語句 -->

<!-- 讓 Blogger 標籤/搜尋頁面 只顯示文章標題;部分內文;小圖片 -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "index"'>
<div><a 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>
<div class='item-snippet'><data:post.snippet/></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- 讓 Blogger 標籤/搜尋頁面 只顯示文章標題;部分內文;小圖片 -->
3 句顯示的編碼, 可以因應要求而自行取捨.
<div><a imageanchor="1" style= ... </div> (顯示 小圖片 編碼)
<h3 class='post-title' ... </h3> (顯示 文章標題 編碼)
<div class='item-snippet' ... </div>(顯示 部分內文 編碼)

按下[儲存範本]即時完成修改. 再按[查看網誌]測試結果. 真是不錯的.

17Oct2013 補回一圖, HTML 尋找時顯示介面.

26 則留言:

  1. 對不起, 我找不到"〈b:include data='post' name='post'/〉"
    近似的只有"〈b:include data='blog' name='google-analytics'/〉"

    回覆刪除
    回覆
    1. 你好
      是用 Blogspot 本身的標準"範本"嗎 ?
      b:include data='post' name='post'/ 和 b:include data='blog' name='google-analytics'/
      我也可以找到

      刪除
  2. 請問是否要變回傳統範本才可以 ? 因為 你文中說到要 找到b:include data='post' name='post' 來用新的編碼替代 但我找不到這句.
    謝謝

    回覆刪除
    回覆
    1. 我相信有2個方法,
      1) 加小工具 "文章分類" , 再剽到 HTML 裡面找.
      因為這個一定用到尋找的功能. 顯示時必定用到那一句.
      2) 先備份現時"範本", 再改到"傳統範本". 找找 HTML 如不成功, 可以"還原"

      如不成功, 再定對策. :-W

      刪除
  3. 多謝回覆, 但剛剛做了教我的個方法, 也找不到這句子!! 為何會這樣呢??

    回覆刪除
    回覆
    1. 我有去看過你的blog, 應該是一個基本的 blogspot 範本, 再改背景造成.
      我需要查看你所用的"範本"結構文件. (放心, 範本備份不含個人資料的)
      先備份你現時的"範本", 它會是一個 .xml 的文字文件,
      把它放到一個可以下載的網上空間, e.g. Google Drive 記得設定為"公開"
      再到我 blog "Google+ 留言板", 用"私密留言"方式通知我下載 link.
      待我查找看看. :-/

      刪除
    2. 網誌補回一圖, HTML 尋找時顯示的介面. :)

      刪除
  4. 我己下載了 x.xml. 不如我email 給你好嗎 ? 你可否給我你的電郵 ? 謝謝

    回覆刪除
    回覆
    1. 已經用 Google+ 私密留言方式給你電郵地址.
      &
      x.xml 本身只是一堆文字文件, 可以用一般的文書軟體打開 e.g. 記事本
      尋找一下那句子, 如果找得到, 你的 範本HTML 裡面也應酬有的. :7

      刪除
  5. 謝謝你的方法,確實成功了!!
    但想請問一下,如果我希望除了搜尋結果外,按下一頁(較舊的文章)或上一頁(較新的文章)
    都能跟首頁一樣顯示完整版的網頁資料,是否還要再加上什麼語法??
    因為修改後,除了首頁,全部都會變成這種迷你版QQ
    謝謝你!!

    回覆刪除
    回覆
    1. 你好
      這個功具也不是我的原創, 我只是由原話法中加入"小圖片"的功能.
      至於"上一頁" / "下一頁"的問題, 是這樣子的,
      首頁是全畫面, 而且是多過一個 blog post, 這時的上下一頁, 也是多個 blog post.
      多 post 時的顯示, 即是你所講"迷你版QQ"
      當點入任何一個 blog post 時, 當然只顯示單一 post, 而這時的上下一頁, 便是全畫面的單一 post.
      至於你要求的, 全畫面時上下一頁也是全畫面. 小畫面時上下一頁才是小畫面.
      這個要花點時間測試. 有結果再通知你.

      刪除
    2. 新版本應該合乎你的要求了
      http://freetongdiy.blogspot.hk/2014/02/blogger.html

      刪除
  6. 不好意思,使用這則語法後使得我除了首頁文章正常顯示內容外
    按第二頁(較舊的文章)也會變得只顯示標題
    請問是此語法本身就有這種…特性嗎?還是我哪裡做錯呢
    我希望只在點選標籤後文章只顯示標題>_<請大大指點

    回覆刪除
    回覆
    1. 你好, 這是語法的結構特性.
      基本分析器有 3 個...

      data:blog.homepageUrl != data:blog.url (頁面"不是首頁")
      data:blog.pageType == "index" (PageType等於index"標籤/搜尋")
      data:blog.pageType != "item" (PageType不等於item"單篇文章")

      pageType 我選擇使用了 ==index
      而"按第二頁(較舊的文章)" 就是中了 != data:blog.url & == "index"
      所以出現了 "只顯示文章標題; 部分內文 & 小圖片" 模式.

      最近我在網上也發現了另一些語法, 有可能解決了你的要求.
      但是我還沒有好好的把握. 如果成功後再回文通知你.

      刪除
    2. 新版本應該合乎你的要求了
      http://freetongdiy.blogspot.hk/2014/02/blogger.html

      刪除
  7. 你好,我也cirt f 找到那句话,再删掉,换上那框话,可是没变化啊

    回覆刪除
    回覆
    1. 這個版本只是支援 "分類/標籤/搜尋" 這三個功能的結果.
      一般的瀏覽, 會全篇幅顯示的.

      刪除
    2. 剛剛到你的 Blog 看過, 正常.
      試試按按 "标签", 結果出來了.

      刪除
    3. 没有办法使得blogger主页,博文只显示标题吗

      刪除
    4. 請參考另一篇的方案...
      "Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多"
      http://freetongdiy.blogspot.hk/2014/09/blogspot.html

      刪除
  8. 你好 真的非常感謝你的分享 找了好久終於有相關的語法 真的是太感謝了
    請問放完語法後我的同一篇文章變成兩個 一個圖片大 一個圖片小 大的是可以連結進去的 該怎麼只留一個呢?
    其實我也只希望出現大圖片就好 我有參考另一篇"自定大小的首幅圖片" 可是我的語法裡我找不到 pic.replace("s72-c","s400");這一句
    那這樣該怎麼改呢

    回覆刪除
    回覆
    1. 可是列出你的網址嗎 ? 我試試在當中找出問題.

      刪除
  9. http://keidyeng.blogspot.tw/ 你好 我是昨天有blogger有兩張圖片的 我是拿英文版的先試 感謝

    回覆刪除
    回覆
    1. 你好, 看過網誌後.
      你是用了非 blogger 原始"Themes",
      而我所改造的, 是以 blogger 為標準.
      第三方的, 有什麼改變, 真的是無法考究.
      因為第三方腳本, 所做的版本方式, 跟blogger標準有很大出入, 要非常深入了解, 才可得出合適結果.
      現時, 我的程式, 對第三方腳本, 可以說是"零"支援, 非常抱歉.
      不過, 還是多謝你的留言.

      刪除
    2. 好的 沒關西 謝謝你喔

      刪除

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