Hyde-hyde

Hyde-hydeGFFFF is a Hugo's theme inspired and derived from @spf13's Hyde and Nate Finch's blog.

Breaking Changes

Since version 2.0, hyde-hyde has been overhauled and, therefore, might cause some disruptions.

The main styles are refactored and redeveloped using SCSS (see static-src/scss), poole.css and hyde.css are no longer needed because hyde-hyde.scss already incorporates relevant elements (I still keep them there for reference purpose)
The layouts have been heavily restructured and modularised further (see layouts)
Adding 'Portfolio' page inspired by Xiaoying Riley (@3rdwave_themes) Developer-Theme
Switching to use system fonts instead of Web fonts (e.g. privacy issues)
Experimenting a collapsible menu in mobile mode
Adding Table of Contents
- Configure using .Site.Params.toc with two possible value: "hugo" (using Hugo {{ .TableOfContents }}, and "tocbot" (using Tocbot), remove .Site.Params.toc to disable TOC
- Tocbot can be configured in layouts/partials/page-single/footer.html with options as described in its documentation

For more details, please refer to CHANGELOG. A real site in action can be found here and its WIP source for reference.

Usage

Installation

Hyde-hyde can be easily installed as many other Hugo themes:

$ cd HUGO_PROJECT

# then either clone hyde-hyde
$ git clone https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde

# or just add hyde-hyde as a submodule
$ git submodule add https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde

After that, choose hyde-hyde as the main theme.

config.toml

theme = "hyde-hyde"

config.yaml

theme : "hyde-hyde"

That's all. You can render your site using hugo and see hyde-hyde in action.

Options

Hyde-hyde essentially inherits most of Hyde's options. There are some extra options though

highlightjs = true: use highlight.js instead of Hugo built-in support for code highlighting
- highlightjsstyle="highlight-style": only when highlightjs = true, please choose one of many highlight.js's styles.
- Since v2.0.1, highlighting for each page can be fine-tuned in the front matter, for example
  - highlight = false (default true)
  - highlightjslanguages = ["swift", "objectivec"]
postNavigation = true|false (default true): Setting to false will disable the navigation Previous Post/ Next Post
relatedPosts = false|true (default false): Setting to true allows related posts. Please refer here for more details on related contents with Hugo.
GraphCommentId = "your-graphcomment-id": to use GraphComment instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".
[params.social]: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase.
```
[params.social]
	twitter = "htr3n"
	keybase = "htr3n"
	github = "htr3n"
	...
```

Customisations

Most of the customisable SCSS styles in static-src/scss/hyde-hyde and Hugo templates in hyde-hyde/layouts are modularised and can be altered/adapted easily.

Portfolio

Since version 2.0+, I added a portfolio page just in case. If you need it, simply add a menu section 'Portfolio' in config.toml as following.

[[menu.main]]
    name = "Portfolio"
    identifier = "portfolio"
    weight = xyz
    url = "/portfolio/"

In the folder content , create a subfolder portfolio and use the following folder/content structure as reference.

$ tree portfolio
portfolio
├── _index.md
├── p1.md
├── p1.png
├── p2.md
├── p2.png
    ...
├── pn.md
└── pn.png

As I design the section portfolio to be rendered as list, _index.md can be used to set the title for your portfolio (you can read more about _index.md here). For instance, when I want to set the title of my portfolio "Projects", the front matter of _index.md will be:

---
title: 'Projects'
---

The remaining of _index.md will be ignored.

For each project, just create a Markdown file with the following parameters in the front matter:

---
title: "Project P1's Title"
description: "A short description"
date: '2018-01-02'
link: 'https://project-p1.com'
screenshot: 'p1.png'
layout: 'portfolio'
featured: true
---
Here is a longer summary of the project. You can write as long as you wish.

Note:

date is important to sort the project chronologically

layout 'portfolio' is important as you don't want your project's page appear in the list of posts in the main page of your Web site but only in the Portfolio ;)

featured: true : when you want to show a project as featured project. It is default to false. Note that only one project should be marked featured: true , otherwise, the result could be random as the Hugo template will take the first one.

The body of the Markdown file will be the summary of the project.