一、自定义首页

v1.7.1版本后不再建议自定义首页,每次版本更新都需更新assets目录的index.html文件,如需自定义首页,可自行打开主页,右键查看网页源代码,把代码保存为 assets目录下的index.html。

v1.6.1之后版本新增,在运行文件目录下新建 assets 文件夹,并在assets文件夹下放入 home.html及index.html。

二、自定义标题及logo

v1.7.1之后版本新增

自定义首页logo:在新建的assets文件夹下新建 loginlogo.png 用来覆盖登录页logo。

v1.6.1之后版本新增

自定义标题:在系统设置中自行设置网站标题,关键词及介绍。

自定义logo:在新建的assets文件夹下新建 logobig.png 及 logomin.png 用来覆盖系统默认logo。

自定义favicon.ico:在新建的assets文件夹下新建 favicon.ico 覆盖默认。

三、home.html 示例

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/front/assets/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>{{.title}}</title>
    <meta name="keywords" content="{{.keywords}}" />
    <meta name="description" content="{{.description}}">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #333;
        }

        * {
            box-sizing: border-box;
        }

        .bgimg {
            z-index: -2;
            position: fixed;
            opacity: 0;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            backface-visibility: hidden;
            transition: opacity 1s, transform .25s, filter .25s;
        }

        .bgcur {
            filter: blur(8px);
            transform: scale(1.1)
        }

        .bgcover {
            z-index: -1;
            opacity: 1;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, .3) 166%);
            transition: all .25s;
        }

        .loginbox {
            max-width: 70%;
            width: 200px;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .logo {
            margin-bottom: 20px;
        }

        .inputbox::placeholder {
            color: #999;
        }

        .inputbox {
            width: 100%;
            outline: 0;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            text-align: center;
            background-color: rgba(255, 255, 255, .8);
            box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            transition: all .25s;
            font-size: 12px;
            margin-bottom: 20px;
            color: #333;
        }

        .loginbtn {
            width: 100%;
            outline: 0;
            border: none;
            margin: 0;
            border: 0;
            padding: 8px 15px;
            border-radius: 5px;
            text-align: center;
            background-color: rgba(72, 188, 162, 1);
            box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            transition: all .25s;
            font-size: 12px;
            color: #fafafa;
            cursor: pointer;
        }

        .loginbtn:hover {
            background-color: rgba(55, 148, 128, 0.8);
        }

        .footer {
            position: fixed;
            bottom: 6px;
            left: 50%;
            border-radius: 5px;
            transform: translateX(-50%);
            font-size: 12px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            padding: 3px 15px;
            background: rgba(0, 0, 0, 0.3);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            color: rgba(255, 255, 255, 0.8);
            white-space: nowrap;
        }

        .footer a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .footer a:hover {
            color: rgba(255, 255, 255, 1);
        }
    </style>
</head>

<body>
    <img class="bgimg"
        src="https://cn.bing.com//th?id=OHR.Inisheer_ZH-CN9014668825_1920x1080.jpg&amp;rf=LaDigue_1920x1080.jpg&amp;pid=hp"
        style="opacity: 1;"/>
    <div class="bgcover"></div>
    <div class="loginbox">
        <div class="logo">
            <a href="https://ifile.space" target="_blank">
                <img src="/front/assets/logobig.png" style="width: 110px;"/>
            </a>
        </div>
        <form class="layui-form">
            <input type="text" name="username" class="inputbox" placeholder="请输入用户名/邮箱"/>
            <input type="password" name="password" class="inputbox" placeholder="请输入密码"/>
            <button lay-submit lay-filter="*" class="loginbtn">立即登录</button>
        </form>
    </div>
    <footer class="footer">
        <a href="https://ifile.space" style="margin-right: 10px">IfileSpace 驱动</a>
        <a href="http://beian.miit.gov.cn/" target="_blank">{{.icp}}</a>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;
            var token = window.localStorage.getItem("token");
            $('.inputbox').focus(function () {
                $('.bgimg').addClass("bgcur")
            })
            $('.inputbox').blur(function () {
                $('.bgimg').removeClass("bgcur")
            })
            form.on('submit(*)', function (data) {
                if ($.trim(data.field.username) == '') {
                    layer.msg('请输入账号');
                    $('.inputbox[name=username]').focus()
                    return false
                }
                if ($.trim(data.field.password) == '') {
                    layer.msg('请输入密码');
                    $('.inputbox[name=password]').focus()
                    return false
                }
                $('.loginbtn').html("登录中...").attr('disabled', true)
                $.get("/api/checklogin", data.field, function (res) {

                    if (res.status == 1) {
                        window.localStorage.setItem("token", res.token);
                        document.cookie = "token=" + res.token + ";path=/; expires=" + res
                            .expire;
                        $('.loginbtn').html("立即登录")
                        location.href = "/main"
                    } else {
                        $('.loginbtn').html("立即登录").attr('disabled', false)
                        layer.msg(res.msg)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
            });

            function checktoken() {
                $.ajax({
                    type: "GET",
                    url: "/api/checktoken",
                    beforeSend: function (request) {
                        request.setRequestHeader("Authorization", "Bearer " + token);
                    },
                    success: function (result) {
                        if (result.status == 1) {
                            location.href = "/main"
                        }
                    }
                });
            }
            if (token) {
                checktoken()
            }
        })
    </script>
</body>

</html>