![]() |
| Frontier Tutorials / Indexing a Website / Display The Alphabetical Directory |
|
|---|
As with the keyword index, to get the information out of the alphabetical index and onto a page, we need to create a macro.
We could format the directory a number of ways. For now, we'll make it look like this:
So let's create the TitleAlphaDirectory macro in the #tools table. We'll start by copying the TopicsDirectory macro we created earlier, then modify it to get the display we want.
Copy the TopicsDirectory macro, and rename it the copy "TitleAlphaDirectory". Don't forget to change the name of the eponymous script, as well.
Create a page named "Articles" at the top level of your website, with the following content:
#title "Articles Index"
{TitleAlphaDirectory(@indices^.titleAlpha,"ALL")}
Render the "Articles" page. You should get a hierarchical display of ODB addresses; it will resemble the following (yours will, of course, have your own keywords and page links in it, not mine):
A Add KeywordsB
Bricks and MortarD
Build the Alphabetical Index
Build The Keyword Index
Display The Alphabetical DirectoryH
Display The Keyword Directory
Downloadable Scripts
Hints and TipsI
Indexing a WebsiteP
Plan the ProjectS
Summary
We haven't even done anything yet, and it's already usable! But it's not quite what we want.
Now we will modify the TitleAlphaDirectory macro to use tables instead of <blockquote> to create the display.
We'll use a two-column table, with the left column containing the single-character heading and the right column containing a set of linked page titles separated by <br> tags.
Open up the TitleAlphaDirectory macro. Double-click the first summit to collapse it, then double-click again to expand it one level.
Expand the line that begins "on VisitCBFuncExt".
Expand the line that reads "case visitPhase", then the line that reads "cat_start".
Locate the lines that read:
Add( nameOf( itemAdr^ ) )
Add( "<blockquote>\r" )
Replace them with:
if ( outStr == "" )
Add( "\r<table cellpadding=6 cellspacing=0 border=0>\r" )
Add( "<tr valign=top>\r" )
Add( "<th><font face='sans-serif' size=+2 color='#003366'>" + string.upper( nameOf( itemAdr^ ) ) + "</font></th>" )
Add( "<td>" )
Notice that this fragment also adds the opening <table> tag if outStr is empty.
Collapse the line that reads "cat_start", and expand the line that reads "cat_end".
Locate the line that reads:
Add( "</blockquote>\r" )
Replace it with:
Add( "</td></tr>\r" )
The AddOneItem nested script does this already, so we don't need to make any changes there.
Collapse the line that reads "cat_end", and expand the line that reads "finish".
Locate the comment line that reads:
<< No processing needed in this case, because the "cat_end" case closed the last blockquote.
Replace it with:
Add( "</table>\r" )
Render the "Articles" page again. You should now see an alphabetical display of page titles, with each title linked to the corresponding page:
A Add Keywords
B Bricks and Mortar
Build the Alphabetical Index
Build The Keyword Index
D Display The Alphabetical Directory
Display The Keyword Directory
Downloadable Scripts
H Hints and Tips
I Indexing a Website
P Plan the Project
S Summary
Want to list the titles horizontally to make it more compact? Change the HTML generation to string the linked titles together:
A Add Keywords B Bricks and Mortar - Build the Alphabetical Index - Build The Keyword Index D Display The Alphabetical Directory - Display The Keyword Directory - Downloadable Scripts H Hints and Tips I Indexing a Website P Plan the Project S Summary
To accomplish this, I changed "<br>" to " - " in AddOneItem() and trimmed the final " - " from outStr in the cat_end block.
|
|---|