網頁

2014年11月22日

|

Blogspot 文章間格排版 (網友提議試制版本)

Views:
我一直有改造"文章排版"的貼文, 而早日有網友出一種我沒有想過的排版方式,
有趣, 用了大半天的時間, 得出這個有點像樣子的結果. "文章間格排版"


要求是一行 3 格, code 方面需要修改後台 HTML (原Blogspot範本)

    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == "false"'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-outer"&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
<b:if cond='data:blog.pageType == "item"'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-posts"&gt;
        </b:if>
        <!-- <div class='post-outer'> -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
<!-- 更換的原本句子 <b:include data='post' name='post'/> -->
<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/>
<div style='float:left; padding:2px 2px 2px 2px; margin:2px; width:165px; height:300px; overflow-x:hidden; overflow-y:auto; border-style:groove;'>
<a expr:href='data:post.url'>
<script>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s140-c");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"' style='display:block; margin:auto;'/>"); 
    })()
</script>
</a>
  <div class='post-title' style='margin-top:2px;'><a expr:href='data:post.url'><b><data:post.title/></b></a></div>
  <div style='margin-top:4px;'>  <data:post.snippet/></div>
<div class='jump-link' style='margin-top:2px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div></div>
</b:if></b:if>
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->
        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <!-- </div> -->
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop><div style='clear:left;'/>

修改擇要...
原範本中由 <!-- posts --> 開始, 直到</b:loop>結束, 有多處修改.

第 02-04 行, "日期"顯示加入 if 語法, 它只會在單頁時列出
第 06 行, post-outer 會影響排版, 所以用 Remark 標記, 不以執行. 或刪除也可以
第 33 行, post-outer 的結束 </div>, 用 Remark 標記, 不以執行. 或刪除也可以
第 07-31 行, "間格排版"的主要語法
第 15 行, width:165px; height:300px; 因應不同的範本, 得以自行修正
第 20 行, 設定圖片大小, 同樣是因應不同的範本, 得以自行修正
第 35 行, 在原本</b:loop>之後加入<div style='clear:left;'/>, 清除"間格排版"格式

9 則留言:

  1. 謝謝FreeTong!!
    試著用上面的語法改動我的部落格,結果相當滿意,謝謝!!
    只是加了上面第二行的語法後,整個部落格的日期都不見了,不知哪裡出錯,所以我又改回來,但變成searchQuery的頁面呈現像階梯一樣,搜尋出來的文章一篇篇由左往右降低。
    http://clairestfodiary.blogspot.com/search?q=%E9%A6%AC%E8%8A%AC&x=0&y=0
    請問該改動哪裡呢?

    回覆刪除
    回覆
    1. 因為 date 是放在 post 的外面, 所以我把它用 if 指示, 只在單篇文章時才出現,
      如果顯示 date 在格仔排版, 它會是一個獨立物件, 其他跟隨的, 便會跳入下一行, 而形成階梯.
      如果需要 date 顯示在格子排版裡頭, 我需要多點時間試驗一下, 現時沒有一個可行概念.

      刪除
    2. 把"日期"顯示, 放到格仔裡頭, 排版問題應可解決,
      看過你的網誌, 沒有為格子加上框線, 這個改動, 看似比較自然.
      1) 語法中第 2 & 4 行, 還是需要加上 if 控制
      2) 語法中第 15&16 行之間, 加入一句...
      <div class='date-header'><data:post.dateHeader/></div><br/>
      這個需要自行加入字體色樣,
      或是用回原日期顯示的結構模式, 相信在你的網誌是可行.
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      (因留言不接受 HTML 碼, 所語法中的空格, 請自行除去)

      刪除
    3. 謝謝你的幫忙!!
      我其實是想保留所有的日期,但我的blogger範本跟你的不大相同,實在不知怎麼弄,::kk3103 所以就把搜尋結果的日期除掉了。
      現在我亂弄一通出來的是長這樣:
      http://clairestfodiary.blogspot.com/search?q=%E9%A6%AC%E8%8A%AC&x=0&y=0

      刪除
    4. 回看你給我那個參考網頁, 它也是沒日期的, 可能這樣的排版, 沒有日期比較好看.

      其實要顯示日期, 只要在這2句之間, 插入日期資訊便可以.
      <div style='float:left; padding: 2px 10px 2px 2px; margin:10px; width:235px; height:500px; overflow-x:hidden; overflow-y:auto; border-style:none;'>
      [在這裡插入]
      <a expr:href='data:post.url'>

      加入這句..
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      或是這一句..
      <div class='date-header'><data:post.dateHeader/></div><br/>
      看看那個比較好

      刪除
  2. 感謝FreeTong的分享~我很喜歡這樣子的排版方式
    馬上來試看看
    有一個問題想請教FreeTong
    該如何把BLOG最上方的目錄分類插入圖式
    就如下面這個網頁 http://forrocafe.blogspot.tw/ 所呈現的方式
    謝謝

    回覆刪除
    回覆
    1. 你好, 先謝謝你
      要由"目錄分類"插入圖片, 這個方式較難處理.
      建議用另一個方法...
      [設計]>[版面配置] 裡, 新增小工具 [HTML/JavaScrip] 在(標題)之下,
      自己寫一個 HTML 內容, 有圖片, 有文字, 有連結的內文.

      刪除
    2. 謝謝FreeTong提供這麼好用又可以達到效果的方法
      在此獻上12萬分的致意!!

      刪除
😀

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