[外掛] Blogger 最新文章小工具插件 CSS 縮圖 jQuery 模組

從接觸 Blogger 到現在，判斷式運用或是 CSS、HTML5 架構、微資料標記設定，範本版型及速度調整都算駕輕就熟了，但對於小工具製作還是頭一遭。

由於未來有構想玩出第一款全自製 Blogger 版型，所以相關的小工具插件如果是自行處理，也較有扎實感。

JavaScript 程式設計，這區塊一直以來是自己較為匱乏的部份，得從零開始。好在 jQuery 的架構在應用時，與自己較為熟悉的 CSS、Blogger 判斷式有依存關係，在學習上也就沒這麼深奧難懂。

這邊依據「Blogger JSON Feed API」抽取標題、網址、作者等 Feed 資料，製作出 Blogger 最新文章 jQuery 模組。

這一版的Blogger 最新文章小工具 jQuery 外掛插件，縮圖的部份直接調整 CSS 語法即可放大縮小圖片。作者與日期的部份則引用外部「Font Awesome」圖示，可視需求添加或刪除。

下圖是完成的後的樣貌，先在「</head>」之前引用外部 Font Awesome 加入 CSS 與放入 jQuery，接著使用版面配置頁的「HTML/JavaScript」小工具安裝程式，即可完成 Blogger 最新文章的部署。

設置流程

HTML 範本中引用 Font Awesome 及 jQuery 函式庫
HTML 範本或小工具中加入 CSS
小工具中加入 jQuery 代碼

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Step 1

HTML 範本中引用 Font Awesome 及 jQuery 函式庫

首先，在 HTML 範本中搜尋「</head>」，在「</head>」上方加入以下代碼。


<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

(* 如果已安裝過 jQuery 和 Font Awesome，此步驟可省略。)

Step 2

HTML 範本或小工具中加入 CSS

接著搜尋 HTML 範本中的「</b:skin>」，在「</b:skin>」上方加入以下不包含「<style type='text/css'> 及 </style>」的部份。或是將下列 CSS 代碼直接加入到「Step1」添加的代碼上方。


<style type='text/css'>
/* 最新文章 */
ul#recentposts {display: inline-block;} /* 自動填滿 */
#recentposts li{list-style-type:none;} /* 清單記號：無; (沒使用縮圖，可添加 border-bottom:#EEE 1px solid; 加入下劃線) */
#recentposts .rp-thumb{display:block;width:60px;height:55px;float:left;margin-right:10px;} /* 區塊呈現; 寬60px; 高60px; 左側浮動; 邊界-右10px */
#recentposts .rp-title{font-family:Microsoft JhengHei;font-size:15px;font-weight:400;margin:5px 0 8px 0;} /* 微軟正黑體; 文字寬度 400; 文字大小 15px; 邊界-上、右、下、左 */
#recentposts .rp-title a{color:#666;font-weight:700;font-size:14px;} /* 連結：顏色 #666; 文字寬度 700; 文字大小 14px */
#recentposts .rp-title a:hover{color:#999;text-decoration:none;} /* 滑鼠移到連結上方：顏色 #999; 字體裝飾-預設無底線 */
#recentposts .rp-content{margin-left:70px;} /* 邊界-左：70px; (沒使用縮圖，可註釋掉這一行) */
.fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} /* 區塊水平排列; Awesome文字-厚度正斜體大小寫 normal、字體大小行高14px/1、字體類別-FontAwesome; 文字繼承大小; 文本渲染-自動; WebKit 字體平滑-反鋸齒; MOZ 字體平滑-灰階 */
.fa-calendar:before{content:"\f073";padding: 4px 6px 4px 6px;} /* fa-calendar 之前顯示日期圖示：awesome 圖示 \f073; 留白-上、右、下、左 */
.fa-user:before{content:"\f007";padding: 4px 6px 4px 6px;} /* fa-user 之前顯示作者圖示 */
</style>

(* 如果習慣直接在小工具調整 CSS 數值，此步驟可省略。)

代碼說明

如果不想使用縮圖功能可以在「#recentposts li」加入下劃線，「#recentposts .rp-content」則可使用「/* 需要註釋掉的內容 */」註譯掉。可從上方代碼觀察註釋中的說明。

文字大小可依「#recentposts .rp-title 與 #recentposts .rp-title a」做調整。

縮圖尺寸可視需求「#recentposts .rp-thumb」調整「width:60px ( 寬 )、height:60px ( 高 )」，再更改「#recentposts .rp-content ( 文章標題、作者、日期整體區塊 )」與左側圖片的距離。

Step 3

小工具中加入 jQuery 代碼

於版面配置頁新增一個「HTML/JavaScript」小工具，安裝以下代碼即可完成設定。

如果習慣直接在小工具調整 CSS 數值，可直接將「Step2」的 CSS 代碼添加到「Step3」這裡的代碼上方，並一同加入「HTML/JavaScript」小工具中使用。


