feat: add showcase shortcode

- Add documentation in en and zh-cn - Optimize CSS style sheet - Add support for i18n - Add support for different columns - Add support for positional arguments
HEIGE-PCloud · May 27, 2021 · f493819 · f493819
1 parent 90f7f84
commit f493819
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 60 deletions.
diff --git a/assets/css/_partial/_single/_friend.scss b/assets/css/_partial/_single/_friend.scss
@@ -48,7 +48,7 @@ $friend-link-hover-color-black: #ffffff;
     -o-transition: transform 0.4s ease;
     transition: transform 0.4s ease;
     &:hover {
-        transform: scale(1.01);
+        @include transform(scale(1.01));
     }
 }
 

diff --git a/assets/css/_partial/_single/_showcase.scss b/assets/css/_partial/_single/_showcase.scss
@@ -1,49 +1,58 @@
-$avatar-border-color: #f0f0f0;
-$avatar-border-color-dark: #363636;
-$avatar-border-color-black: #363636;
+$showcase-background-color: #f8f8f8;
+$showcase-background-color-dark: #252627;
+$showcase-background-color-black: #111111;
 
-$friend-link-background-color: #f8f8f8;
-$friend-link-background-color-dark: #252627;
-$friend-link-background-color-black: #111111;
+$showcase-color: #2d96bd;
+$showcase-color-dark: #a9a9b3;
+$showcase-color-black: #d9d9d9;
 
