Skip to content

vitaliy-bobrov/metalsmith-disqus

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 

metalsmith-disqus

npm version npm

A Metalsmith plugin that adds Disqus commenting widget and counter scripts. For more information you can read article.

Installation

$ npm install --save-dev metalsmith-disqus

Usage

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

const Metalsmith = require('metalsmith');
const disqus     = require('metalsmith-disqus');

Metalsmith(__dirname)
  ...
  .use(disqus({
    siteurl: 'my-site.com',
    shortname: 'my-site'
  }));

In your templates you need to add <div id="disqus_thread"></div> for commenting widget. For comments counter add element with class name disqus-comment-count and data attribute data-disqus-key with renedered key to generate id.

Examples:

Page with comments template using handlebars:

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

Page with counters template using handlebars:

<p>Your page markup<p>

{{#if comments }}
<!-- Comments counter will be rendered in this element -->
<span class="disqus-comment-count" data-disqus-key="{{title}}"></span>
{{/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
---

To add Disqus DNS prefetch for entry page, for example homepage just add disqus-dns-prefetch: true to page metadata. It will speed up disqus scripts loading. Example:

---
title: My home page
disqus-dns-prefetch: true
---

To add Disqus scripts prefetch for page just add disqus-prefetch-widget: true (for comments widget script) or disqus-prefetch-counter: true (for counter script) to page metadata. It will speed up disqus scripts loading. Example:

---
title: My home page
disqus-prefetch-widget: true
disqus-prefetch-counter: true
---

Counter class name selector can be configured with options.

Options

siteurl - Required

Type: String

Default: ''

Your site url, used to generate page url in Disqus configuration.

shortname - Required

Type: String

Default: ''

Your site short name configured in Disqus, used to generate page url in Disqus configuration.

path

Type: String

Default: 'path'

Propery key in file metadata to get page path, used to generate page url in Disqus configuration. By default uses path property that metalsmith-permalinks plugins adds.

title

Type: String

Default: 'title'

Propery key in file metadata to get page title, used as page title in Disqus configuration.

identifier

Type: String

Default: 'title'

Propery key in file metadata to generate page identifier, used as page identifier in Disqus configuration.

counterSelector

Type: String

Default: '.disqus-comment-count'

CSS selector string to find elements in page template inside whitch insetr comments counter.

CLI

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

{
  "plugins": {
    "metalsmith-disqus": {
      "siteurl": "my-site.com",
      "shortname": "my-site"
    }
  }
}

License

MIT

About

Disqus comments plugin for Metalsmith.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published