yaohaixiao / outline.js

outline.js - 自动生成文章导读(Table of Contents)导航的 JavaScript 工具。会自动分析文章中的标题( h1~h6 )标签,并生成文章段落层次结构的导读导航菜单。
https://yaohaixiao.github.io/outline.js/
MIT License
130 stars 16 forks source link

兄弟,这个插件如何直接就显示出目录导航,而不用点击列表再显示目录导航? #41

Closed nottellyou closed 8 months ago

nottellyou commented 9 months ago

兄弟,这个插件如何直接就显示出目录导航,而不用点击列表再显示目录导航?

nottellyou commented 9 months ago

当我用上这一句的时候:

$(document).ready(function(){
    $('.outline-icon').click();
})

当点击页面空白处时,目录导航隐藏了。

nottellyou commented 9 months ago

第二个问题:是否可以通过font的size属性来进行进行内容目录导航?如果不行,我可以手工提取文章内容组成数据,但如何将数据给到outline.js呢?目前我通过宝塔面板搭建了dz论坛用来写笔记,但发现dz论坛生成的都是

<font size=5>感谢outline.js提供这么好用的插件,而且还是原生</font>

这些代码。

第三个问题:如何设置点击空白处目录导航禁止自动缩回去呢?

希望各位高手指点一下,小弟一新手,搞不定。先谢过帮助过的人。

nottellyou commented 9 months ago

第4个问题:滚动时如何加上一定的高度(px)。比如:当前页面,滚动到页面最底部,可以发现有类似于菜单盖在页面之上,当点击目录导航时,会被这个菜单盖住。所以想加个高度:即当前的高度-固定页面菜单的高度,这样刚好定位。

yaohaixiao commented 9 months ago

不好意思啊,才看到你的反馈,问题2目前还暂时处理不了,问题4看看设置 stickyHeight 属性,高度值就是你的那个挡住文章导航菜单的高度:

    // 页面中其它 sticky 或者模拟 skicky 的 fiexed 定位的 DOM 元素的高度。例如 wordpress 系统中,
    // 就会有 sticky 定位的导航菜单。这些 sticky 元素脱离了正常的流布局后,原来 h1~h6 标题标签的 
    // offsetTop 计算会出现偏差。sticky 元素会遮挡标题,因此针对页面中有其它 sticky 元素会遮挡标题,
    // 因此针对 sticky 布局时,需要设置 stickyHeight 高度。outline.js 会根据 stickyHeight 和计
    // 算出的标题的 offsetTop 值重新计算滚动定位;
    // 说明:outline.js 主要用于文章详情页面,
    // 因此 stickyHeight 仅针对 top: 0,且 sticky 定位元素在文章内容区域上方的位置;
    stickyHeight: 0,

其余的问题我会尽快处理

nottellyou commented 8 months ago

@yaohaixiao 多谢。第四个问题已经完美解决defaults.stickyHeight = 20;

yaohaixiao commented 8 months ago

其余计个问题都修复了,添加了新的参数:

// 点击空白处(非独立导航菜单),收起导航菜单 closeOnClickModal: true, // 有独立导航菜单时,是否默认显示菜单 showNavModalFirst: false,

问题2,我会作为新的功能处理,这个问题我就关了