🎨 Sync all code from branch develop.

assets/css/_colors.scss

@@ -29,6 +29,7 @@
   color-scheme: light;
 }
 
+@if $darkmode {
   @media (prefers-color-scheme: dark) {
     :root {
       --body-bg-color: #{$body-bg-color-dark};

assets/css/_common/outline/footer/index.scss

@@ -78,13 +78,16 @@
 }
 
 .with-love {
+  color: $footer_icon_color;
   display: inline-block;
   margin: 0 5px;
 
+  @if $footer_icon_animated {
     animation: icon-animate 1.33s ease-in-out infinite;
   }
 }
 
+@if $footer_beian_enable {
   .beian img {
     display: inline-block;
     margin: 0 3px;
@@ -92,12 +95,14 @@
   }
 }
 
+@if $busuanzi_enable {
   .busuanzi-count {
+    @if $busuanzi_visitors {
       #busuanzi_container_site_uv {
         display: none;
       }
     }
-
+    @if $busuanzi_views {
       #busuanzi_container_site_pv {
         display: none;
       }

assets/css/_common/outline/mobile.scss

@@ -56,6 +56,7 @@
         margin-bottom: 10px !important;
         padding: 10px !important;
 
+        @if $note_icons {
           &:not(.no-icon) {
             padding-left: 35px !important;
           }

assets/css/_common/outline/sidebar/sidebar-toc.scss

@@ -1,3 +1,4 @@
+@if $toc_enable {
   .post-toc {
     font-size: $font-size-small;
     padding: 0 8px;

assets/css/_common/outline/sidebar/sidebar-toggle.scss

@@ -12,8 +12,10 @@
 
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
+    @include toggle-arrow($sidebar_position);
   }
 }
 
 .sidebar-active .sidebar-toggle {
+  @include toggle-close($sidebar_position);
 }

assets/css/_common/outline/sidebar/site-state.scss

@@ -1,3 +1,4 @@
+@if $site_state {
   .site-state {
     @include flex-wrap();
     line-height: 1.4;

assets/css/_common/scaffolding/base.scss

@@ -18,6 +18,7 @@ body {
   position: relative;
   transition: padding $transition-ease;
 
+  @if $body_scrollbar_overlay {
     overflow-x: hidden;
     @supports (overflow-x: clip) {
       overflow-x: clip;
@@ -25,6 +26,7 @@ body {
     width: 100vw;
   }
 
+  @if $body_scrollbar_stable {
     overflow-y: scroll;
   }
 }

assets/css/_common/scaffolding/highlight/copy-code.scss

@@ -11,11 +11,13 @@
   position: absolute;
   transition: opacity $transition-ease;
 
+  @if $codeblock_copy_btn_style == 'flat' {
     background: white;
     border: 0;
     font-size: $font-size-smaller;
     right: 0;
     top: 0;
+  } @else if $codeblock_copy_btn_style == 'mac' {
     color: var(--highlight-foreground);
     font-size: 14px;
     right: 0;
@@ -31,6 +33,7 @@
   }
 }
 
+@if $codeblock_copy_btn_style == 'mac' {
   figure.highlight {
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);

assets/css/_common/scaffolding/highlight/index.scss

@@ -1,8 +1,13 @@
 // Use `@use` to fix issue #67
+// TODO find way to import file by dynmatic
 // @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
 // @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
 // @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
 
+/* @media (prefers-color-scheme: dark) {
+  @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
+  @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
+} */
 
 // @import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
 

assets/css/_common/scaffolding/tags/note.scss

@@ -68,6 +68,7 @@
       &.#{$type} {
         @if $note-style == 'flat' {
           background: map-get($note-bg, $type);
+          @if $darkmode {
             @media (prefers-color-scheme: dark) {
               background: mix(map-get($note-bg, $type), $body-bg-color-dark, 10%);
             }

assets/css/_common/scaffolding/tags/tabs.scss

@@ -42,6 +42,7 @@
         border-radius: $tbr;
       }
 
+      @if $tabs_transition_tabs {
         transition: all $transition-ease-out;
       }
 
@@ -56,6 +57,7 @@
           width: (18em / 14);
         }
 
+        @if $tabs_transition_labels {
           transition: all $transition-ease-out;
         }
       }

assets/css/_common/scaffolding/toggles.scss

@@ -18,7 +18,9 @@
 }
 
 .toggle.toggle-arrow {
+  @include toggle-arrow($sidebar_position);
 }
 
 .toggle.toggle-close {
+  @include toggle-close($sidebar_position);
 }

assets/css/_variables/base.scss

@@ -69,6 +69,8 @@ $menu-item-bg-color           : $whitesmoke;
 $menu-item-bg-color-dark      : $black-light;
 
 // TODO why there need convert
+//$theme-color                  : convert($theme_color_light);
+//$theme-color-dark             : convert($theme_color_dark);
 
 $theme-color                  : $theme_color_light;
 $theme-color-dark             : $theme_color_dark;
@@ -79,7 +81,7 @@ $theme-color-dark             : $theme_color_dark;
 @function get-font-family($config) {
   //TODO find the way daymatic variable
   $custom-family: $config;
-  $custom-family: 'Microsoft YaHei';
+  //$custom-family : hexo-config('font.' + $config + '.family');
   @return if(type-of($custom-family) == string, unquote($custom-family), null);
 }
 
@@ -113,6 +115,7 @@ $font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
 
 
 // Font size
+$font-size-base           : if($font_enable and (type-of($font_global_size) == number), $font_global_size * 1em, 1em);
 $font-size-smallest       : .75em;
 $font-size-smaller        : .8125em;
 $font-size-small          : .875em;
@@ -124,6 +127,7 @@ $font-size-largest        : 1.5em;
 
 // Headings font size
 $font-size-headings-step  : .125em;
+$font-size-headings-base  : if($font_enable and (type-of($font_headings_size) == number), $font_headings_size * 1em, 1.625em);
 
 
 // Global line height
@@ -157,9 +161,13 @@ $table-row-hover-bg-color-dark  : #363636;
 // --------------------------------------------------
 $code-font-family               : $font-family-monospace;
 
+$highlight-background        : $highlight_light_background;
+$highlight-foreground        : $highlight_light_foreground;
 $highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
 $highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
 
+$highlight-background-dark        : $highlight_dark_background;
+$highlight-foreground-dark        : $highlight_dark_foreground;
 $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
 $highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
 
@@ -226,6 +234,7 @@ $brand-hover-color              : white;
 $brand-color-dark               : $grey-lighter;
 $brand-hover-color-dark         : $grey-lighter;
 
+$font-size-title                : if($font_enable and (type-of($font_title_size) == number), $font_title_size * 1em, 1.375em);
 $font-size-subtitle             : $font-size-smaller;
 $subtitle-color                 : $grey-dark;
 $site-subtitle-color            : $grey-dark;
@@ -249,6 +258,8 @@ $tag-cloud-end-dark   : #eee;
 // Variables for sidebar section elements.
 // --------------------------------------------------
 
+$sidebar-padding                      : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px);
+$sidebar-offset                       : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 12px);
 $sidebar-nav-color                    : $grey-dim;
 $sidebar-nav-hover-color              : $whitesmoke;
 $sidebar-highlight                    : $blue-bright;
@@ -288,11 +299,13 @@ $b2t-bg-color                 : $black-deep;
 $post-eof-margin-top          : 80px; //  or 160px for more white space;
 $post-eof-margin-bottom       : 60px; //  or 120px for less white space;
 
+$post-card-margin             : 1em 0;
 
 
 // Note colors
 // --------------------------------------------------
 // Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
+$lbg : if(type-of($note_light_bg_offset) == number, $note_light_bg_offset * 1%, 0);
 $note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
 
 $note-border-radius : 3px;

assets/css/main.scss

@@ -139,6 +139,8 @@ $second_comment_name: {{ lower (index $sortNav 1).name }};
 // Variables Layer
 // --------------------------------------------------
 @import '_variables/base';
+{{ printf "/* %s Scheme Style */" $P.scheme }}
+{{ printf "@import '_variables/%s';" $P.scheme }}
 // TODO
 //@import 'theme.injects.variable';
 
@@ -162,11 +164,11 @@ $second_comment_name: {{ lower (index $sortNav 1).name }};
 @import '_common/outline';
 
 // Components
-
+@import '_common/components';
 
 // Schemes Layer
 // --------------------------------------------------
-
+{{ printf "@import '_schemes/%s/';" $P.scheme }}
 
 // Custom Layer
 // TODO 

exampleSite/config.yaml

@@ -4,7 +4,6 @@
 # See: https://theme-next.js.org/docs/getting-started/configuration
 # ===============================================================
 
-
 baseURL: /
 
 theme: hugo-theme-next
@@ -76,7 +75,6 @@ menus:
       pre: heartbeat
       weight: 4
 
-
 params:
   mainSections: ["posts"]
   yearFormat: "2006"
@@ -123,6 +121,7 @@ params:
   # Dark Mode
   darkmode: true
 
+
   # ---------------------------------------------------------------
   # Site Information Settings
   # ---------------------------------------------------------------
@@ -162,12 +161,12 @@ params:
      #creator: <twitter:creator>
      #image: <twitter:image>
      #site: <twitter:site>
-
     #googlePlus: <g+:profile_link>
     #facebook:
     #  admins: <fb:admin_id>
     #  app_id: <fb:app_id>
 
+
   # ---------------------------------------------------------------
   # Menu Settings
   # ---------------------------------------------------------------
@@ -217,7 +216,6 @@ params:
     # Sidebar padding in pixels.
     padding: 18
     # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
-
     offset: 12
 
   # Sidebar Avatar
@@ -285,6 +283,7 @@ params:
     # Maximum heading depth of generated toc.
     maxDepth: 6
 
+
   # ---------------------------------------------------------------
   # Footer Settings
   # See: https://theme-next.js.org/docs/theme-settings/footer

layouts/_default/baseof.html

@@ -12,19 +12,24 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width">
   {{ hugo.Generator }}
+  <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
   <link rel="icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
   <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon.small }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon.medium }}">
   <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon.appleTouchIcon }}">
