<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parentlinks style</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../style.css" type="text/css" />
<link rel="stylesheet" href="../local.css" type="text/css" />
</head>
<body>
<div class="page">
<div class="pageheader">
<div class="header">
<span>
<span class="parentlinks">
<a href="../index.html">ikiwiki</a>/
<a href="../tips.html">tips</a>/
</span>
<span class="title">
parentlinks style
</span>
</span>
</div>
</div>
<div id="pagebody">
<div id="content" role="main">
<p>Here are some tips for ways to style the links
provided by the <a href="../plugins/parentlinks.html">parentlinks</a> plugin.</p>
<p>This plugin offers a <code>HTML::Template</code> loop that iterates over all or
a subset of a page's parents. It also provides a few bonus
possibilities, such as styling the parent links depending on their
place in the path.</p>
<div class="toc">
<ol>
<li class="L1"><a href="#index1h1">Content</a>
</li>
<li class="L1"><a href="#index2h1">Usage</a>
<ol>
<li class="L2"><a href="#index1h2">Basic usage</a>
</li>
<li class="L2"><a href="#index2h2">Styling parents depending on their depth</a>
</li>
<li class="L2"><a href="#index3h2">Skip some parents, style the others depending on their distance to the current page</a>
</li>
<li class="L2"><a href="#index4h2">Avoid showing title of toplevel index page</a>
</li>
<li class="L2"><a href="#index5h2">Full-blown example</a>
</li>
</ol>
</li>
</ol>
</div>
<h1><a name="index1h1"></a>Content</h1>
<p>The plugin provides one template loop, called <code>PARENTLINKS</code>, that
returns the list of parent pages for the current page. Every returned
path element has the following variables set:</p>
<ul>
<li><code>URL</code> (string): url to the current path element</li>
<li><code>PAGE</code> (string): title of the current path element</li>
<li><code>DEPTH</code> (positive integer): depth of the path leading to the
current path element, counting from the wiki's root, which has
<code>DEPTH=0</code></li>
<li><code>HEIGHT</code> (positive integer): distance, expressed in path elements,
from the current page to the current path element; e.g. this is
1 for the current page's mother, 2 for its grand-mother, etc.</li>
<li><code>DEPTH_n</code> (boolean): true if, and only if, <code>DEPTH==n</code></li>
<li><code>HEIGHT_n</code> (boolean): true if, and only if, <code>HEIGHT==n</code></li>
</ul>
<h1><a name="index2h1"></a>Usage</h1>
<p>The <code>DEPTH_n</code> and <code>HEIGHT_n</code> variables allow the template writer to
skip arbitrary elements in the parents list: they are arbitrary
page-range selectors.</p>
<p>The <code>DEPTH</code> and <code>HEIGHT</code> variables allow the template writer to apply
general treatment, depending on one of these variables, to <em>every</em>
parent: they are counters.</p>
<h2><a name="index1h2"></a>Basic usage</h2>
<p>As in the default <code>page.tmpl</code>, one can simply display the list of
parent pages:</p>
<pre><code><TMPL_LOOP NAME="PARENTLINKS">
<a href="<TMPL_VAR NAME=URL>"><TMPL_VAR NAME=PAGE></a>/
</TMPL_LOOP>
<TMPL_VAR TITLE>
</code></pre>
<h2><a name="index2h2"></a>Styling parents depending on their depth</h2>
<p>Say you want the parent links to be styled depending on their depth in
the path going from the wiki root to the current page; just add the
following lines in <code>page.tmpl</code>:</p>
<pre><code><TMPL_LOOP NAME="PARENTLINKS">
<a href="<TMPL_VAR NAME="URL">" class="depth<TMPL_VAR NAME="DEPTH">">
<TMPL_VAR NAME="PAGE">
</a> /
</TMPL_LOOP>
</code></pre>
<p>Then write the appropriate CSS bits for <code>a.depth1</code>, etc.</p>
<h2><a name="index3h2"></a>Skip some parents, style the others depending on their distance to the current page</h2>
<p>Say you want to display all the parents links but the wiki homepage,
styled depending on their distance to the current page; just add the
following lines in <code>page.tmpl</code>:</p>
<pre><code><TMPL_LOOP NAME="PARENTLINKS">
<TMPL_IF NAME="DEPTH_0">
<TMPL_ELSE>
<a href="<TMPL_VAR NAME="URL">" class="height<TMPL_VAR NAME="HEIGHT">">
<TMPL_VAR NAME="PAGE">
</a> /
</TMPL_IF>
</TMPL_LOOP>
</code></pre>
<p>Then write the appropriate CSS bits for <code>a.height1</code>, etc.</p>
<h2><a name="index4h2"></a>Avoid showing title of toplevel index page</h2>
<p>If you don't like having "index" appear on the top page of the wiki,
but you do want to see the name of the page otherwise, you can use a
special <code>HAS_PARENTLINKS</code> template variable that the plugin provides.
It is true for every page <em>except</em> the toplevel index.</p>
<p>Here is an example of using it to hide the title of the toplevel index
page:</p>
<pre><code><TMPL_LOOP NAME="PARENTLINKS">
<a href="<TMPL_VAR NAME=URL>"><TMPL_VAR NAME=PAGE></a>/
</TMPL_LOOP>
<TMPL_IF HAS_PARENTLINKS>
<TMPL_VAR TITLE>
</TMPL_IF>
</code></pre>
<h2><a name="index5h2"></a>Full-blown example</h2>
<p>Let's have a look at a more complicated example; combining the boolean
loop variables provided by the plugin (<code>IS_ROOT</code> and friends) and
<code>HTML::Template</code> flow control structures, you can have custom HTML
and/or CSS generated for some special path components; e.g.:</p>
<pre><code><!-- all parents, skipping mother and grand'ma, inside a common div+ul -->
<div id="oldestparents">
<ul>
<TMPL_LOOP NAME="PARENTLINKS">
<TMPL_IF NAME="HEIGHT_2">
<TMPL_ELSE>
<TMPL_IF NAME="HEIGHT_1">
<TMPL_ELSE>
<li><a href="<TMPL_VAR NAME="URL">"><TMPL_VAR NAME="PAGE"></a></li>
</TMPL_IF>
</TMPL_IF>
</TMPL_LOOP>
</ul>
</div>
<!-- dedicated div's for mother and grand'ma -->
<TMPL_LOOP NAME="PARENTLINKS">
<TMPL_IF NAME="HEIGHT_2">
<div id="grandma">
<a href="<TMPL_VAR NAME="URL">"><TMPL_VAR NAME="PAGE"></a>
</div>
<TMPL_ELSE>
<TMPL_IF NAME="HEIGHT_1">
<div id="mother">
<a href="<TMPL_VAR NAME="URL">"><TMPL_VAR NAME="PAGE"></a>
</div>
</TMPL_IF>
</TMPL_IF>
</TMPL_LOOP>
<!-- eventually, the current page title -->
<TMPL_VAR NAME="TITLE">
</div>
</code></pre>
</div>
</div>
<div id="footer" class="pagefooter" role="contentinfo">
<div id="pageinfo">
<div class="pagedate">
Last edited <span class="date">Tue Feb 26 23:01:54 2019</span>
<!-- Created <span class="date">Wed Jul 16 21:43:57 2008</span> -->
</div>
</div>
<!-- from ikiwiki -->
</div>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-release
>
by-pkgid
>
d8544620e4ac7bee48ddb48c85d55709
>
files
>
584
