Skip to main content

Blogspot 单篇文章目录(Single Post TOC)

Javascript TOC Robot 抄了一段 Blogspot 文章目录(post TOC)代码,如下:

代码


<script>
/* Generate TOC
*
* :param classname: Class to which all TOC items belong.
* :param tocID: ID of the TOC element, should be <div></div>.
*/
function gen_toc(classname, tocID) {
var alltags = document.getElementsByClassName(classname);  // all TOC items
var toc_content = "<h3>Table of Contents</h3><ol>";  // inner HTML content of TOC element
var toc_link = ' <a href="#' + tocID + '">(' + tocID + ')</a>';  // link to TOC element for each TOC item
for (var i = 0; i < alltags.length; i++) {
var toc_item = alltags[i].innerText;  // just the inner text from the TOC item's element, ie: no links
var toc_item_enc = encodeURIComponent(toc_item).replace(" ", "-").toLowerCase();  // make URL safe ID string
alltags[i].setAttribute("id", toc_item_enc);  // set ID of TOC item
alltags[i].innerHTML += toc_link;  // add back link to TOC from TOC item
toc_content += '<li><a href="#';
toc_content += toc_item_enc;
toc_content += '">';
toc_content += toc_item;
toc_content += '</a></li>';
};
toc_content += '</ol>';
console.log(toc_content);
var toc = document.getElementById(tocID);  // TOC element
toc.innerHTML = toc_content;
};
document.body.onload = gen_toc("toc_item", "toc");
</script>

使用步骤


安装 Blogspot Post TOC 代码

在 Blogspot 模板编辑器中,找到 </body>,在紧邻此处之前加入以上 JS 代码,保存等待更新。

撰写网誌

撰写文章后台的第一行,加入 <div id="toc"></div>

每一个分级标题都加入 HTML 编码 toc_item,例如<h3 class="toc_item">

说明


网上有许多 Blogspot TOC 都是基于全局的网站地图,如果要在一篇网誌中找到分级标题,接着按照分级标题生成内容目录,Mark Mikofski 的方法有效。之前一直想通过 Stackedit 预设的 Post TOC 实现,不过原生的 CSS 却在列表前加入了两个圆点,属于挺不好看的样式。找到 Javascript TOC Robot 纯属运气。

在 Blogspot 模板里加入 Java Script 需要留意 CDATA 问题,直接加入上述 js 代码并保存会遇到 Blogger.com 报错。解决办法是在代码前加入<//<![CDATA[<,并且加入对应的结束代码。

实现单篇 Blogspot Post TOC 如果遇到困难,可以在本文后留言,我尽量为大家解答。

Comments

TOP