Add a quick jump to the resulting page

[SUN-SZY]

How to add an outline or sidebar to the generated page, similar to a quick jump toc？

[ylc395]

Add [TOC] in note. It's a markdown syntax.

[SUN-SZY]

Thanks for your answer, I'd like to change the conversion rules for toc in the markdown syntax of the generated article page to be fixed in the sidespace, similar to the sidebar in the hexo blog theme, which helps to read long articles. I found the article topic section in the EJS template and am trying to modify it.<div class="article-content markdown-body"><%- $article.htmlContent %></div>

[ylc395]

Oh, If you're trying to modify EJS template, a little HTML / CSS / JavaScript knowledge is required. How much do you know about them?

[SUN-SZY]

Thank you again for your reply. I have studied HTML/CSS systematically, but I have not systematically learned JavaScript, only part of it. EJS looks more like a combination of them in the development documentation, so it can be understood and has some idea of modification. Trying to modify.

[ylc395]

Here is my solution:

1. use [TOC] markdown syntax in your note to make sure that TOC list will appear in HTML document.
2. add a CSS statement in CSS file:

.table-of-contents {
   position: fixed;
   right: 50px;
}

This is a very simple solution based on pure CSS. Of course you can introduce <script> to do much more thing, including generating and positioning your own TOC.