Wikidot Expressions

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.

Wikidot

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

CSS

.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
10
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:

Wikidot

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

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:

Wikidot

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

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:

Wikidot

[[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.