網頁

2014年2月9日

|

讓 Blogger 包含標籤文章 只顯示文章標題;部分內文;小圖片;閱讀更多 (新版)

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

我之前出過一篇 "讓 Blogger 分類/標籤/搜尋頁面 只顯示文章標題; 部分內文 & 小圖片"

但有不少網友提及, 這個功能, 會把主頁裡的"較舊文章"也改成 "只顯示標題...".
希望只有在 顯示包含標籤的文章 時才會展示 "文章標題;部分內文;小圖片;閱讀更多"

經過網上搜尋, 找到一個指示碼 " data:blog.searchLabel "
再改良原先設計, 可以完全合乎要求了.

安裝方法跟之前的一樣... (可以回到前篇參考)
需要修改 [範本](Template), 所以請先行備份, 以準備不時之需.
步驟為 [設計]> [範本]> [編輯HTML]>
在長長程式碼裡頭, 按下鍵盤上的 [Ctrl]+[F] , Search 欄位出現了.
尋找這一句, 全篇應該只有一句.

<b:include data='post' name='post'/>

改成這一段...

<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' style='overflow: hidden;'><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>



28 則留言:

  1. !!!!!非常謝謝您的不遺餘力
    ^_^幫了我一個大忙,真的謝謝你哦

    回覆刪除
  2. 您好,我也聽你指示做了~
    目前我的部落格文章只有5篇
    問題來了
    點了標簽:台北
    只有現實2篇,需要按到較舊文章,才看到其餘2篇
    難道不能一個頁面現實比較多的文章?
    感謝!

    回覆刪除
    回覆
    1. 你好
      我剛剛到你的部落格看過, 共5篇文章, 所有的都用上2 個標籤 "台北"&"食記",
      點下任何一個標籤, 5篇 list 都可以顯示, 沒看到你所講的問題.

      刪除
  3. 您好,非常感謝您的分享!我是非常外行的人,照著您清楚的解說做(複製貼上),真的成功了!
    現在還有個小小問題,我的部落格首頁的標題和內文有個分隔線,現在標籤點下去後,分隔線太長了,會穿過圖片,請問要如何讓分隔線在標籤搜尋頁中不會壓到圖片呢?麻煩您了!
    (kuerman.blogspot.tw)

    回覆刪除
    回覆
    1. 你好,
      因為你的網頁範本, 本身已經設計成"標題"有下劃線. 要改變它, 即是需要改變範本設計, 工程比較大.
      (主要的是, 我不知道這個範本當中, 有多少個地方需要修改)
      那麼, 修改我的 code 罷.
      在上面的我的 code 裡頭, 把第2句, 跟第3句的次序對換.
      主要是把"小圖片"不跟標題平排, 而是跟內文平排.
      看看是不是你需要的.

      刪除
    2. 我修改好了!您太厲害了,頭腦動的好快啊~都能找出連新手都能用的方法,超級感謝!

      刪除
    3. 此留言已被作者移除。

      刪除
    4. 我會持續在這裡取經學習的: )

      刪除
    5. 經過測試之後, 找到一個更好的方法.
      用回原先 code 的次序, 只修改第3句開首的那段.
      由 <h3 class='post-title'>
      加入一小段 style 格式, 改為..
      <h3 class='post-title' style='overflow: hidden;'>
      那樣, 底線便不會過界.
      (我會在本網誌 code 裡, 也加入這個小改變)

      刪除
    6. 我修改了,整個排版又更好看了呢!你真的很厲害,又很用心回答大家的問題,非常感謝喔!

      (上面的碼a expr 前少了一個"<")

      刪除
    7. 言身寸 言身寸 提醒, 已經改正. ^_^!

      刪除
  4. 站長你好 ! 謝謝提供美化部落格的教學 ~ !
    剛剛使用了新版的程式碼 , 發覺標題與圖片沒有對齊
    ( 由於單純分享影片 , 沒多做文字介紹 )
    如果站長有空的話 , 可以麻煩幫我看一下嗎 ? 謝謝 !

    http://lovenatural33.blogspot.tw/search/label/%E6%BA%AB%E9%A6%A8%E5%8F%AF%E6%84%9B

    回覆刪除
    回覆
    1. 因為本編碼只是針對, blog 所上載並且貼上的圖片,
      所以用的顯示指今為 : img expr:src='data:post.thumbnailUrl'
      而你用的全是影片連結, 所以不能顯示.

      刪除
    2. 再看清潔你是用了 img.youtube.com 作為圖片顯示.
      不知道你是不是用標準的 blog 範本.
      試試把
      style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'
      先刪去, 看看結果.

      刪除
    3. 站長你好 , 刪除後圖就跟文章標題一同在左邊了~ ! 感覺有區隔開來 , 不過圖片顯示在標題的上方 , 謝謝 !

      刪除
    4. 簡單 次序 問題
      只要把程式的 第2句 (即帶有 data:post.url) 跟 第3句 (即帶有 post-title) 交換次序即可.

      刪除
    5. 你好,
      YouTube 的圖版, 也可以設定大小,
      詳情可以參考的另一篇貼文,

      可定義大小的 YouTube 縮圖
      http://freetongdiy.blogspot.hk/2015/07/youtube.html

      刪除
  5. 版主您好,謝謝您的教學。
    搜尋了很久,終於在您這找到標題列表的方法,實在太開心了!

    想另外請教您一個問題:
    目前點選標籤分類時,發文日期會和標題列表一起出現,
    可否單純只出現標題列表,不要日期呢?
    再麻煩您予以解惑,謝謝。

    回覆刪除
    回覆
    1. 你好 😃
      在 <b:include data='post' name='post'/> 這句往上找約6行的位置,
      應該找到這一句..它是顯示日期的程式碼
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      在它上方及下方加一個 if 的篩選, 即可..
      <b:if cond='data:blog.pageType == "item"'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>

      可參考的另一篇 "Blogspot 文章間格排版 (網友提議試制版本)"
      https://freetongdiy.blogspot.hk/2014/11/blogspot_22.html
      在那裡所修改的程式碼,
      第 02-04 行, "日期"顯示加入 if 語法, 它只會在單頁時列出 💡

      刪除
  6. 感謝版主的回覆!
    我可能陳述的不夠清楚,補充一下~
    想刪去日期的只有:「點選標籤」後所產生的「標題列表」
    但是「單頁(內文)、首頁、較舊文章、較新文章」想保留原有的日期
    若是上述的需求,能運用pageType來區分嗎?
    剛剛試了一下,
    blogger好像把標籤列表、首頁這些都歸為index...
    不好意思問題有點複雜 >__<

    回覆刪除
    回覆
    1. 明白了 🙋, 只有在 標籤列表 時, 不要日期. 而其他版面, 用回原本顯示方式.🉐
      這樣修改罷 🔖
      <b:if cond ='data:blog.searchLabel'><b:else/>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>

      刪除
    2. 太感謝您了~~
      剛剛我還傻傻地把item、archive、homepageUrl這些一個個添加上去
      版主三行就解決我的問題了,感激呀Q_Q

      刪除
    3. 不用客氣 😁
      一方面可以幫到網友, 而另一方面自己上了好好的一課. 一舉兩得 ❗

      刪除

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