mobile grid bug fixed, header customization support
This commit is contained in:
zzossig
parent
b6a4eb268a
commit
aa53cfd1e9
110
README.md
110
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# Zzo theme for Hugo
|
||||
|
||||
Thank you for click me!. Zzo theme is a blog theme for Hugo with free(always), and many features. If you find any bugs, or wanna share your custom color skin, or have some good idea to share with me and others who use this theme, feel free to open [github](https://github.com/zzossig/hugo-theme-zzo/issues) issue or pull request so that I can make this theme better.
|
||||
Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features.
|
||||
|
||||
## Table of contents
|
||||
|
||||
|
|
@ -219,8 +219,7 @@ custom_css = []
|
|||
custom_js = []
|
||||
|
||||
# header
|
||||
homeHeaderType = "slide" # text, img, slide
|
||||
swiperCount = 3 # only works when homeHeaderType = slide
|
||||
homeHeaderType = "img" # text, img, slide
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
|
|
@ -235,13 +234,13 @@ archivePaginate = 20
|
|||
paginateWindow = 1
|
||||
|
||||
# whoami
|
||||
myname = "zzossig"
|
||||
email = "zzossig@gmail.com"
|
||||
whoami = "Web Developer"
|
||||
myname = ""
|
||||
email = ""
|
||||
whoami = ""
|
||||
useGravatar = false
|
||||
location = "Seoul, Korea"
|
||||
organization = "Hugo"
|
||||
link = "https://github.com/zzossig/hugo-theme-zzo"
|
||||
location = ""
|
||||
organization = ""
|
||||
link = ""
|
||||
|
||||
# sidebar
|
||||
enableBio = true
|
||||
|
|
@ -553,33 +552,86 @@ single_contents = "'Merriweather', serif"
|
|||
|
||||
You may want to change home page header. There are 4 options which is slider, image, text, empty.
|
||||
|
||||
* Empty
|
||||
1. Set param at config/_default/params.toml(homeHeaderType)
|
||||
|
||||
1. Set params at config/_default/params.toml(homeHeaderType=""). Empty string or just delete it.
|
||||
2. Make _index.md file at root/content/_index.md and copy & paste below.
|
||||
|
||||
* Slider
|
||||
This project use swiper library for slider header component.
|
||||
```yaml
|
||||
---
|
||||
header:
|
||||
- type: text
|
||||
height: 235
|
||||
paddingX: 50
|
||||
paddingY: 0
|
||||
align: left
|
||||
title:
|
||||
- header title1
|
||||
- header title2
|
||||
subtitle:
|
||||
- header subtitle1
|
||||
- header subtitle2
|
||||
titleFontSize: 44
|
||||
subtitleFontSize: 16
|
||||
spaceBetweenTitleSubtitle: 20
|
||||
|
||||
1. Set params at config/_default/params.toml(homeHeaderType="slide", swiperCount).
|
||||
- type: img
|
||||
image: images/header/background.png
|
||||
height: 235
|
||||
paddingX: 50
|
||||
paddingY: 0
|
||||
align: center
|
||||
title:
|
||||
- header title1
|
||||
- header title2
|
||||
subtitle:
|
||||
- header subtitle1
|
||||
- header subtitle2
|
||||
titleFontSize: 44
|
||||
subtitleFontSize: 16
|
||||
spaceBetweenTitleSubtitle: 20
|
||||
|
||||
2. Make slide-{number}.html file to layouts/partials/header folder.
|
||||
- type: slide
|
||||
height: 235
|
||||
slide:
|
||||
- paddingX: 50
|
||||
paddingY: 0
|
||||
align: left
|
||||
image: images/header/background.png
|
||||
title:
|
||||
- header title1
|
||||
subtitle:
|
||||
- header subtitle1
|
||||
titleFontSize: 44
|
||||
subtitleFontSize: 16
|
||||
spaceBetweenTitleSubtitle: 20
|
||||
|
||||
3. Make swiper.json file that contains options to data folder.
|
||||
- paddingX: 50
|
||||
paddingY: 0
|
||||
align: center
|
||||
image: images/header/background.png
|
||||
title:
|
||||
- header title2
|
||||
subtitle:
|
||||
- header subtitle2
|
||||
titleFontSize: 44
|
||||
subtitleFontSize: 16
|
||||
spaceBetweenTitleSubtitle: 20
|
||||
|
||||
* Image
|
||||
|
||||
1. Set homeHeaderType param to "img"
|
||||
|
||||
2. Add image to static/images/header/background.jpg. Filename must be background
|
||||
|
||||
3. If you want add some contents, make a file at layouts/partials/header/header-img-content.html and edit as you want.
|
||||
|
||||
* Text
|
||||
|
||||
1. Make a file at layouts/partials/header/header-text.html
|
||||
|
||||
2. Edit the file as you want.
|
||||
- paddingX: 50
|
||||
paddingY: 0
|
||||
align: right
|
||||
image: images/header/background.png
|
||||
title:
|
||||
- header title3
|
||||
subtitle:
|
||||
- header subtitle3
|
||||
titleFontSize: 44
|
||||
subtitleFontSize: 16
|
||||
spaceBetweenTitleSubtitle: 20
|
||||
---
|
||||
```
|
||||
|
||||
3. Edit params as you wish.
|
||||
|
||||
### custom grid
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
.fade-1 {
|
||||
.hr-fade {
|
||||
height: 1px;
|
||||
$color: #595B5C;
|
||||
color: $color;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('hr-color');
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba($color, 0),
|
||||
rgba($color, 1) 50%,
|
||||
rgba($color, 0) 100%);
|
||||
}
|
||||
|
||||
.fade-2 {
|
||||
border-width: 0 0 1px;
|
||||
$color: #595B5C;
|
||||
color: $color;
|
||||
border-image: linear-gradient(
|
||||
90deg,
|
||||
rgba($color, 0),
|
||||
rgba($color, 1) 50%,
|
||||
rgba($color, 0) 100%) 0 0 100%;
|
||||
border-style: solid;
|
||||
transparent,
|
||||
themed('hr-color') 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
|
|||
grid-column-gap: $grid_column_gap;
|
||||
grid-row-gap: $grid_row_gap;
|
||||
@include respond-to(sm) {
|
||||
grid-template-columns: minmax(350px, $grid_main_main) minmax(0, $grid_main_side);
|
||||
grid-template-columns: minmax(0, $grid_main_main) minmax(0, $grid_main_side);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,39 @@
|
|||
background-image: url("../images/header/background.jpg"),
|
||||
url("../images/header/background.png");
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 235px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
@include flex-direction(column);
|
||||
|
||||
&__title {
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
font-family: $header_title_font;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
line-height: 1.2;
|
||||
font-family: $header_title_font;
|
||||
}
|
||||
|
||||
&__align-left {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
&__align-center {
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
&__align-right {
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
width: 100%;
|
||||
|
||||
&__title {
|
||||
margin-top: 2rem;
|
||||
margin: 2rem 0;
|
||||
@include themify($themes) {
|
||||
color: themed('terms-title-color');
|
||||
text-shadow: 1px 1px 0 darken(themed('terms-title-color'), 10%),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ custom_js = []
|
|||
|
||||
# header
|
||||
homeHeaderType = "slide" # text, img, slide
|
||||
swiperCount = 3 # only works when homeHeaderType = slide
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
{{- $scr := .Scratch -}}
|
||||
{
|
||||
"name": "{{site.Title}}",
|
||||
"short_name": "{{site.Title}}",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
if (mermaid) {
|
||||
if (window.mermaid) {
|
||||
if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
|
||||
mermaid.initialize({ theme: 'dark' });
|
||||
location.reload();
|
||||
|
|
@ -58,7 +58,6 @@
|
|||
mermaid.initialize({ theme: 'default' });
|
||||
location.reload();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{ partial "header/slide-1" . }}
|
||||
|
|
@ -1,3 +1,37 @@
|
|||
<div class="header__image">
|
||||
{{ partial "header/header-img-content" . }}
|
||||
</div>
|
||||
{{ if $.Params.header }}
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "img" }}
|
||||
<div class="custom-header custom-header__align-{{ .align }}" style="background-image: url('{{.image | relURL }}'); width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ if (fileExists "static/images/header/background.png") }}
|
||||
{{ $.Scratch.Set "header_background" "images/header/background.png" }}
|
||||
{{ else if (fileExists "static/images/header/background.jpg") }}
|
||||
{{ $.Scratch.Set "header_background" "images/header/background.jpg" }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Set "header_background" "images/header/background.png" }}
|
||||
{{ end }}
|
||||
<div style="background-image: url('{{$.Scratch.Get "header_background" | relURL }}'); width: 100%; height: 235px;">
|
||||
{{ partial "header/slide-1" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,15 +1,48 @@
|
|||
{{ if $.Params.header }}
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{{ if .Site.Params.swiperCount }}
|
||||
{{ range $idx, $seq := (seq .Site.Params.swiperCount) }}
|
||||
<div class="swiper-slide">
|
||||
{{ partial (print "header/slide-" $seq) . }}
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "slide" }}
|
||||
{{ $height := .height }}
|
||||
{{ range .slide }}
|
||||
<div class="swiper-slide custom-header custom-header__align-{{ .align }}" style="background-image: url('{{.image | relURL }}'); height: {{ $height }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
{{ range $idx, $seq := (seq 3) }}
|
||||
<div class="swiper-slide">
|
||||
{{ partial (print "header/slide-" $seq) . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ $js := .Site.Data.lib.js }}
|
||||
{{ $css := .Site.Data.lib.css }}
|
||||
|
|
@ -18,7 +51,7 @@
|
|||
{{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"swiper\"></script>" $js.swiper.url $js.swiper.sri | safeHTML }}
|
||||
|
||||
<script>
|
||||
{{ $swiper:= .Site.Data.swiper }}
|
||||
{{ $swiper := .Site.Data.swiper }}
|
||||
var options = JSON.parse({{ $swiper | jsonify }});
|
||||
|
||||
var mySwiper = new Swiper('.swiper-container', options);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
{{ if $.Params.header }}
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "text" }}
|
||||
<div class="custom-header custom-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="features-text">
|
||||
<div class="features-text__item h2">
|
||||
{{ .Site.Params.Title }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
|
||||
<hr class="fade-1 sidebar-hr" />
|
||||
<hr class="hr-fade sidebar-hr" />
|
||||
<div class="taxo-root">
|
||||
{{ partial "taxonomy/taxonomy-tags" . }}
|
||||
{{ partial "taxonomy/taxonomy-categories" . }}
|
||||
{{ partial "taxonomy/taxonomy-series" . }}
|
||||
</div>
|
||||
<hr class="fade-1 sidebar-hr" />
|
||||
<hr class="hr-fade sidebar-hr" />
|
||||
{{ partial "sidebar/site-subs" . }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -68,5 +68,5 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="fade-1 sidebar-hr"/>
|
||||
<hr class="hr-fade sidebar-hr"/>
|
||||
{{ end }}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Loading…
Reference in New Issue