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

footer auto current year added, sidebar bio component added, header ui customizing added, image click to view page support, mathjax support

This commit is contained in:
zzossig 2019-11-15 17:37:32 +09:00
parent 34192c2acb
commit 3608eb2019
33 changed files with 379 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
CHANGELOG.md Normal file
View File

12
README.md
View File

@ -133,7 +133,7 @@ hasCJKLanguage = true
summaryLength = 70
googleAnalytics = ""
copyright = "©yourcopyright"
copyright = "©{year}, All Rights Reserved"
timeout = 10000
enableEmoji = true
paginate = 7
@ -218,10 +218,9 @@ description = "The Zzo theme for Hugo example site."
custom_css = ["css/custom.css", "css/custom.css"]
custom_js = ["js/custom.js"]
# home
myname = "zzossig"
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
swiperCount = 3
# header
homeHeaderType = "slide" # text, img, slide
swiperCount = 3 # only works homeHeaderType = slide
# body
enableBreadcrumb = true
@ -232,8 +231,11 @@ enableGoToTop = true
enableWhoami = true
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
myname = "zzossig"
whoami = "Let me introduce my self"
# sidebar
enableBio = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true

2
assets/sass/base/_reset.scss
View File

@ -136,4 +136,4 @@ figcaption {
color: themed("mark-color");
background: themed("mark-background-color");
}
}
}

48
assets/sass/components/_bio.scss Normal file
View File

@ -0,0 +1,48 @@
.bio {
@include flexbox();
@include justify-content(center);
@include align-items(center);
@include flex-direction(column);
width: 100%;
max-width: 200px;
font-family: 'Montserrat', sans-serif;
&__photo {
width: 100%;
height: 100%;
&-wrapper {
width: 128px;
height: 128px;
border-radius: 100%;
overflow: hidden;
margin: 1rem;
@include themify($themes) {
background-color: themed('');
}
}
}
&__name {
font-weight: 700;
letter-spacing: 1px;
font-family: inherit;
}
&__desc {
margin: 0.5rem 0;
text-align: center;
}
&__social {
a {
text-decoration: none !important;
@include themify($themes) {
color: themed('social-icon-color');
@include on-event {
color: themed('social-icon-hover-color');
}
}
}
}
}

116
assets/sass/components/_features.scss Normal file
View File

@ -0,0 +1,116 @@
.features {
max-width: $grid-max-width;
font-family: 'Montserrat', sans-serif;
padding: 1rem;
margin: 0 4rem;
@include respond-to(sm) {
margin: 0 1rem;
}
&__title {
font-size: 45px;
font-weight: 700;
}
ul {
@include flexbox();
@include flex-wrap(wrap);
padding: 1.5rem 0.5rem;
}
li {
padding: 0.125rem 0.5rem;
width: 43%;
@include truncate(350px);
&::before {
content: '✔️';
z-index: 1;
}
}
}
.features-text {
max-width: $grid-max-width;
height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 45px;
font-weight: 700;
padding-bottom: 3.2rem;
margin: 0 4rem;
@include flexbox();
@include flex-direction(column);
@include align-items(center);
@include justify-content(center);
&__item {
margin-bottom: 1.5rem;
}
}
.features-intro {
max-width: $grid-max-width;
margin-right: auto;
margin-left: auto;
height: 100%;
margin: 2rem 8rem;
@include respond-to(sm) {
margin: 1rem;
}
&__logo {
width: 140px;
height: 140px;
border-radius: 100%;
margin: 0 auto;
display: block;
float: left;
transform-style: preserve-3d;
&-img {
width: 100%;
height: 100%;
}
}
&__titles {
margin-left: 160px;
text-align: left;
position: relative;
.title {
margin: 25px 0 0;
font-family: 'Montserrat', sans-serif;
font-size: 65px;
font-weight: 700;
line-height: 1;
}
.subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
margin: 10px 0 40px 0;
font-weight: 700;
line-height: 1.2;
}
}
&__links {
margin: 20px 0;
text-align: left;
font-size: 16px;
font-weight: 400;
a {
margin-right: 0.4rem;
}
}
&__release-info {
margin: 20px 160px 0;
font-weight: 400;
text-align: left;
font-size: 12px;
}
}

