挑選特定標籤製作 Blogger 文章置頂功能
本篇我們使用 Blogger「HTML/JavaScript」小工具，安裝導引特定標籤中的文章標題、作者、日期、描述內容的 jQuery 程式，再配合 Blogger 的頁面判斷式，將「小工具」置於首頁或特定網址頁面的網誌文章上方，即可製作出 Blogger 的文章置頂功能。
小工具在安裝 Blogger ( Blogspot ) 文章置頂程式後，較為麻煩的是 CSS 語法的調整。由於 Blogger 網誌版面設計寬度與高度都各有不同，所以這邊設計的文章縮圖置於左側與頂部，實際情況還是須依自己的版型而做 CSS 調整。
這裡先觀察一下「Step2」完成後的文章縮圖置於標題左側的樣張。背景色使用灰階並在邊框的部份使用點線，jQuery 抽取 Feed 導引的標籤為《技研可樂》的開箱文「unboxing」標籤，並取樣一個標籤。
上圖是以《技研可樂》目前的版型而設定的 CSS 數值，實際的縮圖大小還是要以自己的版型為準。好的，接下來就可以開始動工了。
CSS 調整：「http://www.1keydata.com/css-tutorial/tw/border.php」
範例 DEMO 頁面｜電腦版網頁：「電腦版」
範例 DEMO 頁面｜行動版網頁：「行動版」
「HTML/JavaScript 小工具」拖拉到下圖的位置。
要顯示特定標籤的文章當作 Blogger 的置頂文章，可將「
「
整體的代碼配置如下：
下圖則為文章縮圖於標題上方顯示的樣張。
將「Top-Post」設置為固定值，在設定完之後，我們每次要更換「置頂文章」時，只要到「發表文章 › [全部]」更替勾選需要置頂的文章即可。如下圖：
額外的，我們也可以將「Step2」當中「CSS」的部份，放置於範本的「
而小工具中只要放入如下代碼即可：
小工具在安裝 Blogger ( Blogspot ) 文章置頂程式後，較為麻煩的是 CSS 語法的調整。由於 Blogger 網誌版面設計寬度與高度都各有不同，所以這邊設計的文章縮圖置於左側與頂部，實際情況還是須依自己的版型而做 CSS 調整。
這裡先觀察一下「Step2」完成後的文章縮圖置於標題左側的樣張。背景色使用灰階並在邊框的部份使用點線，jQuery 抽取 Feed 導引的標籤為《技研可樂》的開箱文「unboxing」標籤，並取樣一個標籤。
上圖是以《技研可樂》目前的版型而設定的 CSS 數值，實際的縮圖大小還是要以自己的版型為準。好的，接下來就可以開始動工了。
相關連結
版型配色：「Chrome 擴充：ColorPick Eyedropper 網頁色碼擷取器」CSS 調整：「http://www.1keydata.com/css-tutorial/tw/border.php」
範例 DEMO 頁面｜電腦版網頁：「電腦版」
範例 DEMO 頁面｜行動版網頁：「行動版」
設置流程
- HTML 範本中部屬 Font Awesome 及 jQuery 函式庫
- 版面配置頁用「HTML/JavaScript 小工具」安裝程式碼 ( 文章縮圖在左側 )
- 讓「HTML/JavaScript 小工具」在首頁或特定頁面顯示
- 調整 CSS 讓文章縮圖在顯示在標題上方
- 靈活應用
設置前準備
若對編譯 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'/>
Step 2
版面配置頁用「HTML/JavaScript 小工具」安裝程式碼 ( 文章縮圖在左側 )
接著前往 Blogger 後台版面配置頁 ( 拖拉編輯頁 ) 新增一個『HTML/JavaScript 小工具』，標題命名為『文章置頂』並放入以下程式代碼。然後將小工具拖拉到「網誌文章」的上方。
<style type='text/css'>
/* 文章置頂 */
.pt-body{background-color: #ffffff;border:#dddddd 1px dotted;} /* .pt-body 及 #poststop 可視情況加入 (border：顏色 粗度 線條屬性) 或 (background-color 背景色) */
#poststop li{list-style-type:none;} /* 清單記號：無; (沒使用縮圖，可添加 border-bottom:#EEE 1px solid; 加入下劃線) */
#poststop .pt-thumb{display:block;width:250px;height:170px;float:left;margin:15px;} /* 區塊呈現; 圖片：寬250px 高170px; 左側浮動; 邊界15px */
#poststop .pt-title{font-family:Microsoft JhengHei;font-size:22px;font-weight:400;margin:5px 0 8px 0;} /* 微軟正黑體; 文字寬度 400; 文字大小 22px; 邊界-上、右、下、左 */
#poststop .pt-title a{color:#666;font-weight:700;font-size:21px;} /* 連結：顏色 #666; 文字寬度 700; 文字大小 21px */
#poststop .pt-title a:hover{color:#999;text-decoration:none;} /* 滑鼠移到連結上方：顏色 #999; 字體裝飾-預設無底線 */
#poststop .pt-summary{margin:2px 0 2px 0;font-size:110%} /* 邊界-上、右、下、左; 文字大小：110%; */
#poststop .pt-content{margin-left:260px;} /* 邊界-左：260px; (沒使用縮圖，可註釋掉這一行) */
.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>
<div class='pt-body'>
<ul id="poststop"></ul>
<div>
<script type="text/javascript">
//<![CDATA[
$(function () {
$.ajax({
url: '/feeds/posts/default/-/unboxing/?alt=json-in-script&max-results=1',
type: 'get',
async: true,
dataType: "jsonp",
success: function(pte){
//使用 for 循環 feed 資料
for (var k = 0; k < pte.feed.entry.length; k++){ //使用 length 得知陣列數量
for (var p = 0; p < pte.feed.entry[k].link.length; p++) {
if (pte.feed.entry[k].link[p].rel == 'alternate') {
var ptl = pte.feed.entry[k].link[p].href; //變數 ptl 替換掉文章網址
break; //跳出循環
}
}
//使用 var 變數更替 feed 原始資料
var ptt = pte.feed.entry[k].title.$t; //文章標題
var ptn = pte.feed.entry[k].author[0].name.$t; //文章作者
var ptd = pte.feed.entry[k].published.$t.substring(0, 10); //文章日期前十個字符
if ("content" in pte.feed.entry[k]) {
var ptc = pte.feed.entry[k].content.$t; //文章內容
var pth = $("<div>").html(ptc); //在 html 內容中用選擇器找到 div
var pts = pth.find("img:first").attr("src"); //在 div 中找到第一張圖片網址
}
else
var ptc = ""; //變數 ptc 為空的
var ptrec = /<\S[^>]*>/g; //變數 ptrec 為圖片或連結代碼內容
ptc = ptc.replace(ptrec, ""); //將相關代碼內容清除
if (ptc.length > 100){ //如果文章內容大於 100 字符
ptc = "" + ptc.substring(0, 100) + "..." //ptc 等於 100 字符
}
var pto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iK-m2W6D-KBS__21RvIygkhQbJ7Q4FV9d8gykNPYU6YbkCWqcGJox-Xw8Kl5J5AB4nbZGRNruuzeHif7L1nzWYOUR_8X9uWA5yclMx0MhKc-u433vdD3JE-shOjOfF0Pm5ZfVh-kQnmq/s640-Ic42/no-image.png";
if (pts === undefined) { //如果第一張圖片沒有顯示
//顯示 no-image.png 圖片
var pta = '<a class="pt-thumb" href="' + ptl + '" style="background:url(' + pto + ') no-repeat center center;background-size: cover" title="' + ptt + '"/>'
} else { //如果不是的話
//顯示文章中的第一張圖片
var pta = '<a class="pt-thumb" href="' + ptl + '" style="background:url(' + pts + ') no-repeat center center;background-size: cover" title="' + ptt + '"/>'
} //在 ul id="recentposts" 的物件結尾加入包含 <li> 之後的組裝物件
$('#poststop').append('<li>' + pta + '<div class="pt-content"><h3 class="pt-title"><a href="' + ptl + '" title="' + ptt + '">' + ptt + '</a></h3><span class="pt-date"><i class="fa fa-calendar"/>' + ptd + '</span><span class="pt-author"><i class="fa fa-user"/>' + ptn + '</span><div class="pt-summary">' + ptc + '</div></div></li><div class="clear"/>');
}
}
});
});
//]]>
</script>
「HTML/JavaScript 小工具」拖拉到下圖的位置。
代碼說明
CSS 的部份已在代碼中做了說明。另外「border」邊框，有需求使用其他線條可佈置為 ( dashed 虛線、double 雙線、dotted 點線、groove 凹線、ridge 凸線、outset 浮出線、inset 嵌入線 )。要顯示特定標籤的文章當作 Blogger 的置頂文章，可將「
url: '/feeds/posts/default/-/unboxing/?alt=json-in-script&max-results=1'」當中的『unboxing』變更為想顯示文章的標籤。「
max-results=1」則為要顯示的標籤文章數，『1』即為 1 篇文章。
Step 3
讓「HTML/JavaScript 小工具」在首頁或特定頁面顯示
接著再前往 HTML 範本搜尋『文章置頂』，並使用以下代碼包覆文章置頂小工具『<b:includable id='main'> 到 </b:includable>』的部份，在『儲存範本』後即可完成設定。「文章置頂」就只會在網誌的首頁中顯示。
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 此段內容只在網誌首頁顯示 -->
</b:if>
整體的代碼配置如下：
<b:widget id='HTML31' locked='false' title='文章置頂' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 開始：只在網誌首頁顯示加在這 -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if> <!-- 結束：只在網誌首頁顯示加在這 -->
</b:includable>
</b:widget>
其他可能運用的頁面判斷式用法：
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/static_page.html"'>
<!-- 此段內容只在特定靜態頁面顯示 -->
</b:if>
<b:if cond='data:blog.url == "http://blog-name.blogspot.com/2015/11/post_page.html"'>
<!-- 此段內容在只在網站的單一網址頁面顯示 -->
</b:if>
<b:if cond='data:blog.searchLabel'>
<!-- 此段內容只在標籤頁面顯示 -->
</b:if>
<b:if cond='data:blog.searchLabel == "Label"'>
<!-- 此段內容只在單一 "Label" 標籤頁面顯示 -->
</b:if>
Step 4
調整 CSS 讓文章縮圖在顯示在標題上方
如果要讓小工具中的文章縮圖顯示於標題的上方，可以使用以下 CSS 代碼替換掉「Step2」包含「<style type='text/css'> 及 </style>」的部份。
<style type='text/css'>
/* 文章置頂 */
.pt-body{background-color: #FFFDE1;border:#dddddd 1px dotted;} /* .pt-body 及 #poststop 可視情況加入 (border：顏色 粗度 線條屬性) 或 (background-color 背景色) */
#poststop li{list-style-type:none;} /* 清單記號：無; (沒使用縮圖，可添加 border-bottom:#EEE 1px solid; 加入下劃線) */
#poststop .pt-thumb{display:block;width:420px;height:280px;margin:15px;} /* 區塊呈現; 圖片：寬420px 高280px; float:left-左側浮動; 邊界15px */
#poststop .pt-title{font-family:Microsoft JhengHei;font-size:22px;font-weight:400;margin:5px 0 8px 0;} /* 微軟正黑體; 文字寬度 400; 文字大小 22px; 邊界-上、右、下、左 */
#poststop .pt-title a{color:#666;font-weight:700;font-size:21px;} /* 連結：顏色 #666; 文字寬度 700; 文字大小 21px */
#poststop .pt-title a:hover{color:#999;text-decoration:none;} /* 滑鼠移到連結上方：顏色 #999; 字體裝飾-預設無底線 */
#poststop .pt-summary{margin:2px 0 2px 0;font-size:110%} /* 邊界-上、右、下、左; 文字大小：110%; */
/* #poststop .pt-content{margin-left:260px;} 邊界-左：260px; (沒使用縮圖，可註釋掉這一行) */
.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>
下圖則為文章縮圖於標題上方顯示的樣張。
Step 5
靈活應用
我們可以使用較為靈活設定標籤的方式，來佈屬「置頂文章」，這樣就不用每次都到小工具或是範本中更換「標籤」值。首先，可以將「Step2」當中需要設置抽取的「標籤」值，設為「Top-Post」固定值。
url: '/feeds/posts/default/-/Top-Post/?alt=json-in-script&max-results=1',
將「Top-Post」設置為固定值，在設定完之後，我們每次要更換「置頂文章」時，只要到「發表文章 › [全部]」更替勾選需要置頂的文章即可。如下圖：
額外的，我們也可以將「Step2」當中「CSS」的部份，放置於範本的「
</head>」之前或是「<skin>」中 ( CSS代碼放置在「<skin>」中時，不用加入「<style type='text/css'> 及 </style>」)，然後將「JavaScript」放置於範本的「</body>」之前，或是將「JavaScript」經過壓縮後製作一個外連「Top-Post.js」檔，放置於範本的「</body>」之前，來調整整體模版的速度。而小工具中只要放入如下代碼即可：
<div class="pt-body">
<ul id="poststop"></ul>
<div>
小結
設定方式有點繁複，不過設置完成後能使用標籤導文章，也相當方便。文章「Step5」的部份設置較為靈活，此法也可以試出其他的玩法；例如技研可樂「電腦版」網頁的首頁及文章頁側邊欄即為本篇文章的變化版，主要是將「max-results=1」設定為「5」再加入了「CSS」拉版的變化，有興趣的話大家不妨可以多做嚐試。
BLOG主你好，很高興找到這一篇文章，由於個人關係文章內容沒有略縮圖的，請問這個文章置頂的代碼有沒有單純文字形式的呢？
回覆刪除試著將 STEP2 代碼中第 60 行的『' + pta + '』刪除，應該就不會顯示縮圖。
刪除其他位置行距的部份 CSS 重拉一下就可以使用。