mirror of
https://github.com/TeamPiped/hugo-whisper-theme.git
synced 2024-08-14 23:57:00 +00:00
update terminal gif
This commit is contained in:
Robert Austin
parent
42e5371fb9
commit
ad3a48ccc9
10 changed files with 92 additions and 75 deletions
102
README.md
102
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# Hugo Whisper Theme
|
||||
|
||||
Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal. We’re aiming for a similar feel to a Github readme.
|
||||
Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal.
|
||||
|
||||
[Live Demo](https://hugo-whisper.netlify.com/) |
|
||||
[Zerostatic Themes](https://www.zerostatic.io/theme/hugo-whisper/)
|
||||
|
|
@ -9,6 +9,40 @@ Whisper is a minimal documentation theme for Hugo. The design and functionality
|
|||
|
||||
## Theme features
|
||||
|
||||
### Content Types
|
||||
|
||||
- Docs (Markdown)
|
||||
- Homepage
|
||||
|
||||
### Content Management
|
||||
|
||||
- This theme generates documentation from markdown files located in `content/docs`
|
||||
- The "Home" page is not documentation, it can be used to introduce your project etc.
|
||||
|
||||
### Features
|
||||
|
||||
- Beautiful and clean typography for all semantic HTML elements
|
||||
|
||||
### SCSS
|
||||
|
||||
- SCSS (Hugo Pipelines)
|
||||
- Responsive design
|
||||
- Bootstrap 4 grid and media queries only
|
||||
|
||||
### Speed
|
||||
|
||||
- 100/100 Google Lighthouse speed score
|
||||
- 21KB without images ⚡
|
||||
- Vanilla JS only
|
||||
|
||||
### Menu
|
||||
|
||||
- Responsive mobile menu managed in `config.toml`
|
||||
|
||||
### Content
|
||||
|
||||
- Documentation examples included, using all markdown syntax
|
||||
|
||||
# Installation
|
||||
|
||||
To use this theme you will need to have Hugo installed. If you don't already have Hugo installed please follow the official [installation guide](https://gohugo.io/getting-started/installing/)
|
||||
|
|
@ -37,34 +71,41 @@ Copy or git clone this theme into the sites themes folder `mynewsite/themes`
|
|||
|
||||
```
|
||||
cd mynewsite
|
||||
cd themes
|
||||
git clone https://github.com/jugglerx/hugo-hero-theme.git
|
||||
git clone https://github.com/jugglerx/hugo-whisper-theme.git themes/hugo-whisper-theme
|
||||
```
|
||||
|
||||
#### Install from .zip file
|
||||
|
||||
You can download the .zip file located here https://github.com/JugglerX/hugo-hero-theme/archive/master.zip.
|
||||
You can download the .zip file located here https://github.com/JugglerX/hugo-whisper-theme/archive/master.zip.
|
||||
|
||||
Extract the downloaded .zip inside the `themes` folder. Rename the extracted folder from `hugo-hero-theme-master` -> `hugo-hero-theme`. You should end up with the following folder structure `mynewsite/themes/hugo-hero-theme`
|
||||
Extract the downloaded .zip inside the `themes` folder. Rename the extracted folder from `hugo-whisper-theme-master` -> `hugo-whisper-theme`. You should end up with the following folder structure `mynewsite/themes/hugo-whisper-theme`
|
||||
|
||||
### Add example content
|
||||
|
||||
The fastest way to get started is to copy the example content. Copy the entire contents of the `exampleSite` folder to the root folder of your Hugo site (the folder with the README.md).
|
||||
Copy the entire contents of the `mynewsite/themes/hugo-whisper-theme/exampleSite/` folder to root folder of your Hugo site, ie `mynewsite/`
|
||||
|
||||
To copy the files using terminal, make sure you are still in the projects root, ie the `mynewsite` folder.
|
||||
|
||||
```
|
||||
cp -a themes/hugo-whisper-theme/exampleSite/. .
|
||||
```
|
||||
|
||||
### Update config.toml
|
||||
|
||||
After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in the `config.toml`
|
||||
After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in `mynewsite/config.toml`
|
||||
|
||||
```
|
||||
baseURL = "/"
|
||||
themesDir = "themes"
|
||||
theme = "hugo-hero-theme"
|
||||
theme = "hugo-whisper-theme"
|
||||
```
|
||||
|
||||
### Run Hugo
|
||||
|
||||
After installing the theme for the first time, generate the Hugo site.
|
||||
|
||||
You run this command from the root folder of your Hugo site ie `mynewsite/`
|
||||
|
||||
```
|
||||
hugo
|
||||
```
|
||||
|
|
@ -76,48 +117,3 @@ hugo server
|
|||
```
|
||||
|
||||
Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
|
||||
|
||||
# Configuring theme features
|
||||
|
||||
### Homepage meta tags
|
||||
|
||||
Often a homepage requires special meta tags such as a meta description or og meta data for twitter, facebook etc. You can configure these values in the `config.toml`
|
||||
|
||||
```
|
||||
// config.toml
|
||||
[params]
|
||||
google_analytics_id=""
|
||||
|
||||
[params.homepage_meta_tags]
|
||||
meta_description = "a description of your website."
|
||||
meta_og_title = "My Theme"
|
||||
meta_og_type = "website"
|
||||
meta_og_url = "https://www.mywebsite.com"
|
||||
meta_og_image = "https://www.mywebsite.com/images/tn.png"
|
||||
meta_og_description = "a description of your website."
|
||||
meta_twitter_card = "summary"
|
||||
meta_twitter_site = "@mytwitterhandle"
|
||||
meta_twitter_creator = "@mytwitterhandle"
|
||||
```
|
||||
|
||||
### Set meta tags on a per template/page basis
|
||||
|
||||
You can set meta tags on a per template basis using a block. For example, you might want to write a custom meta description for the `/services` page. You can insert any valid HTML meta data inside the `{{ define "meta_tags }}` block at the top of a template.
|
||||
|
||||
```
|
||||
// layouts/services/list.html
|
||||
...
|
||||
|
||||
{{ define "meta_tags" }}
|
||||
<meta name="description" content="We offer a variety of services in the finance industry" />
|
||||
{{ end }}
|
||||
|
||||
{{ define main }}
|
||||
...
|
||||
```
|
||||
|
||||
# Deploying to Netlify
|
||||
|
||||
This theme includes a `netlify.toml` which is configured to deploy to Netlify from the `exampleSite` folder. See this discussion on how to deploy your site on Netlify from the `exampleSite` folder - https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508
|
||||
|
||||
Most likely if you are deploying to Netlify, you are including the entire Hugo site, so you can delete the `netlify.toml` file.
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
p {
|
||||
font-family: $font-family-base;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
line-height: 1.4;
|
||||
color: lighten($black, 10%);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
}
|
||||
}
|
||||
.terminal {
|
||||
@include whitebox();
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
margin-top: -200px;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
---
|
||||
title: 'Hugo Whisper'
|
||||
date: 2018-11-28T15:14:39+10:00
|
||||
icon: 'services/service-icon-2.png'
|
||||
featured: true
|
||||
draft: false
|
||||
heroHeading: 'Business Advisory'
|
||||
heroSubHeading: 'Expert advice and guidance when you need it most.'
|
||||
heroBackground: 'services/service2.jpg'
|
||||
---
|
||||
|
||||
Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal. We're aiming for a similar feel to a Github readme.
|
||||
Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal.
|
||||
|
|
|
|||
33
exampleSite/content/docs/example/index.md
Normal file
33
exampleSite/content/docs/example/index.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: 'Hugo Whisper'
|
||||
date: 2019-02-11T19:27:37+10:00
|
||||
weight: 7
|
||||
---
|
||||
|
||||
Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal.
|
||||
|
||||
## Quickstart
|
||||
|
||||
Copy or git clone this theme into the sites themes folder `mynewsite/themes`
|
||||
|
||||
```
|
||||
hugo new site whisper
|
||||
git clone https://github.com/jugglerx/hugo-whisper-theme.git
|
||||
```
|
||||
|
||||
### Code Highlighting
|
||||
|
||||
Whisper uses Hugo's in-built code highlighting with a github style code highlighting theme. https://gohugo.io/content-management/syntax-highlighting/
|
||||
|
||||
You can insert code snippets in any markdown file by using standard code fences syntax ie:
|
||||
|
||||
```js
|
||||
function myFunction() {
|
||||
var x = document.getElementById('myDIV');
|
||||
if (x.style.display === 'none') {
|
||||
x.style.display = 'block';
|
||||
} else {
|
||||
x.style.display = 'none';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -5714,7 +5714,7 @@ ol {
|
|||
.content p {
|
||||
font-family: "Roboto", Arial, sans-serif, -apple-system;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
line-height: 1.4;
|
||||
color: #383f45;
|
||||
font-weight: 400; }
|
||||
.content h1 {
|
||||
|
|
@ -6122,11 +6122,6 @@ ol {
|
|||
.page-home p {
|
||||
width: 60%; } }
|
||||
.page-home .terminal {
|
||||
border: 1px solid #dcdcdc;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
margin-top: -200px; }
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
{{ define "main" }}
|
||||
<div class="strip">
|
||||
<div class="container pt-6 pb-16">
|
||||
<div class="container pt-4 pb-16">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="title">{{.Title}}</h1>
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strip strip-grey d-none d-md-block">
|
||||
<div class="container pt-8 pb-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="strip">
|
||||
<div class="container pt-4 pb-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10">
|
||||
<div class="terminal">
|
||||
<img src="{{ .Site.BaseURL }}images/terminal-white.gif" />
|
||||
<img src="{{ .Site.BaseURL }}images/terminal.gif" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
BIN
static/images/terminal.gif
Normal file
BIN
static/images/terminal.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
name = "Whisper"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/JugglerX/hugo-whisper-theme/blob/master/LICENSE"
|
||||
description = "Whisper is a minimal documentation theme for Hugo. The design and functionality is intentionally minimal, similar to a Github readme."
|
||||
description = "Whisper is a minimal documentation theme built for Hugo. The design and functionality is intentionally minimal."
|
||||
homepage = "https://github.com/jugglerx/hugo-whisper-theme"
|
||||
tags = ["documentation","responsive","minimal","clean","bootstrap","zerostatic"]
|
||||
features = ["docs"]
|
||||
|
|
|
|||
Loading…
Reference in a new issue