This package lets you add disqus like comment functionality in a matter of seconds. Comments-ui uses the Meteor accounts system which (in constrast to disqus) makes it easy to get the data and use it to your wishes.
<div class="comment-section">
{{> commentsBox id=documentId}}
</div>
documentId
could be the id of a blog post, news article or a custom defined string that stands for your guestbook.
meteor add arkham:comments-ui
There are two default templates for Bootstrap 3 and Semantic UI with according html, configure it like following.
// On the Client
Comments.ui.config({
template: 'bootstrap'
});
semantic-ui
is the default, because of the semantic markup that is written with it.
You can customize the output of the commentsBox by adding a customTemplate parameter.
<template name="myComments">
<ul>
{{#each comment}}
...
<li>{{content}}</li>
...
{{/each}}
</ul>
</template>
<template name="post">
{{> commentsBox id=post._id customTemplate="myComments"}}
</template>
Have a look at the default template to see what data you have available. There are predefined classes that have an action suffix on their classes, that define when to act on certain events (for example create-action, edit-action and so on).
Changing the Simple Schema definition is possible by using changeSchema
.
Comments.changeSchema(function (currentSchema) {
currentSchema.image = { type: Object, optional: true };
});
You might see that there is a lot of predefined text that is shown in the commentsBox component. You can change those by calling a setContent method.
Comments.ui.setContent({
title: 'Kommentieren',
save: 'Speichern',
reply: 'Antworten',
edit: 'Editieren',
'placeholder-textarea': 'Teile uns deine Meinung mit',
'add-button-reply': 'Antwort hinzufügen',
'add-button': 'Kommentar hinzufügen',
'load-more': 'Mehr Kommentare laden'
});
The configurable values are:
- title Title of the box
- add-button Button text for adding comments
- placeholder-textarea Placeholder for commenting textarea
- save, edit and remove Action texts
- load-more Load more button text
You can configure following values that changed the comments-ui functionality.
Comments.ui.config({
limit: 20, // default 10
loadMoreCount: 20, // default 20
template: 'bootstrap', // default 'semantic-ui'
defaultAvatar: 'my/defaultavatarimage.png' // default 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'
});