feat:upload background image

luckylu · Dec 3, 2023 · 091dc3a · 091dc3a
1 parent 38fc62c
commit 091dc3a
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,9 @@
 # 新功能
-### 1. 增加了Google搜索框，方便快速搜索
-### 2. 增加了背景图
-使用方法：把背景图命名为bg.jpg，然后放在主机上要映射到docker的目录，如果觉得背景图干扰到了文字显示，可以到界面设置里-自定义背景图Blur里设置一个较大的值实现背景图毛玻璃效果
+### 1. 增加了背景图
+使用方法：设置-界面-上传背景图
 
+![setting screenshot](https://github.com/luckylu/flare/raw/main/screenshots/setting.png)
 ![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

diff --git a/embed/assets/css/home/search.css b/embed/assets/css/home/search.css
@@ -1,4 +1,4 @@
-#search-container .search {
+#search-container #search {
   width: 100%;
   padding: 10px 0;
   color: var(--color-primary);

diff --git a/embed/templates/home.html b/embed/templates/home.html
@@ -25,23 +25,23 @@
     <div class="pageview" id="page-home">
       <div class="container no-select">
 
+        {{ if .ShowSearchComponent }}
         <div class="module-container" id="search-container">
-          <form action="https://www.google.com/search">
-            <input type="text" name="q" class="search" autofocus
-              autocomplete="off"
-              placeholder="search with google" />
-          </form>
-          {{ if .ShowSearchComponent }}
           <form action="/" method="POST">
-            <input type="text" name="search" class="search" autocomplete="off"
+            {{ if .DisabledSearchAutoFocus }}
+            <input type="text" name="search" id="search" autocomplete="off"
               placeholder="{{.SearchKeyword}}" />
+            {{ else }}
+            <input type="text" name="search" id="search" autocomplete="off"
+              autofocus placeholder="{{.SearchKeyword}}" />
+            {{ end}}
             {{ if .HasKeyword }}
             <a href="/">>> TIPS: 点此标签或再次敲击回车，返回首页</a>
             {{ end }}
             <label for="search" id="search-label">书签太多？试试搜索你想寻找的书签吧 :)</label>
           </form>
-          {{ end }}
         </div>
+        {{ end }}
 
         <div class="module-container" id="hero-container">
           <div id="plugin-datetime">

diff --git a/embed/templates/settings-appearance.html b/embed/templates/settings-appearance.html
@@ -1,7 +1,8 @@
 {{ define "settings-appearance.html" }}
 <div class="setting-group-container">
 
-    <form method="POST" action="{{ .SettingPages.Appearance.Path }}">
+    <form method="POST" action="{{ .SettingPages.Appearance.Path }}"
+        enctype="multipart/form-data">
         <h2>通用设置</h2>
         <div class="form-group">
             <label for="settings-title">自定义标题</label>
@@ -199,9 +200,18 @@ <h2>模块设置</h2>
             </select>
             {{ end }}
         </div>
+        <div class="form-group">
+            <label for="upload-image">上传背景图</label>
+
+            <input type="file" name="file" id="upload-image"
+                class="option-input" placeholder="3px">
+            <p class="help-text">上传图片后需要清除缓存重新加载页面，MacOS快捷键：Cmd+Shift+R</p>
+        </div>
+
         <div class="form-group">
             <label for="settings-blur">自定义背景图Blur</label>
-            <input type="text" name="background-image-blur" id="settings-blur"
+            <input type="text" name="background-image-blur"
+                id="settings-blur"
                 class="option-input" placeholder="3px"
                 value="{{.OptionBackgroundImageBlur}}">
             <p class="help-text">如果你希望背景图模糊，可以输入大于 0px 的值</p>

diff --git a/internal/resources/templates/html/home.html b/internal/resources/templates/html/home.html
@@ -1,9 +1,13 @@
 <!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=google content="notranslate"><meta name=viewport content="width=device-width,initial-scale=1"><title>{{.OptionTitle}}</title><link rel="shortcut icon" href=favicon.ico>{{ if .DebugMode }}
-<link rel=stylesheet href=/assets/css/base.css><link rel=stylesheet href=/assets/css/home/search.css><link rel=stylesheet href=/assets/css/home/hero.css><link rel=stylesheet href=/assets/css/home/apps.css><link rel=stylesheet href=/assets/css/home/bookmarks.css><link rel=stylesheet href=/assets/css/home/toolbar.css>{{ else }}<style>{{.PageInlineStyle}}</style>{{ end }}<meta name=description content="Flare - self-hosted startpage for your server"></head><body style={{.PageAppearance}} class={{.BodyClassName}}><div class=pageview id=page-home><div class="container no-select"><div class=module-container id=search-container><form action=https://www.google.com/search><input name=q class=search autofocus autocomplete=off placeholder="search with google"></form>{{ if .ShowSearchComponent }}<form action=/ method=post><input name=search class=search autocomplete=off placeholder={{.SearchKeyword}}>
+<link rel=stylesheet href=/assets/css/base.css><link rel=stylesheet href=/assets/css/home/search.css><link rel=stylesheet href=/assets/css/home/hero.css><link rel=stylesheet href=/assets/css/home/apps.css><link rel=stylesheet href=/assets/css/home/bookmarks.css><link rel=stylesheet href=/assets/css/home/toolbar.css>{{ else }}<style>{{.PageInlineStyle}}</style>{{ end }}<meta name=description content="Flare - self-hosted startpage for your server"></head><body style={{.PageAppearance}} class={{.BodyClassName}}><div class=pageview id=page-home><div class="container no-select">{{ if .ShowSearchComponent }}<div class=module-container id=search-container><form action=/ method=post>{{ if .DisabledSearchAutoFocus }}
+<input name=search id=search autocomplete=off placeholder={{.SearchKeyword}}>
+{{ else }}
+<input name=search id=search autocomplete=off autofocus placeholder={{.SearchKeyword}}>
+{{ end}}
 {{ if .HasKeyword }}
 <a href=/>>> TIPS: 点此标签或再次敲击回车，返回首页</a>
 {{ end }}
-<label for=search id=search-label>书签太多？试试搜索你想寻找的书签吧 :)</label></form>{{ end }}</div><div class=module-container id=hero-container><div id=plugin-datetime>{{ if .OptionShowDateTime }}<p><span>{{.HeroDate}}</span> <span>{{.HeroDay}}</span> <span>{{.HeroTime}}</span></p>{{ end }}
+<label for=search id=search-label>书签太多？试试搜索你想寻找的书签吧 :)</label></form></div>{{ end }}<div class=module-container id=hero-container><div id=plugin-datetime>{{ if .OptionShowDateTime }}<p><span>{{.HeroDate}}</span> <span>{{.HeroDay}}</span> <span>{{.HeroTime}}</span></p>{{ end }}
 {{ if .OptionShowTitle }}<h1 class=plugin-container id=plugin-greetings>{{.Greetings}}</h1>{{ end }}</div>{{ if .OptionShowTitle }}
 {{ if .ShowWeatherModule }}<div class="plugin-container clearfix" id=plugin-weather><div class=pull-left>{{.WeatherIcon}}</div><div class="pull-right weather-value-container"><p>{{.WeatherData.Degree}}°C<p>{{.WeatherData.Humidity}}%</div></div>{{ end }}
 {{ end }}</div>{{ if .SubPage }}<div class=sub-page-header><h1>{{.PageName}}</h1><p><a href=/>返回</a></div>{{ end }}