+  {{- partial "head.html" . }}
+  <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
   <noscript>
     <link rel="stylesheet" href="/css/noscript.css">
   </noscript>
 </head>
 
+<body itemscope itemtype="http://schema.org/WebPage" {{ if .Site.Params.motion.enable }} class="use-motion" {{ end }}>
   <div class="headband"></div>
   <main class="main">
     <header class="header" itemscope itemtype="http://schema.org/WPHeader">
       <div class="header-inner">
+        {{- partial "header.html" . }}
       </div>
       <!-- Sidebar -->
       {{- if ne .Site.Params.sidebar.display "remove" }}
@@ -33,7 +38,9 @@
     </header>
     <!-- Widgets -->
     {{ partial "widgets.html" . }}
+    <div class="main-inner {{ block "main_inner_class" . }}{{ end }}">
       <!-- Submenu,Content,Comment -->
+      {{- block "main" . }}{{- end }}
       {{- if .IsPage }}
         {{- partial "comments.html" . }}
       {{- end }}
@@ -41,6 +48,7 @@
   </main>
   <footer class="footer">
     <div class="footer-inner">
+      {{- partial "footer" . }}
     </div>
   </footer>
 

layouts/partials/header.html

@@ -1,36 +1,2 @@
-<div class="header-inner">
+{{ partial "header/brand.html" . }}
-  <div class="site-brand-container">
+{{ partial "header/menus.html" . }}
-    <div class="site-nav-toggle">
-      <div class="toggle" aria-label="切换导航栏" role="button">
-        <span class="toggle-line"></span>
-        <span class="toggle-line"></span>
-        <span class="toggle-line"></span>
-      </div>
-    </div>
-    <div class="site-meta">
-      <a href="/" class="brand" rel="start">
-        <i class="logo-line"></i>
-        <h1 class="site-title">{{ .Site.Title }}</h1>
-        <i class="logo-line"></i>
-      </a>
-      <p class="site-subtitle" itemprop="description">{{ .Site.Params.subtitle }}</p>
-      {{ with .Site.Params.customLogo }}
-      {{ if .show }}
-      <img class="custom-logo-image" src="{{ .url }}" alt="Custom Logo">
-      {{ end }}
-      {{ end }}
-    </div>
-    <div class="site-nav-right">
-      <div class="toggle popup-trigger">
-      </div>
-    </div>
-  </div>
-  <nav class="site-nav">
-  </nav>
-</div>
-<div class="toggle sidebar-toggle" role="button">
-  <span class="toggle-line"></span>
-  <span class="toggle-line"></span>
-  <span class="toggle-line"></span>
-</div>
-<div class="sidebar-dimmer"></div>