[教學]5分鐘讓你Blogger的標籤改成樹狀階層式 - 櫻桃椒
[教學] Blogger 文章頁面製作分類與標籤 - 技研可樂
因為 Blogger 只提供標籤功能
要做分類的話有一個最簡單的方式：就是一篇文章一個標籤，直接當分類用
但這樣會有兩個問題
1. 標籤一多時分類會一大坨。 ---- 用樹狀標籤解決
2. 我還是要用標籤怎麼辦。 ---- 用不顯示第一個標籤解決
先上最後結果：
樹狀標籤
一、先去備份主題
參考：105.07.02 如何備份/還原Blogger主題二、再來前往"版面配置"，點選"新增小工具"
找到標籤，什麼都不用改直接儲存
三、前往"主題"，點選"編輯 HTML"
四、跳至小工具，前往剛剛新增的標籤 (Label 2)
如果一開始沒有其他標籤就是 Label 1
把以下的區塊
<b:widget id="Label2" locked="false" title="標籤" type="Label"> ....中間省略... </b:widget> ← 看仔細了，要第一個出現的換成
(程式碼修改自[教學]5分鐘讓你Blogger的標籤改成樹狀階層式 - 櫻桃椒
那邊有個地方打錯，還有我加大了縮排距離)
<107.09.16 更新> 把圖片來源從 http 改成 https
<b:widget id='Label2' locked='false' title='文章分類' type='Label' version='1'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<script>
var label_tree = new Object();
function tn(tag) {
return tag.substring(1, tag.length - 1);
}
function build_node(tree, idx, cnt) {
if (!tree[idx[0]]) {
tree[idx[0]] = new Object();
tree[idx[0]][' _cnt '] = 0;
tree[idx[0]][' _item '] = new Array();
}
tree[idx[0]][' _cnt '] = parseInt(tree[idx[0]][' _cnt ']) + parseInt(cnt);
if (idx.length == 1) {
return tree[idx[0]];
}
return build_node(tree[idx[0]], idx.slice(1), cnt);
}
function add_label(_name, _cnt, _url, _dir) {
var e1 = new RegExp(& quot; \\[(.+?) \\] & quot;, & quot; g & quot;);
var e = new RegExp(& quot; \\[(.+) \\] & quot;, & quot; g & quot;);
var m = _name.match(e);
var tag = _name;
var obj = new Object();
obj[' tag '] = _name;
obj[' cnt '] = _cnt;
obj[' dir '] = _dir;
obj[' url '] = _url;
if (m) {
obj[' tag '] = _name.substring(m[0].length, _name.length);
var m1 = _name.match(e1);
if (m1) {
node = build_node(label_tree, m1, _cnt);
if (node) {
node[' _item '].push(obj);
}
}
}
else {
if (!label_tree[' _item ']) {
label_tree[' _item '] = new Array();
}
label_tree[' _item '].push(obj);
}
}
function menu_exp(id) {
var ul = document.getElementById(& quot; ul_ & quot; + id);
var li = document.getElementById(& quot; li_ & quot; + id);
if (ul.style.display == & quot; none & quot;) {
ul.style.display = & quot; block & quot;
li.style.backgroundImage = & quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHk10S8Ra5ptFR5R4K_faqizdL7Q8VgqcX7n51xkjVIBffZNfb5lfDXq9J5lkie_Cr0kfeUAVAfz1GN-FU1fVLiYu3Y8iSBEsrDwxrNbdAl59JLaTWKYBYVqjvqa6VZsFwR4vFy9Vp_s/)"
}
else {
ul.style.display = & quot; none & quot;
li.style.backgroundImage = & quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP2c9vWn9pxQnrE2qjDPzQjSt1gwFUJ5Tc78X4Z7CP1y9CColncVpB_XNn4n3gxcLi3G995EkDrc-MJXdTcbBVZuwN04XNYvo9Y6l8kU80sKKRrsB5eBPLFtR_YHXvrXjRJ4qj04oDfIs/)"
}
}
function draw_obj(obj) {
document.write(& quot;& lt; li style =' padding - left: 0px; margin - left: 10px;'& gt;& quot;);
document.write(& quot;& lt; a dir ='& quot; +obj[' dir ']+& quot;' href ='& quot; +obj[' url ']+& quot;'& gt;& quot; +obj[' tag ']+& quot;& lt; /a>");
document.write(& quot;& lt; span dir ='& quot; +obj[' dir ']+& quot;'& gt; (& quot; +obj[' cnt ']+& quot;)& lt; /span>");
document.write(& quot;& lt; /li>\n");
}
function draw_tree(tree) {
for (var tag in tree) {
if (tag != ' _item '& amp;& amp; tag != ' _cnt ') {
var rid = Math.random();
document.write(& quot;& lt; li class=submenu id = li_ & quot; +rid +& quot; onclick = menu_exp('& quot; +rid +& quot;'); style =' font - weight: bold; padding - left: 20px; margin - left: 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP2c9vWn9pxQnrE2qjDPzQjSt1gwFUJ5Tc78X4Z7CP1y9CColncVpB_XNn4n3gxcLi3G995EkDrc-MJXdTcbBVZuwN04XNYvo9Y6l8kU80sKKRrsB5eBPLFtR_YHXvrXjRJ4qj04oDfIs/) no-repeat left 0px;cursor: pointer'>");
document.write(tn(tag));
document.write(& quot; (& quot; +tree[tag][' _cnt ']+& quot;)& quot;);
document.write(& quot;& lt; /li>");
document.write(& quot;& lt; ul id = ul_ & quot; +rid +& quot; style =' display: none; padding - left: 20px; margin - left: 8px;'& gt;& quot;);
draw_tree(tree[tag]);
document.write(& quot;& lt; /ul>\n");
}
}
if (tree[' _item ']) {
for (var i = 0; i & lt; tree[' _item '].length; i++) {
draw_obj(tree[' _item '][i]);
}
}
}
</script>
<b:loop values='data:labels' var='label'>
<script>
add_label(' <data: label.name /> ',' <data: label.count /> ',' <data: label.url /> ',' <data: blog.languageDirection /> ');
</script>
</b:loop>
<ul>
<script>
draw_tree(label_tree);
</script>
</ul>
<b:include name='quickedit' />
</div>
</b:includable>
</b:widget>
有點多，不過這樣樹狀就完成了
使用方式就是利用標籤
例如：[OuO][QuQ]Rust 就會長這樣
不過這樣下面的標籤顯示就會出錯
如下面橘框處那樣，不過正常應該要呈現紅框那樣
經過調整並利用標籤會自動排序，自動忽略掉第一個標籤(分類用)
不顯示第一個標籤
一、重新備份，檔名不要跟剛剛一樣啊 OuO
二、一樣開啟"編輯 HTML"
覺得滾輪會亂跳可以編輯 一、備份下來的 .xml 檔案，記得複製一份原版我是直接用 vscode 編輯啦 OuO
三、找到加入位置
找 <b:include cond="data:post.sharePostUrl" data="post" name="shareButtons"> 用 ctrl+f
在下面的 </div> </div> 下面貼上
(程式碼修改自[教學] Blogger 文章頁面製作分類與標籤 - 技研可樂)
<!-- 不顯示分類標籤 START -->
<style>
span.post-tag-title {
font-weight: 700;
font-size: 13px;
}
span.post-tag,
span.post-comma {
font-size: 13px;
}
span.post-tag::before {
content: '#';
}
span.post-no-first-tag-width {
margin: 0px 0px 0px 5px;
}
</style>
<span class='post-no-first-tag'>
<span class='post-no-first-tag-width'>
<br/>
<span class='post-tag-title'>標籤：</span>
<b:loop values='data:post.labels' var='label' index='index'>
<!-- 迴圈值：文章標籤，應用項目 label -->
<meta expr:content='data:label.name' property='article:section' />
<b:if cond='data:index != "0"'>
<!-- 如果標籤不是第一個 -->
<b:if cond='data:label.isLast != "true"'>
<!-- 如果標籤不是最後一個 -->
<a expr:href='data:label.url' expr:title='data:label.name' rel='section'>
<span class='post-tag'><data:label.name/></span>
<!-- 顯示標籤名稱 -->
</a>
<span class='post-comma'>, </span>
<b:else/>
<a expr:href='data:label.url' expr:title='data:label.name' rel='section'>
<span class='post-tag'><data:label.name/></span>
<!-- 顯示標籤名稱 -->
</a>
</b:if>
</b:if>
</b:loop>
</span>
</span>
<!-- 不顯示分類標籤 END -->
四、關閉預設標籤顯示
好像不能用 "版面控制" 修改了 QuQ可以先去試試看
不行就把以下程式碼註解即可
<!--<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span> </div>-->
這樣就完成了
最後就是做分類，累 QuQ
重新給每一篇文章一個分類的標籤 (工作量有點大所以我還沒做w
文章分類、標籤雲可以選擇要顯示那些標籤，所以並存不用擔心會有奇怪的標籤出現
參考資料：
下面兩個連結放三次了，很怕被吉 @@
[教學]5分鐘讓你Blogger的標籤改成樹狀階層式 - 櫻桃椒
[教學] Blogger 文章頁面製作分類與標籤 - 技研可樂
-
圖解：Blogger 系統標籤的語法，控制要呈現哪些內容
Blogger Help - Widget Tags for Layouts - index 用法來自這裡
Blogger Theme Data Tags for Widgets
How do I remove the space between inline-block elements?
沒有留言:
張貼留言