不完美的地方是在登錄之後的界面,網頁官方web兩邊多餘的空間會被填充圖片
首先,GLiNET的Login界面本身就是一個js裡面套了一個css的登錄背景,所以我們需要找到這個js
⬇️
我們先用終端機登錄:
ssh root@172.16.1.1
baiye@baiye-Air ~ % ssh root@172.16.1.1
** WARNING: connection is not using a post-quantum key exchange algorithm.
** This session may be vulnerable to “store now, decrypt later” attacks.
** The server may need to be upgraded. See https://openssh.com/pq.html
root@172.16.1.1’s password:
BusyBox v1.36.1 (2026-01-31 11:04:51 UTC) built-in shell (ash)
MM NM MMMMMMM M M
$MMMMM MMMMM MMMMMMMMMMM MMM MMM
MMMMMMMM MM MMMMM. MMMMM:MMMMMM: MMMM MMMMM
MMMM= MMMMMM MMM MMMM MMMMM MMMM MMMMMM MMMM MMMMM’
MMMM= MMMMM MMMM MM MMMMM MMMM MMMM MMMMNMMMMM
MMMM= MMMM MMMMM MMMMM MMMM MMMM MMMMMMMM
MMMM= MMMM MMMMMM MMMMM MMMM MMMM MMMMMMMMM
MMMM= MMMM MMMMM, NMMMMMMMM MMMM MMMM MMMMMMMMMMM
MMMM= MMMM MMMMMM MMMMMMMM MMMM MMMM MMMM MMMMMM
MMMM= MMMM MM MMMM MMMM MMMM MMMM MMMM MMMM
MMMM$ ,MMMMM MMMMM MMMM MMM MMMM MMMMM MMMM MMMM
MMMMMMM: MMMMMMM M MMMMMMMMMMMM MMMMMMM MMMMMMM
MMMMMM MMMMN M MMMMMMMMM MMMM MMMM
MMMM M MMMMMMM M M
M
—————————————————————
For those about to rock… OpenWrt 23.05-SNAPSHOT,
—————————————————————
然後我們要去找js有哪些:
find /www -type f | grep -E ‘app.*\.js|app.*\.js\.gz|css’
root@GL-BE3600:~# find /www -type f | grep -E ‘app.*\.js|app.*\.js\.gz|css’
/www/js/app.50f3c0c4.js.gz
/www/luci-static/resources/tasks/tasks.css
/www/luci-static/resources/xterm/xterm.css
/www/luci-static/istore/style.css
/www/luci-static/bootstrap/cascade.css
/www/luci-static/bootstrap/mobile.css
/www/theme/base.css
/www/theme/classic/index.css.gz
/www/theme/dark/index.css.gz
/www/theme/default/index.css.gz
可以看到一共有那麼多
⬇️
輸入這個我們可以看到這些內容:
sed -n ‘108,122p’ /tmp/default.css
root@GL-BE3600:~# sed -n ‘108,122p’ /tmp/default.css
rgba(55, 41, 152, 1) 86%,
rgba(54, 40, 151, 1) 110%
);
/* 登录面板背景 */
–background-login: radial-gradient(
circle,
rgba(5, 2, 47, 1) 28%,
rgba(55, 41, 152, 1) 86%,
rgba(54, 40, 151, 1) 110%
);
/* 滑动条颜色 */
–menu-scrollbar: rgba(145, 149, 170, 0.4);
–menu-scrollbar-hover: rgba(145, 149, 170, 0.4);
root@GL-BE3600:~# sed -n ‘108,122p’ /tmp/dark.css
rgba(8, 8, 39, 1) 86%,
rgba(10, 12, 36, 1) 110%
);
/* 登录面板背景 */
–background-login: radial-gradient(
circle,
rgba(15, 25, 65, 1) 28%,
rgba(8, 8, 39, 1) 86%,
rgba(10, 12, 36, 1) 110%
);
/* 滑动条颜色 */
–menu-scrollbar: rgba(145, 149, 170, 0.4);
–menu-scrollbar-hover: rgba(145, 149, 170, 0.4);
–scrollbar: rgba(145, 149, 170, 0.4);
⬇️
然後輸入這個:
cp /www/theme/default/index.css.gz /www/theme/default/index.css.gz.bak
我們做一下備份
~# cp /www/theme/default/index.css.gz /www/theme/default/index.css.gz.bak
root@GL-BE3600:~# cp /www/theme/default/index.css.gz /www/theme/default/index.css.gz.bak
⬇️
現在需要新開一個終端機上傳圖片:
使用這個:
scp -O -P 22 “/Users/baiye/Desktop/mybg.png” root@172.16.1.1:/www/mybg.PNG
baiye@baiye-Air ~ % scp -O -P 22 “/Users/baiye/Desktop/mybg.png” root@172.16.1.1:/www/mybg.PNG
** WARNING: connection is not using a post-quantum key exchange algorithm.
** This session may be vulnerable to “store now, decrypt later” attacks.
** The server may need to be upgraded. See https://openssh.com/pq.html
root@172.16.1.1’s password:
mybg.png 100% 5477KB 6.9MB/s 00:00
baiye@baiye-Air ~ %
⬇️
然後我們需要檢查權限:
root@GL-BE3600:~# vi /tmp/default.css
root@GL-BE3600:~# ls -lh /www | grep -i mybg
-rwx—— 1 root root 4.4M Mar 31 17:06 mybg.PNG
⬇️
然後給一個644權限
root@GL-BE3600:~# chmod 644 /www/mybg.PNG
⬇️
好下面開始修改js
輸入:
vi /tmp/default.css
root@GL-BE3600:~# vi /tmp/default.css
⬇️
他會打開一個編輯器,請切換英文輸入法按:
:113
⬇️
會自動跳轉到背景那一行,請按DD刪除
只保留這些:
^M
/* ……………… */^M
–background-status-panel: radial-gradient(^M
circle,^M
rgba(5, 2, 47, 1) 28%,^M
rgba(55, 41, 152, 1) 86%,^M
rgba(54, 40, 151, 1) 110%^M
);^M
^M
/* ……………… */^M
⚠️⚠️⚠️–background-login: none; ⚠️⚠️⚠️重點是加中間這一句
^M
^M
/* …………… */^M
–menu-scrollbar: rgba(145, 149, 170, 0.4);^M
–menu-scrollbar-hover: rgba(145, 149, 170, 0.4);^M
–scrollbar: rgba(145, 149, 170, 0.4);^M
–scrollbar-hover: rgba(145, 149, 170, 0.4);^M
^M
⬇️
–background-login: none;
⚠️⚠️⚠️內容解析
center center:令圖片置中
contain:令整張圖完整顯示,不會只剩一角
no-repeat:防止重複平鋪
⬇️
然後按esc再使用大寫字母G跳轉到最後一行,添加以下內容:
⚠️⚠️⚠️內容解析
目的是為了加高斯曲線模糊
#app::before {
content: “”;
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: url(‘/mybg.PNG’) center center / cover no-repeat;
filter: blur(12px);
transform: scale(1.08);
}
#app > * {
position: relative;
z-index: 1;
}
然後按esc再按:wq!
最後執行:
gzip -c /tmp/default.css > /www/theme/default/index.css.gz
root@GL-BE3600:~# gzip -c /tmp/default.css > /www/theme/default/index.css.gz
然後回到瀏覽器按Option+Command+R刷新網頁