navigator in the long post page

[jiliguluss]

Description

Hello Louis, thank you for developing such a beautiful theme, I really like it.

However, I encountered an issue when using it, which is the lack of a navigation control for very long articles. This control is used to display the current section of the content and to quickly jump between sections.

The following image is an example:

Explanation / motivation

Currently, the generated table of contents (TOC) is usually at the beginning of the article. When I read to the middle of the article and want to quickly navigate to a specific section, it is quite difficult.

I've noticed that similar requests have been mentioned in past issues [#40 #410] but these issues have already been closed, and I haven't found a viable solution yet. I've tried using the hexo-toc plugin, but it doesn't seem to work for implementing a sidebar navigation feature for long articles.

At the same time, I have noticed that other themes, such as Next and Bufferfly, are able to provide this functionality. I really appreciate the Tranquilpeak theme and do not wish to switch to another. However, my blog posts are typically quite lengthy, and having a navigation control on the article page would, I believe, greatly enhance the reading experience.

Additional information

I am not proficient with CSS and JavaScript, so I am unable to implement this feature. I need your help.

[jiliguluss]

Hi Louis. I attempted to use the tocbot plugin. By adding the following code in script.ejs, it is possible to automatically generate a table of contents for each post.

<% if (theme.tocbot.enable) { %>
  <script src="https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.js"></script> 
  <script type="text/javascript">
      tocbot.init({
      tocSelector: '<%- theme.tocbot.tocSelector %>', // 目录容器的 ID 或 class
      contentSelector: '<%- theme.tocbot.contentSelector %>', // 内容容器的 ID 或 class
      headingSelector: '<%- theme.tocbot.headings %>', // 你想要包含在目录中的标题级别
      position: 'right', // 目录的位置（'left' 或 'right'）
      scrollSmooth: true, // 是否平滑滚动到标题
      activeClass: 'active', // 活动标题的类名
      onToggle: function(e) { // 切换目录项时的回调函数
        console.log('Toggled', e);
      }
    });
  </script> 
<% } %>

It seems that tocbot can also automatically generate front-end controls. Therefore, I created a toc.ejs file to define the ID of the control as follows:

<% if (theme.tocbot.enable) { %>
    <div id="post-toc"></div>
<% } %>

And then included it in layout.ejs:

I'm glad to see that the table of contents has indeed appeared on the post pages. However, the position of the position is quite odd, and it does not scroll with the article.

I would like to place the table of contents in the blank space on the right side, so that it does not conflict with the sidebar on the left. As I scroll down to read the article, the table of contents should remain visible, highlighting the section I am currently in.

It seems that this will involve a lot of CSS work related to the page layout and styling, which is a bit challenging for me. I hope to receive your help.

Thanks very much.

[jiliguluss]

I add this code, and it seems like the issue is resolved. So I will close this issue. Thank you again for providing such a nice theme.