主页更新v4说明

介绍

本次更新主要是对V3版本的整改，大幅度调整了首页的样式，增加了一些组件效果，希望有在使用的朋友可以更新到最新的代码

下载：https://github.com/rcy1314/noisework/releases

夸克：https://pan.quark.cn/s/f709403a22d3

访问配置文档：https://docs.noisework.cn

更新日志： 1.增加页面留言评论板块，可参考我的进行设置，填写邮箱后会自动发送提醒 2.增加增加友情链接模块，常规尺寸下一行为四个友链卡片，手机端为一行两个 3.调整更新home页手机尺寸下侧边弹出栏样式及效果，按钮为固定位置，点击展开侧边后再点击侧边以外任意位置可关闭 4.调整首页整体css样式，避免增多的板块引起混乱 5.调整首页模拟终端加入指定关键词及AI对话等命令，自带加密 6.优化首页头像右下角图标处切换背景图的逻辑 7.增加首页b站收藏夹的组件引入并修复播放不完整问题 8.修改service-worker缓存逻辑 9.去除home页日志组件

如有和最新代码不同可以到git处查看相关代码，修改则以配置文档中的为主 已调整了CSS和JS，和上个版本不通用，还有‼️修改时请将CDN链接改为本地或你自己的链接

调整

详细的请查看配置文档

首页音乐组件

APlayer.min.css调整了定制化代码

.aplayer {
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px;
    box-shadow: 0 2px 2px 0 rgba(36, 35, 35, 0.911), 0 1px 5px 0 rgb(32, 32, 32);
    background-color: #1f1f1ff9;
    border: 2px solid #343437;
    border-radius: 10px; /* 保持这个，用于边框 */
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    position: relative;
    
}


.aplayer * {
    box-sizing: content-box
}

.aplayer svg {
    width: 100%;
    height: 100%
}

.aplayer svg circle,
.aplayer svg path {
    fill: rgb(40, 38, 38)
}

.aplayer.aplayer-withlist .aplayer-info {
    border-bottom: 1px solid #f1eeee00
}

.aplayer.aplayer-withlist .aplayer-list {
    display: block
}

.aplayer.aplayer-withlist .aplayer-icon-order,
.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
    display: inline
}

.aplayer.aplayer-withlrc .aplayer-pic {
    height: 90px;
    width: 90px
}

.aplayer.aplayer-withlrc .aplayer-info {
    margin-left: 90px;
    height: 90px;
    padding: 10px 7px 0
}

.aplayer.aplayer-withlrc .aplayer-lrc {
    display: block
}

.aplayer.aplayer-narrow {
    width: 66px
}

.aplayer.aplayer-narrow .aplayer-info,
.aplayer.aplayer-narrow .aplayer-list {
    display: none
}

.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
    height: 66px;
    width: 66px
}

.aplayer.aplayer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    overflow: visible;
    max-width: 400px;
    box-shadow: none
}

.aplayer.aplayer-fixed .aplayer-list {
    margin-bottom: 65px;
    border: 1px solid rgb(2, 2, 2);
    border-bottom: none
}

.aplayer.aplayer-fixed .aplayer-body {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    background: rgb(12, 12, 12);
    padding-right: 18px;
    transition: all .3s ease;
    max-width: 400px
}

.aplayer.aplayer-fixed .aplayer-lrc {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 98;
    pointer-events: none;
    text-shadow: -1px -1px 0 rgb(14, 13, 13)
}

.aplayer.aplayer-fixed .aplayer-lrc:after,
.aplayer.aplayer-fixed .aplayer-lrc:before {
    display: none
}

.aplayer.aplayer-fixed .aplayer-info {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: all .3s ease;
    border-bottom: none;
    border-top: 1px solid #181717
}

.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
    width: calc(100% - 105px)
}

.aplayer.aplayer-fixed .aplayer-miniswitcher {
    display: block
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
    display: block;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    width: 66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
    -webkit-transform: rotateY(0);
    transform: rotateY(0)
}

.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-lrc,
.aplayer.aplayer-fixed .aplayer-icon-play {
    display: inline-block
}

.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-menu,
.aplayer.aplayer-fixed .aplayer-icon-play {
    position: absolute;
    bottom: 27px;
    width: 20px;
    height: 20px
}

.aplayer.aplayer-fixed .aplayer-icon-back {
    right: 75px
}

.aplayer.aplayer-fixed .aplayer-icon-play {
    right: 50px
}

