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

summary view mode added, switch for toc, sidebar view mode,

This commit is contained in:
zzossig 2019-11-12 19:03:15 +09:00
parent 4555e0879f
commit ee4bd8bb4b
23 changed files with 262 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,6 +1,7 @@
# 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.
![zzo theme for Hugo](https://user-images.githubusercontent.com/52706977/68638044-ace72a80-0543-11ea-94d9-329ef0228f4f.gif)
## Table of contents
@ -21,7 +22,6 @@ Thank you for click me!. Zzo theme is a blog theme for Hugo with free(always), a
## Features
* Grid customizing
* Multiple sub themes(dark, light, solarized, hacker)
* A mobile menu
* CSS grid and flex for layout
@ -223,19 +223,21 @@ myname = "yourname"
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."
# body
enableToc = true
enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
summaryShape = "classic" # card, classic
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
# sidebar
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableToc = true
itemsPerCategory = 5
# comment

8
assets/js/zzo.js
View File

@ -28,6 +28,10 @@ $(document).ready(function() {
}
$(".single__contents :header").each(function () {
if (!$("#toggle-toc").is(":checked")) {
return null;
}
if ($(window).scrollTop() >= $(this).position().top) {
var id = $(this).attr('id');
$('.toc a').removeClass('active');
@ -52,6 +56,10 @@ $(document).ready(function() {
}
$(".single__contents :header").each(function () {
if (!$("#toggle-toc").is(":checked")) {
return null;
}
if ($(window).scrollTop() >= $(this).position().top) {
var id = $(this).attr('id');
$('.toc a').removeClass('active');

2
assets/sass/abstracts/_variables.scss
View File

@ -6,7 +6,7 @@ $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace !default;
$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer");
$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc");
$ls: (
base: -10,
heading: 10,

29
assets/sass/components/_summary.scss
View File

@ -58,6 +58,9 @@
hr {
margin-top: 1.5rem;
@include themify($themes) {
border-top: 1px solid themed('hr-color');
}
}
&:not(:last-child) {
hr {
@ -96,7 +99,7 @@
&__flex-box {
@include flexbox();
margin-top: 0.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
@ -127,9 +130,27 @@
}
hr {
border-radius: 5rem;
@include themify($themes) {
border-top: 1px solid themed('hr-color');
@include themify($themes) {
border-top: 1px solid themed('hr-color');
}
}
}
.summary-compact {
padding: 0 1rem;
&__flexbox {
@include flexbox();
margin-top: 1rem;
margin-bottom: 1rem;
}
&__meta {
padding: 1rem 0;
}
hr {
@include themify($themes) {
border-top: 1px solid themed('hr-color');
}
}
}

65
assets/sass/components/_switch.scss Normal file
View File

@ -0,0 +1,65 @@
.switch {
position: relative;
display: inline-block;
width: 28px;
height: 14px;
margin-bottom: 0.6rem;
margin-left: 1rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include transition(all, 0.2s, ease);
@include themify($themes) {
background-color: themed('switch-background-color');
}
}
.slider:before {
position: absolute;
content: "";
height: 11px;
width: 11px;
left: 1.72px;
bottom: 1.72px;
@include transition(all, 0.2s, ease);
@include themify($themes) {
background-color: themed('switch-button-color');
}
}
input:checked + .slider {
@include themify($themes) {
background-color: themed('switch-active-color');
}
}
input:focus + .slider {
@include themify($themes) {
box-shadow: 0 0 1px themed('switch-active-color');
}
}
input:checked + .slider:before {
@include translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 8.5px;
}
.slider.round:before {
border-radius: 50%;
}

1
assets/sass/components/_taxo.scss
View File

@ -1,6 +1,7 @@
.taxo {
padding: 0.25rem;
margin: 2.5rem 0;
z-index: z('taxo');
&__title {
font-weight: 700;

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

@ -2,17 +2,23 @@
width: 100%;
max-width: 250px;
position: fixed;
top: 4.5rem;
top: 6.5rem;
font-size: 0.85rem;
padding-left: 0.5rem;
z-index: z('toc');
#toc {
position: relative;
}
&__flexbox {
@include flexbox();
@include align-items(center);
}
&__title {
font-size: 0.9rem;
margin-bottom: 1rem;
margin-top: 0.5rem;
@include themify($themes) {
color: themed('toc-label-color');
}

6
assets/sass/layout/_footer.scss
View File

@ -174,4 +174,10 @@
.dropdown:hover .dropdown-content {
display: block;
}
hr {
@include themify($themes) {
border-top: 1px solid themed('hr-color') !important;
}
}
}

1
assets/sass/main.scss
View File

@ -153,6 +153,7 @@ $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
@import 'components/tooltip';
@import 'components/gtt';
@import 'components/whoami';
@import 'components/switch';
@import 'pages/body';
@import 'pages/home';

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

@ -6,7 +6,7 @@ $dark: (
title-color: #ffd866,
meta-color: #FCFCFA,
body-color: #FCFCFA,
hr-color: #403E41,
hr-color: #595B5C,
body-background-color: #2D2A2E,
backdrop-background-color: #212121,
dropdown-border-color: #212121,
@ -92,4 +92,7 @@ $dark: (
gtt-hover-color: #82aaff,
gtt-hover-background-color: lighten(#403E41, 5%),
whoami-border-color: #90a4ae,
switch-background-color: #403E41,
switch-button-color: #FCFCFA,
switch-active-color: #FF6188,
);

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

@ -6,19 +6,21 @@ 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."
# body
enableToc = true
enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
summaryShape = "classic" # card, classic
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
# sidebar
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableToc = true
itemsPerCategory = 5
# footer

6
exampleSite/config.toml
View File

@ -32,19 +32,21 @@ rssLimit = 100
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."
# body
enableToc = true
enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
summaryShape = "card" # card, classic
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
# sidebar
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableToc = true
itemsPerCategory = 5
# footer

11
layouts/_default/list.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<main class="main-main">
<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
{{ partial "body/breadcrumb" . }}
<article class="list">
<header class="list__header">
@ -20,7 +20,10 @@
{{ partial "pagination/pagination-list" . }}
</main>
<aside class="main-side">
{{ partial "sidebar/sidebar-list" . }}
</aside>
{{ if $.Param "enableSidebar" }}
<aside class="main-side">
{{ partial "sidebar/sidebar-list" . }}
</aside>
{{ end }}
{{ end }}

5
layouts/_default/single.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<main class="main-main">
<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
{{ if eq .Site.Params.enableBreadcrumb true }}
{{ partial "body/breadcrumb" . }}
{{ end }}
@ -19,7 +19,10 @@
{{ partial "body/photoswipe" . }}
</div>
</main>
{{ if $.Param "enableSidebar" }}
<aside class="main-side">
{{ partial "sidebar/sidebar-single" . }}
</aside>
{{ end }}
{{ end }}

68
layouts/_default/summary.html
View File

@ -1,67 +1,9 @@
{{ if eq (lower .Site.Params.summaryShape) "card" }}
<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>
</header>
{{ $params := .Params }}
<div class="summary-card__content">
<div class="summary-card__text p2">
{{ with $params.Description }}
{{ . }}
{{ else }}
{{ .Summary }}
{{ end }}
</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 }}
</div>
{{ else if $params.featured_video }}
{{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
<div class="summary-card__video-wrapper">
<video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
{{ with print ("videos/" | relURL) $params.featured_video }}
<source src="{{ . | relURL }}" type='video/mp4'>
{{ end }}
</video>
</div>
{{ end }}
{{ end }}
</div>
<hr />
</article>
{{ partial "summary/card" . }}
{{ else if eq (lower .Site.Params.summaryShape) "classic" }}
<article class="summary-classic">
<div class="summary-classic__flex-box">
{{ $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 }}
</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>
</header>
<div>
<div class="summary-classic__text p2">
{{ with $params.Description }}
{{ . }}
{{ else }}
{{ .Summary }}
{{ end }}
</div>
</div>
</div>
</div>
<hr />
</article>
{{ partial "summary/classic" . }}
{{ else if eq (lower .Site.Params.summaryShape) "compact" }}
{{ partial "summary/compact" . }}
{{ else }}
{{ printf "%#v" "Not supported shape. Please edit config params(summaryShape)." }}
{{ end }}

2
layouts/archive/list.html
View File

@ -10,7 +10,7 @@
</span>
<main class="main archive">
<div>
{{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate "2006-01" }}
{{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate .Site.Params.archiveGroupByDate }}
<span class="archive__key">{{ .Key }}</span>
<ul class="archive__ul">
{{ range .Pages }}

11
layouts/index.html
View File

@ -1,7 +1,7 @@
{{ define "title" }}{{ .Site.Title }}{{ end }}
{{ define "main" }}
<main class="main-main">
<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
<article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
<div class="content">
{{ .Content }}
@ -16,7 +16,10 @@
{{ partial "pagination/pagination-list" . }}
</main>
<aside class="main-side">
{{ partial "sidebar/sidebar-home" . }}
</aside>
{{ if $.Param "enableSidebar" }}
<aside class="main-side">
{{ partial "sidebar/sidebar-home" . }}
</aside>
{{ end }}
{{ end }}

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

@ -1,3 +1,5 @@
{{ if $.Param "enableSidebar" }}
{{ $currentSection := .Section }}
{{ $currentID := "" }}
{{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
@ -18,4 +20,6 @@
{{ partial "taxonomy/taxonomy-tags" . }}
{{ partial "taxonomy/taxonomy-categories" . }}
{{ partial "taxonomy/taxonomy-series" . }}
{{ partial "taxonomy/taxonomy-series" . }}
{{ end }}

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

@ -1,9 +1,11 @@
{{ if $.Param "enableSidebar" }}
{{ $currentSection := .Section }}
{{ $currentID := "" }}
{{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
<div class="sidebar">
{{ partial "sidebar/site-search" . }}
{{ range .Pages }}
{{ range first .Site.Params.itemsPerCategory .Pages }}
<section class="sidebar-list">
<a href="{{ .RelPermalink }}" class="sidebar-list__title p1 {{ if eq $currentSection .Section }}active{{ end }}">{{ .Title }}</a>
<ul class="sidebar-list__ul">
@ -18,4 +20,6 @@
{{ partial "taxonomy/taxonomy-tags" . }}
{{ partial "taxonomy/taxonomy-categories" . }}
{{ partial "taxonomy/taxonomy-series" . }}
{{ partial "taxonomy/taxonomy-series" . }}
{{ end }}

20
layouts/partials/sidebar/sidebar-single.html
View File

@ -1,8 +1,15 @@
{{ if $.Param "enableSidebar" }}
{{ if $.Param "enableToc" }}
<div class="sidebar">
<div class="toc">
<div class="toc__flexbox">
<h6 class="toc__title">{{ i18n "toc-label" }}</h6>
<label class="switch">
<input id="toggle-toc" type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="toc">
<ul id="toc"></ul>
</div>
</div>
@ -14,6 +21,7 @@
$(document).ready(function () {
var navbar = $('.navbar');
// toc
$("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
$('#toc > li').each(function () {
$(this).find('ul').css('display', 'none');
@ -104,7 +112,17 @@
});
}
});
// toc visibility
$("#toggle-toc").change(function() {
if (this.checked) {
$('.toc').removeClass('hide');
} else {
$('.toc').removeClass('hide').addClass('hide');
}
});
});
</script>
{{ end }}
{{ end }}

34
layouts/partials/summary/card.html Normal file
View File

@ -0,0 +1,34 @@
<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>
</header>
{{ $params := .Params }}
<div class="summary-card__content">
<div class="summary-card__text p2">
{{ with $params.Description }}
{{ . }}
{{ else }}
{{ .Summary }}
{{ end }}
</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 }}
</div>
{{ else if $params.featured_video }}
{{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
<div class="summary-card__video-wrapper">
<video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
{{ with print ("videos/" | relURL) $params.featured_video }}
<source src="{{ . | relURL }}" type='video/mp4'>
{{ end }}
</video>
</div>
{{ end }}
{{ end }}
</div>
<hr />
</article>

29
layouts/partials/summary/classic.html Normal file
View File

@ -0,0 +1,29 @@
<article class="summary-classic">
<div class="summary-classic__flex-box">
{{ $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 }}
</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>
</header>
<div>
<div class="summary-classic__text p2">
{{ with $params.Description }}
{{ . }}
{{ else }}
{{ .Summary }}
{{ end }}
</div>
</div>
</div>
</div>
<hr />
</article>

13
layouts/partials/summary/compact.html Normal file
View File

@ -0,0 +1,13 @@
<article class="summary-compact">
<div class="summary-compact__flex-box">
{{ $params := .Params }}
<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>
</header>
</div>
</div>
<hr />
</article>