之前寫的舊版工具「最新文章」已經很久沒有更新,由於前陣子「BLOGGER 支援 HTTPS」之後,很多 Blogger 工具都需要修改才能相容於 HTTPS 模式,因此藉這個機會來改版,除了加強縮圖的呈現方式,也新增不少功能。
以下先介紹更新的功能列表,想直接安裝請跳至「二、安裝程式碼」。
(圖片出處: pixabay.com)
1. 新增功能
首先看一下上圖為新版本的效果圖,新增的功能有:
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~EK:如果熟悉 CSS 的話,可修改這裡的參數。
如果發現這個最新文章小工具無法顯示,請先檢查以下項目:
1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。
2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」;如果是「自訂」的話,請檢查「網誌文章資訊提供」,不可以設定為「無」,最新文章才能顯示摘要內容。
如果還有其他問題,請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出,會再補充到「四、常見 FAQ」。
Q1: openLogo 和 closeLogo 參數,能夠改用圖片嗎?
Ans: 如果要使用圖片的話,請將字串改為以下格式:
藍色字串改為自訂圖片網址即可,closeLogo 的改法以此類推。
而使用圖片時,「上一頁/下一頁」按鈕,無論有無作用,顏色都會一樣,那麼可在 CSS 最後一行插入以下語法:
如此可讓無作用的按鈕,圖案的顏色較淡,以示區別。
以下先介紹更新的功能列表,想直接安裝請跳至「二、安裝程式碼」。
(圖片出處: 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~EK:如果熟悉 CSS 的話,可修改這裡的參數。
三、使用說明
如果發現這個最新文章小工具無法顯示,請先檢查以下項目:
1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。
2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」;如果是「自訂」的話,請檢查「網誌文章資訊提供」,不可以設定為「無」,最新文章才能顯示摘要內容。
如果還有其他問題,請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出,會再補充到「四、常見 FAQ」。
四、常見 FAQ
Q1: openLogo 和 closeLogo 參數,能夠改用圖片嗎?
Ans: 如果要使用圖片的話,請將字串改為以下格式:
openLogo: "<img src='//2.bp.blogspot.com/-M8w-I9JbTLE/VXPsl-omIAI/AAAAAAAAL3Y/DtpaY-xjFY0/s14/right.png'/>",
藍色字串改為自訂圖片網址即可,closeLogo 的改法以此類推。
而使用圖片時,「上一頁/下一頁」按鈕,無論有無作用,顏色都會一樣,那麼可在 CSS 最後一行插入以下語法:
#rp2_switchPage span {
opacity: 0.5;
}
如此可讓無作用的按鈕,圖案的顏色較淡,以示區別。
更多 Blogger 工具: