Archived
1
0
Fork
You've already forked hyde
0
Customised hugo theme
This repository has been archived on 2022年09月23日. You can view files and clone it, but you cannot make any changes to its state, such as pushing and creating new issues, pull requests or comments.
  • CSS 74.7%
  • HTML 25.3%
2019年06月15日 20:32:22 +02:00
archetypes adding archetypes to the existing themes 2014年05月23日 15:45:21 -04:00
images removing old screenshot 2014年10月08日 19:17:58 -04:00
layouts Merge remote-tracking branch 'upstream/master' into HEAD 2019年06月15日 20:32:22 +02:00
static Merge remote-tracking branch 'upstream/master' 2018年06月17日 19:23:18 +02:00
CHANGELOG.md Add CHANGELOG 2017年09月07日 22:06:50 +02:00
LICENSE.md Adding the hyde theme 2014年04月26日 16:25:13 -06:00
README.md Add Quick Start Forestry Button to Readme.md 2018年10月18日 16:35:12 +02:00
theme.toml Removed deprecated .Hugo and .RSSLink 2019年04月27日 20:02:51 +02:00

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

Quick Start

To give you a running start this installation puts a fully configured starter repo into your Git account and sets it up in a content manager / CMS.

Forestry Starter-Kit:

Import this project into Forestry

Standard 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