245 lines
13 KiB
HTML
245 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
|
|
<!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<!-- meta -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<meta name="description" content="History After having tried using wordpress to create a blog on a couple occasions and attempting to create a skin, I gave up due to the clunkiness of the process ..." />
|
|
<meta name="keywords" content="pelican-red, pelican, python" />
|
|
<meta name="author" content="Andrew Senetar" />
|
|
<meta name="organization" content="VoltaicIdeas"/>
|
|
<meta name="publisher" content="VoltaicIdeas"/>
|
|
<meta name="language" content="en" />
|
|
|
|
<!-- title -->
|
|
<title>VoltaicIdeas - pelican-red</title>
|
|
<meta content="http://blog.voltaicideas.net/pelican-red.html"/>
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="http://blog.voltaicideas.net/theme/css/app.css" />
|
|
|
|
<!-- Fonts -->
|
|
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans' rel='stylesheet' type='text/css'>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="http://blog.voltaicideas.net/favicon.ico" />
|
|
|
|
<!-- RSS/ATOM -->
|
|
<link href="http://blog.voltaicideas.net/feeds/index.atom.xml" type="application/atom+xml" rel="alternate" title="VoltaicIdeas ATOM Feed" />
|
|
<link href="http://blog.voltaicideas.net/feeds/index.rss.xml" type="application/rss+xml" rel="alternate" title="VoltaicIdeas RSS Feed" />
|
|
<link href="http://blog.voltaicideas.net/feeds/cat.python.atom.xml" type="application/atom+xml" rel="alternate" title="VoltaicIdeas Categories ATOM Feed" />
|
|
<link href="http://blog.voltaicideas.net/feeds/cat.python.rss.xml" type="application/rss+xml" rel="alternate" title="VoltaicIdeas Categories RSS Feed" />
|
|
|
|
<!-- Modernizr -->
|
|
<script data="http://blog.voltaicideas.net/theme/js/vendor/" src="http://blog.voltaicideas.net/theme/js/vendor/custom.modernizr.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<header id="nav" class="contain-to-grid">
|
|
<nav class="top-bar">
|
|
<ul class="title-area">
|
|
<!-- Title Area -->
|
|
<li class="name">
|
|
<h1><a href="http://blog.voltaicideas.net">VoltaicIdeas</a></h1>
|
|
</li>
|
|
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
|
|
</ul>
|
|
<section class="top-bar-section">
|
|
<!-- Menu -->
|
|
<ul class="left">
|
|
|
|
<li >
|
|
<a href="http://blog.voltaicideas.net/pages/about.html">About</a>
|
|
</li>
|
|
<li class="has-dropdown"><a>Categories</a>
|
|
<ul class="dropdown">
|
|
<li class='active'>
|
|
<a href="http://blog.voltaicideas.net/category/python.html">python</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="http://blog.voltaicideas.net/archives.html">Archives</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Social Links -->
|
|
<ul class="right">
|
|
<li><a href="https://github.com/arsenetar" title="Github"><i class="huge icon-github"></i></a></li>
|
|
<li><a href="http://www.linkedin.com/in/arsenetar/" title="Linkedin"><i class="huge icon-linkedin"></i></a></li>
|
|
</ul>
|
|
</section>
|
|
</nav>
|
|
</header> <!-- Content Area -->
|
|
<div class="row">
|
|
<div id="main" class="large-13 columns push-3">
|
|
<section>
|
|
<header>
|
|
|
|
<h1><a href="http://blog.voltaicideas.net/pelican-red.html" rel="bookmark" title="Bookmark to pelican-red">pelican-red</a></h1>
|
|
<h2 class="print_header subheader">From: <a href="http://blog.voltaicideas.net">VoltaicIdeas</a></h2>
|
|
</header>
|
|
<article itemscope itemtype="http://schema.org/Article">
|
|
<meta itemprop="description" content="History After having tried using wordpress to create a blog on a couple occasions and attempting to create a skin, I gave up due to the clunkiness of the process ..."/>
|
|
<meta itemprop="name" content="pelican-red"/>
|
|
<meta itemprop="url" content="http://blog.voltaicideas.net/pelican-red.html"/>
|
|
<meta itemprop="sourceOrganization" content="VoltaicIdeas"/>
|
|
<meta itemprop="inLanguage" content="en"/>
|
|
<meta itemprop="wordCount" content="578" />
|
|
<meta itemprop="copyrightHolder" content="Andrew Senetar"/>
|
|
<div class="article-details">
|
|
<span class="published">Published on: <abbr title="2013-08-03T21:23:00" itemprop="datePublished">2013-08-03 21:23</abbr></span>
|
|
<span class="author">By <a href="http://blog.voltaicideas.net/author/andrew-senetar.html" rel="author">Andrew Senetar</a></span>
|
|
<span class="category">In <a href="category/python.html">python</a></span>
|
|
<div>
|
|
<meta itemprop="keywords" content="pelican-red, pelican, python"/>
|
|
<span><a href="http://blog.voltaicideas.net/tags.html"><i class="icon-tag"></i></a></span>
|
|
<ul class="tag-list">
|
|
<li><a href="http://blog.voltaicideas.net/tag/pelican-red.html">pelican-red</a></li>
|
|
<li><a href="http://blog.voltaicideas.net/tag/pelican.html">pelican</a></li>
|
|
<li><a href="http://blog.voltaicideas.net/tag/python.html">python</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div itemprop="articleBody">
|
|
<h2>History</h2>
|
|
<p>After having tried using wordpress to create a blog on a couple occasions and attempting to create a skin, I gave up due to the clunkiness of the process and began to look for easier alternatives. After some searching I decided that <a href="http://getpelican.com">pelican</a> combined with github-pages would provided an adequate and easy to manage solution.</p>
|
|
<h2>Desired Features</h2>
|
|
<p>In preparing to create the pelican theme, I made a list of features I wanted.</p>
|
|
<ul>
|
|
<li>support all pelican defaults</li>
|
|
<li>responsive layout</li>
|
|
<li>social icons</li>
|
|
<li>Disqus comment support</li>
|
|
<li>code highlighting</li>
|
|
<li>Google Custom Search</li>
|
|
<li>Google Analytics</li>
|
|
<li>use CDN javascript when possible</li>
|
|
<li>author vcards</li>
|
|
<li>modified time on articles</li>
|
|
<li>license per article / page with global option</li>
|
|
<li>optional header image for articles and pages</li>
|
|
</ul>
|
|
<p>After reviewing the list, I decided to start developing a simple two column blog layout using the <a href="http://foundation.zurb.com/">Foundation 4</a> framework. I chose Foundation 4 mainly due to my previous use of it and my individual preference over bootstrap.</p>
|
|
<h2>The design ( pelican-red )</h2>
|
|
<p>The result became pelican-red ( readable on every device ). Pelican-red supports all of the features desired and was able to provide a clean layout for this blog. I continued working on the theme to change almost all of the features to be configured via the pelican configuration file to allow the theme to be generic and usable beyond this blog.</p>
|
|
<h3>Unique Features ( cool stuff )</h3>
|
|
<p>I am going to quickly discuss some of the cool features of the pelican-red theme in this section. </p>
|
|
<h4>Social Links</h4>
|
|
<p>The social links are used for both the site social links and the author social links. The social links are basically icon links to different social networking profiles using icon fonts instead of images. Over 20 different social networks are supported by the theme.</p>
|
|
<h4>Copyright</h4>
|
|
<p>The copyright settings allow for a site wide copyright with options to show the copyright by default on pages and articles separately. In addition individual articles may set a different copyright value. The copyright details are listed in the pelican settings file and are referenced with a simple alias for the copyright. Additionally if a Creative Commons copyright is used a iconified copyright link will be generated.</p>
|
|
<h4>Author Details</h4>
|
|
<p>The author details is what empowers the vcard functionality. In the pelican configuration file a listing of authors can be provided which included additional information about each author including things like: email, title, organization, and image. These will then be displayed as a vcard at the end of an article ( just certain fields ) and on the authors page.</p>
|
|
<h4>Extra Meta</h4>
|
|
<p>The articles and pages support extra meta including:</p>
|
|
<ul>
|
|
<li>modified</li>
|
|
<li>comments</li>
|
|
<li>copyright</li>
|
|
<li>image</li>
|
|
</ul>
|
|
<p>Of these the coolest is the image meta tag which allows for the article to have a header image which also doubles as the articles icon in the listings.</p>
|
|
<h3>The Future</h3>
|
|
<p>pelican-red currently uses some theme "hacks" to achieve the final design, some of which can be converted into pelican plugins. The modified time, image, and author information will be converted into plugins to modularize the code a bit better in the future. Additionally the site menu will have support for nested menu-items instead of just a single drop-down. Finally, the print layout will be improved a bit to look less cluttered in some spots. </p>
|
|
<h2>Additional Information</h2>
|
|
<p>The current documentation is in the <a href="https://github.com/arsenetar/pelican-red/blob/master/README.md">README.md</a> in the github repository. The README covers all the settings and features in more detail. The theme itself is at <a href="https://github.com/arsenetar/pelican-red">github</a>. Pelican-red is licensed under the MIT-License. </p>
|
|
</div>
|
|
<footer class="article_footer">
|
|
<ul class='no-bullet no-margin'>
|
|
|
|
|
|
<li>Article content licensed under:
|
|
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution 3.0 Unported">
|
|
|
|
<i class="large icon-cc"></i>
|
|
<i class="large icon-cc-by"></i>
|
|
</a>
|
|
</li>
|
|
<li><ul class="no-bullet no-margin">
|
|
</ul></li>
|
|
<div id="disqus_thread">
|
|
<script type="text/javascript">
|
|
var disqus_shortname = 'voltaicideas'; // required: replace example with your forum shortname
|
|
var disqus_identifier = 'pelican-red-2013-08-03T21:23:00';
|
|
var disqus_title = 'pelican-red';
|
|
var disqus_url = 'http://blog.voltaicideas.net/pelican-red.html';
|
|
// var disques_category_id =''; // disqus catagory id number from disqus
|
|
/* * * DON'T EDIT BELOW THIS LINE * * */
|
|
(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></footer>
|
|
</section>
|
|
</div>
|
|
<div id="mainAside" class="large-3 columns pull-13">
|
|
<aside>
|
|
<h3>Site Search</h3>
|
|
<div class="google_search">
|
|
<script>
|
|
(function() {
|
|
var cx = '007731975760117144904:78nyyuuzpc4';
|
|
var gcse = document.createElement('script');
|
|
gcse.type = 'text/javascript';
|
|
gcse.async = true;
|
|
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
|
|
'//www.google.com/cse/cse.js?cx=' + cx;
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(gcse, s);
|
|
})();
|
|
</script>
|
|
<gcse:search></gcse:search>
|
|
</div>
|
|
<h3>Blog Links</h3>
|
|
<ul id='blogRoll' class="no-bullet">
|
|
<li><a href="http://blog.voltaicideas.net/categories.html">Categories</a></li>
|
|
<li><a href="http://blog.voltaicideas.net/tags.html">Tags</a></li>
|
|
<li><a href="http://blog.voltaicideas.net/archives.html">Archives</a></li>
|
|
<li><a class="external" href="http://hkn.ecn.purdue.edu">HKN Beta</a></li>
|
|
<li><a class="external" href="http://getpelican.com/">Pelican</a></li>
|
|
<li><a class="external" href="https://github.com/arsenetar/pelican-red">pelican-red</a></li>
|
|
</ul>
|
|
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
<footer class="row" >
|
|
<div class="large-16 columns" id="mainFooter">
|
|
<span class="print_footer"><a href="http://blog.voltaicideas.net/pelican-red.html"> Fetched from: pelican-red.html</a> on 2013-11-09T16:51:53.976259</span>
|
|
©<span> Andrew Senetar </span><span>2013</span>
|
|
</div>
|
|
</footer>
|
|
<script src="http://blog.voltaicideas.net/theme/js/app.js"></script>
|
|
|
|
<!-- Tracking Code -->
|
|
<!-- Google Analytics -->
|
|
<script type="text/javascript">
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-42346765-1', 'voltaicideas.net');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<!-- Comment Count -->
|
|
<script type="text/javascript">
|
|
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
|
var disqus_shortname = 'voltaicideas'; // required: replace example with your forum shortname
|
|
|
|
/* * * DON'T EDIT BELOW THIS LINE * * */
|
|
(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>
|
|
</body>
|
|
</html> |