forked from kristapsdz/sblg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle8.xml
75 lines (75 loc) · 4.23 KB
/
article8.xml
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
66
67
68
69
70
71
72
73
74
75
<article data-sblg-article="1" data-sblg-tags="howto">
<header>
<h2>Tips and Tricks: 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"><meta></code> tags in the HTML head with certain attributes, e.g.,
</p>
<p class="code">
<code class="prettyprint lang-html"><head prefix="og: http://ogp.me/ns#"></code>
<code class="prettyprint lang-html tab"><meta property="og:key" content="value" /></code>
<code class="prettyprint lang-html tab"><title>My Blog Page</title></code>
<code class="prettyprint lang-html"></head></code>
</p>
<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>
<p class="code">
<code class="prettyprint lang-html"><head prefix="og: http://ogp.me/ns#"></code>
<code class="prettyprint lang-html tab"><meta property="og:url" content="${sblg-url}" /></code>
<code class="prettyprint lang-html tab"><meta property="og:description" content="${sblg-asidetext}" /></code>
<code class="prettyprint lang-html tab"><meta property="og:title" content="${sblg-titletext}" /></code>
<code class="prettyprint lang-html tab"><title>My Blog Page</title></code>
<code class="prettyprint lang-html"></head></code>
</p>
<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>
<p class="code">
<code class="prettyprint lang-html"><article data-sblg-article="1"></code>
<code class="prettyprint lang-html tab"><header></code>
<code class="prettyprint lang-html dtab"><h1>My Title</h1></code>
<code class="prettyprint lang-html dtab"><aside>A description of my article.</aside></code>
<code class="prettyprint lang-html dtab"><time datetime="2014-01-01"><wbr />2014-01-01<wbr /></time></code>
<code class="prettyprint lang-html tab"></header></code>
<code class="prettyprint lang-html tab"><p></code>
<code class="prettyprint lang-html dtab">Some sort of text.</code>
<code class="prettyprint lang-html tab"></p></code>
<code class="prettyprint lang-html"></article></code>
</p>
<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>
<p class="code">
<code class="prettyprint lang-sh">% sblg -c -o article.html -t bar.xml foo.xml</code>
</p>
<p>
That's it!
Your Open Graph parameters have now been filled from the article content.
</p>
<p class="code">
<code class="prettyprint lang-html"><head prefix="og: http://ogp.me/ns#"></code>
<code class="prettyprint lang-html tab"><meta property="og:url" content="article.html" /></code>
<code class="prettyprint lang-html tab"><meta property="og:description" content="A description of my article." /></code>
<code class="prettyprint lang-html tab"><meta property="og:title" content="My Title" /></code>
<code class="prettyprint lang-html tab"><title>My Blog Page</title></code>
<code class="prettyprint lang-html"></head></code>
</p>
</article>