7
assets/sass/components/_mathjax.scss Normal file
View File

@ -0,0 +1,7 @@
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}

19
assets/sass/components/_swiper.scss
View File

@ -1,22 +1,21 @@
.swiper-container {
width: $grid_max_width;
height: 200px;
background-color: transparent;
width: 100%;
height: auto;
min-height: 300px;
}
.swiper-slide {
background-position: center;
background-size: cover;
}
.swiper-pagination-bullet {
opacity: .5;
}
.swiper-pagination-bullet-active {
@include themify($themes) {
background: themed('navbar-title-active-color') !important;
}
}
.swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
}

3
assets/sass/components/_toc.scss
View File

@ -55,6 +55,9 @@
a {
color: themed('toc-title-color');
&.active {
color: themed('toc-vertical-line-active');
}
}
}
}

24
assets/sass/layout/_header.scss
View File

@ -9,23 +9,13 @@
font-weight: 900;
}
&__whoami {
@include flexbox();
@include justify-content(center);
@include align-items(center);
&__image {
background-image: url("../images/header/background.jpg");
width: 100%;
&--image {
max-width: 64px;
max-height: 64px;
}
&--name {
}
&--desc {
margin: 0.25rem 0;
}
height: 300px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2rem;
}
}

3
assets/sass/main.scss
View File

@ -164,6 +164,9 @@ $gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};
@import 'components/subs';
@import 'components/mermaid';
@import 'components/swiper';
@import 'components/bio';
@import 'components/features';
@import 'components/mathjax';
@import 'pages/body';
@import 'pages/home';

2
data/_config/_default/config.toml
View File

@ -9,7 +9,7 @@ hasCJKLanguage = true
summaryLength = 70
googleAnalytics = ""
copyright = "©yourcopyright"
copyright = "©{year}, All Rights Reserved"
timeout = 10000
enableEmoji = true
paginate = 7

10
data/_config/_default/params.toml
View File

@ -3,10 +3,9 @@ description = "The Zzo theme for Hugo example site."
custom_css = ["css/custom.css", "scss/custom.scss"]
custom_js = ["js/custom.js"]
# home
myname = "zzossig"
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
swiperCount = 3
# header
homeHeaderType = "slide" # text, img, slide
swiperCount = 3 # only works homeHeaderType = slide
# body
enableBreadcrumb = true
@ -17,8 +16,11 @@ enableGoToTop = true
enableWhoami = true
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
myname = "zzossig"
whoami = "Let me introduce my self"
# sidebar
enableBio = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true

3
data/lib.toml
View File

@ -19,6 +19,9 @@
sri = "sha256-TabprKdeNXbSesCWLMrcbWSDzUhpAdcNPe5Q53rn9Yg="
url = "https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"
[js.mathjax]
sri = "sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8="
url = "https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"

7
data/swiper.json
View File

@ -1,14 +1,11 @@
{
"direction": "horizontal",
"loop": true,
"preventClicks": false,
"pagination": {
"el": ".swiper-pagination"
},
"navigation": {
"nextEl": ".swiper-button-next",
"prevEl": ".swiper-button-prev"
},
"autoplay": {
"delay": 5000
"delay": 10000
}
}

12
exampleSite/config.toml
View File

@ -9,7 +9,7 @@ hasCJKLanguage = true
summaryLength = 70
googleAnalytics = ""
copyright = "MIT©zzossig"
copyright = "©{year}, All Rights Reserved"
timeout = 10000
enableEmoji = true
paginate = 7
@ -29,10 +29,9 @@ rssLimit = 100
custom_css = ["css/custom.css", "scss/custom.scss"]
custom_js = ["js/custom.js"]
# home
myname = "zzossig"
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
swiperCount = 3
# header
homeHeaderType = "slide" # text, img, slide
swiperCount = 3 # only works homeHeaderType = slide
# body
enableBreadcrumb = true
@ -43,8 +42,11 @@ rssLimit = 100
enableWhoami = true
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
myname = "zzossig"
whoami = "Let me introduce my self"
# sidebar
enableBio = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true