-$friend-link-color: #2d96bd;
-$friend-link-color-dark: #a9a9b3;
-$friend-link-color-black: #d9d9d9;
-
-$friend-link-hover-color: #ef3982;
-$friend-link-hover-color-dark: #ffffff;
-$friend-link-hover-color-black: #ffffff;
+$showcase-hover-color: #ef3982;
+$showcase-hover-color-dark: #ffffff;
+$showcase-hover-color-black: #ffffff;
 
 .showcase-box {
     height: 370px;
-    margin-top: 2%;
-    margin-left: 1%;
-    width: 48%;
+    margin: 1% 1% 0% 0%;
     display: inline-block !important;
-    background: $friend-link-background-color;
+    background: $showcase-background-color;
     position: relative;
     border-radius: 5px;
-    [theme=dark] & {
-        background: $friend-link-background-color-dark;
+    [theme="dark"] & {
+        background: $showcase-background-color-dark;
     }
-    [theme=black] & {
-        background: $friend-link-background-color-black;
+    [theme="black"] & {
+        background: $showcase-background-color-black;
     }
 }
 
-.showcase-image img {
-    width: 96%;
-    margin: 2%;
-    margin-bottom: 0;
-    border-radius: 5px;
-    height: 200px;
-    object-fit: cover;
+.column-1 {
+    width: 100%;
+}
+.column-2 {
+    width: 48%;
+}
+.column-3 {
+    width: 32%;
+}
+
+.showcase-image {
+    @include transition(transform 0.4s ease);
+
+    img {
+        width: 96%;
+        margin: 2% 2% 0% 2%;
+        border-radius: 5px;
+        height: 200px;
+        max-width: none;
+        @include object-fit(none);
+    }
+
+    img.lazyloaded {
+        @include object-fit(cover);
+    }
+
     &:hover {
-        -webkit-transition: transform 0.4s ease;
-        -moz-transition: transform 0.4s ease;
-        -o-transition: transform 0.4s ease;
-        transition: transform 0.4s ease;
-        transform: scale(1.01);
+        @include transform(scale(1.01));
     }
 }
 
@@ -54,42 +63,38 @@ $friend-link-hover-color-black: #ffffff;
     position: absolute;
     top: 210px;
     width: 96%;
-    margin: 3%;
-    margin-left: 2%;
+    margin: 3% 3% 3% 2%;
     font-size: 1.25rem;
     line-height: 140%;
 }
 
 .showcase-title a {
     color: black;
     &:hover {
-        color: $friend-link-hover-color;
+        color: $showcase-hover-color;
     }
-    [theme=dark] & {
-        color: $friend-link-color-dark;
+    [theme="dark"] & {
+        color: $showcase-color-dark;
         &:hover {
-            color: $friend-link-hover-color-dark;
+            color: $showcase-hover-color-dark;
         }
     }
-    [theme=black] & {
-        color: $friend-link-color-black;
+    [theme="black"] & {
+        color: $showcase-color-black;
         &:hover {
-            color: $friend-link-hover-color-black;
+            color: $showcase-hover-color-black;
         }
     }
 }
 
 .showcase-summary {
-    display: -webkit-box;
     position: absolute;
-    width: 96%;
-    margin-left: 2%;
-    margin-top: 2%;
     text-overflow: ellipsis;
     overflow: hidden;
-    height: 70px;
+    margin: 2%;
     top: 250px;
-    -webkit-box-orient: vertical;
+    height: 70px;
+    width: 96%;
 }
 
 .showcase-link {

diff --git a/exampleSite/content/posts/tests/showcase-tests/index.en.md b/exampleSite/content/posts/tests/showcase-tests/index.en.md
@@ -23,4 +23,4 @@ pageStyle: normal
 
 {{< showcase title="Seal!" summary="Awww" image="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" link="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" >}}
 
-{{< showcase title="Cat!" summary="Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ " image="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" link="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" >}}
+{{< showcase "Cat!" "Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ " "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" >}}
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -1315,3 +1315,39 @@ Or
 The rendered output looks like this:
 
 {{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}
+
+## 13 showcase
+
+{{< version 0.2.12 >}}
+
+`showcase` is a shortcode to insert a showcase of your project in the post.
+
+The `showcase` shortcode has the following named parameters:
+
+* **title** *[required]* (**first** positional parameter)
+
+    The title of your showcase.
+
+* **summary** *[required]* (**second** positional parameter)
+
+    A brief introduction to your project.
+
+* **image** *[required]* (**third** positional parameter)
+
+    The url to the preview image.
+
+* **link** *[required]* (**fourth** positional parameter)
+
+    The url to your project page.
+
+Example `showcase` input:
+
+```markdown
+{{</* showcase title="Theme Documentation - Basics" summary="Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" */>}}
+Or
+{{</* showcase "Theme Documentation - Basics" "Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." "/theme-documentation-basics/featured-image.webp" "/theme-documentation-basics" */>}}
+```
+
+The rendered output looks like this:
+
+{{< showcase title="Theme Documentation - Basics" summary="Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" >}}
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
@@ -1318,3 +1318,39 @@ console.log('Just DoIt!');
 呈现的输出效果如下:
 
 {{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}
+
+## 13 showcase
+
+{{< version 0.2.12 >}}
+
+`showcase` 用于在页面上插入一个个人项目的展示柜.
+
+`showcase` shortcode 有以下命名参数:
+
+* **title** *[required]* (**第一个**位置参数)
+
+    项目名称.
+
+* **summary** *[required]* (**第二个**位置参数)
+
+    项目简介.
+
+* **image** *[required]* (**第三个**位置参数)
+
+    预览图的链接.
+
+* **link** *[required]* (**第四个**位置参数)
+
+    项目主页的链接.
+
+一个 `showcase` 示例:
+
+```markdown
+{{</* showcase title="Theme Documentation - Basics" summary="Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" */>}}
+Or
+{{</* showcase "Theme Documentation - Basics" "Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." "/theme-documentation-basics/featured-image.webp" "/theme-documentation-basics" */>}}
+```
+
+呈现的输出效果如下:
+
+{{< showcase title="主题文档 - 基本概念" summary="探索 Hugo - DoIt 主题的全部内容和背后的核心概念." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" >}}
diff --git a/...leSite/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content b/...leSite/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content
diff --git a/layouts/shortcodes/showcase.html b/layouts/shortcodes/showcase.html
@@ -1,8 +1,20 @@
+{{- $image :=  "" -}}
+{{- $title := "" -}}
+{{- $link := "" -}}
+{{- $summary := "" -}}
+{{- $column := "2" -}}
 {{ if .IsNamedParams }}
-{{- $image := .Get "image" -}}
-{{- $title := .Get "title" -}}
-{{- $link := .Get "link" -}}
-<div class="showcase-box">
+{{- $title = .Get "title" -}}
+{{- $summary = .Get "summary" -}}
+{{- $link = .Get "link" -}}
+{{- $image = .Get "image" -}}
+{{- else -}}
+{{- $title = .Get 0 -}}
+{{- $summary = .Get 1 -}}
+{{- $image = .Get 2 -}}
+{{- $link = .Get 3 -}}
+{{ end }}
+<div class="showcase-box column-{{ $column }}">
     <div class="showcase-image">
         <a href={{ $link }}>
             {{- dict "Src" $image "Height" "200" "Width" "400" "Title" $title | partial "plugin/image.html" -}}
@@ -12,11 +24,9 @@ <h1 class="showcase-title">
         <a href={{ $link }}>{{ $title }}</a>
     </h1>
     <p class="showcase-summary">
-        {{ .Get "summary" }}
+        {{ $summary }}
     </p>
     <a class="showcase-link" href={{ $link }}>
-        Read more...
+        {{ T "readMore" }}
     </a>
-</div>
-{{- else -}}
-{{ end }}
+</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,4 +23,4 @@ pageStyle: normal

		{{< showcase title="Seal!" summary="Awww" image="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" link="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" >}}

		{{< showcase title="Cat!" summary="Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ " image="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" link="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" >}}
		{{< showcase "Cat!" "Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ " "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" >}}