Clean blog theme
Clean blog theme is a ported theme to Spress designed by Start Bootstrap., (*1)
Live demo., (*2)
, (*3)
Features
- Fully responsive.
- Distraction free blog text optimized for legibility.
- Support for tags and categories in posts.
- Contact form powered by getsimpleform.
- Comments powered by Disqus.
- Code highlighted thanks to highlight.js.
Installation
You can create a site based on Clean blog
or install this one as a theme of a pre-existing site., (*4)
Requirements:
* Spress >= 2.2.0, (*5)
Creating a new site based on this theme
Performs the following command and clean-blog theme will be
installed in mysite
folder:, (*6)
$ spress new:site mysite spress-add-ons/clean-blog-theme
Install as a theme
Go to your site folder and performs the following command:, (*7)
$ spress add:plugin spress-add-ons/clean-blog-theme
And add this line to the config.yml
file of your site:, (*8)
themes:
name: "spress-add-ons/clean-blog-theme"
How to update?
You can get the latest version of Clean blog theme with just run the following command:, (*9)
$ spress update:plugin
Contents
Layouts
Refers to files within the ./src/layouts
directory, that define the architecture
of the content., (*10)
-
default.html
: The base layout. The derived layouts inject their contents
into this file at the line that says {{ page.content }}
.
-
page.html
: Layout for pages.
-
post.html
: Layout for posts. They are located at ./src/content/posts
.
-
collection.html
: Layout used by collection pages: categories.html
and tags.html
.
Includes
Refers to snippets of code within the ./src/includes
directory. These ones can
be inserted in layouts and pages., (*11)
-
head.html
: Defines the content of <head></head>
in default layout.
-
footer.html
: Defines the default footer section.
-
nav.html
: Defines de top-menu based on pages with title.
-
paginator.html
: Defines the pagination of the content.
Configuration
Comments are powered by Disqus and they need a
disqus shortname. To get it, you need to create an account at this service.
It's free., (*12)
comments:
enabled: true
disqus_shortname: "your-shortname"
The top menu is composed by each of pages with title
attribute.
e.g: ./src/content/about.md
:, (*13)
title: "About me"
The contact form is a AJAX form configured in config.yml
:, (*14)
forms:
contact:
getsimpleform_api_token:
You need a API key from getsimpleform service. It's free., (*15)
Writing a post
To create a new post, runs new:post
command from Spress:, (*16)
$ spress new:post
Each post could has a header and thumbnail image. You can configure your image
and some data about it:, (*17)
header_img:
url: "assets/img/post-bg-07.jpg"
author: "Yuri Samoilov"
author_url: "https://flic.kr/p/mjhDwB"
Thumbnail images
The index.html
page can display a thumbnail image for each post. This kind
of images must be located at ./src/content/assets/img
folder and the image
may has the dimentions 100x100 px
., (*18)
At the thumb_img
key you can set the name of the image file like this:, (*19)
thumb_img: spress.png
License
The theme is available as open source under the terms of the
Apache 2.0., (*20)