Solprovider Apache Lenya - Menu: Internal


		Adding a Menu of the Header tags within a Document

<< Apache Lenya >>
Start
Basics
Variables
Language
Site Design
Contents
Site Structure
Static Pages
External Links
Dynamic Webpages (Fixing Cache)
Website Map
Website Map with Descriptions
Link to Parent
Menu: Top-Level
Menu: Section
Menu: Subpages
Menu: Internal
Menu: External Links
Menu Entries without Documents
Menu Graphics
Tabs: All Levels
XSP
Advanced
Search
Flow
CMS GUI
Kupu
Suggestions
Other
Sitemap

This explains how to add an automatically updated menu of all the Header tags within a Lenya document. It handles all 6 levels of headers (H1, H2, H3, H4, H5, H6), and only requires changing the XSL and CSS.

This solution depends on CSS for formatting the data; the XML data is never hierarchical. I have not found an easy method to create a hierarchical data structure from flat (non-hierarchical) data using just XSL. This means an H4 directly under an H2 will still be formatted (indented) as an H4, which is probably the desired display.

The anchors are named like "h3-7" (tag name + "-" + absolute position) to solves the issues of duplicates and url-encoding the text, but makes the names much less memorable. The tag name and the dash are not necessary; they are remnants of earlier attempts.

Instructions

FILE: {pub}/xsl/page2xhtml.xsl

Put this line where you want the headers menu:
<xsl:apply-templates select="//xhtml:h1|//xhtml:h2|//xhtml:h3|//xhtml:h4|//xhtml:h5|//xhtml:h6" mode="headers"/>

Add these matches:

<!-- Headers Menu -->

<xsl:template match="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6" mode="headers">

<xsl:element name="div">

<xsl:attribute name="class">header<xsl:value-of select="substring-after(name(), 'h')"/></xsl:attribute>

<a href="#{name()}-{position()}"><xsl:value-of select="."/></a>

</xsl:element>

</xsl:template>

<!-- Add Named Anchors to Headers -->

<xsl:template match="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6">

<xsl:variable name="count"><xsl:number count="xhtml:h1|xhtml:h2|xhtml:h3|xhtml:h4|xhtml:h5|xhtml:h6"/></xsl:variable>

<a name="{name()}-{$count}"/>

<xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy>

</xsl:template>

FILE: {pub}/resources/shared/css/page.css
Add this to your CSS (to indent each level):

/* Header Menu */

.header1 {  padding: 0px 0px 0px 0px; }

.header2 {  padding: 0px 0px 0px 10px; }

.header3 {  padding: 0px 0px 0px 20px; }

.header4 {  padding: 0px 0px 0px 30px; }

.header5 {  padding: 0px 0px 0px 40px; }

.header6 {  padding: 0px 0px 0px 50px; }

<< Menu: Subpages

Menu: External Links >>

Contact Solprovider

Adding a Menu of the Header tags within a Document

Instructions

Paul Ercolino