fix: Dart Sass compatibility + feat: add imagePreview config for home page (#741)

* Dart Sass calc compatibility

* Fix: Default to Dart Sass transpiler + silence deprecations

* Fix: Add imagePreview config toggle — wrap the featured image block

* Implement featured image preview in summary.html

Added featured image preview functionality to summary layout.

* Add imagePreview parameter to home posts configuration

Added option to control featured image preview in home posts.

* Enable image preview in home page post list

assets/css/_page/_single/_toc.scss

@@ -126,7 +126,7 @@
   .toc-content {
     overflow-y: scroll;
     // TODO 这里计算错误，待重构使用 JS 计算
-    max-height: calc(100vh - #{2 * #{fixit-var(header-height)}});
+    max-height: calc(100vh - 2 * var(--fi-header-height));
     @include scrollbar-width(none, 0);
 
     &.always-active ul,

hugo.toml

@@ -710,6 +710,8 @@ disclaimer = ""
 enable = true
 # special amount of posts in each home posts page
 paginate = 6
+# whether to show featured image preview in home page post list
+imagePreview = true
 
 # FixIt 0.2.16 | CHANGED Social config about the author
 [params.social]

layouts/_partials/plugin/style.html

@@ -15,7 +15,7 @@
       {{- $resource = $resource | resources.ExecuteAsTemplate . $.Context -}}
     {{- end -}}
     {{- with .ToCSS -}}
-      {{- $options := . | merge (dict "outputStyle" "compressed") -}}
+      {{- $options := . | merge (dict "outputStyle" "compressed" "transpiler" "dartsass" "silenceDeprecations" (slice "import" "global-builtin" "color-functions" "function-units")) -}}
       {{- $resource = $resource | toCSS $options -}}
     {{- end -}}
     {{- if .Minify -}}
@@ -44,3 +44,4 @@
     <link rel="stylesheet" {{ $attrs | safeHTMLAttr }}>
   {{- end -}}
 {{- end -}}
+

layouts/summary.html

@@ -1,6 +1,7 @@
 {{- $params := .Params | merge .Site.Params.page -}}
 
 <article class="single summary" itemscope itemtype="http://schema.org/Article">
+  {{- if not (eq .Site.Params.home.posts.imagePreview false) -}}
   {{- /* Featured image */ -}}
   {{- $image := $params.featuredimagepreview | default $params.featuredimage -}}
   {{- $matches := slice -}}
@@ -21,6 +22,7 @@
       </a>
     </div>
   {{- end -}}
+  {{- end -}}
 
   {{- /* Title */ -}}
   <h2 class="single-title" itemprop="name headline">