Creating Topic Templates
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO
You can edit the default topic (topic.xml) if you want some specific boiler content when you create a new topic. You can also create new topic templates of your own and have them appear in the template selection window.
Topic templates are found in a collection's root folder, along with the .topico project file.
Topic templates file name must start with "topic" and be saved in the collection's root folder.
The FAQ template
A custom topic type will often be associated with a specific template and specific styles. As an example, let's look at the FAQ template and it's associated styles. The template name is topic_faq.xml.
The idea behind this template is to have sections of questions (with answers) and be able to create and index at the top of the published page with the question as the text linking to each answer further down on the page. This approach can make a rather long FAQ page much more usable. Adding interactivity would also be possible but a bit out of scope here.
The FAQ structure
The FAQ topic can have a standard XHTML intro but will contain this markup somewhere in the document body.
<div id="faq"> <div class="section"> <p class="title">...</p> <div class="question"> <p class="question">...</p> <div class="answer"> <p>...</p> </div> </div> <div class="question"> <p class="question">...</p> <div class="answer"> <p>...</p> </div> </div> ... </div> ... </div>
In the above markup, a <div id="faq"/> element wraps a series of <div class="section"/> containing many <div class="question">. Each question then has the following elements:
-
<p class="question">...</p>
The question is a single paragraph with a question class. -
<div class="answer">
The answer division can contain any HTML markup that's needed to answer the question.
The FAQ template
A topic based on this model is also assigned a specific XSL template to take advantage of the structure. Here's what this template looks like.
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<!-- templates parameters -->
<xsl:import href="template_user_guide.xsl"/>
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
<!-- faq template -->
<xsl:template match="xhtml:div[@id='faq']" mode="import">
<a name="top"/>
<div id="faq">
<!-- questions list with links -->
<xsl:apply-templates select="//xhtml:div[@class='section']" mode="index"/>
<!-- separator -->
<div align="center" style="font-size:24pt; font-weight:bold;">. . .</div>
<!-- questions details -->
<xsl:apply-templates select="//xhtml:div[@class='section']" mode="details"/>
</div>
</xsl:template>
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
<!-- a bulleted list with links to individual questions -->
<xsl:template match="xhtml:div[@class='section']" mode="index">
<xsl:param name="catpos" select="position()"/>
<div class="section_faq_index">
<p class="section_faq_index_title">
<span class="section_faq_index_title">
<xsl:value-of select="xhtml:p[@class='title']"/>
</span>
</p>
<ul>
<xsl:for-each select="xhtml:div[@class='question']">
<li class="question">
<a>
<xsl:attribute name="href">#<xsl:value-of select="generate-id()"/></xsl:attribute>
<!-- write the question as the link text -->
<xsl:value-of select="xhtml:p[@class='question']"/>
</a>
</li>
</xsl:for-each>
</ul>
</div>
</xsl:template>
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
<!-- details of each question -->
<xsl:template match="xhtml:div[@class='section']" mode="details">
<xsl:variable name="catpos" select="position()"/>
<div class="section">
<p class="section_title">
<span class="section_title">
<xsl:value-of select="xhtml:p[@class='title']"/>
</span>
</p>
<xsl:for-each select="xhtml:div[@class='question']">
<div class="question">
<!-- get the id from the qitem attribute using the Attribute Value Template -->
<a name="{generate-id()}"/>
<!-- write the question -->
<p class="question">
<xsl:value-of select="xhtml:p[@class='question']"/>
<a href="#top">
<sup> ...top</sup>
</a>
</p>
<!-- write the answer -->
<div class="answer">
<xsl:copy-of select="xhtml:div[@class='answer']/*"/>
</div>
</div>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>
The FAQ styles
It's also a best practice to assign specific styles to our new topic type publication. Here's what the stylesheet looks like.
div#faq {}
div#faq div.section_faq_index {margin-top:8px; }
div#faq div.section_faq_index p.section_faq_index_title {color:#004400; font-family:Tahoma, Helvetica, sans-serif; font-weight:bold; font-size:1.2em; padding-bottom:0px; border-bottom:1px solid black;}
div#faq div.section_faq_index span.section_faq_index_title {background-color:#CEEEAE; padding: 4px 4px 0px 4px; margin-bottom:0px; border: 1px solid black;}
div#faq div.section_faq_index ul {}
div#faq div.section {margin-top:12px; }
div#faq div.section p.section_title {color:#004400; font-family:Tahoma, Helvetica, sans-serif; font-weight:bold; font-size:1.2em; padding-bottom:0px; border-bottom:1px solid black;}
div#faq div.section span.section_title {background-color:#CEEEAE; padding: 4px 4px 0px 4px; margin-bottom:0px; border: 1px solid black;}
div#faq div.section div.question {}
div#faq div.section div.question p.question {font-weight:bold;}
div#faq div.section div.question div.answer {margin-left:16px; margin-right:16px;}
div#faq div.section div.question div.answer p {font-style:italic;}
div#faq div.section div.question div.answer ul li, div.question div.answer ol li { }
The FAQ Schematron
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO