Thalassa CMS logo

Thalassa CMS

Index bars

Index bars in Thalassa are used to navigate in arrays of numbered pages; such arrays emerge in two situations:

Index bar is inserted into the HTML code by calling the indexbar macro, which accepts two arguments as follows: %[indexbar:NAME:ANCHOR]. The NAME identifies the desired style, which is defined with an ini file section headed like [indexbar NAME]. The ANCHOR argument may be omitted, but if given, it is used both as an id attribute value for the whole index bar, and as an anchor part of URIs pointing to other pages of the array from within the index bar. This allows the user to keep the cursor at the index bar when switching pages one by one.

When the amount of pages exceeds certain threshold, the bar starts to omit some links. In case the current page is far from both the begin and the end of the array, links to the first N pages, last N pages and N pages both to the left and to the right from the current are displayed; the N is called tailsize and is set by the indexbar style.

The index bar style (or, strictly speaking, all the HTML code the bar consists of) is defined with an ini section that belongs to the indexbar group. Sections of this group must contain the following parameters:

Within the templates, %0% is expanded to the desired text for the link, %1% is replaced with the URL for the link, and %2% represents the ANCHOR as specified at the %[indexbar:] macro call.

Here's an example of an index bar style section:

  [indexbar index1]
  begin = <div class="index1"%[if:%2%: id="%2%":]>
  end = </div>
  link = <a href="%1%%[if:%2%:#%2%:]" class="idx_link">%0%</a>
  greylink = <span class="idx_grey">%0%</span>
  curpos = <span class="idx_curr">%0%</span>
  break = <span class="idx_break">...</span>
  textprev = &#x2BC7;
  textnext = &#x2BC8;
  textfirst = &#x2BC7;&#x2BC7;
  textlast = &#x2BC8;&#x2BC8;
  tailsize = 2

(These unicode-represented chars look like this: &#x2BC7; is “⯇”, &#x2BC8; is “⯈”).

In case you decide not to use anchors, things can be simplified a bit:

  begin = <div class="index1">
  end = </div>
  link = <a href="%1%" class="idx_link">%0%</a>

We don't recommend to do so but this can be easier to understand.

Refer to various CSS manuals on how to define CSS classes index1, idx_link, idx_grey, idx_curr and idx_break properly.

© Andrey V. Stolyarov, 2023, 2024