Question
How can I hide article comments using curly bars?
Answer
Instead of disabling comments for in each article using the Open for Comments option, you can hide parts of Help Center articles, like the comments section with a few lines of HTML. In this example, we hide the comments section of the article page. This also hides already existing article comments.
- In Guide, click Guide admin followed by the Customize design icon (
) in the sidebar.
- Click the theme you want to edit to open it and then click Edit Code.
- In the Templates section, select the Article_page.
- The HTML in the article page might vary depending on your Theme and customizations. Look for the Article comments curlybars on that page.
- Add {{!-- before the <div class for the comments, and --}} after the </div> for the comments. This adjusts the color of the text to brown, indicating that this section of code is being blocked out.
Click Publish and then Preview to watch your article comments disappear.
You can use this trick for hiding anything in the article page (see Selectively hiding Help Center components using Curlybars). The best practice for this is to put the {{!-- --}} before and after the open and close <section> tags. Hiding information like this allows you to see what is hidden, instead of removing code which can be confusing to find what is missing.
13 Comments
This is super helpful! Thanks Ray
Hello,
Is it possible to have comments be internal or moderated? Or are comments simply 'on' or 'off'?
Thanks,
Tim
Hey Tim! I just answered your question over here: Disabling Social Media and Comment options in Help Centre
Thanks Ray, just what I needed.
Thank you for this post! Since the Follow button at the top only relates to comments, does anyone know how to remove the Follow button? It's irrelevant if comments don't exist. Thank you!
Hi Danielle,
You're right about the follow button on articles is only for comments - but it is also available for Sections, where it notifies followers of any new articles appearing in said Section (or articles being moved to this section).
So while it will make sense to remove the button on the article template you may want to consider leaving it on the Section template.
In any case it is called {{subscribe}} in the markup, you can either delete it or replace it with {{!-- {{subscribe}} --}} , so you can easily change it at a later time.
Image links are broken, please fix it when possible. Thanks.
Hi John,
Thanks for the heads up! It looks like they were pointing at an internal location. I have fixed the images so they are available to all.
I'd love to know is it possible to hide the comments on just certain categories? We have our guide set up to provide articles on how to use our software but some categories are also configured to just provide notifications. We'd like our users to be able to add comments to the user articles but not on the notifications. Is this possible? Can the comments be restricted to certain categories or sections only?
Hi @Bridget,
There are two ways of doing it, you can use JavaScript and write a function to hide it for certain categories or you can mark all the article from article content editor to make an article 'Open for comments' or not.
Team Diziana
Thanks Trapta!
Another solution would be to hide the comments by using Curlybars. Unfortunately we cannot hide the comment section by category, but we can hide it by section. Where Ray has used the {{!-- and --}} above, you could instead insert something like this around those blocks of code:
Using the isnt helper will only show the comment blocks if the section is not one of the sections highlighted above. If you are interested, I go into a bit more detail about this sort of scenario in this article: https://support.zendesk.com/hc/en-us/articles/115011134947-Selectively-hiding-Help-Center-components-using-Curlybars
Hope that helps!
The solution I found to hide the comments section is to change the article_page.hbs file like this.
{{!-- Only show the comments section if the article is open for comments --}}
{{#unless article.comments_disabled}}
<div class="article-comments" id="article-comments">
...
</div>
{{/unless}}
Thanks for sharing your solution, Fabien!
Please sign in to leave a comment.