Giter Club home page Giter Club logo

generatoc's Introduction

GeneraToc

Travis (.org) npm 20downloads npm bundle size Coveralls github License Version GitHub package.json version

GeneraToc generates a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or SSR pages because it makes them easier to navigate.

This library was inspired by Tocify and Tocbot, but GeneraToc uses native DOM methods with no other dependencies and unlike Tocbot, GeneraToc does NOT rely on id attribute to navigate to the heading.

DEMO

https://gadzan.github.io/generatoc/demo/

Installation

Install it with npm.

# With npm
npm install --save generatoc
# or yarn
yarn add generatoc
# or pnpm
pnpm add generatoc

OR include in browser environment include the script at the bottom of the page before the closing body tag.

<script src="https://cdn.jsdelivr.net/npm/generatoc/build/generatoc.min.js"></script>

Include CSS

in html file

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/generatoc/build/generatoc.min.css">

OR

If you installed it with npm you might try importing the styles from 'node_modules'

@import 'generatoc/src/style/main.css';

Usage

Define a div element with id attribute

<div id="toc"></div>

Use GeneraToc with typescript

import generatoc from 'generatoc'
// Typescript
// (Required) Article content selector, default as '.post-content'
const content: string = '.post-content'

// (Optional) Select h2 ~ h5 heading level, it is also a defualt setting if you leave it undefined
const heading: string[] = ['h2', 'h3', 'h4', 'h5']

// (Optional) TOC element is append to #toc element, it is also a defualt setting if you leave it undefined
const selector: string = '#toc'

generatoc.init({ content, heading, selector })

Use GeneraToc with javascript

// JavaScript
import generatoc from 'generatoc'
const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })

Use in browser environment

const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })

You need to know when importing css file

If the selector is not #toc you have to modify css file manully, just replace all #toc string with your selector name in css file which can be found at ./node_modules/generatoc/src/style/main.css

Development

yarn install
npm run dev

Other init options

{
  // scrollHistory: default to null;
  // scrollHistory: {
  //   readableSpace?: boolean;              // Replace url hash string form '%20' to '-';
  //   replacePattern?: RegExp | string;     // You can also define your own pattern to replace the url hash string;
  //   replacement?: string;                 // Replacement of the pattern;
  //   scrollToAfterMounted?: boolean;       // Option to scroll to the title after page mounted; * Only valid when above options are unset;
  // }
  // Adds a hash to the page url, to maintain history, when scrolling to a TOC item
  scrollHistory: false,

  // scrollOffset: Accepts a number; default to 0
  // Scroll to the target with a vertical offset(pixel). If you have a fixed header in your page, this is what you need to set.
  scrollOffset: 0,

  // duration: Accepts a number; default to 7
  // The duration of scroll animation, a larger number means slower scroll. please input with a number larger than 1.
  duration: 7,

  // fold: Accepts a boolean; default to false
  // Default show as folded TOC or not
  fold: false,
}

TODO

  • Destory method
  • Reload method
  • Development env
  • Test cases
  • Show and close animation
  • More configurations

Using with SSR

If you are using GeneraToc with SSR framwork, like Nuxt.js, please add transpile param to nuxt.config.js

build: {
  transpile: ['generatoc']
}

LICENSE

MIT

generatoc's People

Contributors

dependabot[bot] avatar gadzan avatar lx-gadzanmai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

generatoc's Issues

跳转偏移如何实现

老师好,感谢你的分享,按指导用在了自己博客上,遇到小问题。
由于博客顶部有固定导航栏,目录跳转后顶部内容被遮挡,想请教下跳转偏移如何实现。

文科生不懂代码,还请原谅。

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.