jekylldark is a Jekyll theme with a dark color scheme. It features a responsive layout with customizable navbar, sidebar, content area, and footer using HTML, Markdown, and Liquid. It is important to note that while there is templating for all of these site areas, it is not necesary to use them all. By leaving out a config file, it is possible to eliminate an element from the site. Please see the README for information about how to apply the theme to your Jekyll site.
In order for the site to work properlly, it will be necessary to create a few
files and folders. To start, make sure that your _config.yml
file has the title and the url of your site. Then, you will want to add a
title-description
. This is the desciption that will appear under
the title of the site in the sidebar. You can additionally add a
full-desciption
that will appear in the footer of the site where
there is more room. The >
means to ignore line breaks until
the next item. It is important to note where -
's are used as
these matter when creating lists.
Next, create a folder in the root of the site called _data
. This
is where we will create the files, footer.yml
,
navigation.yml
, and sidebar.yml
. Here is what the
files that populate this site look like.
By using some key words in each of these files, specifically styled content
areas are created. In the footer, adding header: Title
will add
the title and the full description of the site and adding header:
Connect
will create an area for social links and icons. The icons come
from Font Awesome and are retrieved from
their CDN by adding image: NAMEOFICON
. In almost all cases the
name of the icon is an all lowercase, no spaces version of the name of the
site so there should be no need to look it up.
The navbar can be filled out with main navigation locations and with dropdown lists. The way that this is done can be seen in the above gist.
The sidebar of the site has special areas for projects and posts. These are
created with header: Featured Projects
and header:
posts
.
Information on creating posts can be found on the posts page and examples of the different styled elements can be found on the examples page.