There are two types of content in Pelican, articles and pages. So far I have only worked with articles. But now that I need to add an "About" page with a bio, contact information and maybe a few other things. In the future I may use pages to host content that will be updated over time but is better presented as a single package. For example I intend to add a travel map and log at some point. This would be more suited as a single page that get's updated frequently than a million tiny blog posts.
I need to create both a template for pages and a place for them to go in the content directory:
$ touch theme/templates/page.html
$ mkdir content/pages/
$ touch content/pages/about.md
Before creating the template I added some metadata to
about.md. Working with it is basically the same as an article.
Title: About
Date: 2017-02-28 18:15
Modified: 2017-02-28 18:15
CONTENT TODO
Notice there is less metadata than an article. I added a Modified
key which I will update whenever I change a page.
Next lets edit page.html. This is the template that content in
content/pages/ will be applied to. It is like a simpler article:
{% from 'macros.html' import get_page_meta_data_html %}
{% extends "base.html" %}
{% block title %}{{ page.title }} — {{ SITENAME }}{% endblock %}
{% block content %}
<h2 class="article-title">{{ page.title }}</h2>
<footer class="article-metadata">
{{ get_page_meta_data_html(page) }}
</footer>
<div>{{ page.content }}</div>
{% endblock %}
Notice that the CSS class names are still prepended with
"article-". These names not don't make sense, because they are used
with pages as well. I doubt I will ever confuse myself with this
inconsistency but since I will be using the exact same styles for both
type of content I think it's fair to remove the prefix, thus
.article-title and .article-metadata are now .title and
.metadata respectively.
Every thing is pretty similar to article.html minus the
navigation. I also changed how the metadata was displayed with a new
method in macros.html:
{% macro get_page_meta_data_html(page) %}
Last Modified:
{% if page.modified %}
{{ page.modified.strftime("%b %d, %Y") }}
{% elif page.date %}
{{ page.modified.strftime("%b %d, %Y") }}
{% endif %}
{% endmacro %}
This shows the "last modification" date for a page and that's it.
A page in content/pages is generated with a slug that looks like
pages/page.html. Thus my new about page will look like
pages/about.html. I have a link to the About page both in the Nav
Bar and on the front page.
To update the Nav Bar I update base.html:
<nav><a href="{{ SITEURL }}/pages/about.html">about</a> / <a href="{{ SITEURL }}/archives.html">archive</a> / <a href="#">rss</a></nav>
In the last post I added a greetings box to index.html. I put a link
to the about page in it and at the time thought the link would be {{
SITEURL }}/about.html. Turns out my assumption was wrong so I updated
that index.html to reflect the correct link.
Next I added content to about.md:
Title: About
Date: 2017-02-28 18:15
Modified: 2017-02-28 18:15
{ class='portrait large' }
**Email Me:** jared (at) jaredandrews (dot) com
**Online Profiles:** [HN](https://news.ycombinator.com/user?id=jaredandrews), [reddit](https://www.reddit.com/user/jared_and_fizz/), [Instagram](https://www.instagram.com/jtaaaaaa/), [GitHub](https://github.com/jaredandrews), [LinkedIn](https://www.linkedin.com/in/jaredtandrews), [Spotify](https://open.spotify.com/user/1236628403)
Greetings! My name is Jared Andrews. I am a freelance software developer. I was raised in Central Massachusetts, went to college at WPI, and lived in Allston, MA for serveral years after. I am currently traveling the United States indefinitely. I work remotely with several clients on Android and Web Development projects. If you are interested in working on a project with me, please check out my [Portfolio]() and/or [LinkedIn](https://www.linkedin.com/in/jaredtandrews) and shoot me an email. I would love to build a great app or website with you!
During my time in Boston I cofounded Rock and Culture blog, [Spark & Fizz](https://sparkandfizz.com) with some of my friends. If you are interested in DIY music and culture I would ask you to check it out. Along with handling the tech side of things I frequently write, edit videos and conduct interviews for Spark & Fizz.
The purpose of this website is to host content I created that has nowhere else to live. What that entails will become clear over time :D
### Technology Interests
* Structurally Sound Android Deveopment
* Android UI and Unit Testing
* Static Sites (Why is everything on the internet so **slow** in 2017!?)
* Artifical Intelligence
* Cellular Automata
* Generative Art
* The Post Automation World
### Other Interests
* [Hacking](http://www.catb.org/jargon/html/H/hacker.html)
* DIY Music, DIY everything really
* Motorcycle Riding and Maintainance
* [Stoicism](https://en.wikipedia.org/wiki/Stoicism) and [Absurdism](https://en.wikipedia.org/wiki/Absurdism)
* Rock Climbing
* SCUBA Diving
* Fringe Cultures
* Photography and Video Editing
*Portrait Graphic by [Alyssa Alarcón](https://alyssalarcondesign.com/), based on a photo by [Townsend Colon](https://twitter.com/townsendcolon?lang=en)*.
*Content on this site is copyright 2015 to infinity unless otherwise stated.*
*Any code on this site can be considered [MIT licensed](https://opensource.org/licenses/MIT)*.
*Any views expressed on this site are those of the author and do not reflect views held by past or present employers.*
That is a lot of text! Mostly using Markdown that we have already
seen. New Markdown that hasn't been used before is (two spaces at
the end of a line) which causes the next line to be on a new line, it
basically maps to <br/>.
The other thing of note is the class I assign the portrait: {
class='portrait large' }. This applies the CSS classes portrait and
large. jaredandrews.css has been updated with a large class:
.large {
display: block;
float: none;
}
...
/* Larger than tablet */
@media (min-width: 750px) {
.large {
display: inline-block;
float: left;
}
...
}
These classes make the text wrap the portrait on "larger than tablet" screen sizes and go under the portrait for mobile screen sizes.
I wanted to include the "current location" shown on index.html as
well but it turns out that Pelican variables are not available for
pages or articles. For now I will only show it on index.html though I
would like to display it on the About page in the future. To do this I
would need to make a specific page template for the about page.
The site is done! Well close... I still need to figure out how to turn on RSS and deploy this bad boy! Then I need to actually write more content :D
To view this site the way it looked once all the changes described in this article were made, click here.
Commit on GitHub.