优化更新中英文文档-管理面板-设置
This commit is contained in:
Kris
parent
11c6091f8d
commit
621e7b9879
@ -1,48 +1,325 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
## Site Title
|
||||
You can customize your site title here
|
||||
<br/>
|
||||
|
||||
## Admin List
|
||||
+ If you have changed your Github, Gitlab, Jihulab, Gitee username, you can change it in this item, otherwise you can't log in, please separate multiple users with commas: `user1,user2`
|
||||
You can customize the site title in this section.
|
||||
|
||||
+ To change your administrator account, please go to `/opt/nezha/dashboard/data/config.yaml` to set the new administrator `Client ID` and `Client Secret`.
|
||||
<br/>
|
||||
## Administrator List
|
||||
|
||||
- If you have changed your Github, Gitlab, or Gitee username, you need to update it here to avoid login issues. Separate multiple usernames with commas: `user1,user2`.
|
||||
- To change the administrator account, go to `/opt/nezha/dashboard/data/config.yaml` and reset the new administrator `Client ID` and `Client Secret`.
|
||||
|
||||
## Theme
|
||||
Select the home page theme here, and update the panel if there is not an existing theme in the options
|
||||
<br/>
|
||||
|
||||
Select the theme for the homepage and admin panel here. If a theme that already exists is not in the options, update the Dashboard.
|
||||
Before enabling the Custom theme, ensure you have installed the custom theme; otherwise, the Dashboard will not display correctly after enabling this option.
|
||||
|
||||
## Language
|
||||
|
||||
Nezha Monitoring currently supports the following languages:
|
||||
|
||||
+ 简体中文
|
||||
+ English
|
||||
+ Español
|
||||
- Simplified Chinese (简体中文)
|
||||
- Traditional Chinese (繁體中文)
|
||||
- English
|
||||
- Spanish (Español)
|
||||
|
||||
[](https://crowdin.com/project/nezha)
|
||||
We welcome corrections to translations and contributions of additional languages
|
||||
<br/>
|
||||
We welcome corrections to translations or contributions of more languages.
|
||||
|
||||
## Custom code (style, script)
|
||||
Change logo, change color tone, add statistics code, etc.
|
||||
## Custom Code (style, script)
|
||||
|
||||
You can modify the LOGO, adjust colors, add beautification code, and add statistical code here.
|
||||
|
||||
:::warning
|
||||
The custom code only takes effect in the visitor's home page, not in the admin panel.
|
||||
Since the code of different themes is different, if you really need to modify the content of the admin panel, please enter Docker to changes it by yourself.
|
||||
Custom code only affects the visitor homepage, not the admin panel. Due to differences in code between themes, if you need to modify the content in the admin panel, please modify the theme files in Docker.
|
||||
:::
|
||||
<br/>
|
||||
|
||||
#### Example of changing the default theme progress bar color
|
||||
#### Example of Changing Progress Bar Color, Background Image, Navigation Bar, etc., in the Default Theme
|
||||
|
||||
<details>
|
||||
<summary>Click to expand/collapse</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ui.fine.progress> .bar {
|
||||
background-color: pink !important;
|
||||
/* Screen adaptation */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.container {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
|
||||
margin-top: 0.4em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Overall icons */
|
||||
i.icon {
|
||||
color: #000;
|
||||
width: 1.2em !important;
|
||||
}
|
||||
|
||||
/* Background image */
|
||||
body {
|
||||
content: " " !important;
|
||||
background: fixed !important;
|
||||
z-index: -1 !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
background-position: top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
background-image: url(https://backgroud.img) !important;
|
||||
font-family: Arial,Helvetica,sans-serif !important;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
.ui.large.menu {
|
||||
border: 0 !important;
|
||||
border-radius: 0px !important;
|
||||
background-color: rgba(255, 255, 255, 55%) !important;
|
||||
}
|
||||
|
||||
/* Homepage buttons */
|
||||
.ui.menu .active.item {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Navigation bar dropdown */
|
||||
.ui.dropdown .menu {
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background-color: rgba(255, 255, 255, 80%) !important;
|
||||
}
|
||||
|
||||
/* Login button */
|
||||
.nezha-primary-btn {
|
||||
background-color: transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* Large card */
|
||||
#app .ui.fluid.accordion {
|
||||
background-color: #fbfbfb26 !important;
|
||||
border-radius: 0.4rem !important;
|
||||
}
|
||||
|
||||
/* Small card */
|
||||
.ui.four.cards>.card {
|
||||
border-radius: 0.6rem !important;
|
||||
background-color: #fafafaa3 !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 3.3rem !important;
|
||||
}
|
||||
|
||||
.status.cards .three.wide.column {
|
||||
padding-right: 0rem !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(1) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(2) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.status.cards .description {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Server name */
|
||||
.status.cards .flag {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* Popup card icon */
|
||||
.status.cards .header > .info.icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.nezha-secondary-font {
|
||||
color: #2175ba !important;
|
||||
}
|
||||
|
||||
/* Upload/download */
|
||||
.status.cards .outline.icon {
|
||||
margin-right: 1px !important;
|
||||
}
|
||||
|
||||
i.arrow.alternate.circle.down.outline.icon {
|
||||
color: #2175ba !important;
|
||||
}
|
||||
|
||||
i.arrow.alternate.circle.up.outline.icon {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
/* Popup card small arrow */
|
||||
.ui.right.center.popup {
|
||||
margin: -3px 0 0 0.914286em !important;
|
||||
-webkit-transform-origin: left 50% !important;
|
||||
transform-origin: left 50% !important;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup {
|
||||
margin-left: 1px !important;
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
|
||||
.ui.top.left.popup {
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.ui.top.right.popup {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.ui.left.center.popup {
|
||||
margin: -3px .91428571em 0 0 !important;
|
||||
-webkit-transform-origin: right 50% !important;
|
||||
transform-origin: right 50% !important;
|
||||
}
|
||||
|
||||
.ui.right.center.popup:before,
|
||||
.ui.left.center.popup:before {
|
||||
border: 0px solid #fafafaeb !important;
|
||||
background: #fafafaeb !important;
|
||||
}
|
||||
|
||||
.ui.top.popup:before {
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
}
|
||||
|
||||
.ui.popup:before {
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.ui.bottom.right.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !重要;
|
||||
background: #fafafaeb !重要
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !重要;
|
||||
}
|
||||
|
||||
.ui.top.left.popup:before {
|
||||
border-radius: 0 !重要;
|
||||
border: 1px solid transparent !重要;
|
||||
border-color: #fafafaeb transparent transparent !重要;
|
||||
background: #fafafaeb !重要;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !重要;
|
||||
}
|
||||
|
||||
.ui.top.right.popup:before {
|
||||
border-radius: 0 !重要;
|
||||
border: 1px solid transparent !重要;
|
||||
border-color: #fafafaeb transparent transparent !重要;
|
||||
background: #fafafaeb !重要;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !重要;
|
||||
}
|
||||
|
||||
.ui.left.center.popup:before {
|
||||
border-radius: 0 !重要;
|
||||
border: 1px solid transparent !重要;
|
||||
border-color: #fafafaeb transparent transparent !重要;
|
||||
background: #fafafaeb !重要;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !重要;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !重要;
|
||||
}
|
||||
|
||||
/* Popup card */
|
||||
.status.cards .ui.content.popup {
|
||||
min-width: 20rem !重要;
|
||||
line-height: 2rem !重要;
|
||||
border-radius: 5px !重要;
|
||||
border: 1px solid transparent !重要;
|
||||
background-color: #fafafaeb !重要;
|
||||
font-family: Arial,Helvetica,sans-serif !重要;
|
||||
}
|
||||
|
||||
.ui.content {
|
||||
margin: 0 !重要;
|
||||
padding: 1em !重要;
|
||||
}
|
||||
|
||||
/* Service page */
|
||||
.ui
|
||||
|
||||
.table {
|
||||
background: RGB(225,225,225,0.6) !重要;
|
||||
}
|
||||
|
||||
.ui.table thead th {
|
||||
background: transparent !重要;
|
||||
}
|
||||
|
||||
/* Service page progress bar */
|
||||
.service-status .good {
|
||||
background-color: #2175ba !重要;
|
||||
}
|
||||
|
||||
.service-status .danger {
|
||||
background-color: red !重要;
|
||||
}
|
||||
|
||||
.service-status .warning {
|
||||
background-color: orange !重要;
|
||||
}
|
||||
|
||||
/* Copyright */
|
||||
.ui.inverted.segment, .ui.primary.inverted.segment {
|
||||
color: #000 !重要;
|
||||
font-weight: bold !重要;
|
||||
background-color: #fafafaa3 !重要;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### Example of modifying DayNight theme progress bar color and footer (by [@hyt-allen-xu](https://github.com/hyt-allen-xu) [@tech-fever](https://github.com/tech-fever))
|
||||
<!--Logo and Copyright-->
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector(".item img")
|
||||
var footer=document.querySelector("div.is-size-7")
|
||||
footer.innerHTML="Copyright info"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="https:/img.src"
|
||||
avatar.style.visibility="visible"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### Example of Changing Progress Bar Color and Modifying Footer in DayNight Theme (by [@hyt-allen-xu](https://github.com/hyt-allen-xu) and [@tech-fever](https://github.com/tech-fever))
|
||||
|
||||
<details>
|
||||
<summary>Click to expand/collapse</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -53,43 +330,51 @@ Since the code of different themes is different, if you really need to modify th
|
||||
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector("img")
|
||||
var footer=document.querySelector("div.footer-container")
|
||||
footer.innerHTML="©2021 YourName & Powered by YourName"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="Logo URL"
|
||||
avatar.style.visibility="visible"
|
||||
}
|
||||
var avatar = document.querySelector("img");
|
||||
var footer = document.querySelector("div.footer-container");
|
||||
footer.innerHTML = "©2021 Your Name & Powered by Your Name";
|
||||
footer.style.visibility = "visible";
|
||||
avatar.src = "Your Image URL";
|
||||
avatar.style.visibility = "visible";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### Example of modifying the logo of the default theme, modifying the footer (by [@iLay1678](https://github.com/iLay1678))
|
||||
#### Example of Changing LOGO and Footer in Default Theme (by [@iLay1678](https://github.com/iLay1678))
|
||||
|
||||
<details>
|
||||
<summary>Click to expand/collapse</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.right.menu>a{
|
||||
visibility: hidden;
|
||||
.right.menu>a {
|
||||
visibility: hidden;
|
||||
}
|
||||
.footer .is-size-7{
|
||||
visibility: hidden;
|
||||
.footer .is-size-7 {
|
||||
visibility: hidden;
|
||||
}
|
||||
.item img{
|
||||
visibility: hidden;
|
||||
.item img {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector(".item img")
|
||||
var footer=document.querySelector("div.is-size-7")
|
||||
footer.innerHTML="Powered by YOUR NAME"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="Your square logo link"
|
||||
avatar.style.visibility="visible"
|
||||
window.onload = function() {
|
||||
var avatar = document.querySelector(".item img");
|
||||
var footer = document.querySelector("div.is-size-7");
|
||||
footer.innerHTML = "Powered by Your Name";
|
||||
footer.style.visibility = "visible";
|
||||
avatar.src = "Your Square Logo URL";
|
||||
avatar.style.visibility = "visible";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### Example of modifying the background image of hotaru theme
|
||||
#### Example of Changing Background Image in Hotaru Theme
|
||||
|
||||
<details>
|
||||
<summary>Click to expand/collapse</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -98,29 +383,40 @@ Since the code of different themes is different, if you really need to modify th
|
||||
}
|
||||
</style>
|
||||
```
|
||||
## Access Password
|
||||
If you don't want to show your homepage directly, you can set a access password here
|
||||
After setting the password, you need to enter the password to access the homepage
|
||||
<br/>
|
||||
</details>
|
||||
|
||||
## CDN Bypassed Domain/IP
|
||||
This setting is a prerequisite for using the one-click script to install the Agent, see [here](/en_US/guide/agent.html#preparation) for details
|
||||
<br/>
|
||||
## View Password
|
||||
|
||||
If you don't want to display your Dashboard directly to visitors, you can set a view password here. After setting the password, visitors need to enter the password to access the homepage.
|
||||
|
||||
## Non-CDN Dashboard Server Domain/IP
|
||||
|
||||
This setting is a prerequisite for using the one-click script to install the Agent. For details, please see [here](/en_US/guide/agent.html#preparation).
|
||||
|
||||
## IP Change Notifications
|
||||
|
||||
If you want to receive notifications when a server's IP changes, you can set it up here.
|
||||
|
||||
## IP Change Alert
|
||||
If you want to be notified when a server's ip changes, you can set it up here
|
||||
#### Coverage
|
||||
Select a rule here to determine which servers need to be monitored, and you can choose according to your needs
|
||||
|
||||
Select a rule to determine which servers to monitor. Choose according to your needs.
|
||||
|
||||
#### Specific Servers
|
||||
In conjunction with the coverage settings, set the exclusions for the selected rule here
|
||||
#### Send Notification To Specific Notification Group
|
||||
Select the notification method, please set the notification method in the "Notifications" page
|
||||
<br/>
|
||||
:::warning
|
||||
**When the settings are completed, the notification takes effect when `enabled` is activated**
|
||||
:::
|
||||
<br/>
|
||||
|
||||
Set exclusions for the selected rule in conjunction with the coverage scope.
|
||||
|
||||
#### Send Notifications to a Specific Notification Group
|
||||
|
||||
Choose a notification method, which should be set up in advance on the "Notification" page.
|
||||
|
||||
:::warning
|
||||
IP Change Alert does not show ip by default, if you don't want to hide it, you can activate "Do NOT desensitize Server IP In Notification Messages"
|
||||
**Notifications take effect after enabling this setting.**
|
||||
:::
|
||||
|
||||
#### Show Full IP Address in Notifications
|
||||
|
||||
IP change notifications hide the full IP by default. If you don't want to hide it, check "Show Full IP Address in Notification."
|
||||
|
||||
## Disable Homepage Theme Switching
|
||||
|
||||
By default, the Dashboard allows visitors to change the theme. This feature only affects individual visitors and does not affect the theme set by the administrator in the admin panel. If you don't want visitors to switch themes, check this option.
|
||||
@ -4,52 +4,321 @@ outline: deep
|
||||
|
||||
## 站点标题
|
||||
|
||||
你可以在此项中自定义站点标题
|
||||
<br/>
|
||||
你可以在此项中自定义站点标题。
|
||||
|
||||
## 管理员列表
|
||||
+ 如果你修改了自己的 Github, Gitlab 或 Gitee 的用户名，需要在此项中同步修改，否则无法登录，多个用户请用逗号隔开: `user1,user2`
|
||||
|
||||
+ 如需更改管理员账户，请前往 `/opt/nezha/dashboard/data/config.yaml` ，重新设置新的管理员 `Client ID` 和 `Client Secret`
|
||||
<br/>
|
||||
- 如果你修改了自己的 Github、Gitlab 或 Gitee 的用户名，需要在此项中同步修改，否则无法登录。多个用户请用逗号隔开：`user1,user2`。
|
||||
- 如需更改管理员账户，请前往 `/opt/nezha/dashboard/data/config.yaml`，重新设置新的管理员 `Client ID` 和 `Client Secret`。
|
||||
|
||||
## 界面主题
|
||||
在这里选择前台和后台界面主题，如果选项中没有某个已存在的主题，请更新面板
|
||||
启用 Custom 主题前，你需要在提前安装自定义主题，否则启用该项后，面板将无法正常显示
|
||||
<br/>
|
||||
|
||||
在这里选择主页和管理界面主题，如果选项中没有某个已存在的主题，请更新面板。
|
||||
启用 Custom 主题前，你需要提前安装自定义主题，否则启用该项后，面板将无法正常显示。
|
||||
|
||||
## Language
|
||||
|
||||
哪吒监控目前支持以下语言：
|
||||
|
||||
+ 简体中文
|
||||
+ 繁體中文
|
||||
+ English
|
||||
+ Español
|
||||
- 简体中文
|
||||
- 繁體中文
|
||||
- English
|
||||
- Español
|
||||
|
||||
我们欢迎您对翻译进行勘误或贡献更多语言
|
||||
<br/>
|
||||
我们欢迎您对翻译进行勘误或贡献更多语言。
|
||||
|
||||
## 自定义代码 (style, script)
|
||||
|
||||
## 自定义代码
|
||||
可以在此修改 LOGO、修改色调、添加美化代码和统计代码等。
|
||||
|
||||
:::warning
|
||||
自定义代码仅在游客首页生效，管理面板不生效
|
||||
由于不同主题的代码不同，如确需修改管理面板中的内容，请修改 Docker 中的主题文件
|
||||
自定义代码仅在游客首页生效，管理面板不生效。由于不同主题的代码不同，如确需修改管理面板中的内容，请修改 Docker 中的主题文件。
|
||||
:::
|
||||
<br/>
|
||||
|
||||
#### 默认主题更改进度条颜色示例
|
||||
#### 默认主题更改进度条颜色、背景图片、导航栏等效果示例
|
||||
|
||||
<details>
|
||||
<summary>点击展开/收起</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ui.fine.progress> .bar {
|
||||
background-color: pink !important;
|
||||
/* 屏幕适配 */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.container {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
|
||||
margin-top: 0.4em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 整体图标 */
|
||||
i.icon {
|
||||
color: #000;
|
||||
width: 1.2em !important;
|
||||
}
|
||||
|
||||
/* 背景图片 */
|
||||
body {
|
||||
content: " " !important;
|
||||
background: fixed !important;
|
||||
z-index: -1 !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
background-position: top !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
background-image: url(https://backgroud.img) !important;
|
||||
font-family: Arial,Helvetica,sans-serif !important;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.ui.large.menu {
|
||||
border: 0 !important;
|
||||
border-radius: 0px !important;
|
||||
background-color: rgba(255, 255, 255, 55%) !important;
|
||||
}
|
||||
|
||||
/* 首页按钮 */
|
||||
.ui.menu .active.item {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 导航栏下拉框 */
|
||||
.ui.dropdown .menu {
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background-color: rgba(255, 255, 255, 80%) !important;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.nezha-primary-btn {
|
||||
background-color: transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* 大卡片 */
|
||||
#app .ui.fluid.accordion {
|
||||
background-color: #fbfbfb26 !important;
|
||||
border-radius: 0.4rem !important;
|
||||
}
|
||||
|
||||
/* 小卡片 */
|
||||
.ui.four.cards>.card {
|
||||
border-radius: 0.6rem !important;
|
||||
background-color: #fafafaa3 !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 3.3rem !important;
|
||||
}
|
||||
|
||||
.status.cards .three.wide.column {
|
||||
padding-right: 0rem !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(1) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.status.cards .wide.column:nth-child(2) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.status.cards .description {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 服务器名 */
|
||||
.status.cards .flag {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* 弹出卡片图标 */
|
||||
.status.cards .header > .info.icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.nezha-secondary-font {
|
||||
color: #2175ba !important;
|
||||
}
|
||||
|
||||
/* 上传下载 */
|
||||
.status.cards .outline.icon {
|
||||
margin-right: 1px !important;
|
||||
}
|
||||
|
||||
i.arrow.alternate.circle.down.outline.icon {
|
||||
color: #2175ba !important;
|
||||
}
|
||||
|
||||
i.arrow.alternate.circle.up.outline.icon {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
/* 弹出卡片小箭头 */
|
||||
.ui.right.center.popup {
|
||||
margin: -3px 0 0 0.914286em !important;
|
||||
-webkit-transform-origin: left 50% !important;
|
||||
transform-origin: left 50% !important;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup {
|
||||
margin-left: 1px !important;
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
|
||||
.ui.top.left.popup {
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.ui.top.right.popup {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.ui.left.center.popup {
|
||||
margin: -3px .91428571em 0 0 !important;
|
||||
-webkit-transform-origin: right 50% !important;
|
||||
transform-origin: right 50% !important;
|
||||
}
|
||||
|
||||
.ui.right.center.popup:before,
|
||||
.ui.left.center.popup:before {
|
||||
border: 0px solid #fafafaeb !important;
|
||||
background: #fafafaeb !important;
|
||||
}
|
||||
|
||||
.ui.top.popup:before {
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
}
|
||||
|
||||
.ui.popup:before {
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.ui.bottom.right.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.ui.top.left.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.ui.top.right.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.ui.left.center.popup:before {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-color: #fafafaeb transparent transparent !important;
|
||||
background: #fafafaeb !important;
|
||||
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
box-shadow: 0px 0px 0 0 #fafafaeb !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
/* 弹出卡片 */
|
||||
.status.cards .ui.content.popup {
|
||||
min-width: 20rem !important;
|
||||
line-height: 2rem !important;
|
||||
border-radius: 5px !important;
|
||||
border: 1px solid transparent !important;
|
||||
background-color: #fafafaeb !important;
|
||||
font-family: Arial,Helvetica,sans-serif !important;
|
||||
}
|
||||
|
||||
.ui.content {
|
||||
margin: 0 !important;
|
||||
padding: 1em !important;
|
||||
}
|
||||
|
||||
/* 服务页 */
|
||||
.ui.table {
|
||||
background: RGB(225,225,225,0.6) !important;
|
||||
}
|
||||
|
||||
.ui.table thead th {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 服务页进度条 */
|
||||
.service-status .good {
|
||||
background-color: #2175ba !important;
|
||||
}
|
||||
|
||||
.service-status .danger {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.service-status .warning {
|
||||
background-color: orange !important;
|
||||
}
|
||||
|
||||
/* 版权 */
|
||||
.ui.inverted.segment, .ui.primary.inverted.segment {
|
||||
color: #000 !important;
|
||||
font-weight: bold !important;
|
||||
background-color: #fafafaa3 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--Logo和版权-->
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector(".item img")
|
||||
var footer=document.querySelector("div.is-size-7")
|
||||
footer.innerHTML="Copyright info"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="https:/img.src"
|
||||
avatar.style.visibility="visible"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### DayNight 主题更改进度条颜色、修改页脚示例（来自 [@hyt-allen-xu](https://github.com/hyt-allen-xu) [@tech-fever](https://github.com/tech-fever)）
|
||||
|
||||
<details>
|
||||
<summary>点击展开/收起</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ui.fine.progress> .progress-bar {
|
||||
@ -59,44 +328,52 @@ outline: deep
|
||||
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector("img")
|
||||
var footer=document.querySelector("div.footer-container")
|
||||
footer.innerHTML="©2021 你的名字 & Powered by 你的名字"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="你的图片连接"
|
||||
avatar.style.visibility="visible"
|
||||
}
|
||||
var avatar = document.querySelector("img");
|
||||
var footer = document.querySelector("div.footer-container");
|
||||
footer.innerHTML = "©2021 你的名字 & Powered by 你的名字";
|
||||
footer.style.visibility = "visible";
|
||||
avatar.src = "你的图片连接";
|
||||
avatar.style.visibility = "visible";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### 默认主题修改 LOGO、修改页脚示例（来自 [@iLay1678](https://github.com/iLay1678)）
|
||||
|
||||
<details>
|
||||
<summary>点击展开/收起</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.right.menu>a{
|
||||
visibility: hidden;
|
||||
.right.menu>a {
|
||||
visibility: hidden;
|
||||
}
|
||||
.footer .is-size-7{
|
||||
visibility: hidden;
|
||||
.footer .is-size-7 {
|
||||
visibility: hidden;
|
||||
}
|
||||
.item img{
|
||||
visibility: hidden;
|
||||
.item img {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function(){
|
||||
var avatar=document.querySelector(".item img")
|
||||
var footer=document.querySelector("div.is-size-7")
|
||||
footer.innerHTML="Powered by 你的名字"
|
||||
footer.style.visibility="visible"
|
||||
avatar.src="你的方形logo地址"
|
||||
avatar.style.visibility="visible"
|
||||
window.onload = function() {
|
||||
var avatar = document.querySelector(".item img");
|
||||
var footer = document.querySelector("div.is-size-7");
|
||||
footer.innerHTML = "Powered by 你的名字";
|
||||
footer.style.visibility = "visible";
|
||||
avatar.src = "你的方形 logo 地址";
|
||||
avatar.style.visibility = "visible";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
</details>
|
||||
|
||||
#### hotaru 主题更改背景图片示例
|
||||
|
||||
<details>
|
||||
<summary>点击展开/收起</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.hotaru-cover {
|
||||
@ -104,32 +381,40 @@ outline: deep
|
||||
}
|
||||
</style>
|
||||
```
|
||||
</details>
|
||||
|
||||
## 前台查看密码
|
||||
如果你不想向游客直接展示你的主页，你可以在这里设置一个查看密码
|
||||
设置密码后，需要输入密码才可以访问主页
|
||||
<br/>
|
||||
|
||||
如果你不想向游客直接展示你的 Dashboard，可以在这里设置一个查看密码。设置密码后，需要输入密码才可以访问主页。
|
||||
|
||||
## 未接入 CDN 的面板服务器域名/IP
|
||||
此项设置是使用一键脚本安装 Agent 的前提，详情请查看[这里](/guide/agent.html#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C)
|
||||
<br/>
|
||||
|
||||
此项设置是使用一键脚本安装 Agent 的前提，详情请查看[这里](/guide/agent.html#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C)。
|
||||
|
||||
## IP 变更提醒
|
||||
如果你希望当某个服务器的ip发生变更时收到通知，可以在这里进行设置
|
||||
|
||||
如果你希望当某个服务器的 IP 发生变更时收到通知，可以在这里进行设置。
|
||||
|
||||
#### 覆盖范围
|
||||
在这里选择一条规则，来确定需要监控哪些服务器，可以根据自己的需求进行选择
|
||||
|
||||
在这里选择一条规则，来确定需要监控哪些服务器，可以根据自己的需求进行选择。
|
||||
|
||||
#### 特定服务器
|
||||
配合覆盖范围的设置，在这里设置选定规则的排除项
|
||||
|
||||
配合覆盖范围的设置，在这里设置选定规则的排除项。
|
||||
|
||||
#### 提醒发送至指定的通知分组
|
||||
选择通知方式，通知方式请提前在 “告警” 页内设置
|
||||
<br/>
|
||||
|
||||
选择通知方式，通知方式请提前在“告警”页内设置。
|
||||
|
||||
:::warning
|
||||
**设置完成后，勾选启用时，通知生效**
|
||||
**设置完成后，勾选启用时，通知生效**。
|
||||
:::
|
||||
<br/>
|
||||
|
||||
#### 通知中显示完整 IP 地址
|
||||
IP 变更通知默认隐藏完整 IP，如果你不希望隐藏，可以勾选 “通知信息中显示完整 IP 地址”
|
||||
|
||||
IP 变更通知默认隐藏完整 IP，如果你不希望隐藏，可以勾选“通知信息中显示完整 IP 地址”。
|
||||
|
||||
## 禁止前台切换模版
|
||||
主页允许修改显示主题的功能默认启用，此功能只会影响单一用户，不会影响管理员在后台设置的启用主题
|
||||
如果你不希望前台用户切换主题，可以勾选此项
|
||||
|
||||
Dashboard 默认启用允许访客修改显示主题的功能，此功能只会影响单一访客，不会影响管理员在后台设置的启用主题。如果你不希望访客切换主题，可以勾选此项。
|
||||
Loading…
x
Reference in New Issue
Block a user