启用在你的asciidoc文件中文档信息处理,例如通过将以下选项传递给asciidoctor:
-a toc=left -a docinfo=shared
在您的asciidoc文件旁边添加一个名为
docinfo.html
的文件,并使用以下内容:
<!-- Generate a nice TOC -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->
<style>
.tocify-header {
font-style: italic;
}
.tocify-subheader {
font-style: normal;
font-size: 90%;
}
.tocify ul {
margin: 0;
}
.tocify-focus {
color: #7a2518;
background-color: rgba(0, 0, 0, 0.1);
}
.tocify-focus > a {
color: #7a2518;
}
</style>
<script type="text/javascript">
$(function () {
$("#toc").append("<div id='generated-toc'></div>");
$("#generated-toc").tocify({
extendPage: true,
context: "#content",
highlightOnScroll: true,
hideEffect: "slideUp",
hashGenerator: function(text, element) {
return $(element).attr("id");
},
smoothScroll: false,
theme: "none",
selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
ignoreSelector: ".discrete"
});
var handleTocOnResize = function() {
if ($(document).width() < 768) {
$("#generated-toc").hide();
$(".sectlevel0").show();
$(".sectlevel1").show();
}
else {
$("#generated-toc").show();
$(".sectlevel0").hide();
$(".sectlevel1").hide();
}
}
$(window).resize(handleTocOnResize);
handleTocOnResize();
});
</script>