Alist Advanced Usages

cc • 2023-01-08 03:13 • 好物分享

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：`


<!--去掉底部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

版权声明：
作者：cc
链接：https://www.techfm.club/p/39437.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END

二维码

俄罗斯春晚“本山·叶夫根尼”的小品《俄罗斯赢麻了》

< <上一篇

Enable Azure File Shares SMB Over QUIC

下一篇>>

搜索内容

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

取消回复

共有 0 条评论

Ads

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

取消回复

共有 0 条评论

Ads

去掉底部的 `Powered by Alist：`

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