.aplayer.aplayer-fixed .aplayer-icon-forward {
    right: 25px
}

.aplayer.aplayer-fixed .aplayer-icon-menu {
    right: 0
}

.aplayer.aplayer-arrow .aplayer-icon-loop,
.aplayer.aplayer-arrow .aplayer-icon-order,
.aplayer.aplayer-mobile .aplayer-icon-volume-down {
    display: none
}

.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
    display: block
}

.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.aplayer .aplayer-body {
    position: relative
}

.aplayer .aplayer-icon {
    width: 15px;
    height: 15px;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    opacity: .8;
    vertical-align: middle;
    padding: 0;
    font-size: 12px;
    margin: 0;
    display: inline-block
}

.aplayer .aplayer-icon path {
    transition: all .2s ease-in-out
}

.aplayer .aplayer-icon-back,
.aplayer .aplayer-icon-forward,
.aplayer .aplayer-icon-lrc,
.aplayer .aplayer-icon-order,
.aplayer .aplayer-icon-play {
    display: none
}

.aplayer .aplayer-icon-lrc-inactivity svg {
    opacity: .4
}

.aplayer .aplayer-icon-forward {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.aplayer .aplayer-lrc-content {
    display: none
}

.aplayer .aplayer-pic {
    position: relative;
    float: left;
    height: 66px;
    width: 66px;
    background-size: cover;
    background-position: 50%;
    transition: all .3s ease;
    cursor: pointer
}

.aplayer .aplayer-pic:hover .aplayer-button {
    opacity: 1
}

.aplayer .aplayer-pic .aplayer-button {
    position: absolute;
    border-radius: 50%;
    opacity: .8;
    text-shadow: 0 1px 1px rgba(255, 252, 252, 0.952);
    box-shadow: 0 1px 1px rgb(23, 23, 23);
    background: rgba(17, 17, 17, 0.918);
    transition: all .1s ease
}

.aplayer .aplayer-pic .aplayer-button path {
    fill: rgb(243, 229, 229)
}

.aplayer .aplayer-pic .aplayer-hide {
    display: none
}

.aplayer .aplayer-pic .aplayer-play {
    width: 26px;
    height: 26px;
    border: 2px solid rgb(241, 235, 235);
    bottom: 50%;
    right: 50%;
    margin: 0 -15px -15px 0
}

.aplayer .aplayer-pic .aplayer-play svg {
    position: absolute;
    top: 3px;
    left: 4px;
    height: 20px;
    width: 20px
}

.aplayer .aplayer-pic .aplayer-pause {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    bottom: 4px;
    right: 4px
}

.aplayer .aplayer-pic .aplayer-pause svg {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 12px;
    width: 12px
}

.aplayer .aplayer-info {
    margin-left: 66px;
    padding: 14px 7px 0 10px;
    height: 66px;
    box-sizing: border-box
}

.aplayer .aplayer-info .aplayer-music {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 13px 5px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: default;
    padding-bottom: 2px;
    height: 20px
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 14px
}

.aplayer .aplayer-info .aplayer-music .aplayer-author {
    font-size: 12px;
    color: rgb(240, 230, 230)
}

.aplayer .aplayer-info .aplayer-controller {
    position: relative;
    display: flex
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0 0 0 5px;
    padding: 4px 0;
    cursor: pointer !important;
    flex: 1
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    position: relative;
    height: 2px;
    width: 100%;
    background: #e4e1e1
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgb(255, 253, 253);
    height: 2px;
    transition: all .5s ease
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 2px
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    position: absolute;
    top: 0;
    right: 5px;
    margin-top: -4px;
    margin-right: -10px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: relative;
    right: 0;
    bottom: 4px;
    height: 17px;
    color: rgb(240, 231, 231);
    font-size: 11px;
    padding-left: 7px
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
    vertical-align: middle
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
    cursor: pointer;
    transition: all .2s ease
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
    fill: rgb(241, 237, 237)
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
    margin-right: 2px
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
    fill: rgba(235, 229, 229, 0.647)
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
    display: none
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
    position: relative;
    display: inline-block;
    margin-left: 3px;
    cursor: pointer !important
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
    height: 40px
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
    position: absolute;
    bottom: 15px;
    right: -3px;
    width: 25px;
    height: 0;
    z-index: 99;
    overflow: hidden;
    transition: all .2s ease-in-out
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
    height: 40px
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
    position: absolute;
    bottom: 0;
    
    right: 10px;
    width: 5px;
    height: 35px;
    background: rgb(252, 246, 246);
    border-radius: 2.5px;
    overflow: hidden
}

.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5px;
    transition: all .1s ease
}

