yoshiharuyamashita / Blackburn
Licence: mit
A Hugo theme built using Yahoo's Pure CSS
Stars: ✭ 279
Labels
Projects that are alternatives of or similar to Blackburn
hugo-lithium
Lithium - A simple responsive Hugo theme
Stars: ✭ 68 (-75.63%)
Mutual labels: hugo-theme, hugo
hugo-shopping-product-catalogue-simple
Hugo theme for shopping product catalogue
Stars: ✭ 45 (-83.87%)
Mutual labels: hugo-theme, hugo
bookworm-light
Bookworm is a clean and modern Hugo blog theme focused on high speed and support multiple authors.
Stars: ✭ 59 (-78.85%)
Mutual labels: hugo-theme, hugo
hugo-theme-lean-launch-page
A theme for people creating pre-launch pages for a product or business. Allows you to have a landing page while collecting emails.
Stars: ✭ 26 (-90.68%)
Mutual labels: hugo-theme, hugo
onepress
A simple, clean, and responsive "Hugo - Static Site Generator" theme for bloggers
Stars: ✭ 20 (-92.83%)
Mutual labels: hugo-theme, hugo
vanilla-bootstrap-hugo-theme
A vanilla Bootstrap theme for Hugo
Stars: ✭ 63 (-77.42%)
Mutual labels: hugo-theme, hugo
hugo-shortcodes-netlify-cms
Shortcodes of Hugo for Netlify CMS Text Editor
Stars: ✭ 50 (-82.08%)
Mutual labels: hugo-theme, hugo
hugo-tufte
Content centric Hugo blogging theme styled with Tufte-Css
Stars: ✭ 58 (-79.21%)
Mutual labels: hugo-theme, hugo
hugo-apero-docs
Apéro is a Hugo theme for personal websites. This is the documentation site, made with the theme 🍋
Stars: ✭ 56 (-79.93%)
Mutual labels: hugo-theme, hugo
simpleit-hugo-theme
Responsive Hugo theme for hierarchical content websites
Stars: ✭ 16 (-94.27%)
Mutual labels: hugo-theme, hugo
hugo-travelify-theme
Port of Aigars Silkalns's Wordpress theme Travelify to Hugo. Demo -
Stars: ✭ 34 (-87.81%)
Mutual labels: hugo-theme, hugo
Hugo Theme Zozo
🌟 A simple and beautiful theme for Hugo
Stars: ✭ 258 (-7.53%)
Mutual labels: hugo, hugo-theme
hugo-theme-crisp
A minimalist, responsive, and open-source theme for Hugo ported from Ghost.
Stars: ✭ 35 (-87.46%)
Mutual labels: hugo-theme, hugo
Binario
Responsive card-based & code-light Hugo theme
Stars: ✭ 79 (-71.68%)
Mutual labels: hugo-theme, hugo
Blogpaper
A graphical newspaper like blog theme for Hugo.
Stars: ✭ 18 (-93.55%)
Mutual labels: hugo-theme, hugo
hugo-initio
Hugo Theme port of Initio bootstrap template by GetTemplate
Stars: ✭ 58 (-79.21%)
Mutual labels: hugo-theme, hugo
Doks
Hugo theme helping you build modern documentation websites.
Stars: ✭ 256 (-8.24%)
Mutual labels: hugo, hugo-theme
Blackburn
Blackburn is a clear and responsive theme for Hugo.
Overview
- Based on Yahoo's Pure CSS (v1.0.0)
- Fixed sidebar with social links:
- GNU social
- Google+
- Tumblr
- Flickr
- 500px
- YouTube
- Vimeo
- Vine
- SlideShare
- Hacker News
- GitHub
- GitLab
- Bitbucket
- Stack Overflow
- Server Fault
- Steam
- MobyGames
- Last.fm
- Discogs
- Keybase
- Client-side syntax highlighting by Highlight.js (v10.6.0)
- Web analytics by Piwik, Google Analytics, or GoatCounter
- Comments by Disqus or Commento
- Icons by Font Awesome (v5.15.2)
Demo
Screenshots
Installation
In your Hugo site directory, run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.git
or download from here.
See Hugo Quickstart Guide for more information.
Configuration
Example config.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 = "<i class='fa fa-home fa-fw'></i>"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
pre = "<i class='fa fa-list fa-fw'></i>"
weight = 2
identifier = "post"
url = "/post/"
[[menu.main]]
name = "About"
pre = "<i class='fa fa-user fa-fw'></i>"
weight = 3
identifier = "about"
url = "/about/"
[[menu.main]]
name = "Contact"
pre = "<i class='fa fa-phone fa-fw'></i>"
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 = "*"
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:
[[menu.main]]
name = "About"
pre = "<i class='fa fa-user fa-fw'></i>"
weight = 2
identifier = "about"
url = "/about/"
- Override the theme by linking to custom CSS files or URLs:
[params]
custom_css = ["css/my.css"]
- Add new behaviours by linking to custom JS files or URLs:
[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 <table>
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 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
andcaption
are optional. - See Pure CSS Grids for possible
class
values.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].