Namespace, Primitive, Method

    metalsmith-commento

    1.1.0 • Public • Published

    metalsmith-commento

    npm version npm

    A Metalsmith plugin that adds Commento commenting widget and counter scripts.

    Installation

    $ npm install --save-dev metalsmith-commento
    

    Usage

    Place metalsmith-commento plugin after html files generation, for example after metalsmith-layouts.

    const Metalsmith = require('metalsmith');
    const commento = require('metalsmith-commento');
     
    Metalsmith(__dirname)
      ...
      .use(commento({
        cssOverride: 'https://my-blog.com/my-styles.css',
        autoInit: false,
        idRoot: 'comments-block',
        counterSelector: '.comments-counter'
      }));

    In your templates you need to add <div id="commento"></div> for commenting widget. For comments counter add link to the post with commento-counter class name.

    Examples:

    Page with comments template using handlebars:

    <p>Your page markup<p>
    {{#if comments }}
    <!-- Comments widget will be rendered in this element -->
    <div id="commento"></div>
    {{/if}}

    Page with counters template using handlebars:

    <p>Your page markup<p>
     
    {{#if comments }}
    <!-- Comments counter will be rendered in this element -->
    <a href="https://my-blog.com/my-post" class="commento-counter"></a>
    {{/if}}

    To enable comments for page just add comments: true to page metadata. Example:

    ---
    title: Hello World
    comments: true
    ---

    To enable comments counter for page just add comments-counter: true to page metadata. Example:

    ---
    title: Post
    comments-counter: true
    ---

    Options

    For the detailed description of options look at the Commento docs.

    cssOverride

    Type: String

    Default: null

    Path to the commento CSS overrides.

    autoInit

    Type: Boolean

    Default: true

    Whether commento should be initialized automatically after script load.

    idRoot

    Type: String

    Default: 'commento'

    CSS selector string used to find the element in a template to insert comments.

    counterSelector

    Type: String

    Default: '.commento-counter'

    CSS selector string used to find links in a template to insert comments counter.

    CLI

    You can also use the plugin with the Metalsmith CLI by adding a key to your metalsmith.json file:

    {
      "plugins": {
        "metalsmith-commento": {
          "cssOverride": "https://my-blog.com/my-styles.css",
          "autoInit": false,
          "idRoot": "comments-block",
          "counterSelector": ".comments-counter"
        }
      }
    }

    License

    MIT

    Install

    npm i metalsmith-commento

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    6.86 kB

    Total Files

    4

    Last publish

    Collaborators

    • bobrov1989