feat: add sponsor support (#275)

* feat: add sponsor support * fix: add noopener noreferrer to a t ag * fix: gravatarEmail are fixed * chore: add i18n config support for sponsor config * docs: add documentation for sponsor settings
HEIGE-PCloud · Oct 14, 2021 · 071235d · 071235d · vercel · Oct 14, 2021
1 parent 3186a71
commit 071235d
Show file tree

Hide file tree

Showing 17 changed files with 180 additions and 10 deletions.
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -380,6 +380,8 @@
 
   @import "../_partial/_single/footer";
   @import "../_partial/_single/comment";
+  @import "../_partial/_single/sponsor";
+
 }
 
 .lg-toolbar .lg-icon::after {

diff --git a/assets/css/_partial/_single/_friend.scss b/assets/css/_partial/_single/_friend.scss
@@ -81,7 +81,7 @@ $friend-link-hover-color-black: #ffffff;
     }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 680px) {
     .friend-link-div {
         width: 100%;
     }

diff --git a/assets/css/_partial/_single/_showcase.scss b/assets/css/_partial/_single/_showcase.scss
@@ -17,7 +17,6 @@ $showcase-hover-color-black: #ffffff;
     display: inline-block !important;
     background: $showcase-background-color;
     position: relative;
-    border-radius: 5px;
     [theme="dark"] & {
         background: $showcase-background-color-dark;
     }
@@ -43,7 +42,6 @@ $showcase-hover-color-black: #ffffff;
     img {
         width: 96%;
         margin: 2% 2% 0% 2%;
-        border-radius: 5px;
         height: 200px;
         max-width: none;
         @include object-fit(none);
@@ -105,7 +103,7 @@ $showcase-hover-color-black: #ffffff;
     left: 2%;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 680px) {
     .showcase-box {
         width: 100% !important;
         margin: 1% 0% 0% 0%;

diff --git a/assets/css/_partial/_single/_sponsor.scss b/assets/css/_partial/_single/_sponsor.scss
@@ -0,0 +1,61 @@
+.sponsor {
+    text-align: center;
+    padding-top: 50px;
+    .sponsor-avatar {
+        img {
+            display: inline-block;
+            width: 6rem;
+            height: 6rem;
+            margin: 10px;
+            @include border-radius(100%);
+            @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        }
+    }
+    .sponsor-custom {
+        margin: 30px auto;
+        display: block;
+    }
+    .sponsor-bio {
+        width: 25%;
+        margin: 10px auto;
+    }
+    .sponsor-button {
+        border-width: 0px;
+        border-style: solid;
+        padding: 5px 10px;
+        margin: 15px auto;
+        display: inline-block;
+        background-color: #f0f0f0;
+        -webkit-transition: transform 0.4s ease;
+        -moz-transition: transform 0.4s ease;
+        -o-transition: transform 0.4s ease;
+        transition: transform 0.4s ease;
+        &:hover {
+            background-color: #f0f0f0;
+            @include transform(scale(1.05));
+        }
+        [theme="dark"] & {
+            background-color: #363636;
+        }
+        [theme="black"] & {
+            background-color: #363636;
+        }
+        span {
+            vertical-align: top;
+        }
+    }
+}
+@media only screen and (max-width: 1000px) {
+    .sponsor {
+        .sponsor-bio {
+            width: 50%;
+        }
+    }
+}
+@media only screen and (max-width: 680px) {
+    .sponsor {
+        .sponsor-bio {
+            width: 75%;
+        }
+    }
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -257,6 +257,13 @@ enableEmoji = true
         [languages.en.params.social.Mastodon]
           id = "@xxxx"
           prefix = "https://mastodon.technology/"
+      # Sponsor config
+      [languages.en.params.sponsor]
+        enable = true
+        bio = "If you find this post helpful, please consider sponsoring."
+        link = "https://github.com/sponsors/HEIGE-PCloud"
+        # custom = "<a href=\"https://www.buymeacoffee.com/PCloud\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 40px !important;width: 145 !important;\" ></a>"
+
 
   [languages.zh-cn]
     weight = 2
@@ -487,6 +494,13 @@ enableEmoji = true
         QQGroup = ""
         Email = "[email protected]"
         RSS = true
+        # 赞助设置
+      [languages.zh-cn.params.sponsor]
+        enable = true
+        bio = "如果你觉得这篇文章对你有所帮助，欢迎赞赏~"
+        link = "https://github.com/sponsors/HEIGE-PCloud"
+        # custom = "<a href=\"https://www.buymeacoffee.com/PCloud\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 40px !important;width: 145 !important;\" ></a>"
+
 
 [params]
   # website title
@@ -888,6 +902,14 @@ enableEmoji = true
         name = "xxxx"
         logoUrl = "/images/avatar.webp"
 
+  # Sponsor config
+  # 赞助设置
+  [params.sponsor]
+    enable = true
+    bio = "If you find this post helpful, please consider sponsoring."
+    link = "https://github.com/sponsors/HEIGE-PCloud"
+    # custom = "<a href=\"https://www.buymeacoffee.com/PCloud\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 40px !important;width: 145 !important;\" ></a>"
+
   # TypeIt config
   # TypeIt 配置
   [params.typeit]
@@ -1030,6 +1052,8 @@ enableEmoji = true
   name = "PCloud"
   email = "[email protected]"
   link = "https://github.com/HEIGE-PCloud"
+  avatar = "/images/avatar.webp"
+  gravatarEmail = ""
 
 # Sitemap config
 # 网站地图配置

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -659,6 +659,13 @@ Please open the code block below to view the complete sample configuration :(far
         name = ""
         logoUrl = ""
 
+  # {{< version 0.2.13 >}} Sponsor config
+  [params.sponsor]
+    enable = false
+    bio = "If you find this post helpful, please consider sponsoring."
+    link = "https://www.buymeacoffee.com" # The link to your sponsor page
+    custom = "" # Custom HTML button
+
   # {{< version 0.2.5 >}} TypeIt config
   [params.typeit]
     # typing speed between each step (measured in milliseconds)
@@ -772,6 +779,8 @@ Please open the code block below to view the complete sample configuration :(far
   name = "xxxx"
   email = ""
   link = ""
+  avatar = ""
+  gravatarEmail = ""
 
 # Sitemap config
 [sitemap]

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -663,6 +663,13 @@ hugo
         name = ""
         logoUrl = ""
 
+  # {{< version 0.2.13 >}} 赞赏配置
+  [params.sponsor]
+    enable = false
+    bio = "如果你觉得这篇文章对你有所帮助，欢迎赞赏~"
+    link = "https://www.buymeacoffee.com" # 你的赞赏页面的地址
+    custom = "" # 自定义 HTML 
+
   # {{< version 0.2.5 >}} TypeIt 配置
   [params.typeit]
     # 每一步的打字速度 (单位是毫秒)
@@ -776,6 +783,8 @@ hugo
   name = "xxxx"
   email = ""
   link = ""
+  avatar = ""
+  gravatarEmail = ""
 
 # 网站地图配置
 [sitemap]

diff --git a/exampleSite/content/posts/theme-documentation-content/index.en.md b/exampleSite/content/posts/theme-documentation-content/index.en.md
@@ -158,6 +158,9 @@ seo:
 outdatedArticleReminder:
   enable: false
   # ...
+sponsor:
+  enable: false
+  # ...
 ---
 ```
 
@@ -197,6 +200,7 @@ outdatedArticleReminder:
 * **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **seo**: {{< version 0.2.10 >}} the same as the `params.page.seo` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **outdatedArticleReminder**: {{< version 0.2.13 >}} the same as the `params.page.outdatedArticleReminder` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **sponsor**: {{< version 0.2.13 >}} the same as the `params.sponsor` part in the [site configuration](../theme-documentation-basics#site-configuration).
 
 {{< admonition tip >}}
 {{< version 0.2.10 >}}

diff --git a/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
@@ -157,6 +157,9 @@ seo:
 outdatedArticleReminder:
   enable: false
   # ...
+sponsor:
+  enable: false
+  # ...
 ---
 ```
 
@@ -196,6 +199,7 @@ outdatedArticleReminder:
 * **library**: {{< version 0.2.7 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.library` 部分相同.
 * **seo**: {{< version 0.2.10 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.seo` 部分相同.
 * **outdatedArticleReminder**: {{< version 0.2.13 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.outdatedArticleReminder` 部分相同.
+* **sponsor**: {{< version 0.2.13 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.sponsor` 部分相同.
 
 {{< admonition tip >}}
 {{< version 0.2.10 >}}

diff --git a/exampleSite/data/authors/Dillon.toml b/exampleSite/data/authors/Dillon.toml
@@ -1,2 +1,3 @@
 name = "Dillon"
-link = "https://dillonzq.com"
+link = "https://dillonzq.com"
+avatar = "/images/avatar.webp"
diff --git a/exampleSite/data/authors/PCloud.toml b/exampleSite/data/authors/PCloud.toml
@@ -1,3 +1,5 @@
 name = "PCloud"
 link = "https://github.com/HEIGE-PCloud"
-email = "[email protected]"
+email = "[email protected]"
+avatar = "https://avatars.githubusercontent.com/u/52968553?v=4"
+# gravatarEmail = ""
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/i18n/en.toml b/i18n/en.toml
@@ -176,6 +176,9 @@ other = "This article was last updated on "
 
 [outdatedInfoWarningAfter]
 other = ", the content may be out of date."
+
+[sponsor]
+other = "Sponsor"
 # === posts/single.html ===
 
 # === 404.html ===

diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
@@ -180,6 +180,9 @@ other = "本文最后更新于 "
 
 [outdatedInfoWarningAfter]
 other = "，文中内容可能已过时。"
+
+[sponsor]
+other = "赞赏"
 # === posts/single.html ===
 
 # === 404.html ===

diff --git a/layouts/partials/function/author.html b/layouts/partials/function/author.html
@@ -5,6 +5,7 @@
 {{- $absLink := "" -}}
 {{- $linkTag := $name -}}
 {{- $email := "" -}}
+{{- $avatar := "" -}}
 {{- $i18n := dict -}}
 
 {{- if .author -}}
@@ -13,6 +14,10 @@
     {{- $link = .author.link -}}
     {{- $absLink = .author.link -}}
     {{- $email = .author.email -}}
+    {{- $avatar = .author.avatar -}}
+    {{- with .author.gravatarEmail -}}
+        {{- $avatar = md5 . | printf "https://www.gravatar.com/avatar/%v?s=240&d=mp" -}}
+    {{- end -}}
 {{- end -}}
 
 {{- if $i18n -}}
@@ -25,4 +30,4 @@
 
 {{- $link :=  (printf "/authors/%s" .name) | urlize | relLangURL -}}
 
-{{- return dict "author" .author "email" $email "name" $name "link" $link "absLink" $absLink -}}
+{{- return dict "author" .author "email" $email "name" $name "link" $link "absLink" $absLink "avatar" $avatar -}}
diff --git a/layouts/partials/single/sponsor.html b/layouts/partials/single/sponsor.html
@@ -0,0 +1,42 @@
+{{- $enable := .Params.sponsor.enable | default .Site.Params.sponsor.enable -}}
+{{- $avatar := .Site.Author.avatar -}}
+{{- with .Site.Author.gravataremail -}}
+    {{- $avatar = md5 . | printf "https://www.gravatar.com/avatar/%v?s=240&d=mp" -}}
+{{- end -}}
+{{- $bio := .Params.sponsor.bio | default .Site.Params.sponsor.bio -}}
+{{- $link := .Params.sponsor.link | default .Site.Params.sponsor.link -}}
+{{- $custom := .Params.sponsor.custom | default .Site.Params.sponsor.custom -}}
+{{- $authors := .Params.authors -}}
+
+{{- if $enable -}}
+    <div class="sponsor">
+        <div class="sponsor-avatar">
+            {{- if $authors -}}
+                {{- $lang := ( $.Params.lang | default $.Lang ) -}}
+                {{- range $i, $name := $authors -}}
+                    {{- with partial "function/author.html" (dict
+                        "name" $name
+                        "author" (index $.Site.Data.authors $name)
+                        "lang" $lang) -}}
+                        {{- dict "Src" .avatar | partial "plugin/image.html" -}}
+                    {{- end -}}
+                {{- end -}}
+            {{- else if $avatar -}}
+                {{- dict "Src" $avatar | partial "plugin/image.html" -}}
+            {{- end -}}
+        </div>
+        {{- with $bio -}}
+            <p class="sponsor-bio"><em>{{- . -}}</em></p>
+        {{- end -}}
+        {{- if $custom -}}
+            <div class="sponsor-custom">
+                {{- $custom | safeHTML -}}
+            </div>
+        {{- else -}}
+            <a href="{{- $link -}}" title="Sponsor" target="_blank" class="sponsor-button" rel="noopener noreferrer">
+                <i class="far fa-heart fa-fw icon" style="color: #ec6cb9;"></i>
+                <span>{{- T "sponsor" -}}</span>
+            </a>
+        {{- end -}}
+    </div>
+{{- end -}}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -21,9 +21,9 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
 
     {{- /* Page Style */ -}}
     {{- if eq $params.pageStyle "wide" -}}
-    <script>document.getElementsByTagName("main")[0].setAttribute("pageStyle", "wide")</script>
+        <script>document.getElementsByTagName("main")[0].setAttribute("pageStyle", "wide")</script>
     {{- else -}}
-    <script>document.getElementsByTagName("main")[0].setAttribute("pageStyle", "normal")</script>
+        <script>document.getElementsByTagName("main")[0].setAttribute("pageStyle", "normal")</script>
     {{- end -}}
 
     {{- /* TOC Style */ -}}
@@ -166,6 +166,9 @@ <h2 class="single-subtitle">{{ . }}</h2>
             {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
         </div>
 
+        {{/* Sponsor */}}
+        {{- partial "single/sponsor.html" . -}}
+
         {{- /* Footer */ -}}
         {{- partial "single/footer.html" . -}}