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.
This theme was forked from alanpearce/hyde and modified to work better with blogdown.
The easiest way to get started is to create a new (empty) RStudio project, then
devtools::install_github('rstudio/blogdown') # install blogdown
blogdown::new_site(theme = 'gadenbuie/hyde')This will create a new Hugo site using this theme and will launch an example website in the RStudio Viewer.
For the complete blogdown documentation, see https://bookdown.org/yihui/blogdown/themes.html.
I made a few specific changes to the original Hyde theme, all of which are demonstrated in the config.toml in the exampleSite folder.
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.
Hyde includes some customizable options, typically applied via classes on the <body> element.
Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.
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>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).
There are eight themes available at this time.
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.
To reverse page orientation, add the layoutReverse variable under params, like so:
TOML
theme = "hyde"
[params]
layoutReverse = trueYAML
theme: "hyde"
params:
layoutReverse: trueYou can optionally enable a comment system powered by Disqus for the posts. Simply add the variable disqusShortname to the params in your config file.
TOML
[params]
disqusShortname = "spf13"YAML
params:
disqusShortname: "spf13"Mark Otto
Steve Francia
Open sourced under the MIT license.
<3