- Date:
2014-02-19
- Feature: Facebook OpenGraph Metadata
- Bug(s): #42, Broken Category URLs
Oscailte (IPA: [ˈɔsˠkɪlʲtʲɪ]) is a light and clean theme, built using inuit.css, for use on Octopress sites. The theme can be viewed in action on my personal site.
Oscailte requires that you use Sass 3.2.9 (Media Mark) or greater, so you may need to run a bundle update
before you run your initial rake generate
after installing the theme. You can check your current gem version by running gem list sass
in your Octopress directory.
Because Oscailte also uses git submodules to pull in inuitcss, when you run git clone you must add in the --recursive option in order to get it working.
You can install Oscailte like so:
$ cd your_octopress_directory
$ git clone --recursive https://github.com/coogie/oscailte.git .themes/oscailte
$ rake install['oscailte']
$ rake generate
Having problems when installing with zsh? Try rake install\['oscailte'\]
instead.
Oscailte includes a clean page, separated from the blogging capabilities of Octopress. The theme can be modified to instead use just the blog index as the homepage.
While excerpts are not necessarily a theme feature, Oscailte contains styling to support them. In order to use excerpts on your site simply insert <!-- more -->
somewhere inside your post content to trigger the break.
Oscailte makes use of the site.email
used in _config.yml
(if present) to grab and display your Gravatar if you use one. Otherwise, the theme will instead display the default Gravatar logo, which can be changed by replacing the file locally.
If you wish to make use of the Gravatar feature, please ensure you use an email address that you do not mind being publicly crawlable by bots/spiders.
Oscailte allows you to display links to your other online profiles in a quick and easy fashion. To display the sidebar links to your other profiles, you must add the following to your _config.yml
file.
(Oscailte does not make use of the default github_user
and twitter_user
keys)
...
social:
title: # Defaults to "Follow me!" if not present
adn: # App.net
dribbble:
facebook:
github:
googleplus:
linkedin:
pinterest:
stackoverflow:
twitter:
youtube:
Oscailte supports the above sites out of the box, but more may be (infinitely) added as the user sees fit.
The colours for these are defined in _variables.scss
as a key-value pair, with the key being used to create the class name. If you do add your own in and would like to colour it accordingly, you can create an entry in your own _variables.scss
file. You can see the SCSS at work on L#65 of _social.scss
...
$sites:
adn #4A484C,
dribbble #EA4C89,
facebook #3B5998,
github #333333,
gplus #db4a39,
linkedin #4875b4,
pinterest #CC2127,
stackoverflow #FE7A15,
twitter #00a0d1,
youtube #CC181E;
Oscailte supports the use of Facebook Open Graph metadata to give that little umph when somebody shares a link to your site on somebody's Facebook timeline/wall. To enable this, you must first add the following to your _config.yml
file:
...
facebook_app_id: xxxxxxxxxx
If you don't know how to get an App ID, you can pick one up by going to the Insights Dashboard and clicking the green button in the top-right that reads "Insights for your website". The App ID can be found in the modal that appears on the page. Make sure you add the App ID to your Octopress site, compile, and push to your hosting before proceeding with the modal on Facebook.
Some optional, yet useful options are also available to use on a per-page/post basis
---
layout: post
title: "Example Post Title"
date: 2014-02-18 11:35:55 +0000
comments: true
categories: [category 1, category 2]
# Provide an image thumbnail for Facebook OpenGraph
facebook:
image: http://yoursite.com/image.jpg
---
- og:title will try to use the
post.title
, falling back topage.title
, and then finallysite.title
- og:site_name uses the value of
site.title
- og:url will use the canonical link for the page, falling back to
site.url
- og:description will attempt to use the
description
from the post/page's own YML file, falling back to usecontent | raw_content
if it doesn't exist. - If
site.social.facebook
has been set, og:author will associate the post/page with that user. - If
facebook.image
has been set in the post/page's own YML file, og:image will use its value as an image for that particular page/post
Big thanks to @zclancy's post, "Twitter Cards, Facebook Open Graph, and Octopress" from which I stole referenced the code! ;)
Many of the colours used throughout Oscailte can be fully customised and found within _variables.scss
.
You can modify the default 'Lorem Ipsum' text on the homepage by editing the following files located in source\_includes\custom
:
- welcome.html
- grid_item_left.html
- grid_item_middle.html
- grid_item_right.html
By default, Oscailte comes with a homepage separate from the blogging capabilities. If you wish to use the Blog index as your default Hompage, you can run the following command from your root directory:
$ cp source/blog/index.html source/index.html
This will overwrite the default index with the contents of the Blog index. Be sure to update your source/_includes/custom/navigation.html
file.