This is a slightly tweaked fork of the Hyde-hyde theme by Alex Tran . The major tweaks are to make it so that it is pulling from local files as much as possible rather than CDNs, reduce the download size by not requiring pulling in all of Font Awesome for the handful of icons used, change some of the available themes and presentation for my personal tastes, and to support more social media sites. A list of changes to date are:
- Replace truncation text from ... ➦ to (More...)
- Converted highlight.js to pull from local files
- Converted Font Awesome to pull from local files
- Converted specifically used icons (social media, post meta, etc.) to use local SVGs not Font Awesome
- Made Font Awesome optionally available with params.includeFontAwesome
- Added a sidebar only theme that uses a dark gray color
- Added a sidebar only theme that uses a dark gray gradation color
- Softened the look of the previous/next buttons on post single page view
- Added some more documentation to the exampleSite's config.toml
- Added lots more social media site options for the bar
The text below this is from the original project and I will attempt to maintain it updated as such...
Hyde-hyde
is a Hugo's theme inspired and derived from @spf13's Hyde and Nate Finch's blog.
NOTICE: Maintainers / collaborators seeking: As I'm underwater with my full time job at the moment, I'm actively looking for and welcome any new maintainers or collaborators. If you are interested, comment on #130 and I can add you to the project. TIA.
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),
poole.css
andhyde.css
are no longer needed becausehyde-hyde.scss
already incorporates relevant elements (I still keep them there for reference purpose)- Per PR [#45 by @jd4no,
hyde-hyde
can use SCSSs directly in the templates instead of the generated CSSs. The generated CSSs and the generated resources are still kept inhyde-hyde
in order to ensure the demo on Hugo theme site working.
- Per PR [#45 by @jd4no,
- 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
- Configure using
For more details, please refer to CHANGELOG. A real site in action can be found here and its WIP source for reference.
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.
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
(defaulttrue
): Setting tofalse
will disable the navigation Previous Post/ Next Post -
relatedPosts = false|true
(defaultfalse
): Setting totrue
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 withdisqusShortname = "disqus-shortname"
. -
UtterancesRepo = "owner/repo-name"
: to use Utterances instead of the built-in Disqus. This option should be used exclusively withdisqusShortname = "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 withdisqusShortname = "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 = "htr3n" keybase = "htr3n" github = "htr3n" ...
-
include_toc = false
: Setting tofalse
in FrontMatter will disable too short TOC data as your want. -
Per PR #56, Gravatar pics can be used exclusively to
.Site.Params.authorimage
via the parameter.Site.Params.social.gravatar
-
[params.social] gravatar = "your.email@domain.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.
Note:
date
is important to sort the project chronologicallylayout '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 tofalse
. Note that only one project should be markedfeatured: 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 portfolio page to your needs, please have a look at the main template, that uses this partial template and this SCSS style.
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:
[params]
mainSections = ["posts"]
-
Original developed by Mark Otto
-
Hugo's
hyde
ported by Steve Francia
Open sourced under the MIT license