[Blogger] 搜尋結果只顯示標題、摘文與縮圖

流程：

在範本程式碼中尋找: <b:include data='post' name='post'/>

以下面程式碼取代:

<!-- Ankas(搜尋結果修改): begin -->           <b:if cond='data:blog.searchLabel or data:blog.searchQuery'>  <!-- label or search -->              <img expr:src='data:post.thumbnailUrl' height='70px' style='clear:left;float:left;margin-right:10px' width='70px'/>             <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>             <data:post.snippet/>             <div class='jump-link' style='align:right;margin-right:20px'><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>           <!-- Ankas(搜尋結果修改): end -->

儲存後即可生效（注意：這不是最後採用的程弍碼） 

效果如下，但對於沒有圖片的文章會顯示失效的圖片，並不美觀：

 

解決方法：檢測縮略圖若存在才顯示縮圖：

<b:if cond='data:post.thumbnailUrl'>  <!--檢測縮略圖存在-->   <img expr:src='data:post.thumbnailUrl' height='70px' style='clear:left;float:left;margin-right:10px' width='70px'/> </b:if>

 

原本的程式需再改成下面方式：

<!-- Ankas(搜尋結果修改): begin -->           <b:if cond='data:blog.searchLabel or data:blog.searchQuery'>  <!-- label or search -->             <b:if cond='data:post.thumbnailUrl'>  <!--檢測縮略圖存在-->                     <img expr:src='data:post.thumbnailUrl' height='70px' style='clear:left;float:left;margin-right:10px' width='70px'/>             </b:if>             <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>             <data:post.snippet/>             <div class='jump-link' style='align:right;margin-right:20px'><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>           <!-- Ankas(搜尋結果修改): end -->

 

執行效果：

 

參考:

【Blogger】讓搜尋標籤的結果頁，只出現標題、摘文與縮圖

Blogger 標籤頁面只顯示文章標題和部分內文

 

 

結語/心得：

Blogger 語法摘要：

data:blog.searchLabel	搜尋框
data:post.thumbnailUrl	文章的縮略圖
data:post.title	文章的標題
data:post.url	文章的 URL
<data:post.snippet/>	略縮後的文章
<b:include data='post' name='post'/>	完整文章
<b:if cond='!data:mobile'>	是否 mobile view

 

縮圖、標題及摘要，可用下面程式碼達成：

<b:if cond='data:post.thumbnailUrl'>   <img expr:src='data:post.thumbnailUrl' height='70px' style='clear:left;float:left;margin-right:10px' width='70px'/> </b:if>             <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>             <data:post.snippet/>             <div class='jump-link' style='align:right;margin-right:20px'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>