Use contextual headings in HTML

Reshape hfill

Reshape hfill lets you easily use contextual headings in HTML, like the proposed <h> element.

-- -------------------- ---- -------
---- ------ ---
--------------
----------
---------
  --------------
  ----------
  ---------
    ---- -----------
    ----------
  ----------
----------
---------
  ----------
  --------------
  ----------
----------

---- ----- ---
-- -------------- --------------------------
----------
---------
  -- -------------- --------------------------
  ----------
  ---------
    -- -------------- ---------------- -----------
    ----------
  ----------
----------
---------
  ----------
  -- -------------- --------------------------
  ----------
----------

---- --- ------------- ---
----------------
----------
---------
  ----------------
  ----------
  ---------
    ----- ------------
    ----------
  ----------
----------
---------
  ----------
  ----------------
  ----------
----------

Usage

Add Reshape and Reshape hfill to your build tool:

npm install reshape reshape-hfill --save-dev

Use Reshape hfill as a plugin:

import reshape from 'reshape';
import reshapeHfill from 'reshape-hfill';

reshape({
  plugins: [
    reshapeHfill(/* options */)
  ]
}).process(YOUR_HTML);

Options

headings

Type: Object
Default: { "h": [ "h", "h1", "h2", "h3", "h4", "h5", "h6" ] }

A list of heading tags that should be created from the array of tags, alternatively transforming them into their calculated hierarchical level by a numerical range.

Example: Only transform <h> tags:

{
  "headings": {
    "h": [
      "h"
    ]
  }
}

Example: Transform many tags into their calculated hierarchical level (1-6):

{
  "headings": {
    "1-6": [ "h", "h1", "h2", "h3", "h4", "h5", "h6" ]
  }
}

sections

Type: Array
Default: [ "article", "aside", "nav", "section" ]

A list of sectioning content tags used to calculate the hierarchical level of heading tags.

Example: Only increase the hierarchical level on <article>, <aside>, and <section> tags:

{
  "sections": [ "article", "aside", "section" ]
}

HomePage

https://github.com/jonathantneal/reshape-hfill#readme

Repository

git+https://github.com/jonathantneal/reshape-hfill.git

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005667f81e8991b448e292a