Alist Advanced Usages

1/8/2023

This post summarized some advanced usages of AList.

Add different network drive

Google Drive:

If you have your own Client ID, Client Secret, and refresh token, you can directly paste them in here. As to how to get your own Google Drive's following information, I will put them into another post to talk about it.

AList author has an instruction page to show you how to use a default client id / client secret to generate your refresh_token for your Google drive folder, using https://tool.nn.ci/google/request:

Unfortunately, google doesnot support this way anymore. You will get an access blocked error page.

To resolve this ,you might want to use a local installed Rclone to get refresh token. Please see my other posts for more information:

https://blog.51sec.org/2021/11/mount-azure-blob-storage-into-local.html
https://blog.51sec.org/2020/03/goindex-using-cloudflare-workers-to.html#point6

After you collected all those information, you can enter them into this AList page to add your Google Drive folder to show all the files / folders.

OneDrive:

Not like Google drive, the url for fetching refresh token works.

To make it simple, we can use https://tool.nn.ci/onedrive/request to generate all information.

Click purple button to fetch refresh token. It will ask you log into your Microsoft Onedrive account.

Baidu NetDisk:

For Baidu NetDisk, only thing you will need is Refresh Token. The problem is download function doesn't work properly. But multimedia preview function is working well.

S3 - BackBlaze

I am only able to view root folder's content, and not able to go to sub folder. It just keeps showing root folder's conent.

WebDav

How to mount Alist into local windows?

Folder format: http(s)://alist.51sec.org/dav

Doc URL: https://alist-doc.nn.ci/en/docs/webdav/

Enter a username and password.

AList Style

Note: https://blog.csdn.net/u012514495/article/details/125772285

黑猫：


<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
"scale": 1
},
"display": {
"position": "left",
"width": 100,
"height": 200,
"hOffset": 0,
"vOffset": 0
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
window.onload = function() {
$("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>
</div>

白猫：


<script src=" https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: " https://unpkg.com/[email protected]/assets/tororo.model.json" ,
"scale": 1
},
"display": {
"position": "right",
"width": 100,
"height": 200,
"hOffset": -20,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 1
}
});
</script>

鼠标点击出随机颜色的爱心:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}, i(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
), n(), r()
}(window, document);
</script>

隐藏右上角复制直链、下载切换布局等：


<style>
.css-neion{
display:none;
}
</style>

全白无框：


<style>
.chakra-ui-light{
background-color: #FFFFFF;
}
.main-box {
border-radius: 15px !important;
box-shadow: unset !important;
}
.chakra-ui-light .main-box {
background-color: rgba(255,255,255,0.9) !important;
}
.chakra-ui-light .readme-box {
background-color: rgba(255,255,255,0.9) !important;
}
.readme-box {
border-radius: 15px !important;
box-shadow: unset !important;
}
</style>

备案信息：


</style>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" rel=" stylesheet ">
<div id="customize" style="display:none;
text-align:center;
">
<br />
<div style="font-size:13px;
">
<span class="nav-item">
<a class="nav-link" href="http://lizong.top/" target="_blank">
<i class="fa-solid fa-copyright" style="color:#9932CC" aria-hidden="true"></i>
2022 LIZONG.TOP |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="https://beian.miit.gov.cn/" target="_blank">
<i class="fa fa-balance-scale" style="color:#9932CC;
" aria-hidden="true"></i>
鄂ICP备xxxxxx号-x |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
<i class="fa fa-heart" style="color:#9932CC;
" aria-hidden="true"></i>
由Alist驱动
</a>
</span>
</div>
<br />
</div>
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
},200);
</script>
</font>

底部网站运行时间：


<center>
<br />
</span>
<span class="nav-item">
<a class="nav-link" href="https://blog.51sec.org/2022/12/5-minutes-docker-series-deploy-free.html" target="_blank">
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("04/17/2022 00:00:00");/*---这里是网站的启用时间--*/
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "⏱️本站已稳定运行"+dnum+"天";
document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250);
</script>

自定义背景：替换url即可


<style>
.chakra-ui-light{
background-image: url("https://www.dmoe.cc/random.php") !important;
background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
.main-box {
border-radius: 15px !important;
}
.chakra-ui-light .main-box {
background-color: #ffffff70 !important;
}
.chakra-ui-light .readme-box {
background-color: white !important;
}
.readme-box {
border-radius: 15px !important;
}
</style>

不建议删除底部文字请尊重开发者的劳动成果，谢谢

去掉底部的管理文字：


<style>
.footer span,.footer a:nth-of-type(2){
display:none;
}
</style>

去掉底部的 `Powered by Alist：`


<style>
.footer span,.footer a:nth-of-type(1){
display:none;
}
</style>

去掉底部`Powered by Alist`和管理文字：


<style
type="text/css"> .footer {
display: none !important; }
</style>

Videos

Using Portainer to Deploy & Deploy into Windows

References

via Blogger http://blog.51sec.org/2023/01/alist-advanced-usages.html
January 07, 2023 at 10:13PM Software

0 Comments

Build Confidence

Alist Advanced Usages

Add different network drive

Google Drive:

OneDrive:

Baidu NetDisk:

S3 - BackBlaze

WebDav

AList Style

黑猫：

白猫：

鼠标点击出随机颜色的爱心:

隐藏右上角复制直链、下载切换布局等：

全白无框：

备案信息：

底部网站运行时间：

自定义背景：替换url即可

去掉底部的管理文字：

去掉底部的 `Powered by Alist：`

去掉底部`Powered by Alist`和管理文字：

Videos

References

Leave a Reply.

Categories

Archives

Build Confidence

Alist Advanced Usages

Add different network drive

Google Drive:

OneDrive:

Baidu NetDisk:

S3 - BackBlaze

WebDav

AList Style

黑猫：

白猫：

鼠标点击出随机颜色的爱心:

隐藏右上角复制直链、下载切换布局等：

全白无框：

备案信息：

底部网站运行时间：

自定义背景：替换url即可

去掉底部的管理文字：

去掉底部的 Powered by Alist：

去掉底部Powered by Alist和管理文字：

Videos

References

Leave a Reply.

Categories

Archives

去掉底部的 `Powered by Alist：`

去掉底部`Powered by Alist`和管理文字：