可以在JBake中使用`:toc:left`吗?

时间:2019-01-27 17:02:37

标签: asciidoctor jbake

我想用JBake渲染asciidoc页面,这些页面的左框架中有浮动TOC。但是,JBake似乎仅支持将TOC放在文件顶部。

如果我用包含以下文档标题语法的页面“烘烤”网站,则目录位于顶部。

= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...

但是,如果我使用asciidoctor cli转换相同的文件,则toc将按预期方式在左侧呈现。这是JBake的限制,还是我做错了什么?

1 个答案:

答案 0 :(得分:0)

:toc: left对于嵌入式asciidoc无效。有关详细信息,请参见[1]。

但是,仍然有希望,因为您可以更改样式表。 首先,更改模板以将类"toc2 toc-left"添加到body标签。这为左侧的toc留出了空间。

然后通过将其复制并粘贴到标题中,将toc2样式从原始aciidoctor样式表复制到toc样式:

      <style>
      @media only screen and (min-width:768px){
          #toctitle{font-size:1.375em}
          #toc.toc{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto; padding-top: 60px;}
          #toc.toc #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
          #toc.toc>ul{font-size:.9em;margin-bottom:0}
          #toc.toc ul ul{margin-left:0;padding-left:1em}
          #toc.toc ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
      }
      @media only screen and (min-width:1280px){
          body.toc2{padding-left:20em;padding-right:0}
          #toc.toc{width:20em; padding-top: 60px;}
          #toc.toc #toctitle{font-size:1.375em}
          #toc.toc>ul{font-size:.95em}
          #toc.toc ul ul{padding-left:1.25em}
      }
      </style>

这应该可以解决您的问题。

[1] https://asciidoctor.org/docs/user-manual/#using-a-toc-with-embeddable-html