如何将asciidoctor与tocify一起用于动态toc?

问题描述

默认情况下， asciidoctor 创建一个静态toc.这非常酷，但是对于较长的文档，最好是toc可以稍微紧凑一些，并突出显示读者当前在文档中的位置.

By default, asciidoctor creates a static toc. This is very cool but for long documents, it would be nice to if the toc could be somewhat more compact and would highlight where in the document the reader currently is.

这时，出现了 tocify .Tocify是一个不错的Javascript解决方案，正好涵盖了这.

At this point, tocify comes in. Tocify is a nice Javascript solution exactly to cover this.

现在的问题是:如何在asciidoctor中使用tocify?

Now the question is: how to use tocify with asciidoctor?

Asciidoctor 问题699 与此处相关.

Asciidoctor issue 699 is relevant here.

推荐答案

启用 docinfo处理在您的asciidoc文件中，例如通过将以下选项传递给asciidoctor:

Enable docinfo processing in your asciidoc files, e.g. by passing the following options to asciidoctor:

-a toc=left -a docinfo=shared

在具有以下内容的asciidoc文件旁边添加一个docinfo.html文件:

Add a docinfo.html file next to your asciidoc files with the following content:

<!-- 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 () {
        // Add a new container for the tocify toc into the existing toc so we can re-use its
        // styling
        $("#toc").append("<div id='generated-toc'></div>");
        $("#generated-toc").tocify({
            extendPage: true,
            context: "#content",
            highlightOnScroll: true,
            hideEffect: "slideUp",
            // Use the IDs that asciidoc already provides so that TOC links and intra-document
            // links are the same. Anything else might confuse users when they create bookmarks.
            hashGenerator: function(text, element) {
                return $(element).attr("id");
            },
            // Smooth scrolling doesn't work properly if we use the asciidoc IDs
            smoothScroll: false,
            // Set to 'none' to use the tocify classes
            theme: "none",
            // Handle book (may contain h1) and article (only h2 deeper)
            selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
            ignoreSelector: ".discrete"
        });

        // Switch between static asciidoc toc and dynamic tocify toc based on browser size
        // This is set to match the media selectors in the asciidoc CSS
        // Without this, we keep the dynamic toc even if it is moved from the side to preamble
        // position which will cause odd scrolling behavior
        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>

这篇关于如何将asciidoctor与tocify一起用于动态toc?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！