.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
    display: none
}

.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
    position: absolute;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite
}

.aplayer .aplayer-lrc {
    display: none;
    position: relative;
    height: 33px;
    text-align: center;
    overflow: hidden;
    margin: -5px 0 7px
}

.aplayer .aplayer-lrc:before {
    top: 0;
    height: 10%;
    background: linear-gradient(180deg, #1e1e1e16 0, hsla(0, 12%, 95%, 0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0)
}

.aplayer .aplayer-lrc:after,
.aplayer .aplayer-lrc:before {
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    width: 100%;
    content: " "
}

.aplayer .aplayer-lrc:after {
    bottom: 0;
    height: 33%;
    background: linear-gradient(180deg, hsla(0, 1%, 15%, 0) 0, rgba(255, 255, 255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0)
    
}

.aplayer .aplayer-lrc p {
    font-size: 12px;
    color: rgb(241, 228, 228);
    line-height: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all .5s ease-out;
    opacity: .4;
    overflow: hidden
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    opacity: 1;
    overflow: visible;
    height: auto !important;
    min-height: 16px
}

.aplayer .aplayer-lrc.aplayer-lrc-hide {
    display: none
}

.aplayer .aplayer-lrc .aplayer-lrc-contents {
    width: 100%;
    transition: all .5s ease-out;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: default
}

.aplayer .aplayer-list {
    overflow: auto;
    transition: all .5s ease;
    will-change: height;
    display: none;
    overflow: hidden
}

.aplayer .aplayer-list.aplayer-list-hide {
    max-height: 0 !important
}

.aplayer .aplayer-list ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: auto
}

.aplayer .aplayer-list ol::-webkit-scrollbar {
    width: 5px
}

.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgb(143, 61, 61)
}

.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
    background-color: rgb(231, 225, 225)
}

.aplayer .aplayer-list ol li {
    position: relative;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    font-size: 12px;
    border-top: 1px solid #222121;
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    margin: 0
}

.aplayer .aplayer-list ol li:first-child {
    border-top: none
}

.aplayer .aplayer-list ol li:hover {
    background: #04040467
}

.aplayer .aplayer-list ol li.aplayer-list-light {
    background: #04040436
}

.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
    display: inline-block
}

.aplayer .aplayer-list ol li .aplayer-list-cur {
    display: none;
    width: 3px;
    height: 22px;
    position: absolute;
    left: 0;
    top: 5px;
    cursor: pointer
}

.aplayer .aplayer-list ol li .aplayer-list-index {
    color: rgb(196, 193, 193);
    margin-right: 12px;
    cursor: pointer
}

.aplayer .aplayer-list ol li .aplayer-list-author {
    color: rgb(221, 218, 218);
    float: right;
    cursor: pointer
}

.aplayer .aplayer-notice {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 12px;
    border-radius: 4px;
    padding: 5px 10px;
    transition: all .3s ease-in-out;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
    background-color: #f0e5e5;
    color: #909399
}

.aplayer .aplayer-miniswitcher {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: #242222;
    width: 18px;
    border-radius: 0 2px 2px 0
}

.aplayer .aplayer-miniswitcher .aplayer-icon {
    height: 100%;
    width: 100%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: all .3s ease
}

.aplayer .aplayer-miniswitcher .aplayer-icon path {
    fill: rgb(241, 235, 235)
}

.aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
    fill: rgb(248, 240, 240)
}

@-webkit-keyframes aplayer-roll {
    0% {
        left: 0
    }

    to {
        left: -100%
    }
}

@keyframes aplayer-roll {
    0% {
        left: 0
    }

    to {
        left: -100%
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important
}

/*# sourceMappingURL=APlayer.min.css.map*/

首页B站收藏夹

Html引入代码

<!-- B站收藏-->
                    <div class="work">
                        <h2 class="chtitle"><span>B站</span>收藏夹</span></h2>
                        <div class="bilibiliindex" style="background-color: #1e1d1dce; height: 25vh;">
                            <div class="bilibilititle-left">
                                <img src="./assets/r1.png" alt="B站收藏夹" class="zoominimage">
                            </div>
                            <iframe src="https://www.noisework.cn/e/bili/index.html?id=3271958393" style="width: 70%; height: 100%; border: none; "></iframe>
                            <div class="bilibilititle-right">
                                <img src="./assets/r3.png" alt="等你来观看" class="zoominimage">
                            </div>
                        </div>
		        	<!-- B站收藏结束-->

CSS代码

/* 引入B站收藏 */
.bilibiliindex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #323232;
    border: 2px solid #212020;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(46, 45, 45, 0.5);
}

