Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

2022.02.07 公告：此工具目前已更新到 V3 版，請前往新版安裝頁面：「Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式」。


之前寫的舊版工具「最新文章」已經很久沒有更新，由於前陣子「BLOGGER 支援 HTTPS」之後，很多 Blogger 工具都需要修改才能相容於 HTTPS 模式，因此藉這個機會來改版，除了加強縮圖的呈現方式，也新增不少功能。

以下先介紹更新的功能列表，想直接安裝請跳至「二、安裝程式碼」。

點此前往範例網頁

(圖片出處: pixabay.com)

一、功能更新及修正

1. 新增功能



首先看一下上圖為新版本的效果圖，新增的功能有：

• 支援 HTTPS
• 整合上下頁導航及摘要全部開合按鈕：按鈕區域變大，操作更方便。
• 新增摘要功能：含摘要預覽、顯示全部摘要切換。
• 自訂 CSS：可自行調整全部的版面配置。

2. 修正功能

• 縮圖尺寸：舊版本的縮圖只能固定寬度、無法調整寬高比例，新版本可設定縮圖自動裁切為指定尺寸，整體版面較為美觀。
• 調整了版面配置：更為友善的使用者體驗。

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


如果都使用預設值的話，直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號：

A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

F：可設定從第幾篇最新文章開始顯示

G：一頁顯示幾篇文章

H：設定文章縮圖的寬度 (px)

I：設定文章縮圖的高度 (px)

J：藍色圖片網址，請自行置換為文章無縮圖時的預設顯示圖片。為了相容於 HTTPS 模式，網址開頭請勿使用 "http:" 字串。

K：設定是否顯示文章摘要

L~M：分別設定預覽文章摘要、及所有文章摘要的字元數。

N：設定是否顯示網站總文章數

O~R：可修改為自訂的圖示字元，請參考「copypastecharacter.com」或「特殊符號字元一覽表」。但不少字元在行動裝置、或較舊的瀏覽器版本可能無法正常顯示，請用行動裝置自行測試看看。如果想改用圖片顯示的話，請參考「四、常見 FAQ」→ Q1 的詳細說明。

S~U：可自訂顯示的字串

AA~EI：如果熟悉 CSS 的話，可修改這裡的參數。

三、使用說明

如果發現這個最新文章小工具無法顯示，請先檢查以下項目：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」；如果是「自訂」的話，請檢查「網誌文章資訊提供」，不可以設定為「無」，最新文章才能顯示摘要內容。

3. 文章標題的連結，在文章編輯器 → 文章設定 → 連結 → 這裡請勿使用「標題連結」，否則會發生留言 #5 的狀況。

如果還有其他問題，請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出，會再補充到「四、常見 FAQ」。

四、常見 FAQ

Q1: openLogo 和 closeLogo 參數，能夠改用圖片嗎？

Ans: 如果要使用圖片的話，請將字串改為以下格式：

openLogo: "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-5c3SSZgh91PXNJ1z3sjZYfdhr6lLYJvpjAvH8n5_MmkTS-YuUTrl8W5VWtAUyg7BngtAXesEZ-vMuV2zZHFdEhqm3j98jMlS-A-xgR4l-CuD31312-TkBuWobH1nqfuEg6I2RhZYiZy/s14/right.png'/>",

藍色字串改為自訂圖片網址即可，closeLogo 的改法以此類推。

而使用圖片時，「上一頁/下一頁」按鈕，無論有無作用，顏色都會一樣，那麼可在 CSS 最後一行插入以下語法：

#rp2_switchPage span {
opacity: 0.5;
}
如此可讓無作用的按鈕，圖案的顏色較淡，以示區別。


Q2: 用Flickr嵌入圖片好像就無法顯示縮圖了，不知道要怎麼修改呢？

Ans: 這個工具並不支援 Flickr 圖床，抓取縮圖的原理請參考「舊版最新文章」→「一、從 Json 資料找縮圖」，從 Blogger 後台上傳的圖片，才能被儲存為 feed 之中的縮圖網址格式，讓這個小工具讀取。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，每篇文章的第一張圖，從 Blogger 後台上傳，即可讓此工具顯示文章縮圖。

目前這個工具的設計是讀取 feed 的摘要內容，執行速度會比較快，若要支援 Flickr，那麼必須改為讀取 feed 的完整內容，會拖累讀取時間，因此暫時沒考慮這麼做。如果需求很多的話，那麼改版時再納入此點。

更多 Blogger 工具：