# academic Academic is a [Jekyll](http://jekyllrb.com/) theme with a focus on simplicity, typography and flexibility. I originally designed it for my personal blog during my PhD thesis. Check out my [personal website](https://gaalcaras.com) or my [blog](https://sociologs.com) to get a better feel for the Academic theme. ![Academic screenshot](screenshot.png) **Simplicity**: both in design and configuration, Academic aims to let the writer and its readers focus on the content. Almost all of the theme configuration happens in the `_config.yml` file. **Typography**: the goal of Academic is to let the author write very long and detailed posts, while being kind to its readers' eyes. **Flexibility**: Academic can be used to generate different layouts while keeping the same look and feel. All features require you to *opt in*, which means that you can either use a very lean `_config.yml` or a very detailed one if you want to use more features. --- Table of contents: * [Features](#features) * [Installation](#installation) * [Usage](#usage) * [Change the brand color](#change-the-brand-color) * [Setup your `_config.yml` file](#setup-your-_config-yml-file) * [General settings](#general-settings) * [Author](#author) * [Navigation menu](#navigation-menu) * [Multilingual and i18n support](#multilingual-and-i18n-support) * [Plugins](#plugins) * [Layouts](#layouts) * [Post layout](#post-layout) * [Page layout](#page-layout) * [About layout](#about-layout) * [Archive layout](#archive-layout) * [404 layout](#404-layout) * [Contributing](#contributing) * [Release log](#release-log) * [License](#license) ## Features + **Responsive design** on every page + Designed with **typography best practices** (and my own tastes) in mind: + Simple but elegant fonts, with modular scale + High contrast colors and backgrounds as much as possible ([read more](http://contrastrebellion.com/), [and more](https://backchannel.com/how-the-web-became-unreadable-a781ddc711b6)) + Comfortable line length (around 66 characters, [read more](http://webtypography.net/2.1.2)) + Attention to vertical rhythm, law of proximity and so on ([read more](http://typographyhandbook.com/)) + If you'd like a **multilingual** website, Academic has basic **i18n** support (no plugin required): + *Supported languages* : English, French + Lang selector to change languages automatically added in header and footer + Basic SEO support for multilingual pages + Add an **image thumbnail** to illustrate your posts. It's displayed both on the post list and on the post itself. + Add a **summary** to your posts. It's used in the posts lists and on the post itself. + **MathJax** support (loaded only on posts layouts) + **Tables and footnotes** styled by default (with the `redcarpet` markdown engine) + Add your name and a shortbio at the end of each post + Easily add a "call to action" (links to the RSS feed and your Twitter if you gave your username in the `_config.yml` file) at the end of each post and on your homepage + If you want to, **add a Creative Commons license** to your website directly from your `_config.yml` file + **About page**: + Responsive two-columns layout + Just fill out your usernames for Twitter, Github, LinkedIn, Keybase ; contact email or personal website ; link to your curriculum vitae. + Academic automatically loads your Github profile picture. + Choose between a **navigation menu** at the top or a **short pitch** for your blog + Set a `dateformat` for the whole website directly from the `_config.yml` file + Navigation menu: + Hide pages from the navigation menu + Add external links in the menu from the `_config.yml` file + 404 page layout + Piwik tracking ## Installation Add this line to your Jekyll site's Gemfile: ```ruby gem "academic" ``` And add this line to your Jekyll site's `_config.yml`: ```yaml theme: academic ``` And then execute: ``` $ bundle ``` Or install it yourself as: ``` $ gem install academic ``` I suggest you install and use `redcarpet` to generate your markdown ([read more](http://jekyllrb.com/docs/configuration/#redcarpet)). ## Usage ### Change the brand color Academic uses 4 shades of grey (very dark grey for the main content, ligther greys to lessen the emphasis on some elements) and a single "brand" color. By default, the brand color is `#d33682` (purple). If it's not to your taste, you can easily change it by overriding the `$brand-color` variable in `/assets/styles.scss`. ```scss $brand-color: red; ``` ### Setup your `_config.yml` file #### General settings `title_html`: [optional] you can style the title of your website with html elements. Example: ```html title_html: "helloworld" ``` `pitch`: [optional] a small sentence or motto to quickly describe your blog. If no pitch is detected, Academic will fill the top bar with a navigation menu. If you want to display a short pitch in the top bar, Academic will put thput the navigation menu in the footer. Please note that `pitch` is only used in the top bar ; it is different from the `description` field (used in the footer and the meta tags for search engines). `description`: [recommended] short description for search engines. It's displayed in the footer of every page. Not to be confused with `pitch`. `cc`: [optional] choose among the [Creative Commons](https://creativecommons.org/licenses/) licenses (v4). Accepted values are : `by`, `by-sa`, `by-nd`, `by-nc`, `by-nc-sa`, `by-nc-nd`. Defining the `cc` variable will add a small sentence in the footer. If no value is given, a small copyright is added instead. `dateformat`: [optional] format the dates of the whole website. Default "%b %-d, %Y". Read [the documentation](https://help.shopify.com/themes/liquid/filters/additional-filters#date) to learn how you can customize the date format. `nb_posts_page`: [optional] number of posts to display on the homepage. By default, all posts are listed. Note that you should create a page with the archive layout. `archive_permalink`: [optional] permalink of the archive page. Set to `"/archive"` by default. `repo`: [optional] link to your website repo. If defined, it's added in the footer. Nothing is displayed otherwise. `piwik`: [optional] + `url`: [mandatory] URL of your Piwik Instance without a trailing slash (like `mywebsite.com/piwik`) + `site_id`: [mandatory] The ID of your website in your Piwik instance #### Author `email`: [optional] add email address in about layout. `curriculum`: [optional] + `name`: [optional] text of the link. Default : Curriculum Vitae. + `url`: [mandatory] url of the curriculum file. `shortbio`: [optional] describe yourself in a sentence or two. If `shortbio` is defined, a small element is added at the end of the post to introduce the author to the readers. `author_display`: [optional] if `true`, the author's name (and `author_website`) is added in the footer. `false` by default. `author_website`: [optional] url to the external website of the author. If `author_website` exists, it is added in the about layout and in the footer (if `author_display` is `true`). `twitter_username`: [optional] your Twitter username. If it exists, your account will be linked in the "call to action" boxes (homepage and posts), in the footer and on the about page. `github_username`: [optional] your Github username. If it exists, your account will be linked in the footer and on the about page. `keybase_username`: [optional] your Keybase username. If it exists, your account will be linked on the about page. `linkedin_username`: [optional] your LinkedIn username. If it exists, your account will be linked on the about page. #### Navigation menu `nav_ext_links`: [optional] you can choose to add external links in the top bar. Each item has two attributes: + `name`: [mandatory] text for the link + `url`: [mandatory] url Example: ```yaml nav_ext_links: - name: Link 1 url: http://jupiterbroadcasting.com/ - name: Link 2 url: http://wallabag.org/ ``` #### Multilingual and i18n support Academic works perfectly well as a single language website. By default, Academic is in English. You can easily switch to another supported language : ```yaml langs: ["fr"] ``` If you need to translate part of your pages or posts, Academic also supports basic i18n and multilingual features. To enable multilingual mode, just add the following to your `_config.yml`: ```yaml langs: ["fr", "en"] defaults: - scope: path: "" values: lang: "fr" ``` The `langs` variable should be an array containing your languages. Important: the first item should be your "default" language (ie the language that you translate posts from or/and that has the largest content available). The double quotes around the language *do* matter. Don't forget to define a default lang for your whole website. If you want to translate some of the variables in your `_config.yml`, you can just do this: ```yaml title: fr: "Nom du site en Français" en: "English name of the website" ``` Translating posts and pages is very easy. Let's say my default lang is `fr` and I want to translate `_posts/billet-au-hasard.md` to English. ```yaml --- layout: post title: "Billet au hasard" permalink: /fr/billet-au-hasard/ date: 2017-02-14 15:32:29 +0100 --- ``` First, I'll create a new file named `_posts/billet-au-hasard.en.md`. Both files have to share the *exact same name before the first extension* (`.md` or `.en.md`) in order to signal to Academic that these posts are translations of eachother. Then, in `_posts/billet-au-hasard.en.md`, add the lang and change the permalink in your frontmatter: ```yaml layout: post title: "Random post" permalink: /en/random-post date: 2017-02-14 15:32:29 +0100 lang: en ``` That's it! Academic will handle the lang selector and will add `` to the `` section to improve SEO. Note that you have to handle the permalinks manually. I recommend that you use the subdirectory `/lang/` naming convention everywhere, as exemplified above. You should at least take care of your homepage URL. If you'd like Academic to support more languages, please contribute by adding the appropriate translations in `/_data/i18n_academic.yml`. #### Plugins Academic is compatible with the `jekyll-last-modified-at` plugin ([repo](https://github.com/gjtorikian/jekyll-last-modified-at)). If installed, the last modified date will be (discretely) displayed in the posts lists and in the post layout. If you specified a Github `repo`, the last modified date will point to the revision history of the file. ### Layouts #### Post layout In the yaml header, you can add some tags to help Academic. `summary`: [optional] a short text or abstract. Used in the posts lists and on the post page. `thumbnail`: [optional] relative path to image or absolute url to an image that describes your post. Used in the posts lists and on the post page. #### Page layout In the yaml header, you can add some tags to help Academic. `invisible`: [optional] if `true`, then this page will not be listed in the navigation menu. #### About layout Will automatically put the content of the page on the right column. The left column will automatically be filled with the author info provided in the `_config.yml`. #### Archive layout Create a `archive.md` page, choose the "archive" layout. You don't need to write anything in this file, all posts published will be listed in reverse chronological order. #### 404 layout Create a `404.md` page, set the layout: ``` layout: pagenotfound ``` The content of the page will be used in the 404 page. ## Contributing Bug reports and pull requests are welcome on GitHub at https://github.com/gaalcaras/academic. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. ## Release log + 0.1.3 [2016-12]: design refinements (page and about layouts) + 0.1.2 [2016-12]: bug fixes (footer, assets and gemfile cleaning) + `repo` var + 0.1.1 [2016-12]: bug fixes (404 page layout, footer, posts list) + 0.1.0 [2016-12]: first release of the theme. ## License The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).