17
layouts/partials/body/lib.html
View File

@ -59,4 +59,21 @@
});
</script>
{{ end }}
{{ if in .Params.Libraries "mathjax" }}
{{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mathjax\"></script>" $js.mathjax.url $js.mathjax.sri | safeHTML }}
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: false,
packages: {'[+]': ['noerrors']}
},
loader: {
load: ['[tex]/noerrors']
}
};
</script>
{{ end }}

4
layouts/partials/footer/site-footer.html
View File

@ -26,7 +26,9 @@
{{ if $.Param "showPoweredBy" }}
<div class="footer__poweredby">
{{ if $.Site.Copyright }}
<p class="caption">{{ $.Site.Copyright }}</p>
<p class="caption">
{{ with $.Site.Copyright }}{{ replace . "{year}" now.Year | markdownify}}{{ end }}
</p>
{{ end }}
<p class="caption">Powered by <a href="https://gohugo.io/">Hugo</a> and the <a href="https://github.com/zzossig/hugo-theme-zzo">Zzo theme</a></p>
</div>

1
layouts/partials/header/header-img-content.html Normal file
View File

@ -0,0 +1 @@
{{ partial "header/slide-1" . }}

3
layouts/partials/header/header-img.html Normal file
View File

@ -0,0 +1,3 @@
<div class="header__image">
{{ partial "header/header-img-content" . }}
</div>

12
layouts/partials/header/header-slide.html Normal file
View File

@ -0,0 +1,12 @@
<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) . }}
</div>
{{ end }}
{{ end }}
</div>
<div class="swiper-pagination"></div>
</div>

5
layouts/partials/header/header-text.html Normal file
View File

@ -0,0 +1,5 @@
<div class="features-text">
<div class="features-text__item h2">
{{ .Site.Params.Title }}
</div>
</div>

24
layouts/partials/header/site-header.html
View File

@ -1,21 +1,13 @@
{{ if .IsHome }}
<header class="header">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
{{ if .Site.Params.swiperCount }}
{{ range $idx, $seq := (seq .Site.Params.swiperCount) }}
<div class="swiper-slide">
{{ partial (print "header/slide-" $seq) . }}
</div>
{{ end }}
{{ end }}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
{{ if and .Site.Params.homeHeaderType (eq .Site.Params.homeHeaderType "slide") }}
{{ partial "header/header-slide" . }}
{{ else if and .Site.Params.homeHeaderType (eq .Site.Params.homeHeaderType "img") }}
{{ partial "header/header-img" . }}
{{ else if and .Site.Params.homeHeaderType (eq .Site.Params.homeHeaderType "text") }}
{{ partial "header/header-text" . }}
{{ else }}
{{ end }}
</header>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

22
layouts/partials/header/slide-1.html
View File

@ -1 +1,21 @@
<div>slide 111</div>
<div class="features-intro">
<div class="features-intro__logo">
<img src="{{ "/images/swiper/logo.png" | relURL }}" alt="Home" class="features-intro__logo-img">
</div>
<div class="features-intro__titles">
<div class="title">
Zzo
</div>
<div class="subtitle">
Blog theme for Hugo
</div>
<div class="features-intro__links">
<a href="https://github.com/zzossig/hugo-theme-zzo">Download</a>
<a href="https://themes.gohugo.io/theme/hugo-theme-zzo/en">Demo</a>
<a href="https://github.com/zzossig/hugo-theme-zzo">Homepage</a>
</div>
</div>
<div class="features-intro__release-info">
MIT Licensed, v1.0.0 | <a href="https://github.com/zzossig/hugo-theme-zzo/blob/master/CHANGELOG.md">Changelog</a>
</div>
</div>

