Yet Another Hyde-hyde

Yet Another Hyde-hyde is a Hugo's theme originally copied from Hyde-Hyde.

Example Site is a live sample of the sire

Breaking Changes

I'm sure that there will be some from Hyde-Hyde and will list them here, if I remember

Usage

Installation

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

$ cd HUGO_PROJECT

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

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

TODO: Add how to add the theme as a Hugo Mod

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

config.toml

theme = "ya-hyde-hyde"

config.yaml

theme : "ya-hyde-hyde"

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

Options

Ya-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.
- 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".
UtterancesRepo = "owner/repo-name": to use Utterances instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".
- UtterancesIssueTerm = "pathname" Method for Utterances to match issue's to posts (pathname, url, title, og:title)
- UtterancesTheme = "github-light" Theme for Utterances (github-light, github-dark)
Commento = true: to use Commento instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".
- CommentoHost = "your-commento-instance" Self-hosted Commento instance. This is not required if you're a Commento.io user.
[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 = "de_mote"
	github = "tanzy"
	...
```
include_toc = false: Setting to false in FrontMatter will disable too short TOC data as your want.
Gravatar pics can be used exclusively to .Site.Params.authorimage via the parameter .Site.Params.social.gravatar
- ```
[params.social]
	gravatar = "your.email@domain.com"
```

Customisations

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

Portfolio

I renamed the portfolio page to projects as it fitted me better. If you need it, simply add a menu section 'Projects' in config.toml as following.

[[menu.main]]
    name = "Projects"
    identifier = "projects"
    weight = xyz
    url = "/projects/"

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

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

projects is designed to be rendered as list, _index.md can be used to set the title for your projects (you can read more about _index.md here). For instance, when I want to set the title of my projects "Portfolio", the front matter of _index.md will be:

---
title: 'Portfolio'
---

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: 'projects'
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 'projects' 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 Projects ;)

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.

If you want to adjust the projects page to your needs, please have a look at the main template, that uses this partial template and this SCSS style.

Posts in home page

By default hugo will show in your home page the most populated section. This means that if you have more projects than posts, by default your home page will list your projects instead of your posts. If you want to change this behaviour you can change the mainsections. For example, for the exampleSite this is how you should change the config.toml file: