Some Alist Advanced Usages

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

Some Alist Advanced Usages

Bynetsec

Add different network drive

Google Drive:

OneDrive:

Baidu NetDisk:

S3 – BackBlaze

WebDav

AList Style

黑猫：

白猫：

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

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

全白无框：

备案信息：

底部网站运行时间：

自定义背景：替换url即可

去掉底部的管理文字：

去掉底部的 `Powered by Alist：`

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

Videos

References

Like this:

Related

By netsec

Related Post

Best Free Online Video Recording App: Record Computer Screen From Your Browser, No Limitation

Using Microsoft Native Tools To Deploy Legit & Genuine Office 365/2021 For Free

Deployment of KASM with Four Commands or Using Docker to Deploy

Leave a ReplyCancel reply

You missed

Use V2rayN (V2ray Client) to Protect Your Online Privacy & Bypass Internet Censorship

Config Fortigate Traffic Shaping

Microsoft Intune Deploy Guide and Device Onboarding Process

Fortigate NGFW Solution

Bynetsec

Add different network drive

Google Drive:

OneDrive:

Baidu NetDisk:

S3 – BackBlaze

WebDav

AList Style

黑猫：

白猫：

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

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

全白无框：

备案信息：

底部网站运行时间：

自定义背景：替换url即可

去掉底部的管理文字：

去掉底部的 Powered by Alist：

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

Videos

References

Share this:

Like this:

Related

By netsec

Related Post

Leave a ReplyCancel reply

You missed

去掉底部的 `Powered by Alist：`

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