02 Jan 2017 01:24 | module syntax wikidot


The new home page for this blog shows a comment count just as the previous theme did, but there are two main improvements:

  • A FontAwesome icon is shown alongside the count, which changes dynamically
  • The word "comment" or "comments" also changes dynamically

Previous method

Previously, this could be achieved on Wikidot with CSS tricks, injecting the number of comments into a class name and using the class name to conditionally show/hide certain elements. This was messy and a bit of a hack.


[[span class="hide-comments-%%comments%%"]]comments[[/span]]
[[/span class="show-comments-%%comments%%" style="display: none;"]]comment[[/span]]


.hide-comments-1 {
    display: none;
.show-comments-1 {
    display: block;

If you've been using Wikidot and CSS for a while, you may have figured out what's happening here — and how it works.

By default, only "comments" is shown. When the number of %%comments%% reaches 1, however, we show "comment" instead.

We needed something better

As I mentioned above, this was quite convoluted. We needed something better, something more straightforward.

Wikidot delivered

In a blog post from October 2015, it was announced that Wikidot now supports expressions.


[[#if true | this is true | this is false]]
[[#expr 5+5]]
[[#ifexpr 5+5 < 20 | Less than 20 | Not less than 20]]


this is true
Less than 20

Practical example #1

Let's use this to make our 'comments' code simpler. We can use the double-equals (==) that is regularly used in programming languages for comparison of two items:


[[#if %%comments%% == 1 | comment | comments]]

Note that we no longer need CSS to make this work

Yes. It's that simple!

Practical example #2

We also want to dynamically show a different FontAwesome icon based on the context. You're probably already ahead of me, so let's get right into it:


[[span class="[[#if %%comments%% | fa fa-comment | fa fa-comment-o]]"]]@<&nbsp;>@[[/span]]

The official documentation states that an #ifexpr evaluates as false if the result is 0. We can use this property to simplify our code, so I only did #if %%comments%% and not #if %%comments%% == 0.

You may be wondering where "fa-comment" and "fa-comment-o" come from. These are classes that indicate which FontAwesome icon should be shown on the page. If you wish to use them on your own site:

  • Import the FontAwesome font in your CSS theme
  • Bookmark the FA icon Cheatsheet for reference

Putting it all together

One thing I should point out is that I am using pages for comments, rather than the standard comments module.

Therefore, in my case I need to replace %%comments%% with %%children%% instead. I can use this as a reliable count because all of my page-based comments are configured as children of the blog article that they are responding to.

Here's the final result:


[[a href="%%fullname%%#comments"]][[span class="[[#if %%children%% | fa fa-comment | fa fa-comment-o]]"]]@<&nbsp;>@[[/span]] %%children%% [[#ifexpr %%children%% == 1 | comment | comments]][[/a]]

You can see this in action on the home page, or in the screenshot embedded in this article.

Note the difference in icon and wording used between zero, one and more comments.


Submit Feedback
Please rate this page based on the quality and helpfulness of the content to you.

Average 100% rating from 1 votes.

You may also be interested in…


Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +

02 Jan 2017 08:28

Thanks for the simple examples! I actually asked for something like this when these expressions were announced.

Included page "inc:signature" does not exist (create it now)

Edit | History (0) | Permalink

02 Jan 2017 10:07

Glad to help Janne, even if it's a bit delayed :)

Included page "inc:signature" does not exist (create it now)

Edit | History (0) | Permalink

Add a new comment