-
Notifications
You must be signed in to change notification settings - Fork 2
/
elegant-best-pelican-theme-features.html
executable file
·491 lines (479 loc) · 40.1 KB
/
elegant-best-pelican-theme-features.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Talha Mansoor" />
<meta name="copyright" content="Talha Mansoor" />
<meta name="description" content="Elegant is a minimal, stylish and responsive Pelican theme. Its unique features are search, MailChimp, notification bar, twitter card, and custom 404 page.
" />
<meta name="keywords" content="jinja2, bootstrap, front-end, Elegant - Pelican Theme, pelican theme, responsive theme, tipue search" />
<title>Elegant - Why it is the best Pelican theme · onCrash = 'reboot();'
</title>
<link rel="stylesheet" type="text/css" href="theme/css/slim-081711.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme/css/bootstrap-combined.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme/css/font-awesome.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme/css/elegant.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme/css/solarizedlight.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme/css/custom.css" media="screen">
<link rel="shortcut icon" href="theme/images/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="theme/images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="theme/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="theme/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="theme/images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="theme/images/apple-touch-icon-144x144.png" />
<link rel="icon" href="theme/images/apple-touch-icon-144x144.png" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43454971-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="content-sans-footer">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><span class=site-name><span style="color:black;">onCrash</span> <span style="color:darkblue;">=</span> <span style="color:#AA1032;">'reboot();'</span></span></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right top-menu">
<li ><a href="">Home</a></li>
<li ><a href="/categories.html">Categories</a></li>
<li ><a href="/tags.html">Tags</a></li>
<li ><a href="/archives.html">Archives</a></li>
<li><form class="navbar-search" action="/search.html" onsubmit="return validateForm(this.elements['q'].value);"> <input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input"></form></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10">
<article>
<div class="row-fluid">
<header class="page_header span10 offset2">
<h1><a href="/elegant-best-pelican-theme-features"> Elegant <small> Why it is the best Pelican theme </small> </a></h1>
</header>
</div>
<div class="row-fluid">
<div class="span2 table-of-content">
<nav>
<h4>Contents</h4>
<div class="toc">
<ul>
<li><a href="#search">Search</a></li>
<li><a href="#live-filter-for-tags">Live Filter for Tags</a></li>
<li><a href="#all-categories-but-with-zero-clutter">All Categories but with zero clutter</a></li>
<li><a href="#home-page-features">Home Page Features</a><ul>
<li><a href="#about-me">About me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#recent-articles">Recent Articles</a></li>
</ul>
</li>
<li><a href="#mailchimp">Mailchimp</a></li>
<li><a href="#collapsible-comments">Collapsible Comments</a></li>
<li><a href="#invite-visitors-to-comment">Invite Visitors to Comment</a></li>
<li><a href="#articles-count-with-every-tag-and-category">Articles Count with every Tag and Category</a></li>
<li><a href="#custom-404-page">Custom 404 Page</a></li>
<li><a href="#page-title">Page Title</a></li>
<li><a href="#next-and-previous-articles">Next and Previous Articles</a></li>
<li><a href="#code-style">Code Style</a></li>
<li><a href="#disqus-thread-id">Disqus Thread <span class="caps">ID</span></a></li>
<li><a href="#add-license-to-your-site">Add License to your Site</a></li>
<li><a href="#table-of-content">Table of Content</a></li>
<li><a href="#article-subtitle">Article Subtitle</a></li>
<li><a href="#site-subtitle">Site Subtitle</a></li>
<li><a href="#favicon-and-speed-dial-icon">Favicon and Speed Dial icon</a></li>
<li><a href="#modified-date">Modified Date</a></li>
<li><a href="#efficient-use-of-meta-tags">Efficient use of Meta Tags</a></li>
<li><a href="#web-safe-fonts">Web Safe Fonts</a></li>
<li><a href="#elegant-technical-nitty-gritty">Elegant - Technical Nitty-Gritty</a><ul>
<li><a href="#configuration-variables">Configuration Variables</a></li>
<li><a href="#license">License</a></li>
<li><a href="#contribute">Contribute</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class="span8 article-content">
<p>Elegant is a stylish, responsive, and minimal <a href="http://getpelican.com/">Pelican</a> theme that looks amazing across all screen resolutions and devices. </p>
<p>Elegant gives meaning to the expression “sand the under side of the drawer.” Every feature and style of Elegant is the result of a long thought process. </p>
<div style="text-align:center;">
<a class="btn btn-large btn-primary" href="https://github.com/talha131/pelican-elegant/archive/V1.3.zip" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on Github']);" target="_blank">Get Elegant <small>1.3</small></a>
<div><a href="#license" title="License Agreement for using Elegant Theme"><small>License Agreement</small></a>|<a href="https://github.com/talha131/pelican-elegant/blob/master/RELEASE_NOTES.md#version-13" target="_blank" title="Release notes for Version 1.3"><small>Release Notes</small></a></div>
<div><p><a href="http://gittip.com/talha131" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'Leave a Tip']);" style="color:#8B0000" target="_blank"> <i class="fa fa-gittip"></i> Show your support. Leave a tip! <i class="fa fa-gittip"></i></a></p></div>
</div>
<p>What makes Elegant so special? </p>
<h2 id="search">Search<a class="headerlink" href="#search" title="Permanent link">¶</a></h2>
<p>Static sites usually do not offer search. Elegant uses <a href="http://www.tipue.com/search/">Tipue Search</a>- an open source jQuery plugin, to offer search for your static site.</p>
<p>There are two search modes.</p>
<ol>
<li><strong><span class="caps">JSON</span> Mode</strong> Your site pages will be stored in <span class="caps">JSON</span> at your server. Tipue Search will use <span class="caps">AJAX</span> to access it and render search result. You need <a href="https://github.com/getpelican/pelican-plugins">Tipue Search plugin</a> to use this mode.</li>
<li><strong>Live Mode Search</strong> Tipue Search will fetch your site using Sitemap, index it and store it in the visitor’s cache. This mode requires <a href="https://github.com/getpelican/pelican-plugins">Sitemap plugin</a>.</li>
</ol>
<p>Use <span class="caps">JSON</span> mode if you value speed, or have a large site, or don’t want to overwhelm your host server for every search query.</p>
<p>Here is how the search result looks like</p>
<p><img alt="Search result for App Store" src="/images/elegant-theme_search-result.png"/></p>
<p>Search box is part of main navigation menu so that visitor can search from any page.</p>
<p><img alt="Search box" src="/images/elegant-theme_search-box.png"/></p>
<h2 id="live-filter-for-tags">Live Filter for Tags<a class="headerlink" href="#live-filter-for-tags" title="Permanent link">¶</a></h2>
<p>Elegant is a minimal theme. Instead of creating separate pages for each tag, Elegant shows all the tags on a single page. To help visitor find the tags he is interested in, Elegant offers live filter. </p>
<p>Go to tags page and type your required tag in “Find a tag” search box. Elegant will automatically filter the list.</p>
<p>For example, this is how my tags page looks like</p>
<p><img alt="Tags view unfiltered" src="/images/elegant-theme_tags-live-filter-default.png"/></p>
<p>As soon as I type “os”, all other tags are filtered out</p>
<p><img alt='Tags view filtered for "os"' src="/images/elegant-theme_tags-live-filter-filtered.png"/></p>
<p>With live filter, your reader will have no difficulty in picking up his desired tag from the list, even if your site has hundreds of tags.</p>
<h2 id="all-categories-but-with-zero-clutter">All Categories but with zero clutter<a class="headerlink" href="#all-categories-but-with-zero-clutter" title="Permanent link">¶</a></h2>
<p>Pelican by default creates a separate page for each category. Themes list all the articles filed in that category at its page. Elegant takes a different approach. </p>
<p>It lists all the categories and their articles on the same page. To reduce clutter and utilise space efficiently, each category and its list of articles in enclosed in <a href="http://getbootstrap.com/2.3.2/javascript.html#collapse">collapsible accordions</a>.</p>
<p>Here is how categories appear collapsed</p>
<p><img alt="Categories accordions collapsed" src="/images/elegant-theme_category-accordions-collapsed.png"/></p>
<p>And this is how they appear uncollapsed</p>
<p><img alt="Categories accordions uncollapsed" src="/images/elegant-theme_category-accordions-uncollapsed.png"/></p>
<p>Did you notice that categories are listed in ascending alphabetical order and articles are sorted by their date in descending order?</p>
<h2 id="home-page-features">Home Page Features<a class="headerlink" href="#home-page-features" title="Permanent link">¶</a></h2>
<p>This is the page that visitors see when they open your website. Your chance to make a good and lasting first impression. Most sites just display a list of recent posts. Elegant goes the extra mile. Check this out</p>
<p><img alt="Home Page Sample" src="/images/elegant-theme_home-page-features.png"/></p>
<p>You can see two sections here,</p>
<ol>
<li>About me</li>
<li>My Projects</li>
</ol>
<p>There is a third section below these two sections, “Recent articles”</p>
<p><img alt="Recent Articles Section" src="/images/elegant-theme_recent-posts.png"/></p>
<h3 id="about-me">About me<a class="headerlink" href="#about-me" title="Permanent link">¶</a></h3>
<p>You can write up your own About me section using <code>LANDING_PAGE_ABOUT</code> variable in your configuration. It is a dictionary that has two keys <code>title</code> and <code>details</code>. Value of <code>title</code> is displayed in the header of the home page, like in the above example it is “I design and build software products for iOS and <span class="caps">OSX</span>”. <code>details</code> is the text that appears under “About me” heading.</p>
<h3 id="projects">Projects<a class="headerlink" href="#projects" title="Permanent link">¶</a></h3>
<p>Projects list is read from <code>PROJECTS</code>. It is an array of dictionaries. Each dictionary has three keys, <code>name</code> which will have name of your project, <code>url</code> which will have <span class="caps">URL</span> of the project, and <code>description</code> which will have the description of the project. You can define as many projects as you want. Here is an example,</p>
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8
9</pre></div></td><td class="code"><div class="highlight"><pre><span class="n"><span class="caps">PROJECTS</span></span> <span class="o">=</span> <span class="p">[{</span>
<span class="s">'name'</span><span class="p">:</span> <span class="s">'Logpad + Duration'</span><span class="p">,</span>
<span class="s">'url'</span><span class="p">:</span> <span class="s">'https://github.com/talha131/logpad-plus-duration#logpad--duration'</span><span class="p">,</span>
<span class="s">'description'</span><span class="p">:</span> <span class="s">'Vim plugin to emulate Windows Notepad logging feature,'</span>
<span class="s">' and log duration of each entry'</span><span class="p">},</span>
<span class="p">{</span><span class="s">'name'</span><span class="p">:</span> <span class="s">'Elegant Theme for Pelican'</span><span class="p">,</span>
<span class="s">'url'</span><span class="p">:</span> <span class="s">'/pelican-elegant'</span><span class="p">,</span>
<span class="s">'description'</span><span class="p">:</span> <span class="s">'A clean and distraction free theme, with search and a'</span>
<span class="s">' lot more unique features, using Jinja2 and Bootstrap'</span><span class="p">}]</span>
</pre></div>
</td></tr></table>
<h3 id="recent-articles">Recent Articles<a class="headerlink" href="#recent-articles" title="Permanent link">¶</a></h3>
<p>Recent articles show last <code>RECENT_ARTICLES_COUNT</code> whose default value is 10. It also has a link to “all posts”.</p>
<h2 id="mailchimp">Mailchimp<a class="headerlink" href="#mailchimp" title="Permanent link">¶</a></h2>
<p>Mailchimp has become the preferred newsletter service. Elegant shows a form to subscribe to your newsletter, above the fold, in the right section of every article. Increased visibility is said to increase number of subscribers.</p>
<p><img alt="Mailchimp subscriber form" src="/images/elegant-theme_subscribe-form.png"/></p>
<p>You need to put your Mailchimp form action <span class="caps">URL</span> in <code>MAILCHIMP_FORM_ACTION</code> in your configuration file. You can also define <code>EMAIL_SUBSCRIPTION_LABEL</code>, <code>EMAIL_FIELD_PLACEHOLDER</code> and <code>SUBSCRIBE_BUTTON_TITLE</code> to customize user experience.</p>
<h2 id="collapsible-comments">Collapsible Comments<a class="headerlink" href="#collapsible-comments" title="Permanent link">¶</a></h2>
<p>Readers use scroll bar to track their progress when reading inside their browsers. Very often comments take up more space than the actual article. When comments take up more space, it throws the scroll bar proportion off and reader cannot judge his progress correctly. Hacker News hosted <a href="https://news.ycombinator.com/item?id=6246777">a discussion</a> on this topic.</p>
<blockquote>
<p>tons of online articles list comments on the same page, so the scroll bar is almost a negative incentive to keep reading.<br/>
“I’ve read this much of the article and I’m only 1/20th of the way down?” [user stops reading, unaware that there’s 450 comments and the article is actually pretty short]</p>
</blockquote>
<p>Elegant keeps the comments section hidden by default. Reader can hide and unhide the section by clicking on the comments section.</p>
<p>This is how comments section appear</p>
<p><img alt="Collapsed comments section" src="/images/elegant-theme_comments-section-collapsed.png"/></p>
<p>It expands when reader clicks on it</p>
<p><img alt="Uncollapsed comments section" src="/images/elegant-theme_comments-section-uncollapsed.png"/></p>
<h2 id="invite-visitors-to-comment">Invite Visitors to Comment<a class="headerlink" href="#invite-visitors-to-comment" title="Permanent link">¶</a></h2>
<p>Instead of just throwing in comments’ form at the end of every article, Elegant offers you a way to write introductory text that would appear before comments. Assign your message to <code>COMMENTS_INTRO</code> in your configuration file.</p>
<p>Write whatever you think is appropriate to invite the visitor to comment. Be creative! You can even put a link to your twitter account or newsletter there. Here is what I have chosen to say to my visitors.</p>
<p><img alt="Introductory text to the comments" src="/images/elegant-theme_comments-introduction.png"/></p>
<h2 id="articles-count-with-every-tag-and-category">Articles Count with every Tag and Category<a class="headerlink" href="#articles-count-with-every-tag-and-category" title="Permanent link">¶</a></h2>
<p>Readers of an article on your site usually look for other articles on the same topic. Categories and tags are a way of showing them related articles. Elegant displays the count of articles that you have written in a category or tag in a non-intrusive manner. </p>
<p>Every category and tag has the count of articles in superscript. So if you have written three articles in the C++ category or tag, it will have 3 in the superscript. This way visitor will know you have written other articles too on the same topic.</p>
<p>Check out the screenshots,</p>
<p><img alt="Count of articles in a category is displayed in superscript" src="/images/elegant-theme_category-superscript-count.png"/></p>
<p><img alt="Count of articles that have been tagged is displayed in superscript" src="/images/elegant-theme_tag-superscript-count.png"/></p>
<h2 id="custom-404-page">Custom 404 Page<a class="headerlink" href="#custom-404-page" title="Permanent link">¶</a></h2>
<p>Elegant has a custom Error 404 page for your readers.</p>
<p><img alt="Error 404 page" src="/images/elegant-theme_error-404-page.png"/></p>
<h2 id="page-title">Page Title<a class="headerlink" href="#page-title" title="Permanent link">¶</a></h2>
<p>Elegant follows following format for the <code><title></code> tag</p>
<div class="highlight"><pre><span class="n">Article</span> <span class="n">title</span> <span class="err">·</span> <span class="n">Site</span> <span class="n">Name</span>
</pre></div>
<p><img alt="Article title is always visible in the tab" src="/images/elegant-theme_page-title.png"/></p>
<p>Some sites put site title first and article title later in the <code><title></code> tag. There is a problem with this approach. When you open too many tabs, browser delimits tab’s title from the end. In such cases, only the first few words or even letters of the <code><title></code> are left visible. </p>
<p>If visitor has opened several tabs from your website, all tabs will have “Site Name…” title. User will need to click on each tab to identify his required tab from the content. But with Elegant’s approach article title will always be visible, and reader will have less difficultly in identifying the tab he is after. </p>
<p>Putting site title before the article title increases your site name visibility. Elegant achieves this by putting site name in the top navigation bar of every page, where it always stays above the fold. </p>
<h2 id="next-and-previous-articles">Next and Previous Articles<a class="headerlink" href="#next-and-previous-articles" title="Permanent link">¶</a></h2>
<p>One way to keep the visitor engaged is to show links to articles published before and after the article visitor is currently reading. Elegant shows newer article on the right hand side and older article on the left hand side at the bottom of every article. </p>
<p>Most of the content on web is written in left to right languages. In these languages pages are placed from left to right. It seemed natural to use the same order in Elegant. </p>
<p><img alt="Show next and previous articles" src="/images/elegant-theme_previous-next-article.png"/></p>
<p>Elegant does not require any plugin to show this list.</p>
<h2 id="code-style">Code Style<a class="headerlink" href="#code-style" title="Permanent link">¶</a></h2>
<p>Elegant uses <a href="http://ethanschoonover.com/solarized">Solarized</a> theme for syntax highlighting. Line numbers have a different background color so that they appear distinct from the code. Here is an example</p>
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4</pre></div></td><td class="code"><div class="highlight"><pre><span class="kt">int</span> <span class="nf">sample_function</span> <span class="p">(</span><span class="kt">void</span><span class="p">)</span> <span class="p">{</span>
<span class="n">printf</span> <span class="p">(</span><span class="s">"This is a sample function"</span><span class="p">);</span>
<span class="k">return</span> <span class="mi">0</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<h2 id="disqus-thread-id">Disqus Thread <span class="caps">ID</span><a class="headerlink" href="#disqus-thread-id" title="Permanent link">¶</a></h2>
<p>Most Pelican themes pass article <span class="caps">URL</span> to Disqus as the <a href="http://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables#disqus_identifier">Disqus identifier</a>. This puts you at a disadvantage. If you are forced to change <span class="caps">URL</span> of an article you will lose Disqus discussion for that article because Disqus identifier for the article will change too.</p>
<p>Elegant offers you <code>disqus_identifier</code> property that you can set in your article meta data. Set it to any unique string you want. It won’t be effected by the article <span class="caps">URL</span>.</p>
<p>If you choose not to use <code>disqus_identifier</code>, Elegant defaults to article <span class="caps">URL</span> and passes it on to Disqus.</p>
<h2 id="add-license-to-your-site">Add License to your Site<a class="headerlink" href="#add-license-to-your-site" title="Permanent link">¶</a></h2>
<p>You can put your license string in <code>SITE_LICENSE</code>. It will appear in the footer of every page of your site. Here is how license of my site looks like,</p>
<p><img alt="onCrashReboot site license" src="/images/elegant-theme-license.png"/></p>
<h2 id="table-of-content">Table of Content<a class="headerlink" href="#table-of-content" title="Permanent link">¶</a></h2>
<p>The idea behind Elegant’s design is to make reading a clean and distraction free experience. Table of contents is important but it is not part of the article content. Therefore, Elegant pushes out table of content to the left of the article’s main content. Its font size is relatively smaller. This way, table of content stays visible for navigation but reader’s attention to the article stays unaffected.</p>
<p>To utilise this feature, you need to use <a href="https://github.com/getpelican/pelican-plugins">extract_toc</a> plugin. Elegant encloses the table of content in <code><nav></code> tag for semantics.</p>
<h2 id="article-subtitle">Article Subtitle<a class="headerlink" href="#article-subtitle" title="Permanent link">¶</a></h2>
<p>Pelican lets you define title of your article in the meta data. Elegant adds subtitle support. Just define <code>subtitle</code> in your article’s meta data and it will appear along with your title. Here is an example,</p>
<p><img alt="Article subtitle example" src="/images/elegant-theme_article-subtitle.png"/></p>
<p>Article subtitle is displayed with the title in every list. To keep it visibly separate from title, subtitle is enclosed in <code><small></code> tag. When visible cue cannot be used, like in the title attribute of html anchor tag <code><a></code>, a hyphen is inserted between them.</p>
<p><img alt="Article title and subtitle separated with a hyphen" src="/images/elegant-theme_article-subtitle-hyphen.png"/></p>
<h2 id="site-subtitle">Site Subtitle<a class="headerlink" href="#site-subtitle" title="Permanent link">¶</a></h2>
<p>You can also define <code>SITESUBTITLE</code>, it appears in the footer, before site license.</p>
<p><img alt="Site subtitle" src="/images/elegant-theme_site-subtitle.png"/></p>
<h2 id="favicon-and-speed-dial-icon">Favicon and Speed Dial icon<a class="headerlink" href="#favicon-and-speed-dial-icon" title="Permanent link">¶</a></h2>
<p>Every decent site has favicon, Apple launcher icons and Opera speed dial icon. Elegant supports all of them.</p>
<p>Place your images in <code>content/theme/images</code> directory, and define <code>STATIC_PATHS</code> variable in your configuration</p>
<div class="highlight"><pre><span class="n">STATIC_PATHS</span> <span class="o">=</span> <span class="p">[</span><span class="s">'theme/images'</span><span class="p">,</span> <span class="s">'images'</span><span class="p">]</span>
</pre></div>
<p>Your images should have follow these naming schemes</p>
<ol>
<li><code>apple-touch-icon-114x114.png</code> </li>
<li><code>apple-touch-icon-144x144.png</code></li>
<li><code>apple-touch-icon-57x57.png</code></li>
<li><code>apple-touch-icon-72x72.png</code></li>
<li><code>apple-touch-icon.png</code></li>
<li><code>favicon.ico</code></li>
</ol>
<p>I recommend using <a href="http://iconifier.net/">Iconifier.net</a> to generate the set of images. </p>
<h2 id="modified-date">Modified Date<a class="headerlink" href="#modified-date" title="Permanent link">¶</a></h2>
<p>You will need to update your articles time and again. You can show the date article was last updated by defining <code>modified</code> in your article meta data. </p>
<p>This is how it is displayed in the side bar,</p>
<p><img alt="Modified Date" src="/images/elegant-theme_last-modified.png"/></p>
<p>Value of <code>modified</code> is treated as string, thus you can insert raw <span class="caps">HTML</span> in it. For example, <code>modified</code> meta data for this article is</p>
<div class="highlight"><pre>modified: <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/talha131/onCrashReboot/commits/master/content/Projects/elegant-theme.md"</span> <span class="na">title=</span><span class="s">"Revision History"</span><span class="nt">></span>Aug 29, 2013<span class="nt"></a></span>
</pre></div>
<p>Clicking on “Aug 29, 2013” will take reader to the Git repository which will show him revision history of the article.</p>
<h2 id="efficient-use-of-meta-tags">Efficient use of Meta Tags<a class="headerlink" href="#efficient-use-of-meta-tags" title="Permanent link">¶</a></h2>
<p>Elegant puts tags and category of your article in keywords tag <code><meta name="keywords"</code>. You can set <code>keywords</code> property in an article to define your own keywords that should be included there.</p>
<p>Your <code>SITE_DESCRIPTION</code> and article summary is used to define description tag <code><meta name="description"</code>.</p>
<p>Your <code>AUTHOR</code> name is used in copyright tag <code><meta name="copyright"</code>. </p>
<h2 id="web-safe-fonts">Web Safe Fonts<a class="headerlink" href="#web-safe-fonts" title="Permanent link">¶</a></h2>
<p>Elegant uses commonly available typefaces in every style rule. It has a list of closely matching fonts in the fallback list. For examples Baskerville is the first choice for headings. But if reader does not have Baskerville installed, Garamond will be used. If that too fails then Georgia will be used.</p>
<hr/>
<h2 id="elegant-technical-nitty-gritty">Elegant - Technical Nitty-Gritty<a class="headerlink" href="#elegant-technical-nitty-gritty" title="Permanent link">¶</a></h2>
<h3 id="configuration-variables">Configuration Variables<a class="headerlink" href="#configuration-variables" title="Permanent link">¶</a></h3>
<p>Here are the variables that you should set in your configuration to get the most out of Elegant</p>
<div class="highlight"><pre><span class="n"><span class="caps">PLUGINS</span></span> <span class="o">=</span> <span class="p">[</span><span class="s">'sitemap'</span><span class="p">,</span> <span class="s">'extract_toc'</span><span class="p">,</span> <span class="s">'tipue_search'</span><span class="p">]</span>
<span class="n">MD_EXTENSIONS</span> <span class="o">=</span> <span class="p">[</span><span class="s">'codehilite(css_class=highlight)'</span><span class="p">,</span> <span class="s">'extra'</span><span class="p">,</span> <span class="s">'headerid'</span><span class="p">,</span> <span class="s">'toc'</span><span class="p">]</span>
<span class="n">DIRECT_TEMPLATES</span> <span class="o">=</span> <span class="p">((</span><span class="s">'index'</span><span class="p">,</span> <span class="s">'tags'</span><span class="p">,</span> <span class="s">'categories'</span><span class="p">,</span><span class="s">'archives'</span><span class="p">,</span> <span class="s">'search'</span><span class="p">,</span> <span class="s">'404'</span><span class="p">))</span>
<span class="n">STATIC_PATHS</span> <span class="o">=</span> <span class="p">[</span><span class="s">'theme/images'</span><span class="p">,</span> <span class="s">'images'</span><span class="p">]</span>
<span class="n">TAG_SAVE_AS</span> <span class="o">=</span> <span class="s">''</span>
<span class="n">CATEGORY_SAVE_AS</span> <span class="o">=</span> <span class="s">''</span>
<span class="n">AUTHOR_SAVE_AS</span> <span class="o">=</span> <span class="s">''</span>
</pre></div>
<p>These are the optional configuration variables that you can define</p>
<div class="highlight"><pre><span class="n">RECENT_ARTICLES_COUNT</span> <span class="p">(</span><span class="n">integer</span><span class="p">)</span>
<span class="n">COMMENTS_INTRO</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">SITE_LICENSE</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">SITE_DESCRIPTION</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">EMAIL_SUBSCRIPTION_LABEL</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">EMAIL_FIELD_PLACEHOLDER</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">SUBSCRIBE_BUTTON_TITLE</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">MAILCHIMP_FORM_ACTION</span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n"><span class="caps">SITESUBTITLE</span></span> <span class="p">(</span><span class="s">'string'</span><span class="p">)</span>
<span class="n">LANDING_PAGE_ABOUT</span> <span class="p">({})</span>
<span class="n"><span class="caps">PROJECTS</span></span> <span class="p">([{},</span><span class="o">...</span><span class="p">])</span>
</pre></div>
<p>These are the optional article meta data variables that you can use</p>
<div class="highlight"><pre><span class="n">subtitle</span>
<span class="n">summary</span>
<span class="n">disqus_identifier</span>
<span class="n">modified</span>
<span class="n">keywords</span>
</pre></div>
<p>Blog <a href=""><code>onCrash=Reboot();</code></a> uses Elegant theme. You can see its configuration files at <a href="https://github.com/talha131/onCrashReboot">Github</a> for inspiration.</p>
<h3 id="license">License<a class="headerlink" href="#license" title="Permanent link">¶</a></h3>
<p>The license requires that you give credit to me, Talha Mansoor, as the author of the Elegant theme on every site that uses this theme. I have placed the attribution in the footer of every page. Do not remove it. If you need to remove or change the style of the attribution, please get in <a href="/#about-me">touch with me</a> first. </p>
<p>Along with this attribution clause, Elegant theme is licensed under The <span class="caps">MIT</span> License.</p>
<p>If you use my theme, I would love to hear from you. <a href="/#about-me">Get in touch</a> and let me know about it. I may link to your site too.</p>
<h3 id="contribute">Contribute<a class="headerlink" href="#contribute" title="Permanent link">¶</a></h3>
<p>Front end design is not my strong suite. I must have made some blunders in this design unknowingly. Please don’t let me go away with buggy code. </p>
<ul>
<li>File bugs at <a href="https://github.com/talha131/pelican-elegant/issues">Github issues</a>. </li>
<li>Share your ideas about the design in the comments below. </li>
<li>And most of all contribute improvements to <a href="https://github.com/talha131/pelican-elegant/">this project</a>.</li>
</ul>
<p>There are two problem areas that I can think of,</p>
<ol>
<li>Internet Explorer support</li>
<li>Web safe fonts. I developed this theme on a MacBook Retina. Although I have tried to make sure it looks great on all platforms but it still needs polish</li>
</ol>
<p>Besides these, there must be other bugs that I haven’t noticed yet. I need your help to hunt them down and make them behave.</p>
<section>
<p id="comment-message">So what do you think? Did I miss something? Is any part unclear? Leave your comments below. </p>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle disqus-comment-count" data-toggle="collapse" data-parent="#accordion2"
data-disqus-identifier="2189d14-elegant-a-theme-for-pelican"
href="/elegant-best-pelican-theme-features#disqus_thread">
Comments
</a>
</div>
<div id="disqus_thread" class="accordion-body collapse">
<div class="accordion-inner">
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'oncrashreboot';
var disqus_identifier = '2189d14-elegant-a-theme-for-pelican';
var disqus_url = '/elegant-best-pelican-theme-features';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> </div>
</div>
</div>
</div>
</div>
</section>
<aside>
<hr/>
<nav>
<ul class="articles_timeline">
<li class="previous_article">« <a href="/how-to-open-mac-app-store-programmatically" title="Previous: How to open Mac App Store Programmatically">How to open Mac App Store Programmatically</a></li>
<li class="next_article"><a href="/career-advice-software-developers-fitness-coach" title="Next: A Fitness Coach and the Software Developers">A Fitness Coach and the Software Developers</a> »</li>
</ul>
</nav>
</aside>
</div>
<section>
<div class="span2" style="float:right;font-size:0.9em;">
<h4>Published</h4>
<time pubdate="pubdate" datetime="2013-08-27T23:20:00">Aug 27, 2013</time>
<h4>Last Updated</h4>
<div class="last-updated"><a href="https://github.com/talha131/onCrashReboot/commits/master/content/Projects/elegant-theme.md" title="Revision History" target="_blank">Oct 11, 2013</a></div>
<h4>Category</h4>
<a class="category-link" href="/categories.html#Elegant---Pelican-Theme-ref">Elegant - Pelican Theme</a>
<h4>Tags</h4>
<ul class="list-of-tags tags-in-article">
<li><a href="/tags.html#bootstrap-ref">bootstrap
<span>1</span>
</a></li>
<li><a href="/tags.html#front-end-ref">front-end
<span>1</span>
</a></li>
<li><a href="/tags.html#jinja2-ref">jinja2
<span>1</span>
</a></li>
</ul>
<h4>Stay in Touch</h4>
<a href="http://twitter.com/talham_" title="My Twitter Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-twitter sidebar-social-links"></i></a>
<a href="https://github.com/talha131" title="My Github Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-github sidebar-social-links"></i></a>
<a href="http://gittip.com/talha131" title="My GitTip Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-gittip sidebar-social-links"></i></a>
<a href="mailto:[email protected]" title="My Email Address" class="sidebar-social-links" target="_blank">
<i class="fa fa-envelope sidebar-social-links"></i></a>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://oncrashreboot.us4.list-manage2.com/subscribe/post?u=e66b4cca51e40b859c64e8411&id=d135692a12" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h4>Get Monthly Updates</h4>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email..." required>
<div class="clear"><input type="submit" value="Send me Free updates" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</section>
</div>
</article>
</div>
<div class="span1"></div>
</div>
</div>
</div>
<footer>
<div id="footer">
<ul class="footer-content">
<li class="elegant-license"><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"> onCrash="Reboot();"</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="" property="cc:attributionName" rel="cc:attributionURL">Talha Mansoor</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</li>
<li class="elegant-power">Powered by <a href="http://getpelican.com/" title="Pelican Home Page">Pelican</a>. Theme: <a href="/pelican-elegant" title="Theme Elegant Home Page">Elegant</a> by <a href="" title="Talha Mansoor Home Page">Talha Mansoor</a></li>
</ul>
</div>
</footer> <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script>
function validateForm(query)
{
return (query.length > 0);
}
</script>
<script type="text/javascript">
var disqus_shortname = 'oncrashreboot';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<script language="javascript" type="text/javascript">
function uncollapse() {
var hash_str = window.location.hash;
if (window.location.hash.match(/^#comment-\d+$/))
{
var hash_str = '#disqus_thread';
}
$(hash_str).collapse({
toggle: true
})
}
</script>
<script type="text/javascript" language="JavaScript">
uncollapse();
</script>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=9376577;
var sc_invisible=1;
var sc_security="8d87792a";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="web analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/9376577/0/8d87792a/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>