AList UI美化教學

AList UI美化教學

By.SH

Telegram Oasis Channel 綠洲電報頻道 https://t.me/toc_as

SH的AList https://alist.toc.icu/

前言
本教學請將需要的貼至
AList 管理 > 設置 > 全域設定 的 自定義頭部 或 自定義內容
請於前面加入<style>
然後加入</style>作為結尾


也可以將需要的貼入站點公告中
AList 管理 > 設置 > 站點 > 站點公告
某些是建議放於元信息中會比較合適
AList 管理 > 元信息
路徑為你想要放置的目錄
如圖的路徑為主頁
將想要顯示的位置(路徑)與需要的項目貼入說明中
快速前往 請使用 CTRL+F 搜尋下方關鍵字

移除搜索中的鍵盤圖

整個去除搜索

右上搜索改透明

右上切換按鈕改透明

去除網站圖標與搜索

站點公告去除X關閉按鈕

頂部新增圖片

改背景圖

列表改透明

元信息改透明

文字檔預覽改透明顯示

側邊選單改透明

去除尾頁

訪客計數器

本站已存活時間

搜索結果改透明

移除本地設置中的 Aria2 RPC 鏈接 與 Aria2 RPC 密鑰 顯示

移除下載選項

教學開始
搜索修改前


移除搜索中的鍵盤圖(請放自定義頭部)
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {display: none !important;}


整個去除搜索(請放自定義頭部)
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {display: none !important;}
右上搜索改透明(前)


右上搜索改透明(毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{background: rgba(255,255,255,0.2)!important;backdrop-filter: blur(10px)!important;}

右上搜索改透明(毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{background: rgb(0 0 0 / 10%)!important;backdrop-filter: blur(10px)!important;}


右上搜索改透明(非毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{background: rgba(255,255,255,0.2)!important;}

右上搜索改透明(非毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{background: rgb(0 0 0 / 10%)!important;}
右上切換按鈕改透明前


上方右側切換按鈕改透明(不分亮色或暗色背景)(請放自定義頭部)
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{background-color: rgba(255, 255, 255, 0.3) !important;}
你可以將0.3改成0就會變成完全沒有背景(反而更好看?)
去除網站圖標與搜索(畢竟網站圖標只有顯示的功能)(請放自定義頭部)
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {display: none !important;}
站點公告去除X關閉按鈕前


站點公告去除X關閉按鈕後
.notify-render .hope-close-button{display: none;}
頂部新增圖片(GIF可用)(請放自定義頭部)
<img src="圖片網址" style="display:block; margin:auto;" />
改背景圖前


使用背景圖(亮色背景)(GIF可用)(請放自定義頭部)
.hope-ui-light{background-image: url("圖片網址") !important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}

使用背景圖(暗色背景)(GIF可用)(請放自定義頭部)
.hope-ui-dark {background-image: url(圖片網址) !important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}
列表改透明前


列表改透明(亮色背景)(請放自定義頭部)
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {background-color: rgba(255, 255, 255, 0.5) !important;}

列表改透明(暗色背景)(請放自定義頭部)
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{background-color:rgb(0 0 0 / 50%) !important;}
元信息改透明前


元信息改透明後(亮色背景)(請放自定義頭部)
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{background-color: rgba(255, 255, 255, 0.5) !important;}

元信息改透明後(暗色背景)(請放自定義頭部)
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{background-color:rgb(0 0 0 / 50%) !important;}
文字檔預覽改透明顯示前


文字檔預覽改透明顯示後(亮色背景)(請放自定義頭部)
.hope-ui-light pre{background-color: rgba(255, 255, 255, 0.1) !important;}

文字檔預覽改透明顯示後(暗色背景)(請放自定義頭部)
側邊選單改透明前


側邊選單改透明後(不分亮色或暗色背景)(請放自定義頭部)
.hope-c-PJLV-ijgzmFG-css{background-color: rgba(255, 255, 255, 0.5) !important;}
去除尾頁(請放自定義頭部)
.footer {display: none !important;}
頁面中的訪客計數器放置前


頁面中的訪客計數器放置後
請先將
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>
放入自定義頭部

放完後複製需要的並放置於自定義內容中
您是第 <span id="busuanzi_value_site_uv"></span> 位訪客 ；
本頁已被閱讀共 <span id="busuanzi_value_page_pv"></span> 次 ；
本站總閱讀量共 <span id="busuanzi_value_site_pv"></span> 次

您是第X位訪客 這項不會因為刷新瀏覽器而新增人數
例: 您是第999位訪客 刷新網頁或另開視窗也還是 第999位訪客

本頁已被閱讀共X次 這項為當前查看的目錄所閱讀或查看的次數(隨著刷新瀏覽器而增加)
例: 你看這頁面時是顯示 本頁已被閱讀共1242次
當你刷新網頁或另開視窗時就會顯示 本頁已被閱讀共1243次

本站總閱讀量共X次 這項目會統計所有 本頁已被閱讀共X次 的數量
例: 有三個網頁分別為
A網頁 本頁已被閱讀共10次；B網頁 本頁已被閱讀共12次；C網頁 本頁已被閱讀共11次
當你進入A網頁時會顯示 A網頁 本頁已被閱讀共11次 本站總閱讀量共34次

錯誤問題
若發現沒有顯示人數時請將
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>
改成
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
就可以正常顯示


當然你也可以放置於站點公告中
設置 > 站點 > 站點公告中
您是第 <span id="busuanzi_value_site_uv"></span> 位訪客

你也可以將
本頁已被閱讀共 <span id="busuanzi_value_page_pv"></span> 次
與
本站總閱讀量共 <span id="busuanzi_value_site_pv"></span> 次

但請注意
只能放置於自定義頭部、自定義內容、站點公告或元信息
其中一個位置
若重複放置將會發生無法正常顯示的問題
本站已存活時間(但基本上都是白瞟來著)
這行放置於要顯示的位置
<span>
目前本站白瞟了共：<span id="sitetime" style="color: #0196e3;"></span>

下面放置於自訂頭部
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() --
year -
month -
day -
hours -
minutes -
seconds -
microseconds - */
var t1 = Date.UTC(2023,1,8,20,30,00);
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 時 "+diffMinutes+" 分 "+diffSeconds+" 秒 ";
}
siteTime();
</script>

其中的一行是
UTC(2023,1,8,20,30,00)
分別為年、月、日、時、分、秒
月請輸入1~12
日請輸入1~31
時請輸入1~24
分與秒請輸入1~30
搜索結果改透明前


搜索結果改透明(毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{background: rgba(255,255,255,0.2)!important;backdrop-filter: blur(10px)!important;}

搜索結果改透明(毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{background: rgb(0 0 0 / 10%)!important;backdrop-filter: blur(10px)!important;}


搜索結果改透明(非毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{background: rgba(255,255,255,0.2)!important;}

搜索結果改透明(非毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{background: rgb(0 0 0 / 10%)!important;}


搜索結果輸入框改透明(毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{background: rgba(255,255,255,0.2)!important;backdrop-filter: blur(10px)!important;}

搜索結果輸入框改透明(毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{background: rgb(0 0 0 / 10%)!important;backdrop-filter: blur(10px)!important;}


搜索結果輸入框改透明(非毛玻璃)(亮色背景)(請放自定義頭部)
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{background: rgba(255,255,255,0.2)!important;}

搜索結果輸入框改透明(非毛玻璃)(暗色背景)(請放自定義頭部)
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{background: rgb(0 0 0 / 10%)!important;}


點搜索的輸入框前
點搜索的輸入框後
搜索解果改透明(非毛玻璃)(亮色背景) 搭配 搜索輸入框透明(非毛玻璃)(亮色背景)
請自行嘗試混搭
移除本地設置中的 Aria2 RPC 鏈接 與 Aria2 RPC 密鑰 顯示前


移除本地設置中的 Aria2 RPC 鏈接 與 Aria2 RPC 密鑰 顯示後
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikjnSaO-css {display: none !important;}
基本上在遊客狀態下是不會用到這個項目的
所以建議是隱藏會比較好
若有需要的話
輸入完鏈接與密鑰後再來隱藏也是可以的
移除下載選項前


移除下載選項後
.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ.hope-c-kvTTWD-hYRNAb-variant-filled.hope-c-kvTTWD-gfwxhr-size-md.hope-c-huZphZ-cIGthf-cv.hope-c-PJLV.hope-c-PJLV-ijSQbqe-css {display: none !important;}

Telegram Oasis Channel 綠洲電報頻道 https://t.me/toc_as
By.SH @SH_Taiwan https://t.me/SH_Taiwan

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org