feat(compatibility): improve compatibility for Hugo basic version (#352)

assets/css/_core/_media.scss

@@ -51,7 +51,14 @@
 
   .page {
     width: 100%;
-    padding-top: $page-padding-top-mobile;
+
+    [header-mobile] & {
+      padding-top: $header-height;
+    }
+
+    [header-mobile=normal] & {
+      padding-top: 0;
+    }
 
     .categories-card {
       .card-item {

assets/css/_mixin/_index.scss

@@ -1,5 +1,4 @@
 @import "_compatibility";
 @import "_link";
 @import "_blur";
-@import "_summary";
 @import "_details";

assets/css/_mixin/_summary.scss

@@ -1,101 +0,0 @@
-@mixin summary {
-  .summary {
-    padding-top: 1rem;
-    padding-bottom: .8rem;
-    color: $global-font-color;
-    border-bottom: 1px dashed $global-border-color;
-
-    [theme=dark] & {
-      color: $global-font-color-dark;
-      border-bottom: 1px dashed $global-border-color-dark;
-    }
-
-    .featured-image-preview {
-      width: 100%;
-      padding: 30% 0 0;
-      position: relative;
-      margin: 0.6rem auto;
-      @include transition(transform 0.4s ease);
-
-      img {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        @include object-fit(cover);
-      }
-
-      &:hover {
-        @include transform(scale(1.01));
-      }
-    }
-
-    .single-title {
-      font-size: 1.25rem;
-      line-height: 140%;
-      margin: 0.4rem 0;
-    }
-
-    .content {
-      @include box(vertical);
-      -webkit-line-clamp: 3;
-      margin-top: .3rem;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @include overflow-wrap(break-word);
-      color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        font-size: 1rem;
-        line-height: 1.5;
-        display: inline;
-
-        &::after {
-          content: "\A";
-          white-space: pre;
-        }
-      }
-
-      h2 {
-        font-size: 1.125rem;
-      }
-
-      @include link(false, true);
-
-      b, strong {
-        color: $global-font-secondary-color;
-
-        [theme=dark] & {
-          color: $global-font-secondary-color-dark;
-        }
-      }
-    }
-
-    .post-footer {
-      margin-top: .4rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: .875rem;
-
-      @include link(false, false);
-
-      .post-tags {
-        padding: 0;
-
-        @include link(true, true);
-      }
-    }
-  }
-}

assets/css/_page/_home.scss

@@ -1,77 +1,178 @@
-@mixin page-home($profile, $posts) {
+.home {
-  .home {
+  .home-profile {
-    @if $profile {
+    @include transform(translateY( 16vh));
-      .home-profile {
+    padding: 0 0 .5rem;
-        @include transform(translateY(if($posts, 0, 16vh)));
+    text-align: center;
-        padding: if($posts, 2rem, 0) 0 .5rem;
-        text-align: center;
 
-        .home-avatar {
+    .home-avatar {
-          padding: 0.6rem;
+      padding: .5rem;
 
-          img {
+      img {
-            display: inline-block;
+        display: inline-block;
-            width: if($posts, 6rem, 8rem);
+        width: 8rem;
-            height: auto;
+        height: auto;
-            margin: 0 auto;
+        margin: 0 auto;
-            @include border-radius(100%);
+        @include border-radius(100%);
-            @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
-            @include transition(all 0.4s ease);
+        @include transition(all 0.4s ease);
 
-            &:hover {
+        &:hover {
-              position: relative;
+          position: relative;
-              @include transform(translateY(-.75rem));
+          @include transform(translateY(-.75rem));
-            }
-          }
-        }
-
-        .home-title {
-          font-size: 1.2rem;
-          font-weight: bold;
-          margin: 0;
-          padding: .4rem;
-        }
-
-        .home-subtitle {
-          font-size: 1rem;
-          font-weight: normal;
-          margin: 0;
-          padding: .4rem;
-        }
-
-        .social-links {
-          padding: .4rem .2rem;
-          font-size: 1.6rem;
-
-          a * {
-            vertical-align: text-bottom;
-          }
-
-          img {
-            height: 1.4rem;
-            padding: 0 .25rem;
-          }
-        }
-
-        .home-disclaimer {
-          font-size: 1rem;
-          line-height: 1.4rem;
-          font-weight: normal;
-          margin: 0;
-          padding: .4rem;
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
         }
       }
     }
 
-    @if $posts {
+    .home-title {
-      @include summary;
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin: 0;
+      padding: .5rem;
+    }
+
+    .home-subtitle {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      padding: .5rem;
+    }
+
+    .social-links {
+      padding: .5rem;
+      font-size: 1.5rem;
+
+      a * {
+        vertical-align: text-bottom;
+      }
+
+      img {
+        height: 1.5rem;
+        padding: 0 .25rem;
+      }
+    }
+
+    .home-disclaimer {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      font-weight: normal;
+      margin: 0;
+      padding: .5rem;
+      color: $global-font-secondary-color;
+
+      [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+      }
     }
   }
 }
 
-@include page-home($home-profile, $home-posts);
+.home[posts] {
+  .home-profile {
+    @include transform(translateY(0));
+    padding-top: 2rem;
+  }
+
+  .home-avatar img {
+    width: 6rem;
+  }
+
+  .summary {
+    padding-top: 1rem;
+    padding-bottom: .8rem;
+    color: $global-font-color;
+    border-bottom: 1px dashed $global-border-color;
+
+    [theme=dark] & {
+      color: $global-font-color-dark;
+      border-bottom: 1px dashed $global-border-color-dark;
+    }
+
+    .featured-image-preview {
+      width: 100%;
+      padding: 30% 0 0;
+      position: relative;
+      margin: 0.6rem auto;
+      @include transition(transform 0.4s ease);
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        @include object-fit(cover);
+      }
+
+      &:hover {
+        @include transform(scale(1.01));
+      }
+    }
+
+    .single-title {
+      font-size: 1.25rem;
+      line-height: 140%;
+      margin: 0.4rem 0;
+    }
+
+    .content {
+      @include box(vertical);
+      -webkit-line-clamp: 3;
+      margin-top: .3rem;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @include overflow-wrap(break-word);
+      color: $global-font-secondary-color;
+
+      [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        font-size: 1rem;
+        line-height: 1.5;
+        display: inline;
+
+        &::after {
+          content: "\A";
+          white-space: pre;
+        }
+      }
+
+      h2 {
+        font-size: 1.125rem;
+      }
+
+      @include link(false, true);
+
+      b, strong {
+        color: $global-font-secondary-color;
+
+        [theme=dark] & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+    }
+
+    .post-footer {
+      margin-top: .4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: .875rem;
+
+      @include link(false, false);
+
+      .post-tags {
+        padding: 0;
+
+        @include link(true, true);
+      }
+    }
+  }
+}

assets/css/_page/_index.scss

@@ -3,7 +3,14 @@
   max-width: 800px;
   width: 60%;
   margin: 0 auto;
-  padding-top: $page-padding-top-desktop;
+
+  [header-desktop] & {
+    padding-top: $header-height;
+  }
+
+  [header-desktop=normal] & {
+    padding-top: 0;
+  }
 
   @include blur;
 }

assets/css/_partial/_header.scss

@@ -142,10 +142,14 @@ header {
 
 #header-desktop {
   display: block;
-  position: $header-position-desktop;
+  position: fixed;
   height: $header-height;
   line-height: $header-height;
 
+  [header-desktop=normal] & {
+    position: static;
+  }
+
   .header-wrapper {
     padding: 0 2rem 0 10vh;
 
@@ -203,10 +207,14 @@ header {
 
 #header-mobile {
   display: none;
-  position: $header-position-mobile;
+  position: fixed;
   height: $header-height;
   line-height: $header-height;
 
+  [header-mobile=normal] & {
+    position: static;
+  }
+
   .header-container {
     padding: 0;
     margin: 0;

assets/css/_partial/_single/_toc.scss

@@ -55,10 +55,14 @@
   border-left: 4px solid $global-border-color;
   @include overflow-wrap(break-word);
   box-sizing: border-box;
-  top: if($header-normal-mode-desktop, 5rem, 10rem);
+  top: 10rem;
   left: 0;
   visibility: hidden;
 
+  [header-desktop=normal] & {
+    top: 5rem;
+  }
+
   @include blur;
 
   [theme=dark] & {

assets/css/_variables.scss

@@ -60,14 +60,6 @@ $header-background-color-dark: #252627 !default;
 $header-title-font-family: $global-font-family !default;
 $header-title-font-size: 1.5rem !default;
 
-// Position of the header
-$header-position-desktop: if($header-normal-mode-desktop, static, fixed) !default;
-$header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;
-
-// Top of the page padding
-$page-padding-top-desktop: if($header-normal-mode-desktop, 0, $header-height) !default;
-$page-padding-top-mobile: if($header-normal-mode-mobile, 0, $header-height) !default;
-
 // Color of the hover header item
 $header-hover-color: #161209 !default;
 $header-hover-color-dark: #fff !default;

assets/css/style.template.scss

@@ -1,9 +1,4 @@
-@charset 'utf-8';
+@charset "utf-8";
-
-$home-profile: {{ if .Site.Params.home.profile.enable }}true{{ else }}false{{ end }};
-$home-posts: {{ if ne .Site.Params.home.posts.enable false }}true{{ else }}false{{ end }};
-$header-normal-mode-desktop: {{ if eq .Site.Params.header.desktopMode "normal" }}true{{ else }}false{{ end }};
-$header-normal-mode-mobile: {{ if eq .Site.Params.header.mobileMode "normal" }}true{{ else }}false{{ end }};
 
 @import "_variables";
 

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -820,6 +820,10 @@ Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
 
 ### 3.4 Style Customization
 
+{{< admonition >}}
+Hugo **extended** version is necessary for the style customization.
+{{< /admonition >}}
+
 **LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
 
 The directory including the custom `.scss` style files is `config/css` relative to **your project root directory**.

exampleSite/content/posts/theme-documentation-basics/index.fr.md

@@ -825,6 +825,10 @@ Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
 
 ### 3.4 Style Customization
 
+{{< admonition >}}
+Hugo **extended** version is necessary for the style customization.
+{{< /admonition >}}
+
 **LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
 
 The directory including the custom `.scss` style files is `config/css` relative to **your project root directory**.

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -824,6 +824,10 @@ smoothScrollJS = 'https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scro
 
 ### 3.4 自定义样式
 
+{{< admonition >}}
+Hugo **extended** 版本对于自定义样式是必需的.
+{{< /admonition >}}
+
 通过定义自定义 `.scss` 样式文件, **LoveIt** 主题支持可配置的样式.
 
 包含自定义 `.scss` 样式文件的目录相对于 **你的项目根目录** 的路径为 `config/css`.

layouts/_default/baseof.html

@@ -27,9 +27,7 @@
 {{- end -}}
 
 {{- .Scratch.Set "params" $params -}}
-
+{{- .Scratch.Set "this" dict -}}
-{{- $this := dict "desktop" .Site.Params.header.desktopMode "mobile" .Site.Params.header.mobileMode | dict "headerMode" | dict "config" -}}
-{{- .Scratch.Set "this" $this -}}
 
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
@@ -47,7 +45,7 @@
         {{- partial "head/link.html" . -}}
         {{- partial "head/seo.html" . -}}
     </head>
-    <body>
+    <body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
         {{- /* Check theme isDark before body rendering */ -}}
         {{- $theme := .Site.Params.defaulttheme -}}
         <script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

layouts/index.html

@@ -1,8 +1,11 @@
 {{- define "content" -}}
     {{- $params := .Scratch.Get "params" -}}
-    <div class="page home">
+    {{- $profile := .Site.Params.home.profile -}}
+    {{- $posts := .Site.Params.home.posts -}}
+
+    <div class="page home"{{ if ne $posts.enable false }} posts{{ end }}>
         {{- /* Profile */ -}}
-        {{- if ne .Site.Params.home.profile.enable false -}}
+        {{- if ne $profile.enable false -}}
             {{- partial "home/profile.html" . -}}
         {{- end -}}
 
@@ -16,7 +19,7 @@
         {{- end -}}
 
         {{- /* Posts */ -}}
-        {{- if ne .Site.Params.home.posts.enable false | and .Site.RegularPages -}}
+        {{- if ne $posts.enable false | and .Site.RegularPages -}}
             {{- /* Paginate */ -}}
             {{- $pages := where .Site.RegularPages "Type" "posts" -}}
             {{- if .Site.Params.page.hiddenFromHomePage -}}
@@ -24,7 +27,7 @@
             {{- else -}}
                 {{- $pages = where $pages "Params.hiddenfromhomepage" "!=" true -}}
             {{- end -}}
-            {{- with .Site.Params.home.posts.paginate | default .Site.Params.paginate -}}
+            {{- with $posts.paginate | default .Site.Params.paginate -}}
                 {{- $pages = $.Paginate $pages . -}}
             {{- else -}}
                 {{- $pages = .Paginate $pages -}}

layouts/partials/head/link.html

@@ -36,8 +36,7 @@
 
 {{- /* style.min.css */ -}}
 {{- $stylesheet := dict "source" "css/style.template.scss" "fingerprint" $fingerprint -}}
-{{- $targetPath := cond .Site.IsMultiLingual (printf "css/style.%s.min.css" .Language.Lang) "css/style.min.css" -}}
+{{- $options := dict "targetPath" "css/style.min.css" "includePaths" (slice "config/css") "enableSourceMap" true -}}
-{{- $options := dict "targetPath" $targetPath "includePaths" (slice "config/css") "enableSourceMap" true -}}
 {{- $stylesheet = dict "template" "style.scss" "context" . "toCSS" $options | merge $stylesheet -}}
 {{- partial "plugin/stylesheet.html" $stylesheet -}}
 

resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.json

@@ -1 +0,0 @@
-{"Target":"css/style.fr.min.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.json

@@ -1 +0,0 @@
-{"Target":"css/style.en.min.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.json

@@ -0,0 +1 @@
+{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.json

@@ -1 +0,0 @@
-{"Target":"css/style.zh-cn.min.css","MediaType":"text/css","Data":{}}

src/js/theme.js

@@ -419,7 +419,7 @@ class Theme {
             const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
             const $tocLiElements = $tocCore.getElementsByTagName('li');
             const $headerLinkElements = document.getElementsByClassName('headerLink');
-            const headerIsFixed = this.config.headerMode.desktop !== 'normal';
+            const headerIsFixed = document.body.getAttribute('header-desktop') !== 'normal';
             const headerHeight = document.getElementById('header-desktop').offsetHeight;
             const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
             const minTocTop = $toc.offsetTop;
@@ -628,8 +628,8 @@ class Theme {
 
     onScroll() {
         const $headers = [];
-        if (this.config.headerMode.desktop === 'auto') $headers.push(document.getElementById('header-desktop'));
+        if (document.body.getAttribute('header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'));
-        if (this.config.headerMode.mobile === 'auto') $headers.push(document.getElementById('header-mobile'));
+        if (document.body.getAttribute('header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'));
         if (document.getElementById('comments')) {
             const $viewComments = document.getElementById('view-comments');
             $viewComments.href = `#comments`;