Alist美化汇总

马春杰杰

2年 ago

记录一下我自用的美化代码：

1 自定义底部日期

自定义内容：

<!--开站时间开始-->       
<center>
<br />
<div style="background-color: #eee;width: 400px;border-radius: 20px;">
<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("6/14/2017 10:28:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script>
<span id="runtime_span"></span>
</div>

2 自定义背景

/*  整理的随机API图片站点

    樱花：https://www.dmoe.cc
    夏沫：https://cdn.seovx.com
    搏天：https://api.btstu.cn/doc/sjbz.php
    姬长信：https://github.com/insoxin/API
    小歪：https://api.ixiaowai.cn/
    保罗：https://api.paugram.com
    墨天逸：https://api.mtyqx.cn
    岁月小筑：https://img.xjh.me
    东方Project：https://img.paulzzh.com
*/

自定义头部：

<!--自定义背景-->
<style>
/*白天背景图*/
.hope-ui-light{
  background-image: url("https://ypyssl.machunjie.com/machunjie/20230103152433-458.png_machunjie.png") !important;
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}

3 透明选项

自定义头部：

/*主列表夜间模式透明，50%这数值是控制透明度大小的*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*readme夜间模式透明，50%这数值是控制透明度大小的*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*主列表透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.9) !important;
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.9) !important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}

4 首页验证码

一般不建议添加，影响用户体验。

自定义内容：

// 密码可自行对接其他API
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script>
    let password = "39834";
    if (localStorage.getItem('pan_password') == password) {

    } else {
        checkPassword("success", "输入密码进入")
    }

    function checkPassword(ic, ti) {
        swal({
                title: "免责申明",
                text: "\n本站所展示内容均收集于网络\n\n仅供本人学习研究及收藏存档\n如有侵犯权益，敬请联系删除\n公众号：巴拉巴拉(假的)\n回复【验证码】获取密码",
                closeOnConfirm: false,
                closeOnClickOutside: false,
                icon: ic,
                button: {
                    text: "确认",
                },
                content: {
                    element: "input",
                    attributes: {
                        placeholder: "Type your password",
                        type: "password",
                    },
                },
            })
            .then((value) => {
                if (value == '') {
                    checkPassword("warning", "请输入正确的密码");
                } else if (value == password) {
                    swal("欢迎！", {
                        button: false,
                    });
                    localStorage.setItem("pan_password", value);
                } else {
                    checkPassword("warning", "密码错误");
                }
            });

    }
</script>

5 访问量

自定义内容：

<!-- 访问量 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<br />
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次

6 留言板

自定义头部：

<script src='https://unpkg.com/valine/dist/Valine.min.js'></script>

/*以下为评论系统专用*/
/*适配大小契合度*/
.newValine{
width: min(96%, 940px);
flex-direction: column;
 row-gap: var(--hope-space-2);
 border-radius: var(--hope-radii-xl);
 padding: var(--hope-space-2);
 box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
.hope-ui-light .newValine{
background-color: rgba(255, 255, 255, 0.8) !important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .newValine{
background-color:rgb(0 0 0 / 80%) !important;
}
/*输入栏里面跳舞的小人背景图*/
.vedit{
    background-image:url(https://cdn.jsdelivr.net/gh/anwen-anyi/imgAnwen/images/OuNiJiang.gif); 
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right bottom;
    transition:all 0.25s ease-in-out 0s;
    }
    textarea#comment-textarea:focus{
    background-position-y:120px;
    transition:all 0.25s ease-in-out 0s;
}

自定义内容：

    <!--评论模块还有下面的script也是-->
    <center>
        <div class="newValine" id="vcomments"></div>
    </center>
    <script>
    new Valine({
        visitor: true,
        el: '#vcomments',
        avatar: 'wavatar',
        appId: 'DAZ2yym4QtirEi7Bsije4Nso-gzGzo',
        appKey: 'RnltvMoRDO1ycOgkkojLm',
        placeholder: "有什么问题欢迎评论区留言~么么哒"
    })
    </script>

邮件通知：

Alist配合leancloud实现评论以及邮件通知

Alist安装见： Alist美化：邮件通知：打开leancloud 云引擎–>部署–>git部署，填写github仓库网址，然后部署 1 部署修改版该版本需...

时间:2023/1/3 分类:建站 人气:3295 评论:10

7 延迟加载

自定义内容：

<center>
    <br />
    <!--延迟加载-->
    <!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
    <div id="customize" style="display: none;">
    延迟加载内容
    </div>


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

8 渐变色背景

<!-- head -->

<style>
/*渐变背景CSS */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
</style>


<!-- body -->

<!-- 渐变背景初始化 -->
<canvas id="canvas-basic"></canvas> 
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#a18cd1', '#fbc2eb'],
                 ['#fff1eb', '#ace0f9'],
                 ['#d4fc79', '#96e6a1'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#a8edea', '#fed6e3'],
                 ['#9890e3', '#b1f4cf'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#fff1eb', '#ace0f9']
           
            ]
        }
    }
});
</script>

9 修改字体

中文：思源宋体

英文：Source Code Pro

<!-- head -->

<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Source+Code+Pro">
<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Noto+Serif+SC">
<style type="text/css">
    div{font-family: 'Source Code Pro','Noto Serif SC';}
    span{font-family: 'Source Code Pro','Noto Serif SC';}
    a{font-family: 'Source Code Pro'，'Noto Serif SC';}
</style>

10 右上角天气

在公告处填写：

<iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>

样式：

本文最后更新于2023年12月28日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

赞一个 (332)收藏 (0)