We're developing a new page manager that will eventually let us "manage all pages (rename, delete, tag) from one place", as weneed:55 says. In this slow series of tutorials I'll explain some of the advanced Wikidot features we're using to make it. You can play with the work in progress as we develop it.

Before we start, some acknowledgements. I did the grunt work but took a lot of ideas and bits of code from gerdami's list of themes, and ErichSteinboeck's file manager package. The best way to learn advanced Wikidot techniques is to study the work of gurus like these.

Most of the techniques I'm going to show depend on some custom CSS. Right now, you need to add this to your site's custom CSS. If you use the admin:themes trick, it's pretty simple. We may add some of this CSS to the standard themes but I'm really waiting for the CSS module and cross-site includes, so it becomes possible the necessary styling right into the code.

0. Before you start

The simplest way to try out these techniques is to clone a fresh site, if you did not already do that, from the Iron Giant default template. You can always delete it when you're done.

1. Building the table

ListPages and HTML tables are natural friends. ListPages does not directly generate tables but it turns out to be quite easy to add. This is what you need to do:

1. Use separate="no" so that the list is not broken into divisions but creates a single block.
2. Use prependLine to provide the table header.
3. Use appendLine to provide the table footer.
4. Create a row for each item in the ListPages output.

Here is how it works (this is the stripped-down page manager code):

[[module ListPages separate="no" \
  prependLine="[[include system:page-manager-header]]" \
  appendLine="[[/table]]" ]]
  [[row]]
    [[cell]]
      [/%%fullname%%/noredirect/true %%title%%]
    [[/cell]]
    [[cell]]
      %%updated_at|%y/%m/%d%%
    [[/cell]]
    [[cell]]
      %%size%%
    [[/cell]]
  [[/row]]
[[/module]]

We need to put the table header into a separate page because there's no way to put that code directly into prependLine - it contains quotes and would be too unreadable in any case. The system:page-manager-header page contains this (again, the stripped-down code):

[[table]]
  [[row]]
    [[cell]]
      Title
    [[/cell]]
    [[cell]]
      Date
    [[/cell]]
    [[cell]]
      Size
    [[/cell]]
  [[/row]]

Note how there is no closing table tag - this is provided in the appendLine argument to the ListPages.

I'm using the system: category for this because it's useful to remove the side bar, for this page. Do that in the site manager, under Appearance and Navigation elements. Select the 'system' category, uncheck the box, and clear the side-bar field.

We need to add some code to the site's custom CSS. Here we set the styling on all tables in the wiki. You could put this into the table tags as well. I prefer putting it into admin:themes (the page that holds your custom CSS, if you use that), it's less work:

table {
    border-collapse:collapse;
    table-layout:fixed;
    width: 100%;
}

OK, so now we have our basic table layout, and we'll improve it step by step over the coming days.