diff --git a/README.md b/README.md index 10da892..81e2edf 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/assets/js/zzo.js b/assets/js/zzo.js index 9423f14..50e1514 100644 --- a/assets/js/zzo.js +++ b/assets/js/zzo.js @@ -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'); diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss index a42d18e..8a297ac 100644 --- a/assets/sass/abstracts/_variables.scss +++ b/assets/sass/abstracts/_variables.scss @@ -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, diff --git a/assets/sass/components/_summary.scss b/assets/sass/components/_summary.scss index 11bb2b6..f9d4ca6 100644 --- a/assets/sass/components/_summary.scss +++ b/assets/sass/components/_summary.scss @@ -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'); + } + } +} \ No newline at end of file diff --git a/assets/sass/components/_switch.scss b/assets/sass/components/_switch.scss new file mode 100644 index 0000000..3ea8ca9 --- /dev/null +++ b/assets/sass/components/_switch.scss @@ -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%; +} \ No newline at end of file diff --git a/assets/sass/components/_taxo.scss b/assets/sass/components/_taxo.scss index 0513912..b129774 100644 --- a/assets/sass/components/_taxo.scss +++ b/assets/sass/components/_taxo.scss @@ -1,6 +1,7 @@ .taxo { padding: 0.25rem; margin: 2.5rem 0; + z-index: z('taxo'); &__title { font-weight: 700; diff --git a/assets/sass/components/_toc.scss b/assets/sass/components/_toc.scss index ae26a78..fd41dd0 100644 --- a/assets/sass/components/_toc.scss +++ b/assets/sass/components/_toc.scss @@ -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'); } diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss index 0bde95d..1753d7e 100644 --- a/assets/sass/layout/_footer.scss +++ b/assets/sass/layout/_footer.scss @@ -174,4 +174,10 @@ .dropdown:hover .dropdown-content { display: block; } + + hr { + @include themify($themes) { + border-top: 1px solid themed('hr-color') !important; + } + } } \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 66a9687..15e7608 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -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'; diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss index 50a5177..a36af17 100644 --- a/assets/sass/themes/_dark.scss +++ b/assets/sass/themes/_dark.scss @@ -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, ); \ No newline at end of file diff --git a/data/_config/_default/params.toml b/data/_config/_default/params.toml index e72c565..d726a40 100644 --- a/data/_config/_default/params.toml +++ b/data/_config/_default/params.toml @@ -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 diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b51d26f..a8573f9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -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 diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 4b23564..54f854c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ partial "body/breadcrumb" . }}
@@ -20,7 +20,10 @@ {{ partial "pagination/pagination-list" . }}
- + +{{ if $.Param "enableSidebar" }} + +{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 382b075..6f99b58 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+
{{ if eq .Site.Params.enableBreadcrumb true }} {{ partial "body/breadcrumb" . }} {{ end }} @@ -19,7 +19,10 @@ {{ partial "body/photoswipe" . }}
+ +{{ if $.Param "enableSidebar" }} {{ end }} +{{ end }} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 33ec70c..9cb4e50 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,67 +1,9 @@ {{ if eq (lower .Site.Params.summaryShape) "card" }} -
-
-
{{ .Title }}
-
馃晸 {{ .Date.Format (i18n "summary-dateformat") }} 路 鈽晎{ .ReadingTime }} min read
-
- {{ $params := .Params }} -
-
- {{ with $params.Description }} - {{ . }} - {{ else }} - {{ .Summary }} - {{ end }} -
- {{ if $params.featured_image }} -
- {{ with (print "images/" $params.featured_image) }} - {{ print $params.featured_image }} - {{ end }} -
- {{ else if $params.featured_video }} - {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }} -
- -
- {{ end }} - {{ end }} -
-
-
+ {{ partial "summary/card" . }} {{ else if eq (lower .Site.Params.summaryShape) "classic" }} -
-
- {{ $params := .Params }} - {{ if $params.featured_image }} -
- {{ with (print "images/" $params.featured_image) }} - {{ print $params.featured_image }} - {{ end }} -
- {{ end }} -
-
-
{{ .Title }}
-
馃晸 {{ .Date.Format (i18n "summary-dateformat") }} 路 鈽晎{ .ReadingTime }} min read -
-
-
-
- {{ with $params.Description }} - {{ . }} - {{ else }} - {{ .Summary }} - {{ end }} -
-
-
-
-
-
+ {{ 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 }} \ No newline at end of file diff --git a/layouts/archive/list.html b/layouts/archive/list.html index d27359c..c7ae649 100644 --- a/layouts/archive/list.html +++ b/layouts/archive/list.html @@ -10,7 +10,7 @@
- {{ 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 }} {{ .Key }}
    {{ range .Pages }} diff --git a/layouts/index.html b/layouts/index.html index 7bd7595..db9d04c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ {{ define "title" }}{{ .Site.Title }}{{ end }} {{ define "main" }} -
    +
    {{ .Content }} @@ -16,7 +16,10 @@ {{ partial "pagination/pagination-list" . }}
    - + +{{ if $.Param "enableSidebar" }} + +{{ end }} {{ end }} diff --git a/layouts/partials/sidebar/sidebar-home.html b/layouts/partials/sidebar/sidebar-home.html index 51435c2..76772d4 100644 --- a/layouts/partials/sidebar/sidebar-home.html +++ b/layouts/partials/sidebar/sidebar-home.html @@ -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" . }} \ No newline at end of file +{{ partial "taxonomy/taxonomy-series" . }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/sidebar/sidebar-list.html b/layouts/partials/sidebar/sidebar-list.html index b3ca5c3..1ec3e58 100644 --- a/layouts/partials/sidebar/sidebar-list.html +++ b/layouts/partials/sidebar/sidebar-list.html @@ -1,9 +1,11 @@ +{{ if $.Param "enableSidebar" }} + {{ $currentSection := .Section }} {{ $currentID := "" }} {{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
    {{ partial "sidebar/site-search" . }} - {{ range .Pages }} + {{ range first .Site.Params.itemsPerCategory .Pages }}
    {{ .Title }}
      @@ -18,4 +20,6 @@ {{ partial "taxonomy/taxonomy-tags" . }} {{ partial "taxonomy/taxonomy-categories" . }} -{{ partial "taxonomy/taxonomy-series" . }} \ No newline at end of file +{{ partial "taxonomy/taxonomy-series" . }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/sidebar/sidebar-single.html b/layouts/partials/sidebar/sidebar-single.html index 24d69ea..0728363 100644 --- a/layouts/partials/sidebar/sidebar-single.html +++ b/layouts/partials/sidebar/sidebar-single.html @@ -1,8 +1,15 @@ +{{ if $.Param "enableSidebar" }} {{ if $.Param "enableToc" }}
      -
      +
      {{ i18n "toc-label" }}
      + +
      +
        @@ -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'); + } + }); }); +{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/summary/card.html b/layouts/partials/summary/card.html new file mode 100644 index 0000000..7190dbe --- /dev/null +++ b/layouts/partials/summary/card.html @@ -0,0 +1,34 @@ +
        +
        +
        {{ .Title }}
        +
        馃晸 {{ .Date.Format (i18n "summary-dateformat") }} 路 鈽晎{ .ReadingTime }} min read
        +
        + {{ $params := .Params }} +
        +
        + {{ with $params.Description }} + {{ . }} + {{ else }} + {{ .Summary }} + {{ end }} +
        + {{ if $params.featured_image }} +
        + {{ with (print "images/" $params.featured_image) }} + {{ print $params.featured_image }} + {{ end }} +
        + {{ else if $params.featured_video }} + {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }} +
        + +
        + {{ end }} + {{ end }} +
        +
        +
        \ No newline at end of file diff --git a/layouts/partials/summary/classic.html b/layouts/partials/summary/classic.html new file mode 100644 index 0000000..104ce82 --- /dev/null +++ b/layouts/partials/summary/classic.html @@ -0,0 +1,29 @@ +
        +
        + {{ $params := .Params }} + {{ if $params.featured_image }} +
        + {{ with (print "images/" $params.featured_image) }} + {{ print $params.featured_image }} + {{ end }} +
        + {{ end }} +
        +
        +
        {{ .Title }}
        +
        馃晸 {{ .Date.Format (i18n "summary-dateformat") }} 路 鈽晎{ .ReadingTime }} min read +
        +
        +
        +
        + {{ with $params.Description }} + {{ . }} + {{ else }} + {{ .Summary }} + {{ end }} +
        +
        +
        +
        +
        +
        \ No newline at end of file diff --git a/layouts/partials/summary/compact.html b/layouts/partials/summary/compact.html new file mode 100644 index 0000000..65eb3d4 --- /dev/null +++ b/layouts/partials/summary/compact.html @@ -0,0 +1,13 @@ +
        +
        + {{ $params := .Params }} +
        +
        +
        {{ .Title }}
        +
        馃晸 {{ .Date.Format (i18n "summary-dateformat") }} 路 鈽晎{ .ReadingTime }} min read +
        +
        +
        +
        +
        +