]>
Commit | Line | Data |
---|---|---|
1 | # Hyde | |
2 | ||
3 | Hyde is a brazen two-column [hugo](https://gohugo.io) theme based on the [Jekyll](http://jekyllrb.com) theme of the same name. | |
4 | It pairs a prominent sidebar with uncomplicated content. | |
5 | ||
6 | ![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png) | |
7 | ||
8 | ||
9 | ## Contents | |
10 | ||
11 | - [Installation](#installation) | |
12 | - [Options](#options) | |
13 | - [Sidebar menu](#sidebar-menu) | |
14 | - [Sticky sidebar content](#sticky-sidebar-content) | |
15 | - [Themes](#themes) | |
16 | - [Reverse layout](#reverse-layout) | |
17 | - [Disqus](#disqus) | |
18 | - [Google Analytics](#google-analytics) | |
19 | - [Author](#author) | |
20 | - [Ported by](#ported-by) | |
21 | - [License](#license) | |
22 | ||
23 | ||
24 | ## Installation | |
25 | ||
26 | ### Quick Start | |
27 | ||
28 | To give you a running start this installation puts a fully configured [starter repo](https://github.com/forestryio/hyde-hugo-starter) into your Git account and sets it up in a content manager / CMS. | |
29 | ||
30 | _[Forestry](https://forestry.io) Starter-Kit:_ | |
31 | ||
32 | [![Import this project into Forestry](https://assets.forestry.io/import-to-forestry.svg)](https://app.forestry.io/quick-start?repo=forestryio/hyde-hugo-starter&provider=github&engine=hugo&version=0.49) | |
33 | ||
34 | ### Standard Installation | |
35 | ||
36 | To install Hyde as your default theme, first install this repository in the `themes/` directory: | |
37 | ||
38 | $ cd themes/ | |
39 | $ git clone https://github.com/spf13/hyde.git | |
40 | ||
41 | Second, specify `hyde` as your default theme in the `config.toml` file. Just add the line | |
42 | ||
43 | theme = "hyde" | |
44 | ||
45 | at the top of the file. | |
46 | ||
47 | ||
48 | ## Options | |
49 | ||
50 | Hyde includes some customizable options, typically applied via classes on the `<body>` element. | |
51 | ||
52 | ||
53 | ### Sidebar menu | |
54 | ||
55 | Create a list of nav links in the sidebar by assigning "menu=main" in the front matter. | |
56 | ||
57 | ||
58 | ### Sticky sidebar content | |
59 | ||
60 | 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. | |
61 | ||
62 | ```html | |
63 | <!-- Default sidebar --> | |
64 | <div class="sidebar"> | |
65 | <div class="container sidebar-sticky"> | |
66 | ... | |
67 | </div> | |
68 | </div> | |
69 | ||
70 | <!-- Modified sidebar --> | |
71 | <div class="sidebar"> | |
72 | <div class="container"> | |
73 | ... | |
74 | </div> | |
75 | </div> | |
76 | ``` | |
77 | ||
78 | ||
79 | ### Themes | |
80 | ||
81 | Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links). | |
82 | ||
83 | ![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png) | |
84 | ||
85 | There are eight themes available at this time. | |
86 | ||
87 | ![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) | |
88 | ||
89 | To use a theme, add the `themeColor` variable under `params`, like so: | |
90 | ||
91 | **TOML** | |
92 | ```toml | |
93 | theme = "hyde" | |
94 | ||
95 | [params] | |
96 | themeColor = "theme-base-09" | |
97 | ``` | |
98 | ||
99 | **YAML** | |
100 | ```yaml | |
101 | theme: "hyde" | |
102 | ||
103 | params: | |
104 | themeColor: "theme-base-09" | |
105 | ``` | |
106 | ||
107 | To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. | |
108 | ||
109 | ### Reverse layout | |
110 | ||
111 | ![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png) | |
112 | ||
113 | To reverse page orientation, add the `layoutReverse` variable under `params`, like so: | |
114 | ||
115 | **TOML** | |
116 | ```toml | |
117 | theme = "hyde" | |
118 | ||
119 | [params] | |
120 | layoutReverse = true | |
121 | ``` | |
122 | ||
123 | **YAML** | |
124 | ```yaml | |
125 | theme: "hyde" | |
126 | ||
127 | params: | |
128 | layoutReverse: true | |
129 | ``` | |
130 | ||
131 | ### Disqus | |
132 | ||
133 | You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable `disqusShortname` to your config file. | |
134 | ||
135 | **TOML** | |
136 | ```toml | |
137 | disqusShortname = "spf13" | |
138 | ``` | |
139 | ||
140 | **YAML** | |
141 | ```yaml | |
142 | disqusShortname : spf13 | |
143 | ``` | |
144 | ||
145 | > **Note:** Previous version 1.0 the Disqus shortname had to be defined inside the `[params]` block. | |
146 | ||
147 | ||
148 | ## Google Analytics | |
149 | ||
150 | Google Analytics can be enabled by assigning your tracking code to the `googleAnalytics` variable in the config file: | |
151 | ||
152 | **TOML** | |
153 | ```toml | |
154 | googleAnalytics = "Your tracking code" | |
155 | ``` | |
156 | ||
157 | **YAML** | |
158 | ```yaml | |
159 | googleAnalytics: Your tracking code | |
160 | ``` | |
161 | ||
162 | ## Author | |
163 | **Mark Otto** | |
164 | - <https://github.com/mdo> | |
165 | - <https://twitter.com/mdo> | |
166 | ||
167 | ## Ported By | |
168 | **Steve Francia** | |
169 | - <https://github.com/spf13> | |
170 | - <https://twitter.com/spf13> | |
171 | ||
172 | ## License | |
173 | ||
174 | Open sourced under the [MIT license](LICENSE.md). | |
175 | ||
176 | <3 |