Blackburn is a clear and responsive theme for Hugo.
- 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)
In your Hugo site directory, run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.gitor download from here.
See Hugo Quickstart Guide for more information.
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 = "*"
- 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"]
{{< 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
"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 "/path/to/img" %}}
{{% 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,altandcaptionare optional.- See Pure CSS Grids for possible
classvalues.