這個文章目錄生成小工具，是用標籤小工具改造而成的，安裝灰熊的容易，設定也很簡單，撰寫文章時只要為每個小標題，選擇 H2 當標題就可以了。
步驟 1
複製下面的 XML碼 ，貼在 隨便一個小工具的欄位上。點按下面的 Code 複製 XML碼：
<b:widget cond='data:view.isSingleItem' id='Label72' locked='false'
title='摘要索引' type='Label' version='2' visible='true'>
<b:includable
id='main' var='this'>
<details class='collapsible extendable'>
<b:attr name='open' value='open'/>
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.labels' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='cloud'/>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display +
"-label-widget-content"'/>
<ol id='chapter'/>
<script>
let postBody = document.getElementById("post-body-<b:eval
expr='data:widgets.Blog.first.posts[0].id'/>");
let x ='<data:widget.instanceId/>';
//
<![CDATA[
var titleChapter =
postBody.querySelectorAll("h2,h2");
if (titleChapter.length >0) {
var leChapteraptor=[];
for (let i = 0; i < titleChapter.length; i++) {
var z = i<9 ?
"0" : '';
anchorChapter = "chapitre-"+z+(i+1);
titleChapter[i].setAttribute("id", anchorChapter);
leChapteraptor[i]="<li><a
href='#"+anchorChapter + "'>" +
titleChapter[i].innerHTML+"</a></li>"; }
document.getElementById("chapter").innerHTML=leChapteraptor.join('');
document.onscroll
= function() {Fix()};}
else {
document.getElementById(x).style.display="none"; }
var dir =
document.getElementById(x);
function Fix() {
if (window.pageYOffset >= 80) {
dir.classList.add("Sticky")
} else {
dir.classList.remove("Sticky");
}}
// ]]></script>
<style type='text/css'>
.post
h2{padding-top:3.5em}
/* 標題和屋頂的距離 */
#<data:widget.instanceId/>{ bottom:110vh;
z-index:200;
background:white;
padding:0 10px;
opacity: 0;
transition:2s;
}
#<data:widget.instanceId/> ol {padding-inline-start: 25px;}
#<data:widget.instanceId/> li a{font-size:18px}
#<data:widget.instanceId/> li{ display: list-item; border:0; }
.Sticky
{
position: fixed;
min-width:250px;
opacity: 0.8 !important;
bottom:5vh !important;
}
</style>
</div>
</b:includable>
<b:includable id='list'/>
</b:widget>
如何安裝?
打開樣板範本，按編輯HTML
在右上角，隨便找個小工具，貼在上面一行
以下是用來示範
沈默
相忘江湖 各自安好
喜歡這季節的清凉，將一些美，撿拾收藏，養在心中，那些慈悲與懂得，便如冬日裡，瞬間邂逅的暖陽，終是感恩的，這一路風塵僕僕，還有人願意伸出手，與你相扶，暖你薄凉；寒冷的日子裡，一聲問候，一個笑臉，一個擁抱，都能溫暖人的心，生命，會因明媚而精彩；歲月，就在相依相扶中漸行漸遠，似水流年中，我們用經歴寫故事，最終，也成了故事裡的人。
留言
張貼留言