首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用autoc js生成文章目录(侧边导航

介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具。...autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的目录导航(独立的侧边栏菜单,或者在文章的开始处生成文章目录)。...支持 AMD 和 CMD 规范; 可以作为独立模块使用,也可以作为 jQuery 插件使用; 支持中文和英文(标题文字); 界面简洁大方; 拥有 AnchorJS 的基础功能;...即支持生成独立文章目录导航菜单,又可以直接在文章中生成目录导航; 可直接在段落标题上显示段落层级索引值; 配置灵活,丰富,让你随心所欲掌控 AutocJS; 1.在前端引入 <script type="text/javascript" src="https://unpkg.com/autocjs@1.3.0/dist/autoc.min.<em>js</em>

4.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Jekyll 文章侧边索引导航

    而在 Hexo 中,即使主题不支持侧边悬浮的优化目录导航,也可以通过最简单的方式在文章的开始位置生成目录。虽然这种目录永远固定在文章开始的地方,但是总算是能够通过大小标题来给读者一个大概的思路。...这种方式需要有 js 代码的介入,增加了运算的成本(虽然其实很小)和维护成本(占比更大)。...后面的例子是采用了 Bootstrap 框架中的 toc js 插件,能够满足目标一,且能跟踪内容位置来切换显示的二级目录,相对来说功能更加强大。...实际上,从需要维护的代码量来说,第一个例子的做法所需的 js 代码应该是算少的,但是不是存在完全不使用 js 代码也能实现这样的功能的方案呢?实际上是存在的。...(采用 CC BY-NC-SA 4.0 许可协议进行授权) 本文标题:《 Jekyll 文章侧边索引导航 》 本文链接:https://lisz.me/tech/webmaster/jekyll-toc.html

    1.6K30

    TAB导航侧边抽屉导航的巅峰对决

    你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫安卓团队给它的名字“侧边抽屉导航”。...但从另外一个角度来说,没有那一排tab导航,让设计看上去干净多了,把导航放进侧边抽屉里,让主内容区域有了更大的空间余地。 侧边抽屉导航这种设计模式兴起于18个月前。...而后,友好而乐于提供指导的Google Play团队建议侧边栏抽屉式导航(navigation drawers)作为一种新的导航方式用于安卓应用。 所以6个月后,我们决定冒险尝试改为侧边导航。...对于侧边栏使用效果的测试,我们采用了15/85方法,即针对15%的用户投放了侧边栏的方案,85%的用户保持Tab导航的方式。...抽屉导航和tab导航对用户使用频率的影响 周使用频率在下降(对比明显),日使用频率在下降,用户在应用中花费的时间在下降。侧边导航在第一轮测试中看起来像个灾难。

    2.8K70

    Typecho中handsome主题如何增加侧边导航

    文章概要:handsome主题在使用的过程中导航栏初始时只有首页一个导航页面,本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航。...php _me("父导航栏名") ?.../li> ---- 代码讲解 导航名称和iconfont图标 如下图所示为父级导航名和子级导航名的代码修改处 1792BB84-AF87-4BC5-A184-6BA93AB50888.jpeg 下面是...iconfont图标的颜色 ---- 超链接 如下图所示修改下面两个框中的代码即可令导航链接到相应页面,其中最上面的框中对应父级导航的超链接,下面框中对应子级导航的超链接 ---- 多级子导航 假若为一个父级导航增加多个子级导航...,则需要多少个子级导航复制以下橙色框中代码多少次并粘贴到下图箭头处

    1.1K30

    WPJAM「网址导航」:最轻便快捷的网址导航插件

    所以我和 xintheme 一起联合做了一个网址导航插件,让你通过最简单的方式就能够创建一个导航站点。...安装 WPJAM「网址导航」 首先所有 WPJAM 出品的插件都需要先安装 WPJAM Basic 插件,然后 WPJAM「网址导航插件安装非常方便,下载上传到插件目录,激活即可,如果没有别的问题的话...,你装了之后就有了这个排序功能,这里就不多说了,详细请查看分类管理插件的详细介绍。...网址导航插件的更多设置 每个插件多多少少都有一些设置,WPJAM 「网址导航」也不例外: 前面三项设置页面的标题,SEO 关键字和描述,然后设置主色调,接下来的两项比较重要: 勾选「首页」,那么网址导航的页面将直接提到你网站的首页...,然后插件是免费的:

    2.4K40

    基于docsify的基本操作&配置

    } 同级目录新建_navbar.md构建导航栏 # url可指向指定html或pdf文件,docsify自动渲染 * 导航1 * [子导航](url) * [导航2](url) 侧边栏构建...* 导航1 * [子导航](md/xxx/xxx.md) * 导航2 * [子导航](md/xxx/xxx.md) 依据目录构建相应的文档内容 根据侧边栏目录构建关联的.md文档内容...这个时候当点击指定文件目录下的文件时候,加载的也是同级下的对应路径引用的文件(但是这种方式构建的话过于繁琐,不建议) ​ 方案2:配置路由别名(在docsify中See #301) alias: { // 配置导航栏和侧边栏的路由别名...​ 如果文档里的 script 是内联脚本,可以直接执行;而如果是外链脚本(即 js 文件内容由 src 属性引入),则需要使用此插件。.../docsify-pagination.min.js"> 更多插件参考:https://docsify.js.org/#/awesome?

    2.7K30

    侧边导航(移动端商品--评论--详情)随楼层滑动高亮显示

    举一个简单的例子:去年圣诞公司要求页面上要有雪花飘落的效果,当时的第一想法,就是canvas绘图制作这个动画(必定培训的时候学的飞机大战有类似的效果),后来发现很难实现,于是就在网上找了一个jquery.snow.js...(因为那是抄的),后来也写了一些轮播,导航点击页面滑动等(自己认为的插件),后来发现可复用性的很差,没有起到插件的作用。....offset().top + newOptions.scrollTop; data.push(item); }); } # 3.建立'滚动监听函数,同时激活侧边导航高亮显示...list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass); } }); } # 4.建立'点击激活侧边导航高亮显示...web端首页动画的js,就是先将所有楼层查找出来,然后将其需要的各个参数放入一个对象,滚动的监听的时候对该数组循环比对的思路。

    2.7K20

    答应大家的建站教程!

    其中 index.html 文件可以对网站进行一些设定,安装某些插件(后面会详细介绍),或者自己进行编码对网站进行优化,README 则能够对网站主页进行渲染。...导航栏 我们通过设置 window.$docsify 中的loadNavbar 属性来设置导航栏。 window....之前再对 _navbar.md文件填充,效果如下 导航栏 1 导航栏 2 导航栏 3 导航栏 4 好啦,到这里,导航栏就完成啦,你可以根据实际需要,设置不同的导航栏数目。...具体实现方式如下 侧边栏 1 侧边栏 2 侧边栏 3 此时发现侧边栏中标题导航已经消失,此时如果想要自定义侧边导航的话,则需要新建 _sidebar.md 并在该文件中定义侧边栏内容,具体实现方式如下...下面给大家,介绍几个常用的插件,进一步完善网站。 插件 搜索功能 这个功能还是比较重要的,这样你就可以在网站中搜索内容,快速定位。 搜索 实现方式也非常简单,只需两步。

    1.4K10
    领券