Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoshiharuyamashita/blackburn
A Hugo theme built using Yahoo's Pure CSS
https://github.com/yoshiharuyamashita/blackburn
hugo hugo-theme
Last synced: about 10 hours ago
JSON representation
A Hugo theme built using Yahoo's Pure CSS
- Host: GitHub
- URL: https://github.com/yoshiharuyamashita/blackburn
- Owner: yoshiharuyamashita
- License: mit
- Created: 2016-01-17T20:57:01.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T09:34:16.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T05:41:08.541Z (about 2 months ago)
- Topics: hugo, hugo-theme
- Language: HTML
- Homepage:
- Size: 503 KB
- Stars: 318
- Watchers: 18
- Forks: 170
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Blackburn
Blackburn is a clear and responsive theme for [Hugo](//gohugo.io).
## Overview
* Based on Yahoo's [Pure CSS](http://purecss.io/) (v1.0.0)
* Fixed sidebar with social links:
* Twitter
* GNU social
* Facebook
* Google+
* Weibo
* Tumblr
* Instagram
* Flickr
* 500px
* Pinterest
* YouTube
* Vimeo
* Vine
* SlideShare
* LinkedIn
* Xing
* Reddit
* Hacker News
* GitHub
* GitLab
* Bitbucket
* Stack Overflow
* Server Fault
* Steam
* MobyGames
* Last.fm
* Discogs
* Keybase
* Client-side syntax highlighting by [Highlight.js](https://highlightjs.org) (v10.6.0)
* Web analytics by Piwik, Google Analytics, or [GoatCounter](https://www.goatcounter.com/)
* Comments by Disqus or [Commento](https://www.commento.io/)
* Icons by Font Awesome (v5.15.2)
## Demo
* [Demo](http://themes.gohugo.io/themes/blackburn/)
* You can also see it in action on my personal website [here](http://yoshiharuyamashita.com/)
## Screenshots
## Installation
In your Hugo site directory, run:
```shell
$ mkdir themes
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.git
```
or download from [here](//github.com/yoshiharuyamashita/blackburn/archive/master.zip).
See [Hugo Quickstart Guide](//gohugo.io/overview/quickstart/) for more information.
## Configuration
Example config.toml:
```toml
baseurl = "https://www.example.com/" # Make sure to end baseurl with a '/'
title = "Your site title"
author = "Your name"
# Shown in the side menu
copyright = "© 2016. All rights reserved."
canonifyurls = true
paginate = 10
[indexes]
tag = "tags"
topic = "topics"
[params]
# Shown in the home page
subtitle = "A Hugo Theme"
brand = "Blackburn"
googleAnalytics = "Your Google Analytics tracking ID"
disqus = "Your Disqus shortname"
# CSS name for highlight.js
highlightjs = "androidstudio"
highlightjs_extra_languages = ["yaml"]
dateFormat = "02 Jan 2006, 15:04"
# Include any custom CSS and/or JS files
# (relative to /static folder)
custom_css = ["css/my.css"]
custom_js = ["js/my.js"]
[params.piwikAnalytics]
siteid = 2
piwikroot = "//analytics.example.com/"
[menu]
# Shown in the side menu.
[[menu.main]]
name = "Home"
pre = ""
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
pre = ""
weight = 2
identifier = "post"
url = "/post/"
[[menu.main]]
name = "About"
pre = ""
weight = 3
identifier = "about"
url = "/about/"
[[menu.main]]
name = "Contact"
pre = ""
weight = 4
url = "/contact/"
[social]
# Link your social networking accounts to the side menu
# by entering your username or ID.
# SNS microblogging
twitter = "*"
gnusocial = "*" # Specify href (e.g. https://quitter.se/yourusername)
facebook = "*"
googleplus = "*"
weibo = "*"
tumblr = "*"
# SNS photo/video sharing
instagram = "*"
flickr = "*"
photo500px = "*"
pinterest = "*"
youtube = "*"
vimeo = "*"
vine = "*"
slideshare = "*"
# SNS career oriented
linkedin = "*"
xing = "*"
# SNS news
reddit = "*"
hackernews = "*"
# Techie
github = "yoshiharuyamashita"
gitlab = "*"
bitbucket = "*"
stackoverflow = "*"
serverfault = "*"
# Gaming
steam = "*"
mobygames = "*"
# Music
lastfm = "*"
discogs = "*"
# Other
keybase = "*"
```
## [Add hugo contact form](https://fabform.io/a/hugo-contact-form)
```
Your Email
Submit
```
## Usage
* Write Markdown files in `content/post`
* Add fixed pages (e.g., about.md) to the side menu by defining them under `[menu]` in the config.toml:
```toml
[[menu.main]]
name = "About"
pre = ""
weight = 2
identifier = "about"
url = "/about/"
```
* Override the theme by linking to custom CSS files or URLs:
```toml
[params]
custom_css = ["css/my.css"]
```
* Add new behaviours by linking to custom JS files or URLs:
```toml
[params]
custom_js = ["js/my.js", "https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.min.js"]
```
## Shortcodes
### pure_table
```
{{< pure_table
"columnName1|columnName2|...|columnName99"
"dataValue1|dataValue2|...|dataValue99"
"dataValue1|dataValue2|...|dataValue99"
"dataValue1|dataValue2|...|dataValue99"
"... and so on"
>}}
```
where each positional parameter is separated by the vertical bar (i.e., |). The resulting `` is set to have `class="pure-table pure-table-striped"`.
### fluid_imgs
```
{{< fluid_imgs
"class|src|alt"
"class|src|alt"
"... and so on"
>}}
```
where each positional parameter is separated by the vertical bar (i.e., |).
- `class`: specifies a Pure CSS unit class name (**required**)
- `src`: specifies the URL of an image (**required**)
- `alt`: specifies an alternate text for an image (optional)
See [here](http://yoshiharuyamashita.com/post/hugo-shortcode-to-show-multiple-images/) for examples.
### fluid_img (obsolete)
#### Positional
```
{{% fluid_img "/path/to/img" %}}
```
#### Named
```
{{% fluid_img class="pure-u-1-2" src="/path/to/img" alt="img description" %}}
{{% fluid_img class="pure-u-1-3" src="/path/to/img" caption="img description" %}}
```
* `class`, `alt` and `caption` are optional.
* See [Pure CSS Grids](http://purecss.io/grids/) for possible `class` values.
## License
* [MIT](//opensource.org/licenses/MIT)