| | 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 |  |
| | 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 | To install Hyde as your default theme, first install this repository in the `themes/` directory: |
| | 27 | |
| | 28 | $ cd themes/ |
| | 29 | $ git clone https://github.com/spf13/hyde.git |
| | 30 | |
| | 31 | Second, specify `hyde` as your default theme in the `config.toml` file. Just add the line |
| | 32 | |
| | 33 | theme = "hyde" |
| | 34 | |
| | 35 | at the top of the file. |
| | 36 | |
| | 37 | |
| | 38 | ## Options |
| | 39 | |
| | 40 | Hyde includes some customizable options, typically applied via classes on the `<body>` element. |
| | 41 | |
| | 42 | |
| | 43 | ### Sidebar menu |
| | 44 | |
| | 45 | Create a list of nav links in the sidebar by assigning "menu=main" in the front matter. |
| | 46 | |
| | 47 | |
| | 48 | ### Sticky sidebar content |
| | 49 | |
| | 50 | 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. |
| | 51 | |
| | 52 | ```html |
| | 53 | <!-- Default sidebar --> |
| | 54 | <div class="sidebar"> |
| | 55 | <div class="container sidebar-sticky"> |
| | 56 | ... |
| | 57 | </div> |
| | 58 | </div> |
| | 59 | |
| | 60 | <!-- Modified sidebar --> |
| | 61 | <div class="sidebar"> |
| | 62 | <div class="container"> |
| | 63 | ... |
| | 64 | </div> |
| | 65 | </div> |
| | 66 | ``` |
| | 67 | |
| | 68 | |
| | 69 | ### Themes |
| | 70 | |
| | 71 | 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). |
| | 72 | |
| | 73 |  |
| | 74 | |
| | 75 | There are eight themes available at this time. |
| | 76 | |
| | 77 |  |
| | 78 | |
| | 79 | To use a theme, add the `themeColor` variable under `params`, like so: |
| | 80 | |
| | 81 | **TOML** |
| | 82 | ```toml |
| | 83 | theme = "hyde" |
| | 84 | |
| | 85 | [params] |
| | 86 | themeColor = "theme-base-09" |
| | 87 | ``` |
| | 88 | |
| | 89 | **YAML** |
| | 90 | ```yaml |
| | 91 | theme: "hyde" |
| | 92 | |
| | 93 | params: |
| | 94 | themeColor: "theme-base-09" |
| | 95 | ``` |
| | 96 | |
| | 97 | 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. |
| | 98 | |
| | 99 | ### Reverse layout |
| | 100 | |
| | 101 |  |
| | 102 | |
| | 103 | To reverse page orientation, add the `layoutReverse` variable under `params`, like so: |
| | 104 | |
| | 105 | **TOML** |
| | 106 | ```toml |
| | 107 | theme = "hyde" |
| | 108 | |
| | 109 | [params] |
| | 110 | layoutReverse = true |
| | 111 | ``` |
| | 112 | |
| | 113 | **YAML** |
| | 114 | ```yaml |
| | 115 | theme: "hyde" |
| | 116 | |
| | 117 | params: |
| | 118 | layoutReverse: true |
| | 119 | ``` |
| | 120 | |
| | 121 | ### Disqus |
| | 122 | |
| | 123 | You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable `disqusShortname` to your config file. |
| | 124 | |
| | 125 | **TOML** |
| | 126 | ```toml |
| | 127 | disqusShortname = "spf13" |
| | 128 | ``` |
| | 129 | |
| | 130 | **YAML** |
| | 131 | ```yaml |
| | 132 | disqusShortname : spf13 |
| | 133 | ``` |
| | 134 | |
| | 135 | > **Note:** Previous version 1.0 the Disqus shortname had to be defined inside the `[params]` block. |
| | 136 | |
| | 137 | |
| | 138 | ## Google Analytics |
| | 139 | |
| | 140 | Google Analytics can be enabled by assigning your tracking code to the `googleAnalytics` variable in the config file: |
| | 141 | |
| | 142 | **TOML** |
| | 143 | ```toml |
| | 144 | googleAnalytics = "Your tracking code" |
| | 145 | ``` |
| | 146 | |
| | 147 | **YAML** |
| | 148 | ```yaml |
| | 149 | googleAnalytics: Your tracking code |
| | 150 | ``` |
| | 151 | |
| | 152 | ## Author |
| | 153 | **Mark Otto** |
| | 154 | - <https://github.com/mdo> |
| | 155 | - <https://twitter.com/mdo> |
| | 156 | |
| | 157 | ## Ported By |
| | 158 | **Steve Francia** |
| | 159 | - <https://github.com/spf13> |
| | 160 | - <https://twitter.com/spf13> |
| | 161 | |
| | 162 | ## License |
| | 163 | |
| | 164 | Open sourced under the [MIT license](LICENSE.md). |
| | 165 | |
| | 166 | <3 |
projects / hyde.git / blame_incremental