44
layouts/partials/header/slide-2.html
View File

@ -1 +1,43 @@
<div>slide 222</div>
<div class="features">
<div class="features__title">
Top Notch Features
</div>
<ul class="features__list">
<li>
Multiple Skins
</li>
<li>
Multilingual
</li>
<li>
Gallery
</li>
<li>
Search
</li>
<li>
Responsive
</li>
<li>
Highly Customizable
</li>
<li>
Code Highlighting
</li>
<li>
Swiper support
</li>
<li>
Mermaid support
</li>
<li>
Flowchart.js support
</li>
<li>
Katex support
</li>
<li>
Comment(Disqus, Commento)
</li>
</ul>
</div>

9
layouts/partials/header/slide-3.html
View File

@ -1 +1,8 @@
<div>slide 333</div>
<div class="features-text">
<div class="features-text__item h2">
Start Using It Now
</div>
<div class="features-text__item h6">
Zzo theme is completely free and open-source
</div>
</div>

8
layouts/partials/sidebar/sidebar-home.html
View File

@ -1,10 +1,12 @@
{{ if $.Param "enableSidebar" }}
{{ $currentSection := .Section }}
{{ $currentID := "" }}
{{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
<div class="sidebar">
{{ partial "sidebar/site-search" . }}
{{ if $.Param "enableBio" }}
{{ partial "sidebar/site-bio" . }}
{{ end }}
{{ range (and (where .Site.Sections "Type" "!=" "about") (where .Site.Sections "Type" "!=" "archive")) }}
<section class="sidebar-home">
<a href="{{ .RelPermalink }}" class="sidebar-home__title p2">{{ .Title }}</a>

23
layouts/partials/sidebar/site-bio.html Normal file
View File

@ -0,0 +1,23 @@
<div class="bio">
<div class="bio__photo-wrapper">
<img src="{{ "/images/whoami/photo.png" | relURL }}"
alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ end }}" class="bio__photo" />
</div>
<div class="bio__name h6">
{{ .Site.Params.myname }}
</div>
<div class="bio__desc p2">
{{ .Site.Params.whoami }}
</div>
<div class="bio__social">
<div class="social">
{{ range $name, $path := $.Param "socialOptions" }}
{{ if $path }}
<a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}">
{{ partial (print "svgs/social/" $name ".svg") (dict "width" 25 "height" 25) }}
</a>
{{ end }}
{{ end }}
</div>
</div>
</div>

8
layouts/partials/summary/card.html
View File

@ -1,7 +1,7 @@
<article class="summary-card">
<header>
<h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} &middot ☕{{ .ReadingTime }} min read</h6>
</header>
{{ $params := .Params }}
<div class="summary-card__content">
@ -14,9 +14,9 @@
</div>
{{ if $params.featured_image }}
<div class="summary-card__image-wrapper">
{{ with (print "images/" $params.featured_image) }}
<img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
{{ end }}
<a href="{{ .Permalink }}">
<img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
</a>
</div>
{{ else if $params.featured_video }}
{{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}

9
layouts/partials/summary/classic.html
View File

@ -3,15 +3,16 @@
{{ $params := .Params }}
{{ if $params.featured_image }}
<div class="summary-classic__image-wrapper">
{{ with (print "images/" $params.featured_image) }}
<img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
{{ end }}
<a href="{{ .Permalink }}">
<img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}"
class="lazyload summary-classic__image" />
</a>
</div>
{{ end }}
<div class="summary-classic__content">
<header>
<h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} &middot ☕{{ .ReadingTime }} min read
</h6>
</header>
<div>

2
layouts/partials/summary/compact.html
View File

@ -4,7 +4,7 @@
<div class="summary-compact__meta">
<header>
<h5 class="title h6"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
<h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} &middot ☕{{ .ReadingTime }} min read
</h6>
</header>
</div>

2
static/images/clippy.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 479 B

BIN
static/images/header/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
static/images/swiper/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB