diff --git a/README.md b/README.md index 5a0b4ee..827256d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# hyde-hyde +# Hyde-hyde -__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). +__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and [Nate Finch's blog](https://npf.io). ## Breaking Changes @@ -11,25 +11,11 @@ Since version 2.0, __`hyde-hyde`__ has been overhauled and, therefore, might cau * Adding '[_Portfolio_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio)' page inspired by Xiaoying Riley (@3rdwave_themes) [Developer-Theme](https://github.com/xriley/developer-theme) * Switching to use system fonts instead of Web fonts (e.g. privacy issues) -For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md). +For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md). A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference. -A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference. +## Usage -## Some Screenshots - -### Main page - -![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/raw/master/images/main.png) - -### Post - -![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/post.png) - -### Portfolio - -![Portfolio hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/portfolio.png) - -## Installation +#### Installation __`Hyde-hyde`__ can be easily installed as many other Hugo themes: @@ -57,24 +43,99 @@ theme = "hyde-hyde" theme : "hyde-hyde" ``` -That's all. You can render your site using `hugo` and see the template in action. +That's all. You can render your site using `hugo` and see `hyde-hyde` in action. -## Options +#### Options * __`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com/spf13/hyde#options). -## Customisations +#### Customisations + +* Most of the customisable SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde) and Hugo templates in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/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. + +```toml +[[menu.main]] + name = "Portfolio" + identifier = "portfolio" + weight = xxx + 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](https://gohugo.io/content-management/organization/#index-pages-index-md)). For instance, when I want to set the title of my portfolio "_Projects_", the front matter of `_index.md` will be: + +```markdown +--- +title: 'Projects' +--- +``` + +For each project, just create a Markdown file with the following parameters in the front matter: + +```markdown +--- +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](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) 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](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio/list.html), that uses this [partial template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) and [this SCSS style](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.scss). + +## Some Screenshots + +#### Main page + +![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/raw/master/images/main.png) + +#### A post + +![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/post.png) + +#### Portfolio + +![Portfolio hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/portfolio.png) + -* Most of the customisable SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde) and layouts in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be altered/adapted easily. ## Author(s) -### Original Developed by Mark Otto +#### Original Developed by Mark Otto - - -### Hugo's Hyde Ported by Steve Francia +#### Hugo's Hyde Ported by Steve Francia - - diff --git a/layouts/partials/portfolio/content.html b/layouts/partials/portfolio/content.html index 6ce1150..3786d93 100644 --- a/layouts/partials/portfolio/content.html +++ b/layouts/partials/portfolio/content.html @@ -1,4 +1,4 @@ -{{ .Title }} +{{ .Title | default "Projects" }}
{{ range first 1 (where .Data.Pages "Params.featured" "==" "true") }}
@@ -29,7 +29,7 @@
{{ range (where .Data.Pages "Params.featured" "!=" "true").ByDate.Reverse }}
-
{{ .Title }}