diff --git a/internal/resources/templates/html/settings-appearance.html b/internal/resources/templates/html/settings-appearance.html
@@ -1,4 +1,4 @@
-{{ define "settings-appearance.html" }}<div class=setting-group-container><form method=post action="{{ .SettingPages.Appearance.Path }}"><h2>通用设置</h2><div class=form-group><label for=settings-title>自定义标题</label>
+{{ define "settings-appearance.html" }}<div class=setting-group-container><form method=post action="{{ .SettingPages.Appearance.Path }}" enctype=multipart/form-data><h2>通用设置</h2><div class=form-group><label for=settings-title>自定义标题</label>
 <input 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><p class=help-text>如不希望展示页脚，可以将内容清空</div><div class=form-group><label for=settings-open-app-newtab>总是在新窗口打开应用</label>
 {{ if .OptionOpenAppNewTab }}
@@ -57,5 +57,6 @@
 <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><label for=settings-blur>自定义背景图Blur</label>
+{{ end }}</div><div class=form-group><label for=upload-image>上传背景图</label>
+<input type=file name=file id=upload-image class=option-input placeholder=3px><p class=help-text>上传图片后需要清除缓存重新加载页面，MacOS快捷键：Cmd+Shift+R</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
@@ -1,8 +1,12 @@
 package appearance
 
 import (
+	"fmt"
 	"html/template"
+	"io"
 	"net/http"
+	"os"
+	"path/filepath"
 	"strings"
 
 	"github.com/gin-gonic/gin"
@@ -49,6 +53,8 @@ func updateAppearanceOptions(c *gin.Context) {
 		return
 	}
 
+	uploadImage(c)
+
 	var update FlareModel.Application
 	update.Title = body.OptionTitle
 	update.Footer = body.OptionFooter
@@ -78,6 +84,37 @@ func updateAppearanceOptions(c *gin.Context) {
 	pageAppearance(c)
 }
 
+func uploadImage(c *gin.Context) {
+	file, err := c.FormFile("file")
+	if err != nil {
+		fmt.Println("error:" + err.Error())
+		return
+	}
+
+	uploadedFile, err := file.Open()
+	if err != nil {
+		fmt.Println("error:" + err.Error())
+		return
+	}
+	defer uploadedFile.Close()
+
+	rootDir, _ := os.Getwd()
+	destinationPath := filepath.Join(rootDir, "bg.jpg")
+	destinationFile, err := os.Create(destinationPath)
+	if err != nil {
+		fmt.Println("error:" + err.Error())
+		return
+	}
+	defer destinationFile.Close()
+
+	_, err = io.Copy(destinationFile, uploadedFile)
+	if err != nil {
+		fmt.Println("error:" + err.Error())
+		return
+	}
+
+}
+
 func pageAppearance(c *gin.Context) {
 	options := FlareData.GetAllSettingsOptions()