CASPER theme for hugo

Casper is a single-column theme for Hugo. Ported from Hugo Theme Casper

Hugo 0.47.1 or lowerer Requirements

Features

Google Analytics (optional)
Disqus ( can disable comments by content)
Share buttons on Facebook, Twitter, Google (can disable share by content)
Big cover image (optional)
Custom cover by content (optional)
Mobile friendly
Tagging
Pagination
Menu
Syntax Highlighting

Theme usage and asumptions

All blog posts are in the post folder (content/post)
The homepage displays a paginated list of contents from the post Section (other contents may be added to main menu, see bellow)

Installation

Installing this theme

$ mkdir themes
$ cd themes
$ git clone https://github.com/icyleaf/hugo-theme-casper casper

Build your website with this theme

$ hugo server -t casper

Configuration

config.toml

BaseUrl= "http://example.com/"
LanguageCode= "en"
Title= "My blog is awesome"
paginate = 5
DisqusShortname = "YOUR_SHORT_NAME_HERE"
Copyright = "All rights reserved - 2015"
canonifyurls = true
hasCJKLanguage = true

[params]
  description = "this is my description"
  cover = "images/cover.jpg"
  author = "icyleaf"
  authorlocation = "Beijing. China"
  authorwebsite = "http://icyleaf.com"
  bio= "my bio"
  logo = "images/logo.png"
  googleAnalyticsUserID = "UA-2570916-5"
  # Optional RSS-Link, if not provided it defaults to the standard index.xml
  RelPermalink = "http://feeds.feedburner.com/..."

  # set socials account and link
  [[socials]]
    name = "github"
    link = "https://github.com/icyleaf"
  [[socials]]
    name = "twitter"
    link = "https://twitter.com/icyleaf"
  [[socials]]
    name = "facebook"
    link = "https://www.facebook.com/icyleaf"
  [[socials]]
    name = "linkedin"
    link = "https://www.linkedin.com/in/icyleaf"
  [[socials]]
    name = "instagram"
    link = "https://www.instagram.com/icyleaf"
  [[socials]]
    name = "douban"
    link = "https://www.douban.com/people/icyleaf"

  # set true if you are not proud of using Hugo (true will hide the footer note "Proudly published with HUGO.....")
  hideHUGOSupport = false

  # Setting a value will load highlight.js and enable syntax highlighting using the style selected.
  # See https://github.com/isagalaev/highlight.js/tree/master/src/styles for available styles
  # A preview of above styles can be viewed at https://highlightjs.org/static/demo/
  hjsStyle = "tomorrow-night"

  # Hide suggestions in single post
  hideSuggestions = false

Example : config.toml

Multiple authors configuration

In addition to providing data for a single author as shown in the example above, multiple authors can be configured via data/authors/*.(yml, toml, json) entries. If the key provided in .Site.Params.author matched a data/authors/* entry, it will be used as the default. Overrides per page can be done by a simple author = other_author_key entry in the front matter. For those pages where you want to omit the author block completely, a .Params.noauthor entry is also available.

Example author definition file:

name: John Doe
bio: The most uninteresting man in the world.
location: Normal, IL
website: http://example.com
thumbnail: images/john.png

Example override author per page file:

+++
author = ""
date = "2014-07-11T10:54:24+02:00"
title = ""
...
+++

Contents here

Menu configuration

On top right of the screen, a "Subscribe" button is displayed with a link to the RSS feed.

When you define a menu in the main config file, Then a menu button is displayed instead of the subscribe button When the use clicks the menu button, a sidebar appears and shows the subscribe button and all items defined in the main config file

ℹ️ If your added a metadata like menu="main" in a content file metadata, it will also be displayed in the main menu

Example of a menu definition in main config file.

[[menu.main]]
  name = "My Blog"
  weight = 120
  identifier = "blog"
  url = "/"

[[menu.main]]
  name = "About me"
  weight = 110
  identifier = "about"
  url = "/about"

Metadata on each content file, example

+++
author = ""
date = "2014-07-11T10:54:24+02:00"
draft = false
title = "dotScale 2014 as a sketch"
slug = "dotscale-2014-as-a-sketch"
tags = ["event","dotScale","sketchnote"]
image = "images/2014/Jul/titledotscale.png"
comments = true     # set false to hide Disqus comments
share = true        # set false to share buttons
menu = ""           # set "main" to add this content to the main menu
+++

Contents here

Mobile Friendly

Contact me

🪲 open an issue in github

🐦 https://twitter.com/icyleaf

icyleaf / hugo-theme-casper