官方文档:Alist


Docker安装

Docker-cli

docker run -d --restart=unless-stopped -v /etc/alist:/opt/alist/data -p 5244:5244 -e PUID=0 -e PGID=0 -e UMASK=022 --name="alist" xhofe/alist:latest

Docker-Compose

version: '3.3'
services:
    alist:
        image: 'xhofe/alist:latest'
        container_name: alist
        volumes:
            - '/etc/alist:/opt/alist/data'
        ports:
            - '5244:5244'
        environment:
            - PUID=0
            - PGID=0
            - UMASK=022
        restart: unless-stoppe

添加储存/挂载网盘

阿里云盘 Open
不完整教材,待后补。


刷新令牌
前往:https://alist.nn.ci/tool/aliyundrive/request


Web UI美化:

自定义头部

<!--Alist V3建议添加的,已经默认添加了,如果你的没有建议加上-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!--引入字体,全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
    display: none;
}

/*白天背景图*/
.hope-ui-light {
    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.4)!important;
}

/*readme白天模式透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
    background-color: rgba(255, 255, 255, 0.4)!important;
}

/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0.4)!important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 10%)!important;

}

/*白天模式代码块透明*/
.hope-ui-light pre {
    background-color: rgba(255, 255, 255, 0.4)!important;
}

/*底部CSS,.App .table这三个一起的*/
 dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}

/*去掉底部*/
.footer {
    display: none!important;
}

/*全局字体*/
 * {
    font-family:LXGW WenKai
}
* {
    font-weight:bold
}
body {
    font-family: LXGW WenKai;
}
</style>

自定义内容

<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
    <div>
        <br />
        <center class="dibu">
            <div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
                <span>
                    <span style="color: #FFDEAD; font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span>
                </span>
                <p style="margin-left: 10rem;font-size: 10pt;">
                    <small>
                        —— R.GT|数据仓库
                    </small>
                </p>
            </div>

            <div style="font-size: 13px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=450466196"
                        target="_blank">
                        <i class="fab fa-qq" style="color:#FFDEAD" aria-hidden="true">
                        </i>
                        QQ |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="mailto:450466196@qq.com" target="_blank">
                        <i class="fa-duotone fa-envelope-open" style="color:#FFDEAD" aria-hidden="true">
                        </i>
                        邮箱 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://rannn.cn" target="_blank">
                        <i class="fas fa-edit" style="color:#FFDEAD" aria-hidden="true">
                        </i>
                        博客 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://rannn.cn/liuyan" target="_blank">
                        <i class="fas fa-comment-lines" style="color:#FFDEAD;" aria-hidden="true">
                        </i>
                        留言 |
                    </a>
                </span>
                <!--作者-->
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
                        <i class="fa-solid fa-copyright" style="color:#FFDEAD;" aria-hidden="true">
                        </i>
                        Alist |
                    </a>
                </span>
                <!--后台入口-->
                <span class="nav-item">
                    <a class="nav-link" href="/@login?redirect=/@manage" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#FFDEAD;" aria-hidden="true">
                        </i>
                        管理
                    </a>
                </span>
<br />
            </div>
        </center>
        <br />
        <br />
    </div>

    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

<!---去除body规则--->
<style>
body {
    /*background-color: var(--hope-colors-background);
    color: var(--hope-colors-neutral12);
    font-family: inherit;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;*/
}
</style>
<!---重写body规则--->
<style>
body {
    background-color: var(--hope-colors-background);
    color: #FFDEAD;
    font-family: inherit;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}
</style>

<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>

修改自定义内容后,出现白条,更换版【v3.29.1】


 2024.3.31,试了几个版本只有这个版本目前没问题。

开启分享模式,无需登录【默认是关闭的】

取消勾选【停用】


下面没有咯,本次分享就到这里了,喜欢的话可以扫码加个关注哦,有任何问题都可扫码咨询🤪。

img

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。