Skip to content

Commit

Permalink
Update templates (fix #59, close #61, close #60)
Browse files Browse the repository at this point in the history
+ Add functionality to limit projects shown on main page
+ Improve projects display columns
+ List pages show content from _index.md files
+ Add GetPage logic to index.html and nav menus
  • Loading branch information
Vicky committed Jun 25, 2018
1 parent 4a1380f commit 997c707
Show file tree
Hide file tree
Showing 18 changed files with 531 additions and 411 deletions.
4 changes: 2 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
env:
- HUGO_VERSION="0.41"
- HUGO_VERSION="0.42.1"

install:
- wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
- wget -q https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
- tar xf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
- mv hugo ~/bin/

Expand Down
20 changes: 20 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
## Version 3.4.0 - Jun 24 2018

Changes to Projects display options:

- Add functionality to limit number of projects shown on index page
- Projects will automatically display in 2 or 3 columns for even or odd numbers respectively
- Create new template for projects list page

Improve list templates:

- List pages will display content from `_index.md`

Housecleaning:

- Remove dead code
- Use GetPage logic on index.html and in nav menus
- Site still builds with no content

*Thank you to @Hanzei for your feature work and @Setherizor for the great suggestion.*

## Version 3.3.2 - Jun 10 2018

Travis CI integration, why not.
Expand Down
32 changes: 16 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# <a href="https://vickylai.com/introduction/" target="_blank" rel="noopener">Introduction theme for Hugo</a>
[![Build Status](https://travis-ci.com/vickylai/hugo-theme-introduction.svg?branch=master)](https://travis-ci.com/vickylai/hugo-theme-introduction)

A minimal, single page, smooth scrolling theme for Hugo.
A minimal, smooth-scrolling theme for Hugo. Can be configured as a single page site or full-featured site with many sections.

![Main page screenshot](https://github.com/vickylai/hugo-theme-introduction/blob/master/images/screenshot.png)

Features:
- Single scrolling home page
- Minimalist home page
- About section with profile photo
- Contact section with option to show your local timezone
- Optional Projects and Blog sections
Expand All @@ -15,32 +15,32 @@ Features:
- Smooth scroll-to-section navigation
- Responsive and fast

## Quick start
# Quick start

### Get the theme
## Get the theme

From the root of your Hugo site:
```sh
$ cd themes
$ git clone https://github.com/vickylai/hugo-theme-introduction.git introduction
```

### Configure your site
## Configure your site

From the exampleSite, copy `config.toml` to the root folder of your Hugo site and change the fields as you like.

Start with:
Important bits:

1. Set your baseurl to your site's domain
1. Set your blog's title and your first name
1. Set your introduction header height (use "medium", "large", or "fullheight")
1. Choose "light" or "dark" theme
1. Set your avatar image
1. Set your timezone, if you choose to show it
1. Choose whether or not to show the Blog and Projects sections, and configure them to your liking
1. Set `baseURL` to your site's domain and give your site a `title`
1. Add your `firstName` and `tagLine`
1. Set the desired `introHeight` for your main page (use "medium", "large", or "fullheight")
1. Choose a "light" or "dark" `themeStyle`
1. Set your `avatar` image
1. Choose whether or not to `showBlog` on the main page
1. Choose whether or not to `showProjects` on the main page
1. Input your social site urls and font-awesome icon names - use as many as you like

### Create About and Contact pages
## Create About and Contact pages

Run:
```sh
Expand Down Expand Up @@ -94,13 +94,13 @@ If you don't specify a `title`, only the photo will show. You can still add cont

If you leave `external_link` empty, clicking on a project on your main page will pop up a window with the project's details. If you specify a url instead, clicking on the project on your main page will take you to that url.

## Contributing
# Contributing

Pull requests for bug fixes and suggestions are welcome.

Contributors are listed in [CHANGELOG.md](https://github.com/vickylai/hugo-theme-introduction/blob/master/CHANGELOG.md). Thank you so much! 🖤

## License
# License
Copyright (C) 2018 Vicky Lai

This program is free software: you can redistribute it and/or modify
Expand Down
77 changes: 38 additions & 39 deletions exampleSite/config.toml
Original file line number Diff line number Diff line change
@@ -1,45 +1,44 @@
baseURL = "https://example.org/" # Your domain name. Must end with "/"
languageCode = "en-us" # languageCode
title = "Introduction" # Site title
theme = "introduction"
pygmentsStyle = "monokai" # https://help.farbox.com/pygments.html
pygmentsCodefences = true
enforce_ssl = false
# disqusshortname = "" # Enable Disqus for comments https://gohugo.io/content-management/comments
# googleAnalytics = "" # Enable Google Analytics https://gohugo.io/templates/internal/#google-analytics
baseURL = "https://example.org/" # Your domain name. Must end with "/"
languageCode = "en-us" # languageCode
title = "Introduction" # Site title
theme = "introduction"
pygmentsStyle = "monokai" # https://help.farbox.com/pygments.html
pygmentsCodefences = true
enforce_ssl = false
# disqusshortname = "" # Enable Disqus for comments https://gohugo.io/content-management/comments
# googleAnalytics = "" # Enable Google Analytics https://gohugo.io/templates/internal/#google-analytics

[params]
blogHead = "Blog" # Full name shows on blog post pages
firstName = "Introduction" # First name shows in introduction on main page
tagLine = "I'm a theme for Hugo." # Appears after the introduction
introHeight = "large" # Input either 'medium' or 'large' or 'fullheight'
themeStyle = "light" # Choose 'light' or 'dark'
avatar = "img/profile.jpg" # Path to image in static folder eg. img/avatar.png, or comment out to remove
email = "youremail@email.com" # Shows in contact section, or leave blank to omit
localTime = true # Show your current local time in contact section
timeZone = "America/Los_Angeles" # Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
dateForm = "Jan 2, 2006"
dateFormFull = "Mon Jan 2 2006 15:04:05 EST"
cacheBuster = false # Add the current unix timestamp in query string for cache busting css assets (relevant in development mode)
description = "Website Description" # Max 160 characters show in search results
faviconFile = "img/fav.ico"
footerText = "" # Text to override default footer text (markdown allowed)
fadeIn = true # Turn on/off the fade-in effect
customCSS = [] # Include custom css files e.g. ["css/foo.css", "css/bar.css"]
firstName = "Introduction" # First name shows in introduction on main page
tagLine = "I'm a theme for Hugo." # Appears after the introduction
introHeight = "large" # Input either 'medium' or 'large' or 'fullheight'
themeStyle = "light" # Choose 'light' or 'dark'
avatar = "img/profile.jpg" # Path to image in static folder eg. img/avatar.png, or comment out to remove
email = "youremail@email.com" # Shows in contact section, or leave blank to omit
localTime = true # Show your current local time in contact section
timeZone = "America/Los_Angeles" # Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
dateForm = "Jan 2, 2006"
dateFormFull = "Mon Jan 2 2006 15:04:05 EST"
cacheBuster = false # Add the current unix timestamp in query string for cache busting css assets (relevant in development mode)
description = "Website Description" # Max 160 characters show in search results
faviconFile = "img/fav.ico"
footerText = "" # Text to override default footer text (markdown allowed)
fadeIn = true # Turn on/off the fade-in effect
customCSS = [] # Include custom css files e.g. ["css/foo.css", "css/bar.css"]

showBlog = true # Show Blog section on home page
showProjects = true # Show Projects section on home page
projectColumns = "3" # Choose "2" or "3" columns for projects section
placeHolderimg = "/img/workday.jpg" # For Projects without image
showAllPosts = false # Set 'true' to list all posts on home page, or set 'false' to link to separate blog list page
showLatest = true # Show latest blog post summary
shareButtons = true # On post pages, show share this social buttons

# Share buttons
shareTwitter = true
shareFacebook = true
sharePinterest = false
shareGooglePlus = true
showBlog = true # Show Blog section on home page
showAllPosts = false # Set 'true' to list all posts on home page, or set 'false' to link to separate blog list page
showLatest = true # Show latest blog post summary
# Share buttons on blog post pages
shareButtons = true # Show "Share this:" social buttons
shareTwitter = true
shareFacebook = true
sharePinterest = false
shareGooglePlus = true

showProjects = true # Show Projects section on home page
numberOfProjectsToShow = 3 # Maximum number of projects to show on home page. Unset or comment out to show all projects.
placeHolderimg = "/img/workday.jpg" # For Projects without image

# Social icons appear in introduction and contact section. Add as many more as you like.
# Find icon names here: http://fontawesome.io/cheatsheet/
Expand Down
116 changes: 57 additions & 59 deletions layouts/_default/list.html
Original file line number Diff line number Diff line change
@@ -1,65 +1,63 @@
{{ partial "header.html" . }}
<body>

<div class="section" id="top">
<!-- Parent section -->
<div class="container hero {{ if .Site.Params.fadeIn }} fade-in one {{ end }}">
<!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Title }}</h1>
</div>
<!-- End Title -->

<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">

<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-list.html" . }}
</div>
<!-- End Nav bar -->
<article>
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
{{ .Content }}
</article>

<body>

<div class="container">
<!-- Begin Blog container -->
<ul>
<!-- Ranges through content/post/*.md -->
{{ range .Data.Pages.ByPublishDate }} {{ if not (eq .Section "blog") }}
<li>
<a href="{{.Permalink}}">{{.Date.Format (.Site.Params.dateform | default "Jan 02, 2006") }} | {{.Title}}</a>
</li>
{{ end }} {{ end }}
</ul>
<div class="section" id="top">
<!-- Parent section -->
<div class="container hero {{ if .Site.Params.fadeIn }} fade-in one {{ end }}">
<!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Title }}</h1>
</div>
<!-- End Blog container -->

<div class="container has-text-centered top-pad">
<hr>
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
<hr>
<!-- End Title -->

<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">

<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-list.html" . }}
</div>
<!-- End Nav bar -->

<div class="container markdown {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }} top-pad">
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
{{ .Content }}
</div>
<div class="container">
<ul>
<!-- Ranges through content/*/*.md -->
{{ range .Data.Pages.ByPublishDate }} {{ if not (eq .Section "blog") }}
<li>
<a href="{{.Permalink}}">{{.Date.Format (.Site.Params.dateform | default "Jan 02, 2006") }} | {{.Title}}</a>
</li>
{{ end }} {{ end }}
</ul>
</div>

<div class="container has-text-centered top-pad">
<hr>
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
<hr>
</div>

{{ partial "footer.html" . }}
</div>

{{ partial "footer.html" . }}
<!-- End fade in two -->
</div>
<!-- End fade in two -->
</div>
<!-- End parent section -->

<!-- Bitty scrolling links script -->
<script>
$('a[href^="{{ .Permalink }}#"]').click(function (e) {
e.preventDefault();
var target = this.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
return false;
})
</script>

</body>
<!-- End parent section -->

<!-- Bitty scrolling links script -->
<script>
$('a[href^="{{ .Permalink }}#"]').click(function (e) {
e.preventDefault();
var target = this.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
return false;
})
</script>

</body>
Loading

0 comments on commit 997c707

Please sign in to comment.