🚸 增强面板自定义CSS功能

This commit is contained in:
naiba 2020-12-24 09:54:17 +08:00
parent bb3829462d
commit 76c789efd8
7 changed files with 44 additions and 20 deletions

View File

@ -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>
```
### 报警通知

View File

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

View File

@ -252,10 +252,10 @@ func (ma *memberAPI) logout(c *gin.Context) {
}
type settingForm struct {
Title string
Admin string
Theme string
CustomCSS string
Title string
Admin string
Theme 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{

View File

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

View File

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

View File

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

View File

@ -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}}
{{tag "style"}}
{{.CustomCSS|safe}}
{{tag "/style"}}
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
</head>