可以在 JBake 中使用 `:toc: left` 吗?
Is it possible to use `:toc: left` with JBake?
我想用 JBake 呈现左框架中有浮动目录的 asciidoc 页面。然而,JBake 似乎只支持将 TOC 放在文件的顶部。
如果我 'bake' 我的站点的页面具有以下文档 header 语法,则目录位于顶部。
= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...
但是,如果我使用 asciidoctor
cli 转换同一个文件,toc 会按预期呈现在左侧。这是JBake的限制,还是我做错了什么?
:toc: left
不是嵌入式 asciidoc 的有效选项。详见[1]。
但是,仍然有希望,因为您可以更改样式表。
首先,更改您的模板以将 类 "toc2 toc-left"
添加到 body 标签。这为左侧的目录腾出了空间。
然后将 toc2
样式从原始 aciidoctor 样式表复制到 toc
样式,方法是将其复制并插入 header:
<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
我想用 JBake 呈现左框架中有浮动目录的 asciidoc 页面。然而,JBake 似乎只支持将 TOC 放在文件的顶部。
如果我 'bake' 我的站点的页面具有以下文档 header 语法,则目录位于顶部。
= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...
但是,如果我使用 asciidoctor
cli 转换同一个文件,toc 会按预期呈现在左侧。这是JBake的限制,还是我做错了什么?
:toc: left
不是嵌入式 asciidoc 的有效选项。详见[1]。
但是,仍然有希望,因为您可以更改样式表。
首先,更改您的模板以将 类 "toc2 toc-left"
添加到 body 标签。这为左侧的目录腾出了空间。
然后将 toc2
样式从原始 aciidoctor 样式表复制到 toc
样式,方法是将其复制并插入 header:
<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