✨ Feat: add option disableHeroImageFilter on homepage (#2029)

disableHeroImageFilter deault to false. When set to true, it uses the color
style from the background layout.

exampleSite/config/_default/params.toml

@@ -48,6 +48,7 @@ smartTOCHideUnfocusedChildren = false
   cardView = true
   cardViewScreenWidth = false
   layoutBackgroundBlur = true # only used when layout equals background
+  disableHeroImageFilter = false # only used when layout equals hero
 
 [article]
   showDate = false

exampleSite/content/docs/configuration/index.it.md

@@ -214,6 +214,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `homepage.cardView`             | `false`     | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
 | `homepage.cardViewScreenWidth`  | `false`     | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
 | `homepage.layoutBackgroundBlur` | `false`     | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
+| `homepage.disableHeroImageFilter` | `false`   | Whether to apply an image filter on the homepage background.                                                                                                                                                                                                                                                       |
 
 ### Article
 

exampleSite/content/docs/configuration/index.ja.md

@@ -214,6 +214,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `homepage.cardView` | `false` | 最近の記事をカードのギャラリーとして表示します。 |
 | `homepage.cardViewScreenWidth` | `false` | 最近の記事カードギャラリーの幅を拡張して、利用可能な幅全体を使用します。 |
 | `homepage.layoutBackgroundBlur` | `false` | ホームページレイアウトの背景画像をスクロールに合わせてぼかします。 |
+| `homepage.disableHeroImageFilter` | `false` | ホームページの背景画像にフィルターを適用するかどうか。 |
 
 ### 記事(Article)
 

exampleSite/content/docs/configuration/index.md

@@ -220,6 +220,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `homepage.cardView`             | `false`     | Display recent articles as a gallery of cards.                                                                                                                                                                                                                                                                     |
 | `homepage.cardViewScreenWidth`  | `false`     | Enhance the width of the recent articles card gallery to take the full width available.                                                                                                                                                                                                                            |
 | `homepage.layoutBackgroundBlur` | `false`     | Makes the background image in the homepage layout blur with the scroll                                                                                                                                                                                                                                             |
+| `homepage.disableHeroImageFilter` | `false` | Whether to apply an image filter on the homepage background.                                                                                                                                                                                                                                                         |
 
 ### Article
 

exampleSite/content/docs/configuration/index.zh-cn.md

@@ -218,6 +218,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | `homepage.cardView`             | `false`     | 将列表展示为卡片容器。                                                                                                                                                                                                                                  |
 | `homepage.cardViewScreenWidth`  | `false`     | 增强列表中卡片的宽度，使其可以占据可用的全部宽度。                                                                                                                                                                                                      |
 | `homepage.layoutBackgroundBlur` | `false`     | 向下滚动主页时，是否模糊背景图。                                                                                                                                                                                                                        |
+| `homepage.disableHeroImageFilter` | `false`   | 主页背景是否套用图片滤镜。                                                                                                                                                                                                                             |
 
 ### 文章页
 

layouts/partials/home/hero.html

@@ -1,4 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
+{{ $disableHeroImageFilter := .Site.Params.homepage.disableHeroImageFilter | default false }}
 <article class="max-w-full prose dark:prose-invert">
     <div class="relative">
         <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
@@ -22,9 +23,15 @@
                     {{ end }}
                     {{ if $homepageImage }}
                     <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}" style="margin: 0">
+                    {{ if not $disableHeroImageFilter }}
                         <div
                             class="absolute inset-0 bg-gradient-to-r from-primary-500 to-secondary-600 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply">
                         </div>
+                    {{ else }}
+                        <div
+                            class="absolute inset-0 from-primary-500 to-secondary-600 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply">
+                        </div>
+                    {{ end }}
                     {{ end }}
                 </div>
                 <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center justify-center text-center">
@@ -43,6 +50,7 @@
                                 alt="{{ $.Site.Params.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
                         {{ end }}
                     {{ end }}
+                    {{ if not $disableHeroImageFilter }}
                         <h1 class="mb-2 text-4xl font-extrabold text-neutral-200">
                             {{ .Site.Params.Author.name | default .Site.Title }}
                         </h1>
@@ -51,14 +59,30 @@
                                 {{ . | markdownify }}
                             </h2>
                         {{ end }}
+                    {{ else }}
+                        <h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
+                            {{ .Site.Params.Author.name | default .Site.Title }}
+                        </h1>
+                        {{ with .Site.Params.Author.headline }}
+                            <h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
+                                {{ . | markdownify }}
+                            </h2>
+                        {{ end }}
+                    {{ end }}
                     <div class="mt-3 mb-10 text-2xl">
                         {{ with .Site.Params.Author.links }}
                         <div class="flex flex-wrap">
                             {{ range $links := . }}
                             {{ range $name, $url := $links }}
+                            {{ if not $disableHeroImageFilter }}
                                 <a class="px-1 hover:text-primary-400 text-primary-300" href="{{ $url }}" target="_blank"
                                 aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
                                 "icon.html" $name }}</a>
+                            {{ else }}
+                                <a class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200" href="{{ $url }}" target="_blank"
+                                aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
+                                "icon.html" $name }}</a>
+                            {{ end }}
                             {{ end }}
                             {{ end }}
                         </div>