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 assets/scss),
hyde.cssare no longer needed because
hyde-hyde.scssalready 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
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.
theme = "hyde-hyde"
theme : "hyde-hyde"
That's all. You can render your site using
hugo and see
hyde-hyde in action.
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
postNavigation = true|false(default
true): Setting to
falsewill disable the navigation Previous Post/ Next Post
relatedPosts = false|true(default
false): Setting to
trueallows related posts. Please refer here for more details on related contents with Hugo.
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)
[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" ...
include_toc = false: Setting to
falsein FrontMatter will disable too short TOC data as your want.
Per PR #56, Gravatar pics can be used exclusively to
.Site.Params.authorimagevia the parameter
[params.social] gravatar = "email@example.com"
- 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.
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.
dateis 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.
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
[params] mainSections = ["posts"]
Mobile Mode with Collapsible Menu
Open sourced under the MIT license