Replies: 3 comments 4 replies
-
|
As far as I can see, distill.pub does not allow to auto-generate TOC, it must be written up manually. |
Beta Was this translation helpful? Give feedback.
-
|
@alshedivat Thank you for your response. It seems that the function |
Beta Was this translation helpful? Give feedback.
-
|
@shchur have you found a way to create TOC? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, no. |
Beta Was this translation helpful? Give feedback.
-
|
I tried adding these to |
Beta Was this translation helpful? Give feedback.
-
|
I have found the following ad-hoc solution (courtesy of Yang Song).
<style>
d-article d-contents {
align-self: start;
grid-column: 1 / 4;
grid-row: auto / span 3;
width: max(70%, 300px);
margin-right: 0px;
margin-top: 0em;
display: grid;
grid-template-columns:
minmax(8px, 1fr) [toc] auto
minmax(8px, 1fr) [toc-line] 1px
minmax(32px, 2fr );
}
d-article d-contents nav {
grid-column: toc;
}
d-article d-contents .figcaption {
line-height: 1.4em;
}
d-article d-contents .toc-line {
border-right: 1px solid rgba(0, 0, 0, 0.1);
grid-column: toc-line;
}
b i {
display: inline;
}
d-article d-contents {
align-self: start;
grid-column: 1 / 4;
grid-row: auto / span 4;
justify-self: end;
margin-top: 0em;
padding-right: 3em;
padding-left: 2em;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
d-contents nav h3 {
margin-top: 0;
margin-bottom: 1em;
}
d-contents nav div {
color: rgba(0, 0, 0, 0.8);
font-weight: bold;
}
d-contents nav a {
color: rgba(0, 0, 0, 0.8);
border-bottom: none;
text-decoration: none;
}
d-contents ul {
padding-left: 1em;
}
d-contents nav ul li {
margin-bottom: 0.25em;
}
d-contents nav a:hover {
text-decoration: underline solid rgba(0, 0, 0, 0.6);
}
d-contents nav ul {
margin-top: 0;
margin-bottom: 6px;
}
d-contents nav > div {
display: block;
outline: none;
margin-bottom: 0.8em;
}
d-contents nav > div > a {
font-size: 13px;
font-weight: 600;
}
d-contents nav > ul > li > a:hover {
text-decoration: none;
}
@media (max-width: 1300px) {
d-article d-contents {
justify-self: start;
align-self: start;
grid-column-start: 3;
grid-column-end: -3;
padding-bottom: 0.5em;
margin-bottom: 1em;
padding-top: 0.5em;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(0, 0, 0, 0.1);
}
}
</style>
<d-contents>
<nav class="l-text figcaption">
<h3>Contents</h3>
<div><a href="#first-section">First section</a></div>
<div><a href="#second-section">Second section</a></div>
<ul>
<li><a href="#subsection">Subsection</a></li>
</ul>
</nav>
</d-contents>The names of the sections (as in ## First section
...
## Second section
...
### Subsection |
Beta Was this translation helpful? Give feedback.
-
|
I was able to generate an automatic TOC by following the official jekyll-toc guide as mentioned in the default distill post in al-folio. Steps
<d-byline></d-byline>
<!-- change starts from here -->
<d-article>
<d-contents>
<nav class="l-text figcaption">
<h3>Contents</h3>
{% toc %}
</nav>
</d-contents>
{{ content }}
</d-article>
<!-- change ends here -->
<d-appendix>
Preview
Maybe?I just wish that the TOC would stay on the side even if I scroll through the post. That would make a lot more sense. Can this be done? |
Beta Was this translation helpful? Give feedback.
-
Thank you for such a great theme!
I would like to enable the table of contents in a distill-style blog post (similar to the TOC in posts on distill.pub, see picture below)
It seems that the functionality to do this is present in the code (
al-folio/assets/js/distillpub/template.v2.js) but, unfortunately, I wasn't able to figure out how to enable it. I tried addingd-toc: trueandtoc: trueto the front matter of the post, but that didn't have any effect. I will appreciate any pointers.EDIT: A solution is provided in the comment below.
Beta Was this translation helpful? Give feedback.
All reactions