Skip to main content
MindTouch Success Center

Display a list of popular pages

This page applies to:MindTouch (current)

This tutorial shows you how to embed a list of the top ten (10) most popular articles into a MindTouch page. After completing this tutorial you will have the ability to display a list of your top 10 most popular MindTouch articles. Additionally, you will be able to customize the look and feel (HTML, CSS) of your popular list and embed it on any article in MindTouch that you need to. 
 

How to display a list of popular pages


Step 1: Create your template

In order to get started, you will first need to create a new MindTouch Template. You can accomplish this by going to the Tools menu and selecting Templates (Tools > Templates). Once there, you will need to create a new template where you can add the DekiScript to display your top popular pages. Use the following instructions to create a new template:

  1. Go to Tools > Templates (/Template:).
  2. Click New Page.
  3. Double Click Blank Page.
  4. Give your new page a title (e.g. PopularPagesWidget*).

* For this example we will assume that your template is located at /Template:PopularPagesWidget. 

Step 2: Add the DekiScript

Now that you have created a new template, you will need to add in the DekiScript to display the top 10 popular pages. Use the following steps to accomplish this:

  1. Go to your PopularPagesWidget template.
  2. Make sure the editor is loaded. If it isn't, click Edit page.
  3. In the editor click the Insert menu.
  4. Select DekiScript.

  1. Once you have added a DekiScript block, paste the following DekiScript into it:
var uri = site.api & 'pages/popular' & { limit: 10 };
var api = wiki.api(uri);

<div class="widget-popular">
    <ul>
    foreach(var pg in api['page'] ) {
        <li>
            web.link(pg / 'uri.ui', pg / 'title');
            var viewcount = num.cast(pg / 'metrics/metric.views');
            <span class="viewcount">
                " (";
                num.format(viewcount,"###,###,###");
                " views)";
            </span>
        </li>
    }
    </ul>
</div>
  1. Click Save and move to the next step in the tutorial.

Step 3: Customize the look and feel

Now that you have created your template and added the DekiScript, you might want to customize the way it looks. If you don't care about how it looks, you can opt to skip this section and move to the next step in the tutorial. 

In order to change the look and feel you will need to add CSS to the template. I will provide some CSS to get you started but you can modify it in the future however you see fit. Use the following steps:

  1. Go to your PopularPagesWidget template.
  2. Make sure the editor is loaded. If it isn't, click Edit page.
  3. Go to the bottom of the page.  If the cursor only shows up in the DekiScript block just press Shift+Enter to escape it. 
  4. In the editor click the Insert menu.
  5. Select CSS.

  1. Once you have created the CSS block you will need to paste the following CSS into it.
.widget-popular .viewcount {
    margin:0 0 0 10px;
    font-size:10px;
    color:#999;
}
  1. Click Save and move on to the next step in the tutorial.

Step 4: Confirm the DekiScript code is entered correctly

If you have added everything properly, the content in your page should look like this while editing:

File:01MindTouch_Help_Center/Developer_Guide/DekiScript/Adding_a_list_of_Popular_Pages/popular_pages_code_example.png

Step 5: Add your template to a page

Now that your template is complete, you're ready to embed it in a MindTouch article.  Most users will find this information valuable on the homepage of your site.  Use the instructions below to embed your PopularPagesWidget template to a MindTouch page:

  1. Go to the page you want to embed the widget on.
  2. Click Edit page.
  3. Locate where you want to add the widget (it can be in a table cell if you want).
  4. Add the following DekiScript*.
template("PopularPagesWidget");
  1. Click Save.

* For this example we will assume that your template is located at /Template:PopularPagesWidget. 

  • Was this article helpful?