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

README.md

@@ -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
+# header
-myname = "zzossig"
+homeHeaderType = "slide" # text, img, slide
-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 # only works homeHeaderType = slide
-swiperCount = 3
 
 # 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

assets/sass/components/_bio.scss

@@ -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');
+        }
+      }
+    }
+  }
+}

assets/sass/components/_features.scss

@@ -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; 
+  }
+}

assets/sass/components/_mathjax.scss

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

assets/sass/components/_swiper.scss

@@ -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;
-}

assets/sass/components/_toc.scss

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

assets/sass/layout/_header.scss

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

assets/sass/main.scss

@@ -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';

data/_config/_default/config.toml

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

data/_config/_default/params.toml

@@ -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
+# header
-myname = "zzossig"
+homeHeaderType = "slide" # text, img, slide
-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 # only works homeHeaderType = slide
-swiperCount = 3
 
 # 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

data/lib.toml

@@ -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"
 
 
 

data/swiper.json

@@ -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
   }
 }

exampleSite/config.toml

@@ -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
+  # header
-  myname = "zzossig"
+  homeHeaderType = "slide" # text, img, slide
-  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 # only works homeHeaderType = slide
-  swiperCount = 3
 
   # 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

layouts/partials/body/lib.html

@@ -60,3 +60,20 @@
 
   </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 }}

layouts/partials/footer/site-footer.html

@@ -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>

layouts/partials/header/header-img-content.html

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

layouts/partials/header/header-img.html

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

layouts/partials/header/header-slide.html

@@ -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>

layouts/partials/header/header-text.html

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

layouts/partials/header/site-header.html

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

layouts/partials/header/slide-1.html

@@ -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>

layouts/partials/header/slide-2.html

@@ -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>

layouts/partials/header/slide-3.html

@@ -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>

layouts/partials/sidebar/sidebar-home.html

@@ -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>

layouts/partials/sidebar/site-bio.html

@@ -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>

layouts/partials/summary/card.html

@@ -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) }}
+      <a href="{{ .Permalink }}">
-        <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
+        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
-      {{ end }}
+      </a>
     </div>
     {{ else if $params.featured_video }}
     {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}

layouts/partials/summary/classic.html

@@ -3,15 +3,16 @@
     {{ $params := .Params }}
     {{ if $params.featured_image }}
     <div class="summary-classic__image-wrapper">
-      {{ with (print "images/" $params.featured_image) }}
+      <a href="{{ .Permalink }}">
-      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
+        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}"
-      {{ end }}
+          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>

layouts/partials/summary/compact.html

@@ -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>

static/images/clippy.svg

@@ -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>