Giter Site home page Giter Site logo

whilconn / one-toc Goto Github PK

View Code? Open in Web Editor NEW
30.0 1.0 5.0 4.78 MB

一键生成网页大纲,让阅读简单一些🎉

License: MIT License

Shell 0.09% HTML 0.47% JavaScript 19.09% TypeScript 74.70% Less 5.65%
react toc typescript vite chrome edge addon crx extension

one-toc's Issues

希望内嵌目录能支持增加内嵌到右侧的可选项

首先非常感谢开发者,开发好这么好用的目录开源工具。
提一个功能建议,内嵌目录能支持增加内嵌到右侧的可选项。因为有的网页页面,比如一些笔记网页,比如notion之类的,左侧是已经有目录结构的。所有希望内嵌目录能支持增加内嵌到右侧的可选项。
非常感谢!

目录抓取不全。

html本地打开后目录中只有 “4 模型探索”,期待解决。

html显示如下:

1 读取数据、配置

2 数据清洗

3 基线资料(均衡性比较)

4 模型探索

html代码如下:

<!DOCTYPE html>

<html style="scroll-behavior: auto;"><head></head>

<body class="toc-embed-mod">


<section class="main-content">

<div id="读取数据配置" class="section level1" number="1">
<h1><span class="header-section-number">1</span> 读取数据、配置</h1>
</div>

<div id="数据清洗" class="section level1" number="2">
<h1 id="toc-anchor-0" toc-level="0" class="" style="scroll-margin-top: 0px; scroll-padding-top: 0px;"><span class="header-section-number">2</span> 数据清洗</h1>
</div>

<div id="基线资料均衡性比较" class="section level1" number="3">
<h1 id="toc-anchor-1" toc-level="0" class="" style="scroll-margin-top: 0px; scroll-padding-top: 0px;"><span class="header-section-number">3</span>
基线资料(均衡性比较)</h1>
</div>

<div id="模型探索" class="section level1" number="4">
<h1 id="toc-anchor-2" toc-level="0" class="" style="scroll-margin-top: 0px; scroll-padding-top: 0px;"><span class="header-section-number">4</span> 模型探索</h1>
</div>
</section>

</body></html>

记录一些待办问题

  • 锚点跳转后被遮挡
    • 目前依靠 URL 的 Hash 改变进行跳转(网页有fixed header时,易出现锚点被遮挡的问题)
    • 可以考虑使用 Scroll Api 控制页面滚动达到跳转效果
  • 锚点提取错误:非内容区域的Heading标签(h2、h3等)被提取为锚点
    • 目前默认支持网站的锚点提取比较准确
    • 其他网站由于规范性问题,提取准确性不高,后续待优化
  • 增加内嵌/悬浮模式
    • 悬浮:悬浮在网页上层
    • 内嵌:嵌入网页左侧,原网页内容整体右移,效果与 vscode 左侧边栏类似
  • 优化目录解析逻辑,支持解析 bstrong 等标签
  • 增加目录解析宽容度开关,由用户自行决定是宽松还是严谨(已支持,暂不开放设置)
  • 支持ajax加载数据的网页(Ctrl+B 快捷键显示目录)
  • 调大目录缩进
  • 增加阅读模式,该模式下隐藏所有 fixed 元素??内嵌模式时自动开启阅读模式减少 fixed 元素干扰??
  • 国际化,支持英文
  • 增加收起展开功能,默认展开到2级,单击展开或收起

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.