Skip to main content
MindTouch Success Center

Display a list of popular pages (MT4)


This turorial 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 & feel (HTML, CSS) of your pouplar list and embed it on any article in MindTouch that you need to. 
 

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

Adding 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 you will need to 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

Customizing the Look & 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 push 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

Confirm that the DekiScript 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

Adding 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 valueable 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. 

Demo

  • Was this article helpful?