sblg/article7.xml at master · TheMaxus/sblg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<article data-sblg-article="1" data-sblg-tags="howto">
	<header>
		<h2>Tips and Tricks: Fancy Navigation</h2>
		<div>Posted by <address>Kristaps Dzonsons</address> on <time datetime="2014-08-15">15 August, 2014</time></div>
	</header>
	<aside>Tips and tricks for using sblg: custom navigation.</aside>
	<p>
		<span class="name">sblg</span>'s ability to fill in <code class="prettyprint lang-html">&lt;nav data-sblg-nav="1" /&gt;</code>
		is fairly limited, but after version 0.0.12, you can specify exactly how you want to fill in navigation entries.
	</p>
	<p>
		Prior to this, navigation looked as follows after being run through the system:
	</p>
	<p class="code">
		<code class="prettyprint lang-html">&lt;nav data-sblg-nav="1"&gt;</code>
		<code class="prettyprint lang-html tab">&lt;ul&gt;</code>
		<code class="prettyprint lang-html dtab">&lt;li&gt;date: &lt;a href="source"&gt;title&lt;/a&gt;&lt;/li&gt;</code>
		<code class="prettyprint lang-html tab">&lt;/ul&gt;</code>
		<code class="prettyprint lang-html">&lt;/nav&gt;</code>
	</p>
	<p>
		Now, one can specify the <code class="code">&lt;nav data-sblg-navcontent="1"&gt;</code> attribute and allow the
		element's contents be filled in with keyword substitution.
		Using, for example, the <code class="code">${sblg-base}</code> parameter, you can have a custom navigation entry consisting of an
		image or otherwise!
	</p>
	<p class="code">
		<code class="prettyprint lang-html">&lt;nav data-sblg-nav="1" data-sblg-navcontent="1"&gt;</code>
		<code class="prettyprint lang-html tab">&lt;a href="&#36;{sblg-base}.html"&gt;</code>
		<code class="prettyprint lang-html dtab">&lt;figure&gt;&lt;img src="&#36;{sblg-base}.png" /&gt;&lt;figcaption&gt;&#36;{sblg-title}&lt;/figcaption&gt;&lt;/figure&gt;</code>
		<code class="prettyprint lang-html tab">&lt;/a&gt;</code>
		<code class="prettyprint lang-html">&lt;/nav&gt;</code>
	</p>
	<p>
		This will have navigation consist of a list of figures with images set to the filename base.
	</p>
	<p>
		<em>Note</em>: prior to version 0.2.1, these tags were simply (e.g.) <code>base</code> instead of <code>sblg-base</code>.
		The extra <code>sblg-</code> was added to prevent namespace issues.
	</p>
</article>