sblg/article8.xml at master · kristapsdz/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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<article data-sblg-article="1" data-sblg-tags="howto">
	<header>
		<h2>How do I integrate with Open Graph?</h2>
		<div>Posted by <address>Kristaps Dzonsons</address> on <time datetime="2014-08-16">16 August, 2014</time></div>
	</header>
	<aside>Tips and tricks for using sblg: adding Open Graph meta tags.</aside>
	<p>
		It's standard practise to link one's blog to every manner of social media in a desperate attempt to be heard.
		Fortunately, <span class="nm">sblg</span> can help with that as of version 0.2.1.
		The secret is in special symbols, documented fully in <a href="sblg.1.html">sblg(1)</a>.
	</p>
	<p>
		Open Graph, as described at <a href="http://ogp.me/">ogp.me</a>, works by decorating <code class="prettyprint
			lang-html">&lt;meta&gt;</code> tags in the HTML head with certain attributes, e.g.,
	</p>
	<pre class="prettyprint lang-html">&lt;head prefix="og: http://ogp.me/ns#"&gt;
  &lt;meta property="og:key" content="value" /&gt;
  &lt;title&gt;My Blog Page&lt;/title&gt;
&lt;/head&gt;</pre>
	<p>
		You can see all sorts of tags on <a href="http://ogp.me/">ogp.me</a>, but let's specifically consider Facebook's <a
			href="https://developers.facebook.com/docs/opengraph">Open Graph</a> specification.
	</p>
	<p>
		To work with <span class="nm">sblg</span> articles, you need to use the special symbols in your article template, which we'll
		call <code>bar.xml</code>.
		What follows is a fragment of such a template:
	</p>
	<pre class="prettyprint lang-html">&lt;head prefix="og: http://ogp.me/ns#"&gt;
  &lt;meta property="og:url" content="&#36;{sblg-url}" /&gt;
  &lt;meta property="og:description" content="&#36;{sblg-asidetext}" /&gt;
  &lt;meta property="og:title" content="&#36;{sblg-titletext}" /&gt;
  &lt;title&gt;My Blog Page&lt;/title&gt;
&lt;/head&gt;</pre>
	<p>
		Note that I'm using <q>asidetext</q> and <q>titletext</q>, otherwise this would incorporate HTML tags as well.
		Next, make sure your page (let's call it <code>foo.xml</code>) has the appropriate data.
		Below is a full article, if an uninteresting one.
	</p>
	<pre class="prettyprint lang-html">&lt;article data-sblg-article="1"&gt;
  &lt;header&gt;
    &lt;h1&gt;My Title&lt;/h1&gt;
    &lt;aside&gt;A description of my article.&lt;/aside&gt;
    &lt;time datetime="2014-01-01"&gt;2014-01-01&lt;/time&gt;
  &lt;/header&gt;
  &lt;p&gt;
    Some sort of text.
  &lt;/p&gt;
&lt;/article&gt;</pre>
	<p>
		Now, when you run <span class="nm">sblg</span>, it will fill in these values with your article's data.
		You need to use either <b>-c</b> or <b>-C</b> mode in generating your output (and explicitly specify an output filename).
	</p>
	<pre class="prettyprint lang-sh">% sblg -c -o article.html -t bar.xml foo.xml</pre>
	<p>
		That's it!
		Your Open Graph parameters have now been filled from the article content.
	</p>
	<pre class="prettyprint lang-html">&lt;head prefix="og: http://ogp.me/ns#"&gt;
  &lt;meta property="og:url" content="article.html" /&gt;
  &lt;meta property="og:description" content="A description of my article." /&gt;
  &lt;meta property="og:title" content="My Title" /&gt;
  &lt;title&gt;My Blog Page&lt;/title&gt;
&lt;/head&gt;</pre>
</article>