292 lines
8.2 KiB
Markdown
292 lines
8.2 KiB
Markdown
GridSide Theme
|
|
==============
|
|
|
|
The GridSide theme is a multi-page portfolio and blog utilizing the
|
|
[Materialize][materialize] frontend framework. Comments can be added using
|
|
Disqus.
|
|
|
|
The theme contains a main page with a single grid of images representing
|
|
different sections of the website. Sections can be _post_, _gallery_, or
|
|
_project_ for various rendering.
|
|
|
|
- Current Materialize version is `0.97.0`.
|
|
- Current Font Awesome version is `4.4.0`.
|
|
- Current SideComments.js version is `0.0.3`.
|
|
- Current Masonry.js version is `3.3.1`.
|
|
- Current imagesLoaded.js version is `3.1.8`.
|
|
- Current Modernizr.js version is `2.8.3`.
|
|
- Current Highlight.js version is `8.7` and contains all 130 languages.
|
|
- Current lazysizes.js version is `1.2.0`.
|
|
- Current ls.noscript.js version is `1.2.0`.
|
|
- Current lightbox.js version is `2.8.1`.
|
|
- Current infinitescroll.js version is `2.1.0`.
|
|
|
|
|
|
|
|
Contents
|
|
--------
|
|
|
|
- [Installation](#installation)
|
|
- [Getting Started](#getting-started)
|
|
- [The Config File](#the-config-file)
|
|
- [Setting the homepage header](#setting-the-homepage-header)
|
|
- [Setting the homepage footer](#setting-the-homepage-footer)
|
|
- [Adding homepage cells](#adding-homepage-cells)
|
|
- [Specifying the main menu](#specifying-the-main-menu)
|
|
- [Creating a post](#creating-a-post)
|
|
- [Creating a project page](#creating-a-project-page)
|
|
- [Creating a gallery image](#creating-a-gallery-image)
|
|
- [Adding a custom post section](#adding-a-custom-post-section)
|
|
- [Adding a custom project section](#adding-a-custom-project-section)
|
|
- [Adding a custom gallery section](#adding-a-custom-gallery-section)
|
|
- [Nearly Finished](#nearly-finished)
|
|
- [Contributing](#contributing)
|
|
- [License](#license)
|
|
|
|
Installation
|
|
------------
|
|
|
|
Inside the folder of your Hugo site run:
|
|
|
|
$ mkdir themes
|
|
$ cd themes
|
|
$ git clone https://github.com/chipsenkbeil/grid-side
|
|
|
|
For more information read the official [setup guide][setup_guide] of Hugo.
|
|
|
|
Getting Started
|
|
---------------
|
|
|
|
### The Config File ###
|
|
|
|
Take a look inside the [`exampleSite`][exampleSite] folder of this theme.
|
|
You'll find a file called [`config.toml`][config.toml]. To use it, copy the
|
|
[`config.toml`][config.toml] in the root folder of your Hugo site. The config
|
|
file contains detailed explanation of each available property. Feel free
|
|
to customize this theme as you like.
|
|
|
|
### Setting the header ###
|
|
|
|
The header of the homepage serves as the main attraction for visitors. You
|
|
can provide your name, a description, and your email address on top of an
|
|
image.
|
|
|
|
```toml
|
|
[Params.Header]
|
|
|
|
name = "Your name"
|
|
description = "Your description"
|
|
email = "your@email.com"
|
|
image = "path/to/your/header/image"
|
|
```
|
|
|
|
Each field in the header is optional, meaning that you can choose to not
|
|
provide a name, description, or email. There are additional options you can use
|
|
in the header section as well! For more information, check out the
|
|
example [`config.toml`][config.toml].
|
|
|
|
### Setting the homepage footer ###
|
|
|
|
The footer of the homepage serves to provide contact links and other
|
|
miscellaneous connections from your main website. Each entry is composed of a
|
|
font awesome icon and a url. The icon is specified via `icon_class` and
|
|
represents the specific font awesome icon. E.g. `twitter` becomes
|
|
`fa fa-twitter`. The url is specified via `icon_link`.
|
|
|
|
```toml
|
|
[Params.Footer]
|
|
|
|
[[Params.Footer.List]]
|
|
|
|
icon_class = "twitter"
|
|
icon_link = "https://www.twitter.com/..."
|
|
|
|
[[Params.Footer.List]]
|
|
|
|
icon_class = "github"
|
|
icon_link = "https://www.github.com/..."
|
|
```
|
|
|
|
Each field in the header is optional, meaning that you can choose to not
|
|
provide a name, description, or email. There are additional options you can use
|
|
in the header section as well! For more information, check out the
|
|
example [`config.toml`][config.toml].
|
|
|
|
### Adding homepage cells ###
|
|
|
|
The other main aspect of the homepage is the homepage cells, or the grid of
|
|
images below your header. Each cell contains an image depicting its content
|
|
along with a title that is visible upon hovering over it. Each cell acts as a
|
|
hyperlink to other content on your site.
|
|
|
|
```toml
|
|
[Params.Cells]
|
|
|
|
[[Params.Cells.List]]
|
|
|
|
name = "Section name"
|
|
link = "/some/path/on/your/site"
|
|
image = "/some/image/file"
|
|
```
|
|
|
|
There are additional options you can use for each cell as well! For more
|
|
information, check out the example [`config.toml`][config.toml].
|
|
|
|
### Specifying the main menu ###
|
|
|
|
The main menu used on all list templates is specified via the menu name,
|
|
"Main". The fastest way to set your menu is to specify the `SectionPagesMenu`
|
|
option at the root of your config.
|
|
|
|
```toml
|
|
SectionPagesMenu = "Main"
|
|
```
|
|
|
|
### Creating a post ###
|
|
|
|
Each post in a post section should have the following front matter:
|
|
|
|
```toml
|
|
+++
|
|
title = "Post title"
|
|
date = "YYYY-MM-DD"
|
|
tags = [ "tag1", "tag2", ... ]
|
|
categories = [ "category1", ... ]
|
|
+++
|
|
```
|
|
|
|
Additionally, you can specify an image via the front matter `image = "url"`.
|
|
|
|
### Creating a project page ###
|
|
|
|
Each project in a project section should have the following front matter:
|
|
|
|
```toml
|
|
+++
|
|
title = "Project title"
|
|
tags = [ "tag1", "tag2", ... ]
|
|
categories = [ "category1", ... ]
|
|
+++
|
|
```
|
|
|
|
Furthermore, an image should be provided via `image = "url"` for more visual
|
|
effect. If one is not provided, a placeholder will be used.
|
|
|
|
Additionally, you can provide videos as an alternative to an image, which will
|
|
be displayed using the HTML5 video tag. Each of the following is optional:
|
|
|
|
```toml
|
|
+++
|
|
video_mp4 = "/path/to/mp4"
|
|
video_webm = "/path/to/webm"
|
|
video_ogv = "/path/to/ogv"
|
|
video_3gp = "/path/to/3gp"
|
|
video_fallback = "/path/to/image"
|
|
+++
|
|
```
|
|
|
|
The video fallback option is used both as the poster of the loading HTML5 video
|
|
and as the filler image if HTML5 video is not supported by the browser.
|
|
|
|
### Creating a gallery image ###
|
|
|
|
Each gallery image needs to be specified through the front matter of an
|
|
individual content item.
|
|
|
|
```toml
|
|
+++
|
|
title = "Image title used in lightbox"
|
|
date = "YYYY-MM-DD"
|
|
image = "/path/to/image"
|
|
+++
|
|
```
|
|
|
|
### Adding a custom post section ###
|
|
|
|
By default, the theme provides a custom view of `post/`. If you would like
|
|
to have a different section name than post, you can specify the section by
|
|
creating the following:
|
|
|
|
```
|
|
For layouts/custom_post_section/single.html:
|
|
|
|
{{ partial "post/single.html" . }}
|
|
|
|
```
|
|
|
|
```
|
|
For layouts/section/custom_post_section.html:
|
|
|
|
{{ partial "post/list.html" . }}
|
|
|
|
```
|
|
|
|
### Adding a custom project section ###
|
|
|
|
By default, the theme provides a custom view of `project/`. If you would like
|
|
to have a different section name than project, you can specify the section by
|
|
creating the following:
|
|
|
|
```
|
|
For layouts/custom_project_section/single.html:
|
|
|
|
{{ partial "project/single.html" . }}
|
|
|
|
```
|
|
|
|
```
|
|
For layouts/section/custom_project_section.html:
|
|
|
|
{{ partial "project/list.html" . }}
|
|
|
|
```
|
|
|
|
### Adding a custom gallery section ###
|
|
|
|
By default, the theme provides a custom view of `gallery/`. If you would like
|
|
to have a different section name than gallery, you can specify the section by
|
|
creating the following:
|
|
|
|
```
|
|
For layouts/custom_gallery_section/single.html:
|
|
|
|
{{ partial "gallery/single.html" . }}
|
|
|
|
```
|
|
|
|
```
|
|
For layouts/section/custom_gallery_section.html:
|
|
|
|
{{ partial "gallery/list.html" . }}
|
|
|
|
```
|
|
|
|
### Nearly Finished ###
|
|
|
|
In order to see your site in action, run Hugo's built-in local server.
|
|
|
|
$ hugo server -w
|
|
|
|
Now enter `localhost:1313` in the address bar of your browser.
|
|
|
|
Contributing
|
|
------------
|
|
|
|
Report any bugs using the [issue tracker][issue_tracker]. Submit your own bug
|
|
fixes or feature additions via a [pull request][pull_request].
|
|
|
|
License
|
|
-------
|
|
|
|
This theme is released under the MIT License. For more information read the
|
|
[license][license].
|
|
|
|
[materialize]: http://www.materializecss.com/
|
|
[setup_guide]: http://gohugo.io/overview/installing/
|
|
[exampleSite]: https://github.com/chipsenkbeil/grid-side/tree/master/exampleSite
|
|
[config.toml]: https://github.com/chipsenkbeil/grid-side/blob/master/exampleSite/config.toml
|
|
[issue_tracker]: https://github.com/chipsenkbeil/grid-side/issues
|
|
[pull_request]: https://github.com/chipsenkbeil/grid-side/pulls
|
|
[license]: https://github.com/chipsenkbeil/grid-side/blob/master/LICENSE
|
|
|