WP -目錄自動產生器
當文章越來越長，建立文章目錄，可以有效的讓讀者快速了解整個文章的架構，帶來更好的閱讀體驗，若用原始的手工方式建立摘要目錄，真的太辛苦了。
這個文章目錄生成小工具，安裝灰熊的容易，設定也很簡單，撰寫文章時只要為每個小標題 選擇 h3 當標題就可以了。
PS : 每個 WordPress 的佈景主題都會不同，位置若不滿意，請自己喬 ... 🛠⚙ ，<H3>
若已被使用，請自行更換其他標籤，標題和頂端的距離，若你的佈景主題 TOP
有選單或其他物件覆蓋，需調整 padding-top 的高度。
<details id="tab-content"> 預設是閉合的，若要一開始出現時，就處於打開的狀況，須在 <details>
標籤裡加上屬性 OPEN，<details id="tab-content"
open>....。
點按下面的 Code 複製：
<details id="tab-content">
<summary>章節目錄</summary>
<ol id='chap'/>
</details>
<style
type='text/css'>
html{scroll-behavior: smooth;}
#main
h3{padding-top:1em} /* 標題和屋頂的距離
*/
#tab-content {
cursor: pointer;
bottom:-90vh;
z-index:200;
background:
rgba(0,0,0,0.5) ;
padding: 10px;
transition:2s;
position:
fixed;
min-width:200px;
max-width:350px;
max-height:70vh;
}
#tab-content
summary{ font-size:22px; color:#ff3;}
#tab-content
summary::marker{color:red}
#tab-content ol {background:
#f6f6d6; color: #68f; padding:10px 30px}
#tab-content li
a{font-size:18px; color:#777}
#tab-content li:hover a{color:#f2e;
}
#tab-content li{ display: list-item; line-height:1.8; }
.S-tab
{
bottom:0px !important;
}
</style>
<script>
// <![CDATA[
let Doc = document;
let M =
Doc.getElementById("main").querySelectorAll("h3");
let Chap = Doc.getElementById("chap");
let Tab =
Doc.getElementById("tab-content");
if (M.length >0) {
let Chapter=[];
for (let i = 0; i < M.length; i++) {
var z =
i<9 ? "0" : '';
Ax = "chapit-"+z+(i+1);
M[i].setAttribute("id",
Ax);
Chapter[i]="<li><a href='#"+Ax + "'>" +
M[i].innerHTML+"</a></li>"; }
Chap.innerHTML=Chapter.join('');
Doc.onscroll
= function() {
if (window.pageYOffset >= 200) {
Tab.classList.add("S-tab");
}
else { Tab.classList.remove("S-tab");}
}}
else {
Tab.style.display="none"; }
// ]]></script>
選取佈景主題編輯器 >> 單篇文章 (single.php)，將程式碼插入以下的位置。
Blogger 目錄自動生成小工具
以下是用來演繹示範
沈默
不要試圖鶴立雞群
假如你是一隻鶴，不幸誤入雞群，就不要試圖鶴立雞群，而是要離開那群雞。
遠離群雞不單是為了遠離紛爭，更重要的是避免被傳染然後變得同樣愚蠢。
當然，在你實力還不足以能夠逃離這群雞時，就要學會做一隻孤獨而沉默的鶴，而不要試圖批評、教育其中的某一隻雞。
因為它聽不懂你的話，除非他也是誤入雞群的另一隻鶴。
心理學者說，當你非常討厭某個人的時候，不要把注意力過多地放在他身上。
你改變不了別人，只有通過提升自己的能力，跳出這個圈子。
專注於自己每天進步一點點，討厭的人就會離你越來越遠。
協助架設 Blogger / 網站 服務
舊 
張貼留言