sing
类目归类
哪吒探针主题美化教程
主题安装
1、查找哪吒面板主题文件夹
这次的修改并不是简单的后台添加自定义CSS，需要替换几个模板文件，而哪吒面板是docker方式部署的，所以就需要你找到你的面板文件夹，由于Linux查找文件并不是很友好，这里就简单说一下查找的方法（大佬请跳过）。宝塔面板就直接在文件管理器中 /var/lib/docker/overlay2 目录搜索 theme-default ，记得勾选 包含子文件夹。SSH请使用下面命令查找：
cd /var/lib/docker/overlay2
find -name theme-default -type d
在搜索结果中列出类似下面的路径，其中 xxxxxxxxxxxxxxxxxx/merged/dashboard/resource/template/ 就是我们要找的哪吒面板文件夹。
点击放大图片
2、修改主题文件
一共需要修改两个文件，请根据自己的习惯进行修改，或者把下面代码直接另存为文件替换也行。
a. xxxxxxxxxxxxxxxxxx/merged/dashboard/resource/template/common/header.html在 前插入以下代码
<link href="https://cdn.staticfile.org/bootstrap-icons/1.10.3/font/bootstrap-icons.css"type="text/css" rel="stylesheet" />
b. xxxxxxxxxxxxxxxxxx/merged/dashboard/resource/template/theme-default/home.html 这个文件修改较多，所以贴上所有代码直接替换即可。
{{define "theme-default/home"}}
{{template "common/header" .}}
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
{{template "common/menu" .}}
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
<div class="active content">
<div class="ui four stackable status cards">
<div v-for="server in group.data" :id="server.ID" class="ui card">
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
<div class="header">
<i :class="server.Host.CountryCode + ' flag'"></i> <i v-if='server.Host.Platform == "darwin"'
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
<i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
<div class="ui content popup" style="margin-bottom: 0">
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
[<span
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
CPU: @#server.Host.CPU#@<br />
{{tr "DiskUsed"}}:
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
{{tr "MemUsed"}}:
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
{{tr "SwapUsed"}}:
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
{{tr "NetTransfer"}}: <i
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
toFixed2(server.State.Load15) #@<br />
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
{{tr "Version"}}: @#server.Host.Version#@<br />
</div>
<div class="ui divider" style="margin-bottom: 5px"></div>
</div>
<div class="description">
<div class="ui grid">
<div class="three wide column">CPU</div>
<div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
</div>
</div>
</div>
<div class="three wide column">{{tr "MemUsed"}}</div>
<div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
<div class="bar"
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
</div>
</div>
</div>
<div class="three wide column">{{tr "SwapUsed"}}</div>
<div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
<div class="bar"
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
</div>
</div>
</div>
<div class="three wide column">{{tr "DiskUsed"}}</div>
<div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
<div class="bar"
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
</div>
</div>
</div>
<div class="three wide column">{{tr "NetSpeed"}}</div>
<div class="thirteen wide column">
<i class="arrow alternate circle down outline icon"></i>
@#formatByteSize(server.State.NetInSpeed)#@/s
<i class="arrow alternate circle up outline icon"></i>
@#formatByteSize(server.State.NetOutSpeed)#@/s
</div>
<div class="three wide column">流量</div>
<div class="thirteen wide column">
<i class="arrow circle down icon"></i>
@#formatByteSize(server.State.NetInTransfer)#@
<i class="arrow circle up icon"></i>
@#formatByteSize(server.State.NetOutTransfer)#@
</div>
<div class="three wide column">信息</div>
<div class="thirteen wide column">
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getK2Gb(server.Host.MemTotal)#@
<i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getK2Gb(server.Host.DiskTotal)#@
</div>
<div class="three wide column">{{tr "Uptime"}}</div>
<div class="thirteen wide column">
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
</div>
</div>
</div>
</div>
<div class="content" v-else>
<p>@#server.Name#@</p>
<p>{{tr "ServerIsOffline"}}</p>
</div>
</div>
</div>
</div>
</div>
</div>{{template "common/footer" .}}
{{end}}
最后，重启哪吒面板容器即可生效。
3、后台添加自定义CSS
直接复制下面代码，粘贴，保存。就可以返回前台查看效果了。找不到地方的，可以查看以前的教程文章。
哪吒面板透明自定义主题
前言 [nbtext type="rainbow-text"]最近京东的公共图床403了，好多图要转移，麻烦啊,所以说免费的就是最贵的！[/nbtext]**言....
复制代码
写在最后
上面就是整个主题修改的方法，还是要感谢进行修改的大佬啊😍。大家如果喜欢，就赶紧搞起来吧。
评论 (0)