.bilibilititle-left, .bilibilititle-right {
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 20%; /* 宽度可以调整，以适应你的布局 */
    margin: 0 10px; /* 左右边距 */
    flex-direction: column; /* 垂直排列 */
}

.bilibilititle-left img, .bilibilititle-right img {
    width: 100%; /* 设置图片宽度为100%，以填充容器 */
    height: auto; /* 保持图片原始高度 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

.bilibilititle-left img:hover, .bilibilititle-right img:hover {
    transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
}

首页终端V2.2

主要增加加密关键词回复及加密的AI对话请求

关键词部分

‘示例关键词’: ‘base64编码’

加密后会是’你好’: ‘5L2g5aW9’,

AI部分

对话请求的是api请求，因此你需要自己配置自己需要的API地址，这里说明下加密方式

加密为AES加密

参考：

const encryptedApiKey = ‘加密后的编码’;

const passphrase = ‘你的加密密钥’;

代码：

(function() {
    /* 配置区首 */
    /* 文件结构 */
    let index = {
        'games': {
            'newGame.js': '正在准备中。'
        },
        'home': {
            'docs': {
                'easterEgg.txt': '很高兴你在这里找到了它。'
            }
        }
    };
    
    function base64Encode(str) {
        return btoa(unescape(encodeURIComponent(str)));
    }

    function base64Decode(str) {
        return decodeURIComponent(escape(atob(str)));
    }

    /* 关键词和回复 */
    const keywordResponses = {    
        /* '示例关键词': 'base64编码',  */
        '你好': base64Encode('你好！很高兴见到你。'),
        '帮助': base64Encode('你可以输入 <span style="color: #ffbc00">help</span> 查看常规命令列表。'),
        '彩蛋': base64Encode('这是一个彩蛋版本！希望你喜欢！')
    };

    /* 命令历史 */
    let line = 0;
    let his = ['哈哈，你找到了。'];
    /* 命令行元素 */
    let container = document.getElementById('terminal');
    /* 初始路径和初始当前文件夹 */
    let route = '~';
    let folder = index;
    /* 命令定义 */
    let command = {
        'test': {
            'fun': test,
            'help': '用法: test [-a] [-b] [-c] [-h]<br>-a -b -c: 测试参数<br>-h: 显示帮助信息。',
            'parameters': ['-h', '-a', '-b', '-c'],
            'nap': 0
        },
        'cd': {
            'fun': cmcd,
            'help': '用法: cd [目录] [-h]<br>目录: 文件或文件夹的路径。<br>-h: 显示帮助信息。',
            'parameters': ['-h'],
            'nap': 1
        },
        'help': {
            'fun': cmhelp,
            'help': '',
            'parameters': [],
            'nap': 0
        },
        'visit': {
            'fun': cmvisit,
            'help': '用法: visit [网址] [-h]<br>网址: 要访问的网址。<br>-h: 显示帮助信息。',
            'parameters': ['-h'],
            'nap': 1
        },
        'douyin': {
            'fun': cmdouyin,
            'help': '用法: douyin [链接] [-h]<br>链接: 抖音/快手客户端分享连接、抖音Web直播连接。<br>-h: 显示帮助信息。',
            'parameters': ['-h'],
            'nap': 1
        },
        'AI': {
            'fun': aiResponse,
            'help': '用法: /AI [你的问题]',
            'parameters': [],
            'nap': 0
        }
    };
    /* 配置区尾 */
    
    function enter() {
        terminal.scrollTop = 10000;
        var event = window.event || event;
        if (event.keyCode == 13) {
            print(head.innerHTML + input.value);
            var com = input.value.split(' ').filter(i => i != '');
    
            // 检查以 / 开头的命令
            if (com[0].startsWith('/')) {
                const commandName = com[0].substring(1); // 去掉前面的 '/'
                if (commandName in command) {
                    command[commandName]['fun'](com.slice(1));
                } else {
                    print('未找到命令: ' + input.value, 'error');
                }
            } else if (keywordResponses[com[0]]) {
                // 解码Base64
                const response = base64Decode(keywordResponses[com[0]]);
                print(response, 'message');
            } else {
                print('未找到命令: ' + input.value, 'error');
            }
            update();
        } else if (event.keyCode == 38 && line > 0) {
            line -= 1;
            input.value = his[line];
        } else if (event.keyCode == 40 && line < his.length - 1) {
            line += 1;
            input.value = his[line];
        }
    }
    

    /* 打印内容 */
    function print(text, type = 'normal') {
        var p = document.createElement('p');
        p.innerHTML = text;
        p.className = type;
        context.appendChild(p);
    }

    /* 更新头部信息 */
    function update() {
        his.splice(his.length - 2, 0, input.value);
        head.innerHTML = headb + route + heada;
        line = his.length - 2;
        input.value = his[line];
        terminal.scrollTop = 10000;
    }

    /* 解析参数 */
    function analysis(array, com) {
        var parameters = command[com]['parameters'];
        var result = [];
        var arr = [];
        for (i in parameters) {
            result[i] = 0;
        }
        if (array[0] == undefined) {
            return false;
        }
        var num = command[com]['nap'];
        for (let i = 0; i < array.length; i++) {
            if (parameters.includes(array[i])) {
                result[parameters.indexOf(array[i])] = 1;
            } else if (0 != num) {
                num -= 1;
                arr[arr.length] = array[i];
            } else {
                print('未知参数: ' + array[i], 'error');
                return 'error';
            }
        }
        return [result, array];
    }

    /* 路径查找 */
    function find(rou) {
        if (rou.split('/')[0] in index) {
            if (rou[0] != '~') {
                rou = '~/' + rou;
            }
        } else {
            rou = route + '/' + rou;
        }
        var ind = index;
        var router = rou.split('/');
        for (var i = 1; i < router.length; i++) {
            if (router[i] in ind) {
                ind = ind[router[i]];
            } else {
                return [false, rou];
            }
        }
        return [ind, rou];
    }

    /* 遍历打印 */
    function printObj(obj, type = 'o') {
        var text = '';
        if (type == 'o') {
            for (i in obj) {
                text += i + '&nbsp;';
            }
        } else {
            for (i in obj) {
                console.log(obj[i]);
                text += obj[i] + '&nbsp;';
            }
        }
        return text;
    }

    /* 执行函数 */
    function test(text) {
        var result = analysis(text, 'test');
        if (result == false) {
            print('Hello, world!', 'italic');
        } else if (result != 'error') {
            if (result[0][0] == 1) {
                print(command['test']['help'], 'message');
            } else {
                print(printObj(result[0], 'a'), 'message');
            }
        }
    }

    function cmhelp(text) {
        var result = analysis(text, 'help');
        if (result == false) {
            print(printObj(command), 'message');
        }
    }

    function cmcd(text) {
        var res1 = analysis(text, 'cd');
        if (res1 == false) {
            route = '~';
            folder = index;
        } else if (res1 != 'error') {
            if (res1[0][0] == 1) {
                print(command['cd']['help'], 'message');
            } else {
                var res2 = find(res1[1][0]);
                if (res2[0] == false) {
                    print('没有这个文件或目录: ' + res2[1], 'error');
                } else if (typeof (res2[0]) == 'string') {
                    print('这是一个文件: ' + res2[1], 'error');
                } else {
                    route = res2[1];
                    folder = res2[0];
                }
            }
        }
    }

    function cmvisit(text) {
        var res1 = analysis(text, 'visit');
        if (res1[0] == -3) {
            print('没有提供参数', 'error');
        } else if (res1 != 'error') {
            if (res1[0][0] == 1) {
                print(command['visit']['help'], 'message');
            } else {
                var url = res1[1][0];
                print('正在访问网址: ' + url);
                window.open(url, '_blank');
            }
        }
    }

    function enter() {
        terminal.scrollTop = 10000;
        var event = window.event || event;
        if (event.keyCode == 13) {
            print(head.innerHTML + input.value);
            var com = input.value.split(' ').filter(i => i != '');
            if (com[0].startsWith('/')) {
                const commandName = com[0].substring(1); 
                if (commandName in command) {
                    command[commandName]['fun'](com.slice(1));
                } else {
                    print('未找到命令: ' + input.value, 'error');
                }
            } else if (com[0] in command) {          
                command[com[0]]['fun'](com.slice(1));
            } else if (keywordResponses[com[0]]) {
                const response = base64Decode(keywordResponses[com[0]]);
                print(response, 'message');
            } else {
                print('未找到命令: ' + input.value, 'error');
            }
            update();
        } else if (event.keyCode == 38 && line > 0) {
            line -= 1;
            input.value = his[line];
        } else if (event.keyCode == 40 && line < his.length - 1) {
            line += 1;
            input.value = his[line];
        }
    }
    
    
    function cmdouyin(text) {
        if (!text || text.length === 0) {
            print('没有提供参数', 'error');
            return;
        }
    
        // 合并输入数组为单个字符串
        var inputText = text.join(' ');
    
        // 正则表达式匹配 Douyin 链接
        var douyinLinkRegex = /https:\/\/v\.douyin\.com\/[^\s]+/;
        var match = inputText.match(douyinLinkRegex);
    
        if (!match) {
            print('未找到有效的抖音链接', 'error');
            return;
        }
    
        var url = match[0]; // 提取到的抖音链接
        print('识别到的抖音链接: ' + url);
    
        // 构建 API 请求 URL
        var apiUrl = 'https://api.pearktrue.cn/api/video/douyin?url=' + encodeURIComponent(url);
        print('正在获取抖音视频: ' + apiUrl);
    
        fetch(apiUrl, {
            method: 'GET', // 使用 GET 请求
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                var videoUrl = data.data.url;
                print('获取到的视频地址: ' + videoUrl);
                window.open(videoUrl, '_blank');
            } else {
                print('获取视频失败: ' + data.msg, 'error');
            }
        })
        .catch(error => {
            print('获取视频失败: ' + error, 'error');
        });
    }
    

    /* AI 响应函数 */
    function decryptApiKey(encryptedKey, passphrase) {
        const decrypted = CryptoJS.AES.decrypt(encryptedKey, passphrase);
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
    
    // 使用解密后的 API 密钥
    async function aiResponse(text) {
        if (text.length === 0) {
            print("请问你想问什么？", 'message');
            return;
        }
        
        const userInput = text.join(' ');
        print("正在获取AI回复...", 'message');
    
        // 解密 API 密钥，自己修改
        const encryptedApiKey = '加密后的编码';
        const passphrase = '你的密钥';
        const apiKey = decryptApiKey(encryptedApiKey, passphrase);
    
        const apiUrl = 'https://openai.com/v1/chat/completions'; //改为你的API调用地址
    
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                model: 'gpt-3.5-turbo', // 或者使用其他模型
                messages: [{ role: 'user', content: userInput }]
            })
        });
    
        if (!response.ok) {
            print('AI 请求失败: ' + response.statusText, 'error');
            return;
        }
    
        const data = await response.json();
        const aiReply = data.choices[0].message.content;
        print(aiReply, 'message');
    }
    

    /* 初始化 */
    let headb = '[<span class="g">guest</span>@浏览器<span class="b">';
    let heada = '</span>]<span class="d">$</span> ';
    let terminal = document.createElement('div');
    terminal.className = 'terminal';
    let context = document.createElement('div');
    context.className = 'context';
    let head = document.createElement('span');
    head.className = 'head';
    head.innerHTML = '错误';
    let input = document.createElement('input');
    input.className = 'input';
    input.onkeydown = enter;
    terminal.appendChild(context);
    terminal.appendChild(head);
    terminal.appendChild(input);
    container.appendChild(terminal);
    update();
    print("欢迎来到模拟终端！（彩蛋版本 :2.2）", 'warning');
    print('输入 <span style="color: #ffbc00">help</span> 查看常规命令列表。增加输入 <span style="color: #ffbc00">关键词</span> 可查看指定关键词回复列表，输入 <span style="color: #ffbc00">douyin（必须有空格）视频地址</span> 可解析该视频。输入 <span style="color: #ffbc00">/AI（必须为大写且有空格）你的问题</span> 可进行AI问答，输入 <span style="color: #ffbc00">visit 空格 网址</span> 可前往该地址（必须包含https://）', 'warning');
})();

