Merge pull request #2714 from ZhenShuo2021/feat/compact

💄 Style(article-link): truncate long summary

assets/css/compiled/main.css

@@ -1038,6 +1038,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+  .line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
   .\!block {
     display: block !important;
   }

layouts/partials/article-link/_shortcode.html

@@ -80,7 +80,7 @@
 {{ end }}
 
 
-<article class="{{ $cardClasses }}">
+<article class="article-link--shortcode {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
@@ -122,23 +122,13 @@
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" $target }}
     </div>
-    {{ $showSummary := false }}
-    {{ if ne $shortcodeShowSummary nil }}
-      {{ $showSummary = $shortcodeShowSummary }}
-    {{ else }}
-      {{ $showSummary = $target.Params.showSummary | default (site.Params.list.showSummary | default false) }}
-    {{ end }}
-    {{ if $showSummary }}
-      {{ $compactSummary := false }}
-      {{ if ne $shortcodeCompactSummary nil }}
-        {{ $compactSummary = $shortcodeCompactSummary }}
-      {{ else }}
-        {{ $compactSummary = $target.Params.compactSummary | default (site.Params.list.compactSummary | default false) }}
-      {{ end }}
-      <div class="overflow-hidden pt-1">
-        <div class="{{ if $compactSummary }}line-clamp-3{{ end }} prose dark:prose-invert max-w-fit">
-          {{ $target.Summary | plainify }}
-        </div>
+    {{ if $shortcodeShowSummary | default $target.Params.showSummary | default site.Params.list.showSummary | default false }}
+      {{ $compactSummary := $shortcodeCompactSummary | default $target.Params.compactSummary | default false }}
+      <div
+        class="article-link__summary prose dark:prose-invert max-w-fit mt-1 {{ if $compactSummary -}}
+          line-clamp-3
+        {{- end }}">
+        {{ $target.Summary | plainify }}
       </div>
     {{ end }}
   </div>

layouts/partials/article-link/card-related.html

@@ -51,7 +51,7 @@
 
 
 <article
-  class="relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
+  class="article-link--related relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden thumbnail_card_related">
       <img
@@ -92,7 +92,9 @@
       {{ partial "article-meta/basic.html" . }}
     </div>
     {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-      <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
+      <div class="article-link__summary prose dark:prose-invert mt-1 line-clamp-5">
+        {{ .Summary | plainify }}
+      </div>
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>

layouts/partials/article-link/card.html

@@ -55,7 +55,7 @@
 
 
 <article
-  class="relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
+  class="article-link--card relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden thumbnail_card">
       <img
@@ -95,7 +95,9 @@
       {{ partial "article-meta/basic.html" . }}
     </div>
     {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-      <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
+      <div class="article-link__summary prose dark:prose-invert mt-1 line-clamp-5">
+        {{ .Summary | plainify }}
+      </div>
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>

layouts/partials/article-link/simple.html

@@ -73,7 +73,7 @@
 {{ end }}
 
 
-<article class="{{ $cardClasses }}">
+<article class="article-link--simple {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
@@ -113,8 +113,10 @@
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" . }}
     </div>
-    {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-      <div class="prose dark:prose-invert max-w-fit py-1">{{ .Summary | plainify }}</div>
+    {{ if .Params.showSummary | default (site.Params.list.showSummary | default false) }}
+      <div class="article-link__summary prose dark:prose-invert max-w-fit mt-1 line-clamp-3">
+        {{ .Summary | plainify }}
+      </div>
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>