Git Product home page Git Product logo

blackburn's Introduction

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:
    • 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 (v9.12.0)
  • Web analytics by Google Analytics
  • Comments by Disqus
  • Icons by Font Awesome (v4.7.0)

Demo

  • Demo
  • You can also see it in action on my personal website here

Screenshots

screenshot

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 and caption are optional.
  • See Pure CSS Grids for possible class values.

License

blackburn's People

Contributors

ajdunevent avatar annjose avatar anselmolsm avatar anthonyfok avatar bep avatar brianz avatar charlesjlee avatar confirm4crit avatar drguildo avatar gbirke avatar insertjokehere avatar james-otten avatar josephting avatar linuturk avatar michaeltlombardi avatar odvinc avatar polyfloyd avatar spham-xyz avatar targodan avatar tristor avatar trozz avatar umanovskis avatar winkj avatar yoshiharuyamashita avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.