首页社交媒体卡片微调

主要针对放的网址少量时对布局的变化影响，手机尺寸下会自适应

.find .item {
    position: relative;
    height: 80px;
    line-height: 80px;
    transition: all .2s;
    overflow: hidden;
    opacity: 1;
    border-radius: 10px;
	box-shadow: 0 6px 12px -3px var(--color);
}
.item span{
	position: absolute;
	left: 30px;
	letter-spacing:.1em;
	font-weight: bold;
}
.find .item .inner {
    position: relative;
    z-index: 5;
	height: 80%;
}
.find .item .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    transition: all .15s;
    height: 100%;
}
.find .item i {
    font-size: 80px;
    position: absolute;
    right: 10px;
    bottom: -20px;
    color: rgba(255, 255, 255, 0.35);
    transition: 0.6s;
	filter: blur(10px);
}
.find a:hover i{
	bottom: 0;
	font-size: 35px;
	color: #fff;
	right: 20px;
	filter: blur(0px);
}
.find .item span {
    display: inline-block;
    width: 80px;
    font-size: 19px;
	color: rgba(255, 255, 255, 0.6);
	transition: 0.3s;
}
.find .item:hover span{
	color: white;
	transition: 0.6s;
}

和V3及以前的对比

友情链接

下载后包含已调整过的waline.css文件

