set background image blur

luckylu · Nov 27, 2023 · 38fc62c · 38fc62c
1 parent e28e1ec
commit 38fc62c
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 23 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1 +1 @@
-screenshots/
+screenshots/*
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # 新功能
 ### 1. 增加了Google搜索框，方便快速搜索
-### 2. 增加了背景图，为了使文字清晰点，背景图加了毛玻璃的效果
-使用方法：把背景图命名为bg.jpg，然后放在主机上要映射到docker的目录
+### 2. 增加了背景图
+使用方法：把背景图命名为bg.jpg，然后放在主机上要映射到docker的目录，如果觉得背景图干扰到了文字显示，可以到界面设置里-自定义背景图Blur里设置一个较大的值实现背景图毛玻璃效果
 
 ![homepage screenshot](https://github.com/luckylu/flare/raw/main/screenshots/homepage.jpg)
+![setting screenshot](https://github.com/luckylu/flare/raw/main/screenshots/setting.jpg)
+![homepage-blur screenshot](https://github.com/luckylu/flare/raw/main/screenshots/homepage-blur.jpg)
 
-docker-compose.yml
+使用docker-compose.yml
 ```shell
 version: '3.6'
 

diff --git a/embed/assets/css/base.css b/embed/assets/css/base.css
@@ -14,6 +14,7 @@ body {
   --color-primary: #effbff;
   --color-accent: #ffa500;
   --spacing-ui: 10px;
+  --blur: 20px;
   background-color: var(--color-background);
   transition: background-color 0.3s;
   font-family: Roboto, sans-serif;
@@ -22,7 +23,7 @@ body {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(var(--blur));
 }
 input::placeholder {
   color: var(--color-primary);
@@ -73,6 +74,7 @@ h2 a {
   top: 0;
   bottom: 0;
   display: block;
+  overflow: auto;
 }
 
 #page-home {

diff --git a/embed/templates/settings-appearance.html b/embed/templates/settings-appearance.html
@@ -5,12 +5,14 @@
         <h2>通用设置</h2>
         <div class="form-group">
             <label for="settings-title">自定义标题</label>
-            <input type="text" name="title" id="settings-title" class="option-input" placeholder="站点标题" value="{{.OptionTitle}}">
+            <input type="text" name="title" id="settings-title"
+                class="option-input" placeholder="站点标题" value="{{.OptionTitle}}">
         </div>
 
         <div class="form-group">
             <label for="settings-footer">自定义页脚</label>
-            <textarea name="footer" id="settings-footer" class="option-input" cols="30" rows="10" placeholder="输入你自己的文本或 HTML 片段">{{.OptionFooter}}</textarea>
+            <textarea name="footer" id="settings-footer" class="option-input"
+                cols="30" rows="10" placeholder="输入你自己的文本或 HTML 片段">{{.OptionFooter}}</textarea>
             <p class="help-text">如不希望展示页脚，可以将内容清空</p>
         </div>
 
@@ -32,12 +34,14 @@ <h2>通用设置</h2>
         <div class="form-group">
             <label for="settings-open-bookmark-newtab">总是在新窗口打开书签</label>
             {{ if .OptionOpenBookmarkNewTab }}
-            <select name="open-bookmark-newtab" id="settings-open-bookmark-newtab">
+            <select name="open-bookmark-newtab"
+                id="settings-open-bookmark-newtab">
                 <option value="1" selected>是</option>
                 <option value="0">否</option>
             </select>
             {{ else }}
-            <select name="open-bookmark-newtab" id="settings-open-bookmark-newtab">
+            <select name="open-bookmark-newtab"
+                id="settings-open-bookmark-newtab">
                 <option value="0" selected>否</option>
                 <option value="1">是</option>
             </select>
@@ -47,12 +51,14 @@ <h2>通用设置</h2>
         <div class="form-group">
             <label for="settings-enable-encrypted-link">展示加密链接</label>
             {{ if .OptionEnableEncryptedLink }}
-            <select name="enable-encrypted-link" id="settings-enable-encrypted-link">
+            <select name="enable-encrypted-link"
+                id="settings-enable-encrypted-link">
                 <option value="1" selected>是</option>
                 <option value="0">否</option>
             </select>
             {{ else }}
-            <select name="enable-encrypted-link" id="settings-enable-encrypted-link">
+            <select name="enable-encrypted-link"
+                id="settings-enable-encrypted-link">
                 <option value="0" selected>否</option>
                 <option value="1">是</option>
             </select>
@@ -110,7 +116,9 @@ <h2>模块设置</h2>
         {{ if .OptionShowTitle }}
         <div class="form-group">
             <label for="settings-custom-greetings">自定义问候语</label>
-            <input type="text" name="greetings" id="settings-custom-greetings" class="option-input" placeholder="你好" value="{{.OptionGreetings}}">
+            <input type="text" name="greetings" id="settings-custom-greetings"
+                class="option-input" placeholder="你好"
+                value="{{.OptionGreetings}}">
             <p class="help-text">如果你希望展示固定内容，可以输入：“你好”；<br />如果你希望根据时段展示不同内容，可以将多个内容用英文;号进行分割：“早上好;中午好;下午好;晚上好”</p>
         </div>
         {{ end }}
@@ -163,12 +171,14 @@ <h2>模块设置</h2>
         <div class="form-group">
             <label for="settings-hide-settings-button">隐藏首页设置按钮</label>
             {{ if .OptionHideSettingsButton }}
-            <select name="hide-settings-button" id="settings-hide-settings-button">
+            <select name="hide-settings-button"
+                id="settings-hide-settings-button">
                 <option value="1" selected>是</option>
                 <option value="0">否</option>
             </select>
             {{ else }}
-            <select name="hide-settings-button" id="settings-hide-settings-button">
+            <select name="hide-settings-button"
+                id="settings-hide-settings-button">
                 <option value="0" selected>否</option>
                 <option value="1">是</option>
             </select>
@@ -189,14 +199,18 @@ <h2>模块设置</h2>
             </select>
             {{ end }}
         </div>
+        <div class="form-group">
+            <label for="settings-blur">自定义背景图Blur</label>
+            <input type="text" name="background-image-blur" id="settings-blur"
+                class="option-input" placeholder="3px"
+                value="{{.OptionBackgroundImageBlur}}">
+            <p class="help-text">如果你希望背景图模糊，可以输入大于 0px 的值</p>
+        </div>
 
         <div class="form-group">
             <input class="btn-submit" type="submit" value="保存修改" />
         </div>
     </form>
 
-
-
-
 </div>
-{{ end }}
+{{ end }}
diff --git a/internal/data/config.go b/internal/data/config.go
@@ -50,6 +50,8 @@ ShowWeather: true
 Location: "北京市"
 # 保持界面中链接大小写和配置中一致
 KeepLetterCase: false
+# 应用背景模糊程度
+BackgroundImageBlur: "0px"
 `)
 
 	ok := saveFile(filePath, out)

diff --git a/internal/data/settings.go b/internal/data/settings.go
@@ -8,6 +8,10 @@ func GetThemeName() string {
 	return GetAllSettingsOptions().Theme
 }
 
+func GetBackgroundImageBlur() string {
+	return GetAllSettingsOptions().BackgroundImageBlur
+}
+
 func UpdateThemeName(theme string) bool {
 	options := GetAllSettingsOptions()
 	options.Theme = theme
@@ -61,6 +65,7 @@ func UpdateAppearance(update FlareModel.Application) bool {
 	options.EnableEncryptedLink = update.EnableEncryptedLink
 	options.IconMode = update.IconMode
 	options.KeepLetterCase = update.KeepLetterCase
+	options.BackgroundImageBlur = update.BackgroundImageBlur
 
 	return saveAppConfigToYamlFile("config", options)
 }
diff --git a/internal/model/application.go b/internal/model/application.go
@@ -21,4 +21,5 @@ type Application struct {
 	EnableEncryptedLink     bool   `yaml:"EnableEncryptedLink"`
 	IconMode                string `yaml:"IconMode"`
 	KeepLetterCase          bool   `yaml:"KeepLetterCase"`
+	BackgroundImageBlur     string `yaml:"BackgroundImageBlur"`
 }
diff --git a/internal/resources/templates/html/settings-appearance.html b/internal/resources/templates/html/settings-appearance.html
@@ -57,4 +57,5 @@
 <select name=hide-help-button id=settings-hide-help-button><option value=1 selected>是<option value=0>否</select>
 {{ else }}
 <select name=hide-help-button id=settings-hide-help-button><option value=0 selected>否<option value=1>是</select>
-{{ end }}</div><div class=form-group><input class=btn-submit type=submit value=保存修改></div></form></div>{{ end }}
+{{ end }}</div><div class=form-group><label for=settings-blur>自定义背景图Blur</label>
+<input name=background-image-blur id=settings-blur class=option-input placeholder=3px value={{.OptionBackgroundImageBlur}}><p class=help-text>如果你希望背景图模糊，可以输入大于 0px 的值</div><div class=form-group><input class=btn-submit type=submit value=保存修改></div></form></div>{{ end }}
diff --git a/internal/settings/appearance/appearance.go b/internal/settings/appearance/appearance.go
@@ -38,8 +38,9 @@ func updateAppearanceOptions(c *gin.Context) {
 		IconMode            string `form:"icon-mode"`
 		KeepLetterCase      bool   `form:"keep-letter-case"`
 
-		OptionCustomDay   string `form:"custom-day"`
-		OptionCustomMonth string `form:"custom-month"`
+		OptionCustomDay     string `form:"custom-day"`
+		OptionCustomMonth   string `form:"custom-month"`
+		BackgroundImageBlur string `form:"background-image-blur"`
 	}
 
 	var body UpdateBody
@@ -62,6 +63,7 @@ func updateAppearanceOptions(c *gin.Context) {
 	update.HideHelpButton = body.HideHelpButton
 	update.EnableEncryptedLink = body.EnableEncryptedLink
 	update.KeepLetterCase = body.KeepLetterCase
+	update.BackgroundImageBlur = body.BackgroundImageBlur
 
 	requestIconMode := strings.ToUpper(body.IconMode)
 	if requestIconMode != "DEFAULT" && requestIconMode != "FILLING" {
@@ -71,6 +73,7 @@ func updateAppearanceOptions(c *gin.Context) {
 	}
 
 	FlareData.UpdateAppearance(update)
+	FlareState.UpdatePagePalettes()
 
 	pageAppearance(c)
 }
@@ -108,6 +111,7 @@ func pageAppearance(c *gin.Context) {
 			"OptionKeepLetterCase":      options.KeepLetterCase,
 			"OptionIconModeDefault":     IconModeDefault,
 			"OptionIconModeFilling":     IconModeFilling,
+			"OptionBackgroundImageBlur": options.BackgroundImageBlur,
 		},
 	)
 }