metalsmith-disqus
v1.2.5
Published
Disqus comments plugin for Metalsmith.
Downloads
7
Readme
metalsmith-disqus
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