Port of Mdo's excellent theme to Hugo
Branch: master
Clone or download
Pull request Compare This branch is 8 commits ahead, 10 commits behind spf13:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes
images
layouts
static
CHANGELOG.md
LICENSE.md
README.md
theme.toml

README.md

Hyde

Hyde is a brazen two-column hugo theme based on the Jekyll theme of the same name. It pairs a prominent sidebar with uncomplicated content.

Hyde screenshot

Contents

Installation

To install Hyde as your default theme, first install this repository in the themes/ directory:

$ cd themes/
$ git clone https://github.com/spf13/hyde.git

Second, specify hyde as your default theme in the config.toml file. Just add the line

theme = "hyde"

at the top of the file.

Options

Hyde includes some customizable options, typically applied via classes on the <body> element.

Sidebar menu

Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disabled this by removing the .sidebar-sticky class from the sidebar's .container. Sidebar content will then normally flow from top to bottom.

<!-- Default sidebar -->
<div class="sidebar">
  <div class="container sidebar-sticky">
    ...
  </div>
</div>

<!-- Modified sidebar -->
<div class="sidebar">
  <div class="container">
    ...
  </div>
</div>

Themes

Hyde ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add the themeColor variable under params, like so:

TOML

theme = "hyde"

[params]
  themeColor = "theme-base-09"

YAML

theme: "hyde"

params:
  themeColor: "theme-base-09"

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Hyde with reverse layout

To reverse page orientation, add the layoutReverse variable under params, like so:

TOML

theme = "hyde"

[params]
  layoutReverse = true

YAML

theme: "hyde"

params:
  layoutReverse: true

Disqus

You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable disqusShortname to your config file.

TOML

disqusShortname = "spf13"

YAML

disqusShortname : spf13

Note: Previous version 1.0 the Disqus shortname had to be defined inside the [params] block.

Google Analytics

Google Analytics can be enabled by assigning your tracking code to the googleAnalytics variable in the config file:

TOML

googleAnalytics = "Your tracking code"

YAML

googleAnalytics: Your tracking code

Author

Mark Otto

Ported By

Steve Francia

License

Open sourced under the MIT license.

<3