adds portfolio guide in README and revises template
This commit is contained in:
Huy Tran
parent
f7bff4341c
commit
3da7f143a0
2 changed files with 88 additions and 27 deletions
111
README.md
111
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
|
||||
|
||||
|
||||
|
||||
### Post
|
||||
|
||||
|
||||
|
||||
### Portfolio
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
|
||||
#### A post
|
||||
|
||||
|
||||
|
||||
#### Portfolio
|
||||
|
||||
|
||||
|
||||
|
||||
* 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
|
||||
|
||||
- <https://github.com/mdo>
|
||||
- <https://twitter.com/mdo>
|
||||
|
||||
### Hugo's Hyde Ported by Steve Francia
|
||||
#### Hugo's Hyde Ported by Steve Francia
|
||||
- <https://github.com/spf13>
|
||||
- <https://twitter.com/spf13>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<span class="section__title">{{ .Title }}</span>
|
||||
<span class="section__title">{{ .Title | default "Projects" }}</span>
|
||||
<div class="portfolio__content">
|
||||
{{ range first 1 (where .Data.Pages "Params.featured" "==" "true") }}
|
||||
<section class="portfolio__featured-project">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<hr class="divider">
|
||||
{{ range (where .Data.Pages "Params.featured" "!=" "true").ByDate.Reverse }}
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12" href="{{ .Params.link }}"
|
||||
<div class="col-md-4 col-sm-4 col-xs-12" href="{{ .Params.link }}"
|
||||
target="_blank">
|
||||
<img class="project__image img-responsive" src="{{ .Params.screenshot }}" alt="{{ .Title }}">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue