可以在博客某个位置固定显示一个目录吗？

[HPDell]

你好~

可以在博客某个位置固定显示一个目录吗？这样可能看起来更方便一些。

[upupming]

可以在文章右侧的sidebar显示文章目录结构。

• 在/layout/_partial/common/sidebar.swig的aside里面（与“最新文章”、“搜索”同一级）插入书签代码：

<div class="post-toc">
        {{ toc(page.content) }}
</div>

• 修改相应的scss文件美化显示，在/source/scss/views/layout/_sidebar.scss中插入：

.post-toc ol {
    margin: 0;
    padding: 0 2px 5px 10px;
    text-align: left;
    list-style: none;
    font-size: $main-fs;

    a {
        transition-property: all;
        color: $main-color;
        border-bottom-color: $main-color;

        &:hover {
            color: $main-color--hover;
            border-bottom-color: $main-color--hover;
        }
    }
}

测试结果如下图：

[mrdear]

这样的体验并不是很好,影响右侧边栏. 我现在的解决方式为使用hexo-toc插件,在文章开头展示目录,如下图

或者说做一个悬浮菜单按钮的话应该会更好吧.前端大佬们尝试下

[BruceYuj]

hexo-toc插件使用在skapp中，锚点定位受到布局的影响，体验会有点不好。 悬浮菜单按钮的处理方式比较好。

[upupming]

要不在返回顶部旁边加一个类似的按钮，定位到目录？

[BruceYuj]

@upupming 这样不是相当于多了一步了吗？体验可能也不会太好

[HPDell]

如果可以想百度百科那样，往下滚动之后目录就固定在页面顶端会就好了

[mrdear]

我尝试加了下，在侧边栏，当滑动到顶部是钉住。 还存在的问题：

1. 锚点不准确的问题，不知道怎么解决。。。我前端渣渣
2. 动画效果加不好，貌似display：none就直接消失了。。。

可以参考下我的博客上的目录，https://mrdear.cn/2018/05/29/framework/dubbo/dubbo--loadbalance/

[BruceYuj]

@mrdear 最近一直在忙

1. 锚点定位不准，是因为导航栏绝对定位的原因，这个有很多种常规的解决方法，网络上有
2. 你是在什么情况下直接用display为none的？

[mrdear]

就是当滑动到顶部时会把下面的模块隐藏掉，这个不会加动画。。。

主要是让大家看看这种体验好不好，好的话博主可以在主题中加入并优化这种toc展示方式。

[BruceYuj]

有处理多级标题吗？@mrdear

[mrdear]

@BruceYuj hexo的toc函数会自动处理，我不是专业前端，写的不好，如果这种做法可以的话，希望作者能在原主题上加上这个功能。

[HPDell]

我已经改好了这个样式。效果如下：

同时给主题的标题增加了 padding-top 和 margin-top，使得锚点定位增加偏移， 保证锚点定位准确。

[cayzlh]

@BruceYuj hexo的toc函数会自动处理，我不是专业前端，写的不好，如果这种做法可以的话，希望作者能在原主题上加上这个功能。

大神， 具体怎么做的呢。。

[jitwxs]

我已经改好了这个样式。效果如下：

同时给主题的标题增加了 padding-top 和 margin-top，使得锚点定位增加偏移， 保证锚点定位准确。

能否提供代码？