aditya/hugo-theme-introduction
1
0
Fork 0
mirror of https://git.adityakumar.xyz/hugo-theme-introduction.git synced 2024-11-09 14:59:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update templates (fix #59, close #61, close #60)

Browse source 
+ 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
This commit is contained in:
Vicky 2018-06-24 20:22:21 -04:00
parent 4a1380f152
commit 997c707d5b
18 changed files with 542 additions and 422 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.travis.yml
View file

@ -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/

20
CHANGELOG.md
View file

@ -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.

32
README.md
View file

@ -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
@ -15,9 +15,9 @@ 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
@ -25,22 +25,22 @@ $ 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
@ -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

77
exampleSite/config.toml
View file

@ -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/

116
layouts/_default/list.html
View file

@ -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 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 -->
<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>
<!-- End fade in two -->
</div>
<!-- End Title -->
<!-- End parent section -->
<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">
<!-- 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>
<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>
<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>
<!-- End Blog container -->
<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>
<!-- 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>
</body>

98
layouts/_default/single.html
View file

@ -1,62 +1,62 @@
{{ 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 {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">
<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-single.html" . }}
<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 Nav bar -->
<!-- End Title -->
<div class="container markdown {{ if .Site.Params.fadeIn }} fade-in two {{ end }} top-pad">
<!-- Begin blog post content -->
{{ if .Params.image }}
<div class="has-text-centered">
<img src="{{ .Params.image }}" class="img-responsive">
<!-- Everything below fades in two! -->
<div class="section {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">
<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-single.html" . }}
</div>
{{ end }}
{{ .Content }}
</div>
<!-- End blog post content -->
<!-- End Nav bar -->
<div class="disqus">
{{ template "_internal/disqus.html" . }}
</div>
<div class="container markdown {{ if .Site.Params.fadeIn }} fade-in two {{ end }} top-pad">
<!-- Begin content -->
{{ if .Params.image }}
<div class="has-text-centered">
<img src="{{ .Params.image }}" class="img-responsive">
</div>
{{ end }} {{ .Content }}
</div>
<!-- End content -->
<div class="container has-text-centered top-pad">
<hr>
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
<hr>
</div>
<div class="disqus">
{{ template "_internal/disqus.html" . }}
</div>
{{ partial "footer.html" . }}
<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>
<!-- End fade in two -->
</div>
<!-- End fade in two -->
</div>
<!-- End parent section -->
<!-- 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>
<!-- 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>
</body>

119
layouts/_default/taxonomy.html
View file

@ -1,65 +1,66 @@
{{ 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">Tagged "{{ lower .Title }}"</h1>
<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">Tagged "{{ lower .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>
<div class="container">
<!-- Begin Blog container -->
<ul>
<!-- Ranges through content/post/*.md -->
{{ range .Data.Pages.ByPublishDate }}
<li>
<a href="{{.Permalink}}">{{.Date.Format (.Site.Params.dateform | default "Jan 02, 2006") }} | {{.Title}}</a>
</li>
{{ end }}
</ul>
</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>
</div>
{{ partial "footer.html" . }}
</div>
<!-- End fade in two -->
</div>
<!-- End Title -->
<!-- End parent section -->
<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn }} fade-in two {{ end }}">
<!-- 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>
<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>
<div class="container">
<!-- Begin Blog container -->
<ul>
<!-- Ranges through content/post/*.md -->
{{ range .Data.Pages.ByPublishDate }}
<li>
<a href="{{.Permalink}}">{{.Date.Format (.Site.Params.dateform | default "Jan 02, 2006") }} | {{.Title}}</a>
</li>
{{ end }}
</ul>
</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>
</div>
{{ partial "footer.html" . }}
</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>
</body>

2
layouts/_default/terms.html
View file

@ -57,4 +57,4 @@
})
</script>
</body>
</body>

123
layouts/blog/list.html
View file

@ -1,67 +1,76 @@
{{ partial "header.html" . }}
<body>
<div class="section" id="top"><!-- Parent section -->
<div class="container hero {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}"><!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Site.Params.blogHead | default "Blog" }}</h1>
</div><!-- End Title -->
<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
<div class="container"><!-- Begin Nav bar -->
{{ partial "nav-list.html" . }}
</div><!-- End Nav bar -->
<div class="container"><!-- Begin Blog container -->
{{ if .Site.Params.showLatest }}
<h2 class="title is-2 top-pad">Latest Post</h2>
{{ range first 1 (where .Data.Pages.ByPublishDate.Reverse "Section" "blog") }}
<div class="summary">{{ .Date.Format (.Site.Params.dateForm | default "Jan 02, 2006") }}
<h3 class="title is-3 strong-post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<div class="markdown">
{{ .Summary }}
{{ if .Truncated }}
<a href="{{ .RelPermalink }}">...Read More</a>
{{ end }}
</div>
<div class="section" id="top">
<!-- Parent section -->
<div class="container hero {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}">
<!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Title | default "Blog" }}</h1>
</div>
{{ end }}
{{ end }}
<!-- End Title -->
<h2 class="title is-2 top-pad">All Posts</h2>
<ul>
{{ range .Data.Pages.ByPublishDate }}
{{ if eq .Section "blog" }}
{{ partial "li.html" . }}
{{ end }}
{{ end }}
</ul>
<!-- Everything below fades in two! -->
<div class="section no-padding {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
</div><!-- End Blog container -->
<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-list.html" . }}
</div>
<!-- End Nav bar -->
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top"><i class="fa fa-arrow-up"></i></a>
<hr>
</div>
<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">
{{ if .Site.Params.showLatest }}
<h2 class="title is-2 top-pad">Latest Post</h2>
{{ range first 1 (where .Data.Pages.ByPublishDate.Reverse "Section" "blog") }}
<div class="summary">{{ .Date.Format (.Site.Params.dateForm | default "Jan 02, 2006") }}
<h3 class="title is-3 strong-post-title">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h3>
<div class="markdown">
{{ .Summary }} {{ if .Truncated }}
<a href="{{ .RelPermalink }}">...Read More</a>
{{ end }}
</div>
</div>
{{ end }} {{ end }}
{{ partial "footer.html" . }}
</div><!-- End fade in two -->
</div><!-- End parent section -->
<h2 class="title is-2 top-pad">All Posts</h2>
<ul>
{{ range .Data.Pages.ByPublishDate }} {{ if eq .Section "blog" }} {{ partial "li.html" . }} {{ end }} {{ end }}
</ul>
<!-- 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>
</div>
<!-- End Blog container -->
</body>
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top">
<i class="fa fa-arrow-up"></i>
</a>
<hr>
</div>
{{ partial "footer.html" . }}
</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>

161
layouts/blog/single.html
View file

@ -1,90 +1,99 @@
{{ partial "header.html" . }}
<body>
<div class="section" id="top"><!-- Parent section -->
<div class="section" id="top">
<!-- Parent section -->
<div class="container hero {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}"><!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Site.Params.blogHead | default "Blog" }}</h1>
</div><!-- End Title -->
<div class="container hero {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}">
<!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Site.Params.blogHead | default "Blog" }}</h1>
</div>
<!-- End Title -->
<!-- Everything below fades in two! -->
<div class="section {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
<!-- Everything below fades in two! -->
<div class="section {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
<div class="container"><!-- Begin Nav bar -->
{{ partial "nav-single.html" . }}
</div><!-- End Nav bar -->
<div class="container">
<!-- Begin Nav bar -->
{{ partial "nav-single.html" . }}
</div>
<!-- End Nav bar -->
<div class="container {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}"><!-- Begin blog title container -->
<h2 class="title is-1 top-pad strong-post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<div class="post-data">
{{ .Date.Format (.Site.Params.dateForm | default "Jan 02, 2006") }} |
{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
<div class="container {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
<!-- Begin blog title container -->
<h2 class="title is-1 top-pad strong-post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>
<div class="post-data">
{{ .Date.Format (.Site.Params.dateForm | default "Jan 02, 2006") }} | {{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute
read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
</div>
{{ if .Site.Params.shareButtons }}
<div class="blog-share">
Share this: {{ if .Site.Params.shareTwitter }}
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Read%20{{ .Title }}%20{{ .Permalink }}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<i class="fa fa-twitter"></i>
<span class="hidden">Twitter</span>
</a>
{{ end }} {{ if .Site.Params.shareFacebook }}
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<i class="fa fa-facebook"></i>
<span class="hidden">Facebook</span>
</a>
{{ end }} {{ if .Site.Params.sharePinterest }}
<a class="icon-pinterest" href="http://pinterest.com/pin/create/button/?url={{ .Permalink }}{{ if .Params.pinterestMedia }}&amp;media={{ .Site.BaseURL }}{{ .Params.pinterestMedia }}{{ end }}&amp;description={{ .Title | safeHTML}}"
onclick="window.open(this.href, 'pinterest-share','width=580,height=296');return false;">
<i class="fa fa-pinterest"></i>
<span class="hidden">Pinterest</span>
</a>
{{ end }} {{ if .Site.Params.shareGooglePlus }}
<a class="icon-google-plus" href="https://plus.google.com/share?url={{ .Permalink }}" onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<i class="fa fa-google-plus"></i>
<span class="hidden">Google+</span>
</a>
{{ end }}
</div>
{{ end }}
</div>
<!-- End blog title container -->
<div class="container markdown {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }} top-pad">
<!-- Begin blog post content -->
{{ .Content }}
</div>
<!-- End blog post content -->
<div class="disqus">
{{ template "_internal/disqus.html" . }}
</div>
{{ if .Site.Params.shareButtons }}
<div class="blog-share">
Share this:
{{ if .Site.Params.shareTwitter }}
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Read%20{{ .Title }}%20{{ .Permalink }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<i class="fa fa-twitter"></i>
<span class="hidden">Twitter</span>
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top">
<i class="fa fa-arrow-up"></i>
</a>
{{ end }}
{{ if .Site.Params.shareFacebook }}
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<i class="fa fa-facebook"></i>
<span class="hidden">Facebook</span>
</a>
{{ end }}
{{ if .Site.Params.sharePinterest }}
<a class="icon-pinterest" href="http://pinterest.com/pin/create/button/?url={{ .Permalink }}{{ if .Params.pinterestMedia }}&amp;media={{ .Site.BaseURL }}{{ .Params.pinterestMedia }}{{ end }}&amp;description={{ .Title | safeHTML}}"
onclick="window.open(this.href, 'pinterest-share','width=580,height=296');return false;">
<i class="fa fa-pinterest"></i>
<span class="hidden">Pinterest</span>
</a>
{{ end }}
{{ if .Site.Params.shareGooglePlus }}
<a class="icon-google-plus" href="https://plus.google.com/share?url={{ .Permalink }}"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<i class="fa fa-google-plus"></i>
<span class="hidden">Google+</span>
</a>
{{ end }}
</div>
{{ end }}
<hr>
</div>
</div><!-- End blog title container -->
<div class="container markdown {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }} top-pad"><!-- Begin blog post content -->
{{ .Content }}
</div><!-- End blog post content -->
<div class="disqus">
{{ template "_internal/disqus.html" . }}
{{ partial "footer.html" . }}
</div>
<!-- End fade in two -->
</div>
<!-- End parent section -->
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top"><i class="fa fa-arrow-up"></i></a>
<hr>
</div>
<!-- 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>
{{ partial "footer.html" . }}
</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>
</body>

22
layouts/index.html
View file

@ -27,14 +27,18 @@
<div class="hero-foot {{ if .Site.Params.fadeIn | default true }}fade-in three{{ end }}">
<hr>
<nav class="nav-center">
{{ if (.Site.GetPage "page" "about") }}
<a class="nav-item" href="#about">About</a>
{{ end }}
{{ if .Site.Params.showProjects }}
<a class="nav-item" href="#projects">Projects</a>
{{ end }}
{{ if .Site.Params.showBlog }}
<a class="nav-item" href="#blog">Blog</a>
{{ end }}
{{ if (.Site.GetPage "page" "contact") }}
<a class="nav-item" href="#contact">Contact</a>
{{ end }}
</nav>
<hr>
</div><!-- Done with nav bar -->
@ -44,6 +48,7 @@
<div class="section no-padding {{ if .Site.Params.fadeIn | default true }}fade-in three{{ end }}">
<!-- Tell them all about it! -->
{{ if (.Site.GetPage "page" "about") }}
<div class="section" id="about">
<div class="container">
<h2 class="title is-2 has-text-centered">About</h2>
@ -55,11 +60,7 @@
</div>
{{ end }}
<div class="column markdown">
{{ range .Data.Pages }}
{{if eq .Title "About" }}
{{.Content}}
{{end}}
{{ end }}
{{ (.Site.GetPage "page" "about").Content }}
</div>
</div>
</div><!-- End About container-->
@ -68,7 +69,7 @@
</div><!-- End About section -->
<div class="container"><hr></div>
{{ end }}
<!-- Now for some cool projects -->
{{ if .Site.Params.showProjects }}
@ -90,15 +91,12 @@
{{ end }}
<!-- Let's chat, shall we? -->
{{ if (.Site.GetPage "page" "contact") }}
<div class="section" id="contact">
<div class="container has-text-centered">
<h2 class="title is-2">Contact</h2>
<div class="markdown">
{{ range .Data.Pages }}
{{if eq .Title "Contact" }}
{{.Content}}
{{end}}
{{ end }}
{{ (.Site.GetPage "page" "contact").Content }}
</div>
{{ if .Site.Params.localTime }}
@ -126,7 +124,7 @@
</div><!-- End Contact section -->
<div class="container"><hr></div>
{{ end }}
<!-- Nice clean finish -->
{{ partial "footer.html" . }}

2
layouts/partials/blogsection.html
View file

@ -25,7 +25,7 @@
{{ end }}
</ul>
{{ else }}
<div class="container has-text-centered top-pad"><a href="/blog">ALL BLOG POSTS</a></div>
<div class="container has-text-centered top-pad"><a href="{{ "/blog" | relURL }}">ALL BLOG POSTS</a></div>
{{ end }}
</div><!-- End Blog container -->

2
layouts/partials/footer.html
View file

@ -3,7 +3,7 @@
{{ if .Site.Params.footerText }}
{{ .Site.Params.footerText | markdownify }}
{{ else }}
<span class="footer-text"><a href="https://github.com/vickylai/hugo-theme-introduction" target="_blank" rel="noopener">Introduction</a> theme for <a href="http://gohugo.io/" target="_blank" rel="noopener">Hugo</a>. Made with <i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i> by <a href="https://vickylai.com" target="_blank" rel="noopener">Vicky Lai</a>.</span>
<span class="footer-text"><a href="https://github.com/vickylai/hugo-theme-introduction" target="_blank" rel="noopener">Introduction</a> theme for <a href="http://gohugo.io/" target="_blank" rel="noopener">Hugo</a>. Made with <a href="https://vickylai.com" target="_blank" rel="noopener"><i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i></a> by open source contributors.</span>
{{ end }}
</div><!-- End Footer container -->
</div><!-- End Footer section -->

1
layouts/partials/header.html
View file

@ -10,7 +10,6 @@
<meta name="referrer" content="no-referrer">
{{ if .Site.Params.description }}<meta name="description" content="{{ .Site.Params.description }}">{{ end }}
<base href="{{ .Site.BaseURL }}">
<title>
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ if eq $url "/" }}

4
layouts/partials/nav-list.html
View file

@ -9,9 +9,11 @@
<span class="nav-item">
<a href="{{ "/" | relURL }}">Main</a>
</span>
{{ if (.Site.GetPage "page" "about") }}
<span class="nav-item">
<a href="{{ "/about" | relURL }}">About</a>
</span>
{{ end }}
{{ if and (.Site.Params.showProjects) (ne .Page.Section "projects") }}
<span class="nav-item">
<a href="{{ "/projects" | relURL }}">Projects</a>
@ -22,9 +24,11 @@
<a href="{{ "/blog" | relURL }}">Blog</a>
</span>
{{ end }}
{{ if (.Site.GetPage "page" "contact") }}
<span class="nav-item">
<a href="{{ "/contact" | relURL }}">Contact</a>
</span>
{{ end }}
{{ if .Site.RSSLink }}
<span class="nav-item">
<a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>

4
layouts/partials/nav-single.html
View file

@ -9,9 +9,11 @@
<span class="nav-item">
<a href="{{ "/" | relURL }}">Main</a>
</span>
{{ if (.Site.GetPage "page" "about") }}
<span class="nav-item">
<a href="{{ "/about" | relURL }}">About</a>
</span>
{{ end }}
{{ if .Site.Params.showProjects }}
<span class="nav-item">
{{ if ne .Section "projects" }}
@ -30,9 +32,11 @@
{{ end }}
</span>
{{ end }}
{{ if (.Site.GetPage "page" "contact") }}
<span class="nav-item">
<a href="{{ "/contact" | relURL }}">Contact</a>
</span>
{{ end }}
{{ if .Site.RSSLink }}
<span class="nav-item">
<a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>

103
layouts/partials/projects.html
View file

@ -4,13 +4,16 @@
<div class="section is-small">
<div class="columns is-multiline">
{{ range sort .Pages }} {{ if eq .Section "projects" }}
{{ if eq .Site.Params.projectColumns "2" }}
<div class="column is-half"> {{ else if eq .Site.Params.projectColumns "3" }}
<div class="column is-one-third"> {{ else }}
<div class="column is-one-third"> {{ end }}
<!-- Hey Vicky, show half column if number is even. -->
<div {{ if not .Params.external_link }} id="project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}" {{ end }} class="card">
{{ $totalProjects := (len (.Site.GetPage "section" "projects").Pages) }}
{{ $numberOfProjectsToShow := .Site.Params.numberOfProjectsToShow | default $totalProjects }}
{{ range (.Site.GetPage "section" "projects").Pages | first $numberOfProjectsToShow }}
{{ if eq (mod $numberOfProjectsToShow 2) 0 }}
<div class="column is-half">
{{ else }}
<div class="column is-one-third">
{{ end }}
<div {{ if not .Params.external_link }} id="project{{ $card := .Title | urlize }}{{ replace $card "%" " "}}" {{ end }}
class="card">
<div class="card-image">
<figure class="image is-3by2">
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
@ -19,52 +22,54 @@
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
{{ .Title }}
</a>
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
{{ .Title }}
</a>
</div>
</div>
</div>
{{ end }}
</div>
{{ end }} {{ end }}
</div>
</div>
</div>
</div>
<!-- End Projects container -->
<!-- Projects modals -->
{{ range sort .Pages }} {{ if eq .Section "projects" }} {{ if not .Params.external_link }}
<div class="modal" id="modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}">
<div class="modal-background"></div>
<div class="modal-card">
{{ with .Title }}
<header class="modal-card-header bottom-pad">
<p class="modal-card-title has-text-centered">{{ . }}</p>
</header>
{{ end }}
{{ if .Params.image }}
<img src="{{ .Params.image | relURL }}" class="img-responsive img-centered">
{{ end }}
{{ if .Content }}
<section class="modal-card-body markdown">
{{ .Content }}
</section>
{{ end }}
{{ if lt $numberOfProjectsToShow $totalProjects }}
<div class="container has-text-centered top-pad">
<a href="{{ "/projects" | relURL }}">ALL PROJECTS</a>
</div>
<button class="modal-close is-large" aria-label="close" id="close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}"></button>
</div>
<script>
$('#project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function() {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').addClass('is-active');
});
$('#close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function() {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').removeClass('is-active');
});
</script>
{{ end }} {{ end }} {{ end }}
{{ end }}
<!-- End Projects container -->
<!-- Projects modals -->
{{ range (.Site.GetPage "section" "projects").Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }}
<div class="modal" id="modal{{ $card := .Title | urlize }}{{ replace $card "%" " "}}">
<div class="modal-background"></div>
<div class="modal-card">
{{ with .Title }}
<header class="modal-card-header bottom-pad">
<p class="modal-card-title has-text-centered">{{ . }}</p>
</header>
{{ end }} {{ if .Params.image }}
<img src="{{ .Params.image | relURL }}" class="img-responsive img-centered"> {{ end }} {{ if .Content }}
<section class="modal-card-body markdown">
{{ .Content }}
</section>
{{ end }}
</div>
<button class="modal-close is-large" aria-label="close" id="close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}"></button>
</div>
<script>
$('#project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').addClass('is-active');
});
$('#close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').removeClass('is-active');
});
</script>
{{ end }} {{ end }}
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>

74
layouts/projects/list.html Normal file
View file

@ -0,0 +1,74 @@
{{ 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 -->
<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">
<div class="section is-small">
<div class="columns is-multiline">
<!-- Ranges through content/projects/*.md -->
{{ range .Data.Pages }}
{{ if eq (mod (len (.Site.GetPage "section" "projects").Pages) 2) 0 }}
<div class="column is-half">
{{ else }}
<div class="column is-one-third">
{{ end }}
<div class="card">
<div class="card-image">
<figure class="image is-3by2">
<a href="{{ if .Params.external_link }}{{ .Params.external_link }}{{ else }}{{.Permalink}}{{ end }}">
<img src="{{ if .Params.image }}{{ .Params.image | relURL }}{{ else }}{{ (.Site.Params.placeHolderimg | default "/img/workday.jpg") | relURL }}{{ end }}">
</a>
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a href="{{ if .Params.external_link }}{{ .Params.external_link }}{{ else }}{{.Permalink}}{{ end }}">
{{ .Title }}
</a>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</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><!-- 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>