kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Contact page added

This commit is contained in:
zzossig 2019-12-18 03:14:07 +09:00
parent b36143c377
commit af3611dd5e
19 changed files with 258 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -17,6 +17,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
* [Configuration](#configuration)
* [Layout](#layout)
* [Gallery](#gallery)
* [Contact Page](#contact-page)
* [Multi Language](#multi-language)
* [Customizing](#customizing)
* [External libraries](#external-library)
@ -444,6 +445,36 @@ root
│   │   │ ├── ...your images here
```
## Contact Page
Currently available service: [formspree]. Open an issue if you need another service vendor.
1. Make a file at root/contact/index.md
```yaml
---
title: "Contact"
date: 2019-12-17T23:58:33+09:00
description: Contact page
type: contact
service: formspree
formId: "your@email.com"
---
This is contact page.
```
2. Add contact menu at root/config/_default/menus.en.toml.
```toml
...
[[main]]
identifier = "contact"
name = "contact"
url = "contact"
weight = 6
```
## Multi Language
The default language of this theme is English. If you want to use another language, follow these steps

8
archetypes/contact.md Normal file
View File

@ -0,0 +1,8 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description:
type: contact
service: formspree
formId: ""
---

2
assets/sass/components/_whoami.scss
View File

@ -29,7 +29,7 @@
@include box-shadow(0, 8px, 6px, -6px, black);
&-wrapper {
min-width: 120px;
min-width: 100px;
max-width: 150px;
height: auto;
margin-right: 1rem;

3
assets/sass/main.scss
View File

@ -63,4 +63,5 @@ $content-font: {{ .Site.Data.font.content_font }};
@import 'pages/gallery';
@import 'pages/list';
@import 'pages/single';
@import 'pages/terms';
@import 'pages/terms';
@import 'pages/contact';

1
assets/sass/pages/_about.scss
View File

@ -1,3 +1,4 @@
.about{
padding: 1rem;
overflow-wrap: break-word;
}

99
assets/sass/pages/_contact.scss Normal file
View File

@ -0,0 +1,99 @@
.contact {
padding: 1rem;
overflow-wrap: break-word;
@include flexbox();
@include align-items(center);
@include flex-direction(column);
&__input {
height: 35px;
font-size: 14px;
padding: 0.25rem;
border-radius: 0.125rem;
border: none;
@include themify($themes) {
color: themed('contact-input-color');
background-color: themed('contact-input-background-color');
}
&--wrapper {
margin: 0.25rem;
min-width: 0;
@include flexbox();
@include flex-direction(column);
@include flex-grow(1);
}
&--container {
margin-bottom: 0.25rem;
@media only screen and (max-width: 769px) {
display: block;
}
@include flexbox();
}
}
&__message {
padding: 0.25rem;
min-height: 140px;
font-size: 14px;
border-radius: 0.125rem;
border: none;
@include themify($themes) {
color: themed('contact-input-color');
background-color: themed('contact-input-background-color');
}
&--wrapper {
margin: 0.25rem;
@include flexbox();
@include flex-direction(column);
}
}
&__label {
font-family: $title-font;
font-size: 14px;
font-weight: bold;
padding: 0.25rem 0;
}
&__desc {
width: 55%;
font-family: $content-font;
@media only screen and (max-width: 769px) {
width: 100%;
}
}
&__form {
width: 55%;
@include flexbox();
@include flex-direction(column);
@media only screen and (max-width: 769px) {
width: 100%;
}
}
&__send {
height: 35px;
margin: 0.75rem 0.25rem;
font-family: $title-font;
font-weight: bold;
border: none;
border-radius: 0.125rem;
@include themify($themes) {
color: inherit;
background-color: themed('contact-button-background-color');
}
}
}

2
assets/sass/pages/_single.scss
View File

@ -61,7 +61,7 @@
h4,
h5,
h6 {
position: relative;
position: relative;
line-height: 1.25;
}

3
assets/sass/themes/_custom.scss
View File

@ -94,4 +94,7 @@ $custom: (
switch-active-color: hsl($custom_theme_primary_color, 80%, 60%),
gallery-mask-color: hsl($custom_theme_primary_color, 100%, 10%),
gallery-mask-background-color: hsla($custom_theme_primary_color, 100%, 90%, 0.7),
contact-input-color: hsl($custom_theme_primary_color, 100%, 28.5%),
contact-input-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
contact-button-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
) !default;

3
assets/sass/themes/_dark.scss
View File

@ -94,4 +94,7 @@ $dark: (
switch-active-color: #FF6188,
gallery-mask-color: #FCFCFA,
gallery-mask-background-color: rgba(0, 0, 0, 0.7),
contact-input-color: #FCFCFA,
contact-input-background-color: lighten(#403E41, 5%),
contact-button-background-color: lighten(#403E41, 5%),
);

3
assets/sass/themes/_hacker.scss
View File

@ -94,4 +94,7 @@ $hacker: (
switch-active-color: #FF6188,
gallery-mask-color: #FCFCFA,
gallery-mask-background-color: rgba(0, 0, 0, 0.7),
contact-input-color: #FCFCFA,
contact-input-background-color: lighten(#252526, 4%),
contact-button-background-color: lighten(#252526, 4%),
);

3
assets/sass/themes/_light.scss
View File

@ -94,4 +94,7 @@ $light: (
switch-active-color: #FF6188,
gallery-mask-color: #424242,
gallery-mask-background-color: rgba(255, 255, 255, 0.7),
contact-input-color: #424242,
contact-input-background-color: #eee,
contact-button-background-color: #eee,
);

3
assets/sass/themes/_solarized.scss
View File

@ -94,4 +94,7 @@ $solarized: (
switch-active-color: #FF6188,
gallery-mask-color: #424242,
gallery-mask-background-color: rgba(253, 247, 227, 0.7),
contact-input-color: #B58900,
contact-input-background-color: #FBF1D1,
contact-button-background-color: #FBF1D1,
);

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

14
i18n/en.toml
View File

@ -38,4 +38,16 @@ other = "Total visitors"
other = "views"
[donate-message]
other = "Support the author with"
other = "Support the author with"
[contact-name]
other = "Name"
[contact-email]
other = "Email"
[contact-message]
other = "Message"
[contact-send]
other = "Send"

14
i18n/ko.toml
View File

@ -38,4 +38,16 @@ other = "총 방문자 수"
other = "조회수"
[donate-message]
other = "후원하기"
other = "후원하기"
[contact-name]
other = "이름"
[contact-email]
other = "이메일"
[contact-message]
other = "내용"
[contact-send]
other = "보내기"

14
i18n/zh.toml
View File

@ -38,4 +38,16 @@ other = "总访客"
other = "views"
[donate-message]
other = "您的鼓励是我最大的动力"
other = "您的鼓励是我最大的动力"
[contact-name]
other = "Name"
[contact-email]
other = "Email"
[contact-message]
other = "Message"
[contact-send]
other = "Send"

23
layouts/contact/single.html Normal file
View File

@ -0,0 +1,23 @@
{{ define "main" }}
<header class="header">
<h3 class="h3 terms__title">
{{ .Title }}
</h3>
</header>
<main class="main">
<div class="contact">
<article class="single__contents contact__desc">
{{ .Content }}
</article>
{{ if eq .Params.service "formspree" }}
{{ partial "contact/formspree" . }}
{{ else }}
{{ partial "contact/formspree" . }}
{{ end }}
</div>
</main>
<div class="hide">
{{ partial "search/site-search" . }}
</div>
{{ partial "script/contact-script" . }}
{{ end }}

23
layouts/partials/contact/formspree.html Normal file
View File

@ -0,0 +1,23 @@
<form action="https://formspree.io/{{ with .Params.formId }}{{ . }}{{ end }}" method="POST" class="contact__form">
<div class="contact__input--container">
<div class="contact__input--wrapper">
<label class="contact__label">
{{ i18n "contact-name" }}
</label>
<input type="text" name="name" class="contact__input" aria-label="{{ i18n "contact-name" }}">
</div>
<div class="contact__input--wrapper">
<label class="contact__label">
{{ i18n "contact-email" }}
</label>
<input type="email" name="_replyto" class="contact__input" aria-label="{{ i18n "contact-email" }}">
</div>
</div>
<div class="contact__message--wrapper">
<label class="contact__label">
{{ i18n "contact-message" }}
</label>
<textarea name="message" class="contact__message" aria-label="{{ i18n "contact-message" }}"></textarea>
</div>
<input type="submit" value="{{ i18n "contact-send" }}" class="contact__send">
</form>

14
layouts/partials/script/contact-script.html Normal file
View File

@ -0,0 +1,14 @@
{{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
<script defer src="{{ $jquery.RelPermalink }}"></script>
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script defer src="{{ $enquire.RelPermalink }}"></script>
{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
<script defer src="{{ $lazysizes.RelPermalink }}"></script>
{{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $zzo.RelPermalink }}"></script>
<script>
window.onload = function () {
runSearch();
}
</script>