<ul id="recentposts"></ul>
<script type="text/javascript">
//<![CDATA[
$(function () {
$.ajax({
    url: '/feeds/posts/default?alt=json-in-script&max-results=5',
    type: 'get',
    async: true,
    dataType: "jsonp",
    success: function(rpe){
    //使用 for 循環 feed 資料
        for (var i = 0; i < rpe.feed.entry.length; i++){ //使用 .length 得知陣列數量
          for (var j = 0; j < rpe.feed.entry[i].link.length; j++) {
            if (rpe.feed.entry[i].link[j].rel == 'alternate') {
              var rpl = rpe.feed.entry[i].link[j].href; //變數 rpl 替換掉文章網址
              break; //跳出循環
            }
          }
    //使用 var 變數更替 feed 原始資料
        var rpt = rpe.feed.entry[i].title.$t; //文章標題
        var rpn = rpe.feed.entry[i].author[0].name.$t; //文章作者
        var rpd = rpe.feed.entry[i].published.$t.substring(0, 10); //文章日期前十個字符
        var rpc = rpe.feed.entry[i].content.$t; //文章內容
        var rph = $("<div>").html(rpc); //在 html 內容中用選擇器找到 div
        var rps = rph.find("img:first").attr("src"); //在 div 中找到第一張圖片網址
        var rpo = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iK-m2W6D-KBS__21RvIygkhQbJ7Q4FV9d8gykNPYU6YbkCWqcGJox-Xw8Kl5J5AB4nbZGRNruuzeHif7L1nzWYOUR_8X9uWA5yclMx0MhKc-u433vdD3JE-shOjOfF0Pm5ZfVh-kQnmq/s640-Ic42/no-image.png";
            if (rps === undefined) { //如果第一張圖片沒有顯示
            //顯示 no-image.png 圖片
                var rpa = '<a class="rp-thumb" href="' + rpl + '" style="background:url(' + rpo + ') no-repeat center center;background-size: cover" title="' + rpt + '"/>'
            } else { //如果不是的話
            //顯示文章中的第一張圖片
                var rpa = '<a class="rp-thumb" href="' + rpl + '" style="background:url(' + rps + ') no-repeat center center;background-size: cover" title="' + rpt + '"/>'
            } //在 ul id="recentposts" 的物件結尾加入包含 <li> 之後的組裝物件
        $('#recentposts').append('<li>' + rpa + '<div class="rp-content"><h3 class="rp-title"><a href="' + rpl + '" title="' + rpt + '">' + rpt + '</a></h3><span class="rp-date"><i class="fa fa-calendar"/>' + rpd + '</span><span class="rp-author"><i class="fa fa-user"/>' + rpn + '</span></div></li><div class="clear"/>');
        }
    }
});
});
//]]>
</script>

代碼說明

如果不想使用縮圖功能須把代碼中的「' + rpa + '」刪除 (* 要與「Step2」代碼說明的部份一起配合。)。

需要刪除作者與日期，可以將「

<span class="rp-date"><i class="fa fa-calendar"/>' + rpd + '</span><span class="rp-author"><i class="fa fa-user"/>' + rpn + '</span>

」這一個段落刪除。

其中的「<i class="fa fa-calendar"/> 與 <i class="fa fa-user"/>」的部份，即為引用 Font Awesome 的外部圖示。

代碼中的「max-results=5」為顯示的最新文章數量，可視需求做更改，『5』即為 5 篇。

如果需要讀取其他 Blogger 網誌的最新文章，可在「url: '/feeds/posts/default?alt=json-in-script&max-results=5'」的前方加入目標網誌的網址。例如以下代碼。


url: 'http://blog-site-name.blogspot.tw/feeds/posts/default?alt=json-in-script&max-results=5'

下圖則是去除縮圖、日期與作者並加入下劃線的最新文章呈現情況。

[外掛] Blogger 最新文章小工具插件 CSS 縮圖 jQuery 模組_101

小結

由於還處於 jQuery 牙牙學步慢慢累積的階段，功能相當陽春。日後若有新增功能，會再添置新的代碼。縮圖的部份使用 CSS 調整，若文章在撰寫時圖片是使用非 Picasa 圖床，最新文章縮圖的部份也能正常顯示。

參考文獻

書籍：你不能錯過的 jQuery 實用 X 必用 X 拿來即用的 350 段程式碼 + 256 個範例

網站：Blogger JSON Feed API

挑選特定標籤製作 Blogger 文章置頂功能

留言

https://hongotin2010.blogspot.com/1/12/2022 4:58 下午
感謝
回覆刪除
回覆

新增留言

◎ 留言板中提問「代碼」問題，可至『留言代碼轉換器』轉換代碼。

搜尋此網誌

技研可樂