HTML中bady处添加

首页html在评论区上方添加代码并修改链接

<!-- 友情链接 -->
                <div class="work">
                    <h2 class="chtitle"><span>友情</span>链接</span></h2>
                    <div class="friendcardindex">
                        <div class="friendlinks-container">
                            <div class="friendlinks-card">
                                <div class="avatar">
                                    <a href="https://rcy1314.github.io/Idea/">
                                        <img alt="" loading="lazy" decoding="async"
                                            src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/43w.jpeg">
                                    </a>
                                </div>
                                <div class="info">
                                    <a class="friendname" target="_blank" href="https://rcy1314.github.io/Idea/">idea book</a>
                                    <p class="frienddescription">旧的专栏</p>
                                </div>
                            </div>
                            <div class="friendlinks-card">
                                <div class="avatar">
                                    <a href="#">
                                        <img alt="" loading="lazy" decoding="async"
                                            src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/33s.jpeg">
                                    </a>
                                </div>
                                <div class="info">
                                    <a class="friendname" target="_blank" href="#">待添加</a>
                                    <p class="frienddescription">未来可期</p>
                                </div>
                            </div>
                            <div class="friendlinks-card">
                                <div class="avatar">
                                    <a href="#">
                                        <img alt="" loading="lazy" decoding="async"
                                            src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/43e.jpeg">
                                    </a>
                                </div>
                                <div class="info">
                                    <a class="friendname" target="_blank" href="#">待添加</a>
                                    <p class="frienddescription">未来可期</p>
                                </div>
                            </div>
                            <div class="friendlinks-card">
                                <div class="avatar">
                                    <a href="#">
                                        <img alt="" loading="lazy" decoding="async"
                                            src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/335r.jpeg">
                                    </a>
                                </div>
                                <div class="info">
                                    <a class="friendname" target="_blank" href="#">待添加</a>
                                    <p class="frienddescription">未来可期</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </br>

