Adopting Canterville

Update Add support for galleries, exchange background image.

With my thoughts on the 13th. Iteration and my shown fondness for the Static Site Generator Nikola, it is now time to document the modifications applied to the canterville theme.

The first step was to fork canterville with the cheesy name alcacerville. I ran the install command nikola theme -i canterville and copied the necessary files into a folder called templates\alcacerville. For a start you need to alter the parent and alcacerville.theme file according to your names.

With that in place, I wanted to

  1. add an avatar
  2. add a short biography
  3. allow for more soial media links
  4. swap the fonts
  5. include the inhumanly supercharged w3css styles

and that always without doing too much damage to the original theme.

Configurations

Canterville as it is, supports some social media platforms. The URLs are stored in the conf.py within a variable GLOBAL_CONTEXT. From the getgo the variables TWITTER_URL, GITHUB_URL, LINKEDIN_URL and BANNER_URL were supported - and well, I added some additional fields.

# Put in global_context things you want available on all your templates.
# It can be anything, data, functions, modules, etc.
GLOBAL_CONTEXT = {
    'BANNER_URL': '/assets/img/bg.jpg',
    'AVATAR_URL': '/assets/img/avatar.jpg',
    ##
    'SKIP_PAGETITLE': False,
    'EXTRA_PAGETITLE': 'My Blog',
    'SKIP_DESCRIPTION': False,
    'EXTRA_SHORTBIO': 'I code stuff.',
    ## Sidebar
    'THREEMA_ID': 'YOURID',
    ## Businesscard
    'MASTODON_URL': 'https://mastodon.social/@handle',
    'PIXELFED_URL': 'https://pixelfed.social/@handle',
    'TWITTER_URL': 'https://twitter.com/handle',
    'GITHUB_URL': 'https://github.com/handle',
    'BITBUCKET_URL': 'https://bitbucket.com/handle',
    'GITLAB_URL': 'https://gitlab.com/handle',
    'NOTEBOOK_URL': 'https://web.page',
    'LINKEDIN_URL': 'https://www.linkedin.com/in/handle',
    'XING_URL': 'https://www.xing.com/profile/handle/cv',
    'RESEARCHGATE_URL': 'https://www.researchgate.net/profile/handle',
}

This would then render into something like this:

Any social media entry can be Noned and will then be skipped.

The now skippable headline defaults to the BLOG_TITLE variable or to the EXTRA_PAGETITLE. This method that also applies to the BLOG_DESCRIPTION and the EXTRA_SHORTBIO. With this in place, the landing page can function as a hub or business card, where people get to know you briefliy and can follow up on the most important links, before diving into your blog.

To visualize this the the modifications took place in three template files

base.tmpl

  • shows avatar.
  • overwrites empty post header with the default banner.
  • adds social media with help of font awesome.
  • sorts out BLOG_TITLE and BLOG_DESCRIPTION vs. EXTRA_PAGETITLE and EXTRA_SHORTBIO.

base_header.tmpl

  • in the header: links back to MASTODON_URL to enable verification.
  • in the nav: adds the link for the THREEMA_ID.

base_helper.tmpl

With w3.css this blog is now standing on the shoulders of giants, as I can use it in a similar way like other css frameworks1. I can style hints and alerts to show some metainformation

Current This solution still works remarkably good.
Outdated This article is marked outdated.

Realize tags Done, badges 9 and whatnot.

gallery.tmpl

  • Just copy paste to allow for galleries. Will have to style that later.

gallery_shortcode.tmpl

Future ideas

  • Style articles a little bit more
  • Optimizes image sizes
  • Use my own banner foto
  • Optimize the small banner size (I used pixels)
  • Rework presentation of tags

Credits where credits are due


  1. Bootstrap, Tailwind and all the others out there in the jungle.