🚸 增强面板自定义CSS功能

README.md

@@ -10,7 +10,7 @@
 
 ## 一键脚本
 
-**建议使用 WatchTower 自动更新面板，Windows监控可以使用nssm配置自启动**
+**建议使用 WatchTower 自动更新面板，Windows监控可以使用nssm配置自启动** *记得加群获取面板更新通知，避免功能有更新面板自动更新后跟不上出问题*
 
 - 海外：
 
@@ -27,22 +27,50 @@
     ```
 
 ## 使用说明
-### 自定义 CSS
+### 自定义代码
+
+可以去版权、改LOGO、加统计代码等等。
 
 - 默认主题更改进度条颜色示例
 
     ```
+    <style>
     .ui.fine.progress> .bar {
         background-color: pink !important;
     }
+    </style>
+    ```
+- 默认主题修改LOGO、移除版权示例（来自 mehui@hostloc 初版运用了XSS，有一点不足就是可以直接使用 pure JavaScript 实现用了 jQuery，欢迎PR）
+
+    ```
+    <style>
+    .right.menu>a{
+        visibility: hidden;
+    }
+    .footer .is-size-7{
+        visibility: hidden;
+    }
+    .item img{
+        visibility: hidden;
+    }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
+    <script>$(function(){ 
+        $("div.is-size-7").html("Powered by 你的名字").css("visibility","visible");
+        $(".item img").attr('src','你的方形logo').css("visibility","visible");
+        $("[rel='shortcut icon']").attr('href','你的方形logo');
+    }); 
+    </script>
     ```
 
 - hotaru 主题更改背景图片示例
 
     ```
+    <style>
     .hotaru-cover {
         background: url(https://s3.ax1x.com/2020/12/08/DzHv6A.jpg) center;
     }
+    </style>
     ```
 
 ### 报警通知

cmd/dashboard/controller/common_page.go

@@ -28,7 +28,7 @@ func (cp *commonPage) home(c *gin.Context) {
 	defer dao.ServerLock.RUnlock()
 	data := gin.H{
 		"Servers":    dao.ServerList,
-		"CustomCSS": dao.Conf.Site.CustomCSS,
+		"CustomCode": dao.Conf.Site.CustomCode,
 	}
 	u, ok := c.Get(model.CtxKeyAuthorizedUser)
 	if ok {

cmd/dashboard/controller/member_api.go

@@ -255,7 +255,7 @@ type settingForm struct {
 	Title      string
 	Admin      string
 	Theme      string
-	CustomCSS string
+	CustomCode string
 }
 
 func (ma *memberAPI) updateSetting(c *gin.Context) {
@@ -269,7 +269,7 @@ func (ma *memberAPI) updateSetting(c *gin.Context) {
 	}
 	dao.Conf.Site.Brand = sf.Title
 	dao.Conf.Site.Theme = sf.Theme
-	dao.Conf.Site.CustomCSS = sf.CustomCSS
+	dao.Conf.Site.CustomCode = sf.CustomCode
 	dao.Conf.GitHub.Admin = sf.Admin
 	if err := dao.Conf.Save(); err != nil {
 		c.JSON(http.StatusOK, model.Response{

model/config.go

@@ -17,7 +17,7 @@ type Config struct {
 		Brand      string // 站点名称
 		CookieName string // 浏览器 Cookie 名称
 		Theme      string
-		CustomCSS  string
+		CustomCode string
 	}
 	GitHub struct {
 		Admin        string // 管理员ID列表

resource/template/dashboard/setting.html

@@ -19,8 +19,8 @@
                 </select>
             </div>
             <div class="field">
-                <label>自定义CSS</label>
+                <label>自定义代码(style、script 都可以)</label>
-                <textarea name="CustomCSS">{{.Conf.Site.CustomCSS}}</textarea>
+                <textarea name="CustomCode">{{.Conf.Site.CustomCode}}</textarea>
             </div>
             <button class="ui button" type="submit">保存</button>
         </form>

resource/template/theme-default/home.html

@@ -1,9 +1,7 @@
 {{define "theme-default/home"}}
 {{template "common/header" .}}
-{{if ts .CustomCSS}}
+{{if ts .CustomCode}}
-{{tag "style"}}
+{{.CustomCode|safe}}
-{{.CustomCSS|safe}}
-{{tag "/style"}}
 {{end}}
 {{template "common/menu" .}}
 <div class="nb-container">

resource/template/theme-hotaru/home.html

@@ -19,10 +19,8 @@
     <link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202312" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
-    {{if ts .CustomCSS}}
+    {{if ts .CustomCode}}
-    {{tag "style"}}
+    {{.CustomCode|safe}}
-    {{.CustomCSS|safe}}
-    {{tag "/style"}}
     {{end}}
 </head>