home页html在评论区上方添加并修改链接

<!-- 友情链接 -->
				<div class="title"><i class="fa-solid fa-user-plus"></i>友情链接</div>
				<div class="friendcardbg">
					<div class="friendlinks-container">
						<div class="friendlinks-card">
							<div class="avatar">
								<a href="https://rcy1314.github.io/Idea/">
									<img alt="" loading="lazy" decoding="async"
										src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/43w.jpeg">
								</a>
							</div>
							<div class="info">
								<a class="friendname" target="_blank" href="https://rcy1314.github.io/Idea/">idea book</a>
								<p class="frienddescription">旧的专栏</p>
							</div>
						</div>
						<div class="friendlinks-card">
							<div class="avatar">
								<a href="#">
									<img alt="" loading="lazy" decoding="async"
										src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/33s.jpeg">
								</a>
							</div>
							<div class="info">
								<a class="friendname" target="_blank" href="#">待添加</a>
								<p class="frienddescription">未来可期</p>
							</div>
						</div>
						<div class="friendlinks-card">
							<div class="avatar">
								<a href="#">
									<img alt="" loading="lazy" decoding="async"
										src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/43e.jpeg">
								</a>
							</div>
							<div class="info">
								<a class="friendname" target="_blank" href="#">待添加</a>
								<p class="frienddescription">未来可期</p>
							</div>
						</div>
						<div class="friendlinks-card">
							<div class="avatar">
								<a href="#">
									<img alt="" loading="lazy" decoding="async"
										src="https://jsd.cdn.noisework.cn/gh/rcy1314/tuchuang@main/uPic/335r.jpeg">
								</a>
							</div>
							<div class="info">
								<a class="friendname" target="_blank" href="#">待添加</a>
								<p class="frienddescription">未来可期</p>
							</div>
						</div>
					</div>
				</div>

两个页面head处添加

<link rel="stylesheet" href="./css/friendlink.css">

引入的friendlink.css文件为（已添加注释）

.friendcardindex {
    background: rgba(34, 33, 33, 0.971); /* 圆弧透明黑色背景 */
    border-radius: 20px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
}
.friendcardbg {
    background: rgba(34, 33, 33, 0); /* 圆弧透明黑色背景 */
    border-radius: 20px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
}
.friendlinks-container {
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 卡片之间的间距 */
}

.friendlinks-card {
    flex: 1 1 auto; /* 设置为自动宽度，根据剩余空间自动调整 */
    width: calc(100% + 20px);
    max-width: calc(25% - 15px); /* 最大宽度为四分之一 */
    padding: 10px;
    background: rgba(29, 28, 28, 0.376); /* 透明黑色背景 */
    border-radius: 15px; /* 圆角边框 */
    overflow: hidden; /* 溢出隐藏 */
    text-align: center; /* 中心对齐 */
    transition: transform 0.3s, box-shadow 0.3s; /* 卡片放大效果与阴影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 初始阴影 */
}
.avatar img {
    /* 头像样式 */
    width: 80px;
    height: 80px; /* 设置头像高度 */
    border-radius: 50%; /* 头像圆角 */
    margin-bottom: 6px; /* 头像和文字之间的间距 */
    object-fit: cover; /* 确保头像图片保持圆形 */
    border: 2px solid #ffffff; /* 白色边框 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 发光效果 */
    transition: transform 0.5s; /* 头像旋转效果 */
}

.avatar:hover img {
    transform: rotate(360deg); /* 鼠标悬停时头像旋转 */
}

.info {
    /* 信息样式 */
    margin-top: 3px; /* 增加顶部间距 */
}

.friendname {
    /* 姓名样式 */
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.005em; /* 增大字体 */
    transition: color 0.3s; /* 姓名颜色过渡 */
}

.friendname:hover {
    color: #00e6e6; /* 鼠标悬停时的颜色变化 */
}

.frienddescription {
    /* 描述样式 */
    color: #dddddd;
    font-size: 0.9em; 
    margin-top: 3px; /* 描述与姓名之间的间距 */
    overflow: hidden; /* 隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 当内容超出时显示省略号 */
    white-space: nowrap; /* 禁止换行 */
}

/* 鼠标悬停效果 */
.friendlinks-card:hover {
    transform: scale(1.05); /* 卡片放大效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 悬停时的阴影 */
}


/* 媒体查询：针对手机尺寸 */
@media (max-width: 800px) {
    .friendlinks-container {
        flex-wrap: wrap; /* 允许换行 */
        gap: 20px; /* 卡片之间的间距 */
    }
    .friendlinks-card {
        flex: 1 1 calc(50% - 15px); /* 设置为固定宽度，即使少于四个卡片也能保持相同大小 */
        max-width: calc(50% - 15px); /* 最大宽度为一半 */
    }
}
/* 媒体查询：针对小尺寸 */
@media (max-width: 240px) {
    .friendlinks-card {
        flex: 1 1 calc(100% - 15px); /* 在极小屏幕上每行显示一个卡片 */
        max-width: calc(100% - 15px); /* 最大宽度为屏幕宽度 */
    }
}

根据自己需要进行调整

留言

请先查看官方指南：https://waline.js.org

首页html

 <!-- 评论区 -->
        <div class="work">
            <h2 class="chtitle"><span>留言</span>评论</span></h2>
        <div class="rommentindex">
        <div id="waline"></div>

home页html

<!-- 评论区 -->
			<div class="title"><i class="fa-solid fa-comment"></i>
			</svg>留言评论</div>
			<div class="romment">
			<div id="waline"></div>

head处添加

<link rel="stylesheet" href="./css/waline.css"/>

页脚处添加

<!-- 引入评论 -->		
<script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
    init({
      el: '#waline',
      serverURL: 'https://ment.noisework.cn', //改为你的服务端地址
	  meta: ['nick','mail','link'],
      requiredMeta: ['mail','nick'],
      pageview: true,
      search: true,
      wordLimit: 50,
      pageSize: 5,
      avatar: 'monsterid',
	  emoji: [
             'https://unpkg.com/@waline/emojis@1.2.0/tieba',
         ],
         //禁止图片上传按钮
         imageUploader: false,
         //不显示版权标志
         copyright: false,
     });
  </script>