让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题
让ai帮我写了一个页面-WordPress主题模板-zibll子比主题

让ai帮我写了一个页面

xhjoyb徽章-初出茅庐-WordPress主题模板-zibll子比主题等级-LV5-WordPress主题模板-zibll子比主题12天前更新
1571

作为《我的世界》的一名普通玩家，我一直渴望有一个能够展示我所喜爱的服务器和社区的页面。在这个旅程中，我选择了依赖AI的力量，全程由AI帮我编写了一个展示服务器信息的网页代码。然而，我并不是程序员、不会写代码导致了很多初衷无法实现。比如在网页上实现物品购买，直接将物品添加到我的世界游戏背包中，但这种想法终究停留在理想之中。

效果预览：

图片[1]-让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题

 

图片[2]-让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题

图片[3]-让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题

 

图片[4]-让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题

可以用来当我的世界服务器官方页面。展示我的世界服务器的一些情况，分发对应的客户端等。

在这个页面时，主要分为以下几个区块

  1. 服务器信息展示：玩家可以实时查看服务器的在线人数、服务器状态等信息。这些数据的展示能够帮助玩家及时了解服务器的活跃情况，并决定是否加入游戏。

  2. 主要成员展示：服务器的核心成员展示区，让玩家认识到幕后团队的努力，增加了服务器的可信度和社区凝聚力。

  3. 资源下载区：跳转网盘分发一些常用的材质包，存档备份等。

  4. 客户端区：提供与服务器对应的客户端下载，如基岩版1.21.1.03。

  5. 玩家社区与论坛介绍：跳转子比主题自带的论坛，主要就是做一个社区介绍的。

  6. 教程区：配合子比文章

  7. 精彩片段（宣传图）：用于展示服务器内的特色图片，提升玩家对于游玩的兴趣。

这个只支持获取基岩版服务器的信息。

一、对Api调用的结果设置缓存时间：43行。

// 将结果缓存1分钟：防止频繁调用API影响页面加载速度，可根据实际情况更改60。
        set_transient($cache_key, $server_status_html, 60);

 

三、隐藏自带的黑白主题切换。

/* 针对页面ID为1842的页面隐藏 toggle-theme 元素 */
body.page-id-1842 a.toggle-theme.toggle-radius {
    display: none;
}

因为在页面创建了我的世界风格的切换黑白夜按钮，所以我觉得把主题自带的黑白切换按钮隐藏掉会更佳。把这个代码放到自定义css里。如下图。需要更改id为你创建的页面id。

图片[5]-让ai帮我写了一个页面-建站综合交流社区-WordPress-WordPress主题模板-zibll子比主题

完整页面代码：

<?php
/*
Template Name: Minecraft Server Page
*/
get_header(); // WordPress 头部调用

// 查询 Minecraft 基岩版服务器状态的函数，使用 mcsrvstat.us API
function query_minecraft_bedrock_server($host, $port = 19132) {
    $cache_key = "mc_server_status_{$host}_{$port}";
    $cached_data = get_transient($cache_key);

    if ($cached_data !== false) {
        return $cached_data; // 返回缓存的结果
    }

    $api_url = "https://api.mcsrvstat.us/bedrock/3/{$host}:{$port}";
    $response = wp_remote_get($api_url, array('timeout' => 10)); // 设置超时时间为10秒

    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        return "<div class='server-error'>无法获取服务器响应。错误信息：{$error_message}</div>";
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);

    if (isset($data['online']) && $data['online']) {
        $motd = implode("<br>", $data['motd']['clean']);
        $version = $data['version'];
        $players = $data['players']['online'] . " / " . $data['players']['max'];
        $gamemode = $data['gamemode'];
        $map = $data['map']['clean'];

        $server_status_html = "
            <div class='server-status-module'><strong>MOTD:</strong> {$motd}</div>
            <div class='server-status-module'><strong>版本:</strong> {$version}</div>
            <div class='server-status-module'><strong>当前在线:</strong> {$players}</div>
            <div class='server-status-module'><strong>游戏模式:</strong> {$gamemode}</div>
            <div class='server-status-module'><strong>地图:</strong> {$map}</div>
            <button id='login-mc-button' class='btn'>登录MC</button> <!-- 新增登录MC按钮 -->
        ";

        // 将结果缓存1分钟
        set_transient($cache_key, $server_status_html, 60);

        return $server_status_html;
    } else {
        return "<div class='server-error'>服务器目前离线或无法获取数据。</div>";
    }
}

?>

<!-- 主容器，包含侧边栏和主要内容区域 -->
<div class="mc-container">
    <!-- 侧边栏（仅在桌面端显示） -->
    <aside class="mc-sidebar">
        <!-- 服务器主要成员展示 -->
        <section class="player-leaderboard mc-card">
            <h2>服务器建设者</h2>
            <table class="leaderboard-table">
                <thead>
                    <tr>
                        <th>玩家</th>
                        <th>职位</th>
                        <th>技能</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>小辉joyb_</td>
                        <td>服主</td>
                        <td>插件配置</td>
                    </tr>
                    <tr>
                        <td>暂无</td>
                        <td>管理员</td>
                        <td>眼睛毒辣</td>
                    </tr>
                    <tr>
                        <td>暂无</td>
                        <td>建筑大师</td>
                        <td>掌握古风建筑</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- 更新记录与公告 -->
        <section class="updates-announcements mc-card">
            <div class="announcements-header">
                <h2>游玩公告</h2>
                <button id="rules-button" class="rules-btn">游玩规则</button>
                <button id="commands-button" class="commands-btn">指令集</button>
            </div>
            <ul class="updates-list">
                <li>服务器于8月31日正式开启</li>
                <li>服务器地址为mc.joyb.sbs</li>
                <li>服务器端口为19132</li>
            <h2>更新记录</h2>
                <li>加入音乐插件</li>
            </ul>
        </section>

        <!-- 自定义内容区块（白天模式显示） -->
        <section class="custom-content-day mc-card custom-bg" style="display: none;">
        <!-- 调用我注册的音乐简码 -->
            <?php echo do_shortcode('[xh_ecy_music width="300px" height="150px" audio_src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240821175133518-%E7%A0%B4%E8%8C%A7-%E5%BC%A0%E9%9F%B6%E6%B6%B5.mp3" video_src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902110934120-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E5%A4%A7%E6%88%98%E8%A7%86%E9%A2%91.mp4"]'); ?>
        </section>

        <!-- 自定义内容区块（夜间模式显示） -->
        <section class="custom-content-night mc-card custom-bg">
            <h2>其它相关信息</h2>
            <p>QQ群：暂未创建</p>
            <p>邮箱：xiaohui@joyb.sbs</p>
        </section>
    </aside>

    <!-- 主要内容区域 -->
    <div class="mc-content">
        <!-- 服务器状态 -->
        <section class="server-status mc-card">
            <div class="card-header">
                <h2>服务器状态</h2>
                <a href="javascript:void(0);" class="toggle-theme" id="toggle-theme">切换到日间模式</a>
            </div>
            <div id="server-status-display" class="server-status-info">
                <!-- 显示加载动画 -->
                <div id="loading-animation" class="loading-animation">加载中...</div>
                <!-- 调用服务器状态查询函数 -->
                <?php 
                    $server_status_html = query_minecraft_bedrock_server('47.113.116.147', 19132);
                    echo "<script>
                            document.getElementById('loading-animation').style.display = 'none';
                          </script>";
                    echo $server_status_html;
                ?>
            </div>
        </section>

        <!-- 在手机端显示服务器主要成员和动态更新与公告 -->
        <section class="player-leaderboard mc-card mobile-only">
            <h2>服务器建设者</h2>
            <table class="leaderboard-table">
                <thead>
                    <tr>
                        <th>玩家</th>
                        <th>职位</th>
                        <th>技能</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>小辉joyb_</td>
                        <td>服主</td>
                        <td>插件配置</td>
                    </tr>
                    <tr>
                        <td>暂无</td>
                        <td>管理员</td>
                        <td>眼睛毒辣</td>
                    </tr>
                    <tr>
                        <td>暂无</td>
                        <td>建筑大师</td>
                        <td>掌握古风建筑</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section class="updates-announcements mc-card mobile-only">
            <ul class="updates-list">
            <h2>最新公告</h2>
                <li>服务器于8月31日正式开启</li>
                <li>服务器地址为mc.joyb.sbs</li>
                <li>服务器端口为19132</li>
            <h2>更新记录</h2>
                <li>加入音乐插件</li>
            </ul>
        </section>

        <!-- 资源下载 -->
        <section class="resources-download mc-card">
            <h2>资源下载</h2>
            <div class="resource-items">
                <div class="resource-item server-archive-bg">
                    <h3>服务器存档</h3>
                    <a href="#" class="btn btn-secondary">下载</a>
                </div>
                <div class="resource-item texture-pack-bg">
                    <h3>同款材质包</h3>
                    <a href="https://www.123pan.com/s/9BZ3jv-E87UA" class="btn btn-secondary">下载</a>
                </div>
            </div>
        </section>

        <!-- 客户端下载区块 -->
        <section class="client-download mc-card">
            <h2>客户端下载</h2>
            <div class="client-items">
                <div class="client-item client-windows-bg">
                    <h3>MC——基岩版客户端</h3>
                    <a href="https://www.123pan.com/s/9BZ3jv-d87UA" class="btn btn-secondary">下载</a>
                </div>
                <div class="client-item client-macos-bg">
                    <h3>MC——Java版-暂无</h3>
                    <a href="#" class="btn btn-secondary">下载</a>
                </div>
                <div class="client-item client-linux-bg">
                    <h3>专属NC客户端-暂无</h3>
                    <a href="#" class="btn btn-secondary">下载</a>
                </div>
            </div>
        </section>

        <!-- 玩家社区论坛 -->
        <section class="community-forum mc-card">
            <h2>玩家社区论坛</h2>
            <p>加入我们的论坛，与其他玩家交流经验、分享心得。</p>
            <a href="#" class="btn btn-primary community-btn">进入论坛</a>
        </section>
    </div>
</div>

<!-- 新增的弹窗HTML结构 -->
<div id="login-mc-modal" class="modal">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>登录MC</h2>
        <p>登录我的世界网页端，查看详细游玩数据，如吃了多少次食物\n查看系统状态\n实时云地图，查看玩家的一举一动\n在线与游戏内玩家聊天\n需要在游戏中输入指令/web注册登录密码，用户名为游戏名</p>
        <a href="http://47.113.116.147:9095" class="btn btn-primary" id="proceed-login">前往登录</a>
    </div>
</div>

<!-- 新增教程区 -->
<section class="tutorial-section mc-card">
    <div class="tutorial-content">
        <h2>如何游玩该服务器</h2>
        <div class="tutorial-cards">
            <div class="tutorial-card tutorial-intro-bg">
                <h3>进服教程</h3>
                <p>初次进入游戏的指导。</p>
                <a href="https://joyb.cc/1856.html" class="btn btn-primary">阅读教程</a>
            </div>
            <div class="tutorial-card tutorial-building-bg">
                <h3>本服特色</h3>
                <p>植物大战僵尸-生存之道</p>
                <a href="https://joyb.cc/1882.html" class="btn btn-primary">一镜到底</a>
            </div>
            <div class="tutorial-card tutorial-survival-bg">
                <h3>生存技巧</h3>
                <p>如何在夜晚生存。</p>
                <a href="#" class="btn btn-primary">阅读教程</a>
            </div>
            <div class="tutorial-card tutorial-advanced-bg">
                <h3>高级技巧</h3>
                <p>红石电路与自动化技巧。</p>
                <a href="#" class="btn btn-primary">阅读教程</a>
            </div>
        </div>
    </div>
</section>

<!-- 服务器宣传图集 -->
<section class="screenshots-gallery mc-card">
    <h2>精彩片段</h2>
    <div class="gallery-grid">
        <!-- 将这些图片链接替换为你实际的图片URL，并添加data-src属性 -->
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830103931744-mc%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg" alt="宣传图1" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830101927446-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE2.webp" alt="宣传图2" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830022023528-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%83%8C%E6%99%AF1.jpg" alt="宣传图3" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830102328637-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE3.jpg" alt="宣传图4" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830103926527-mc%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE2-scaled.jpg" alt="宣传图5" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902102259790-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE4.jpg" alt="宣传图6" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902102303291-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE3.jpg" alt="宣传图7" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902104349959-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E6%A4%8D%E7%89%A9%E5%A4%A7%E6%88%98%E5%83%B5%E5%B0%B8%E9%85%8D%E5%9B%BE1.jpg" alt="宣传图8" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902100917622-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E6%A4%8D%E7%89%A9%E5%A4%A7%E6%88%98%E5%83%B5%E5%B0%B8%E5%AE%9E%E5%86%B5%E5%9B%BE3.jpg" alt="宣传图9" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902100925728-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E6%A4%8D%E7%89%A9%E5%A4%A7%E6%88%98%E5%83%B5%E5%B0%B8%E5%AE%9E%E5%86%B5%E5%9B%BE1.jpg" alt="宣传图10" class="lazy"></div>
        <div class="gallery-item"><img data-src="https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902104532754-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E6%A4%8D%E7%89%A9%E5%A4%A7%E6%88%98%E5%83%B5%E5%B0%B8%E9%85%8D%E5%9B%BE2.jpg" alt="宣传图12" class="lazy"></div>
        <!-- 可以添加更多图片 -->
    </div>
</section>

<!-- Lightbox 容器 -->
<div id="lightbox" class="lightbox">
    <span id="lightbox-close" class="lightbox-close">&times;</span>
    <img id="lightbox-img" src="" alt="放大的图片">
</div>

<!-- 弹窗的 HTML 结构 -->
<div id="rules-modal" class="rules-modal">
    <div class="rules-modal-content">
        <span class="close">&times;</span>
        <h2>游玩规则</h2>
        <p>1. 请勿使用外挂或修改器。</p>
        <p>2. 尊重其他玩家，不得恶意破坏他人建筑。</p>
        <p>3. 请遵守服务器管理员的指示。</p>
        <p>5. 禁止使用恶意言论或冒犯他人的行为。</p>
    </div>
</div>

<div id="commands-modal" class="commands-modal">
    <div class="commands-modal-content">
        <span class="close">&times;</span>
        <h2>服务器指令集</h2>
        <p>/ip  - 查询ip地址所属地 </p>
        <p>/mucmenu - 召唤音乐菜单</p>
        <p>/chat <msg: string> - 与Ai对话</p>
        <!-- 添加更多指令 -->
    </div>
</div>

<!-- 样式部分 -->
<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'Minecraftia', sans-serif;
    background: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830022021488-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%83%8C%E6%99%AF2%E7%99%BD.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #000;
}

body.dark-theme {
    background: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830022023528-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%83%8C%E6%99%AF1.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
}

/* 公告区块的样式调整 */
.announcements-header {
    text-align: center; /* 将标题和按钮居中 */
    padding-bottom: 10px;
}

.rules-btn, .commands-btn {
    background-color: #00ccff;
    color: #fff;
    padding: 5px 15px; /* 增加按钮的左右内边距 */
    margin: 5px; /* 增加按钮之间的间距 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Minecraftia', sans-serif;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    transition: background 0.3s ease;
    display: inline-block; /* 将按钮放在同一行 */
}

.rules-btn:hover, .commands-btn:hover {
    background-color: #3399ff;
}

.updates-list {
    margin-top: 15px; /* 调整公告内容与更新记录之间的间距 */
    padding-left: 0;
    list-style-type: none; /* 去除默认的列表样式 */
}

.updates-list li {
    margin-bottom: 10px; /* 增加列表项之间的间距 */
    font-size: 14px;
    color: inherit; /* 使文字颜色适应主题切换 */
}

.announcements-header h2, .updates-list h2 {
    margin-bottom: 10px;
    color: #66ff66;
    text-shadow: 2px 2px 4px #000;
}

body.dark-theme .updates-list li {
    color: #ddd; /* 黑夜模式下的文字颜色 */
}

body.light-theme .updates-list li {
    color: #333; /* 白天模式下的文字颜色 */
}

/* 弹窗的样式 */
.rules-modal, .commands-modal, .modal {
    display: none; /* 初始隐藏 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px); /* 模糊背景 */
}

.rules-modal-content, .commands-modal-content, .modal-content {
    background-color: #fefefe;
    margin: 10% auto;  /* 适当调低位置以避免弹窗内容显示不全 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    color: #333;
    box-sizing: border-box; /* 确保padding不会影响弹窗大小 */
    height: 200px; /* 设置固定高度，确保有足够空间放置按钮 */
}

body.dark-theme .rules-modal-content, body.dark-theme .commands-modal-content, body.dark-theme .modal-content {
    background-color: #333;
    color: #fff;
}

.show-modal {
    display: block !important; /* 确保显示 */
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

body.dark-theme .close:hover,
body.dark-theme .close:focus {
    color: #fff;
}

/* Lightbox 背景 */
.lightbox {
    display: none; /* 初始状态为隐藏 */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 黑色半透明背景 */
    justify-content: center;
    align-items: center;
}

/* Lightbox 图片 */
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

/* 关闭按钮 */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

/* 容器布局设置 */
.mc-container {
    display: flex;
    flex-direction: row;
    max-width: 1400px;
    margin: 20px auto;
    padding: 20px;
}

.mc-sidebar {
    flex: 1;
    margin-right: 20px;
    display: none;
}

.mc-content {
    flex: 3;
}

/* 教程区样式 */
.tutorial-section {
    width: calc(100% - 40px);
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 40px 20px;
    text-align: center;
}

.tutorial-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tutorial-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    width: calc(45% - 20px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-align: left;
    overflow: hidden;
}

body.dark-theme .tutorial-card {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: #333;
}

.tutorial-card h3 {
    margin-top: 0;
    font-size: 24px;
    color: #66ff66;
    white-space: nowrap; /* 避免标题换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 溢出时显示省略号 */
}

.tutorial-card p {
    font-size: 16px;
    color: #333;
    white-space: nowrap; /* 避免描述换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 溢出时显示省略号 */
}

body.dark-theme .tutorial-card p {
    color: #ccc;
}

.tutorial-card a.btn {
    margin-top: 10px;
    display: inline-block;
    padding: 10px 20px;
    background: #00ccff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Minecraftia', sans-serif;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    transition: background 0.3s ease;
}

.tutorial-card a.btn:hover {
    background: #3399ff;
}

/* 添加鼠标悬停效果 */
.tutorial-card:hover {
    background-color: rgba(0, 204, 255, 0.7); /* 改变背景颜色 */
    transform: scale(1.05); /* 轻微放大 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 增加阴影效果 */
}

body.dark-theme .tutorial-card:hover {
    background-color: rgba(0, 102, 204, 0.7); /* 黑夜模式下的悬停颜色 */
}

/* 自定义内容区块（白天模式） */
.custom-content-day.mc-card {
    background-color: rgba(0, 0, 0, 0.5); /* 深色透明背景 */
    padding: 25px;
    display: none;
}

/* 自定义内容区块（夜间模式） */
.custom-content-night.mc-card {
    background-color: rgba(255, 255, 255, 0.3); /* 浅色透明背景 */
    padding: 25px;
}

/* 卡片样式 */
.mc-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 3px solid rgba(200, 200, 200, 0.8);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    margin-bottom: 30px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.mc-card:hover {
    transform: scale(1.03);
}

body.dark-theme .mc-card {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(46, 46, 46, 0.8);
}

/* 玩家排行榜表格样式 */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th, .leaderboard-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #555;
}

body.light-theme .leaderboard-table th,
body.light-theme .leaderboard-table td {
    color: #333;
    background-color: rgba(255, 255, 255, 0.9);
}

body.dark-theme .leaderboard-table th,
body.dark-theme .leaderboard-table td {
    color: #ddd;
    background-color: rgba(50, 50, 50, 0.9);
}

.scroll-content {
    overflow-y: auto;
    max-height: 150px;
    padding-right: 15px;
}

.mc-card h2 {
    font-size: 24px;
    color: #66ff66;
    text-shadow: 3px 3px 6px #000000;
    margin-bottom: 15px;
}

/* 服务器状态区块 */
.server-status {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-header h2 {
    margin: 0;
}

#server-status-display {
    margin-top: 10px;
    font-size: 16px;
    color: #aaa;
}

.server-status-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

/* 服务器状态模块样式 */
.server-status-module {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 14px;
    color: #333;
}

body.dark-theme .server-status-module {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* 添加鼠标悬停效果 */
.server-status-module:hover {
    background-color: rgba(0, 204, 255, 0.7); /* 改变背景颜色 */
    transform: scale(1.05); /* 轻微放大 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 增加阴影效果 */
}

body.dark-theme .server-status-module:hover {
    background-color: rgba(0, 102, 204, 0.7); /* 黑夜模式下的悬停颜色 */
}

.server-error {
    padding: 20px;
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
    color: #a94442;
    margin-top: 10px;
    border-radius: 5px;
}

/* 加载动画样式 */
.loading-animation {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin: 20px 0;
}

/* 切换按钮样式 - 我的世界风格 */
#toggle-theme {
    padding: 5px 10px;
    background: #5a8a4d;
    color: #fff;
    border: 3px solid #3e6b33;
    font-family: 'Minecraftia', sans-serif;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

#toggle-theme:hover {
    background: #3e6b33;
    transform: scale(1.05);
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #00ccff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Minecraftia', sans-serif;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    transition: background 0.3s ease;
}

.btn:hover {
    background: #3399ff;
}

/* 资源下载块样式 */
.resource-items {
    display: flex;
    justify-content: space-between; /* 在资源块之间留出间隔 */
    margin-top: 20px;
    flex-wrap: nowrap; /* 禁止换行，确保两个块在一行 */
}

.resource-item {
    flex: 1; /* 让两个资源块在容器中平分宽度 */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 0 10px; /* 为资源块之间添加一些间距 */
    transition: transform 0.3s ease, background-color 0.3s ease;
    background-size: cover; /* 让背景图片覆盖整个区域 */
    background-position: center; /* 确保背景图片在容器内居中 */
}

/* 为每个小区块设置独特的背景图片-资源下载区块 */
.server-archive-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902102259790-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE4.jpg');
}

.texture-pack-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902102303291-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE3.jpg');
}

.resource-item a.btn {
    display: inline-block;
    width: 100%; /* 让按钮在其容器内占满宽度 */
    padding: 10px 0;
    text-align: center;
    background: #00ccff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Minecraftia', sans-serif;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    transition: background 0.3s ease;
}

.resource-item a.btn:hover {
    background: #3399ff;
}

/* 客户端下载块样式 */
.client-items {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    flex-wrap: wrap;
}

.client-item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    flex: 1 1 calc(33% - 20px);
    margin: 10px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    background-size: cover; /* 添加背景图片的大小设置 */
    background-position: center;
    height: 200px; /* 统一按钮的高度 */
}

.client-item h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
    max-width: 80%; /* 确保标题宽度一致 */
}

.client-item a.btn {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 10px 0;
    text-align: center;
    background: #00ccff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Minecraftia', sans-serif;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    transition: background 0.3s ease;
}

.client-item a.btn:hover {
    background: #3399ff;
}

/* 鼠标悬停反馈效果 */
.client-item:hover {
    background-color: rgba(0, 0, 0, 0.7); /* 改变背景颜色 */
    transform: translateY(-5px) scale(1.05); /* 向上移动并放大 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); /* 增加阴影效果 */
}

/* 为每个小区块设置独特的背景图片 */
.client-windows-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902093957365-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8B%E8%BD%BD%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg');
}

.client-macos-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902093954961-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8B%E8%BD%BD%E8%83%8C%E6%99%AF%E5%9B%BE2.jpg');
}

.client-linux-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/09/20240902093953718-%E6%88%91%E7%9A%84%E4%B8%96%E7%95%8C%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8B%E8%BD%BD%E8%83%8C%E6%99%AF%E5%9B%BE3.jpg');
}

/* 教程卡片背景 */
.tutorial-intro-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830101927446-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE2.webp');
    background-size: cover;
    background-position: center;
}

.tutorial-building-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830101734735-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE1.jpg');
    background-size: cover;
    background-position: center;
}

.tutorial-survival-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830102325433-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE4.jpg');
    background-size: cover;
    background-position: center;
}

.tutorial-advanced-bg {
    background-image: url('https://cn-sy1.rains3.com/joyb.cc/2024/08/20240830102328637-mc%E6%95%99%E7%A8%8B%E5%8C%BA%E8%83%8C%E6%99%AF%E5%9B%BE3.jpg');
    background-size: cover;
    background-position: center;
}

/* 玩家社区论坛块样式 */
.community-forum {
    position: relative;
    padding-bottom: 60px; /* 确保按钮有足够空间 */
}

.community-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* 在桌面端显示侧边栏 */
@media (min-width: 768px) {
    .mc-sidebar {
        display: block;
    }
    .mobile-only {
        display: none;
    }
}

/* 移动端保留原有布局 */
@media (max-width: 767px) {
    .mc-container {
        flex-direction: column;
    }
    .tutorial-section {
        width: calc(100% - 40px);
    }
}

/* 瀑布流样式 */
.screenshots-gallery {
    width: calc(100% - 40px);
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 40px 20px;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 15px;
}

.gallery-item {
    overflow: hidden;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-item img.lazy {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gallery-item img.lazy.loaded {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Lightbox 功能
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const lightboxClose = document.getElementById('lightbox-close');

    document.querySelectorAll('.gallery-item img').forEach(img => {
        img.addEventListener('click', function() {
            lightboxImg.src = this.src; // 设置lightbox中的图片为点击的图片
            lightbox.style.display = 'flex'; // 显示lightbox
        });
    });

    // 点击关闭按钮或点击背景时关闭lightbox
    lightboxClose.addEventListener('click', function() {
        lightbox.style.display = 'none';
    });

    lightbox.addEventListener('click', function(event) {
        if (event.target !== lightboxImg) {
            lightbox.style.display = 'none';
        }
    });

    // 切换主题的功能
    const toggleThemeButton = document.getElementById('toggle-theme');
    const rootElement = document.documentElement;

    // 自定义内容区块
    const dayContent = document.querySelector('.custom-content-day');
    const nightContent = document.querySelector('.custom-content-night');

    // 设置默认主题为黑夜模式
    let currentTheme = localStorage.getItem('theme');
    if (!currentTheme) {
        currentTheme = 'dark';
        localStorage.setItem('theme', currentTheme);
    }

    // 根据当前主题设置页面
    if (currentTheme === 'dark') {
        rootElement.classList.add('dark-theme');
        dayContent.style.display = 'none';
        nightContent.style.display = 'block';
        toggleThemeButton.textContent = "切换到日间模式";
    } else {
        rootElement.classList.add('light-theme');
        dayContent.style.display = 'block';
        nightContent.style.display = 'none';
        toggleThemeButton.textContent = "切换到夜间模式";
    }

    // 监听按钮点击事件
    toggleThemeButton.addEventListener('click', function() {
        if (rootElement.classList.contains('dark-theme')) {
            rootElement.classList.remove('dark-theme');
            rootElement.classList.add('light-theme');
            localStorage.setItem('theme', 'light');
            dayContent.style.display = 'block';
            nightContent.style.display = 'none';
            toggleThemeButton.textContent = "切换到夜间模式";
        } else {
            rootElement.classList.add('dark-theme');
            rootElement.classList.remove('light-theme');
            localStorage.setItem('theme', 'dark');
            dayContent.style.display = 'none';
            nightContent.style.display = 'block';
            toggleThemeButton.textContent = "切换到日间模式";
        }
    });

    // 弹窗逻辑 - 游玩规则
    const rulesButton = document.getElementById("rules-button");
    const rulesModal = document.getElementById("rules-modal");

    const commandsButton = document.getElementById("commands-button");
    const commandsModal = document.getElementById("commands-modal");

    const closeBtns = document.querySelectorAll(".close");

    rulesButton.addEventListener("click", function() {
        rulesModal.classList.add("show-modal");
    });

    commandsButton.addEventListener("click", function() {
        commandsModal.classList.add("show-modal");
    });

    closeBtns.forEach(btn => {
        btn.addEventListener("click", function() {
            const modal = btn.closest('.rules-modal, .commands-modal');
            modal.classList.remove("show-modal");
        });
    });

    // 点击窗口外部关闭弹窗
    window.addEventListener("click", function(event) {
        if (event.target === rulesModal) {
            rulesModal.classList.remove("show-modal");
        }
        if (event.target === commandsModal) {
            commandsModal.classList.remove("show-modal");
        }
    });

    // 简单的懒加载函数
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImage.classList.add("loaded");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 如果浏览器不支持IntersectionObserver，回退到事件监听方式
        let lazyLoadThrottleTimeout;
        function lazyLoad() {
            if (lazyLoadThrottleTimeout) {
                clearTimeout(lazyLoadThrottleTimeout);
            }

            lazyLoadThrottleTimeout = setTimeout(function() {
                let scrollTop = window.pageYOffset;
                lazyImages.forEach(function(img) {
                    if (img.offsetTop < (window.innerHeight + scrollTop)) {
                        img.src = img.dataset.src;
                        img.classList.remove('lazy');
                        img.classList.add('loaded');
                    }
                });
                if (lazyImages.length == 0) {
                    document.removeEventListener("scroll", lazyLoad);
                    window.removeEventListener("resize", lazyLoad);
                    window.removeEventListener("orientationChange", lazyLoad);
                }
            }, 20);
        }

        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationChange", lazyLoad);
    }

    // 登录MC按钮与弹窗逻辑
    const loginMcButton = document.getElementById('login-mc-button');
    const loginMcModal = document.getElementById('login-mc-modal');
    const closeModal = document.querySelector('.close-modal');

    loginMcButton.addEventListener('click', function() {
        loginMcModal.style.display = 'flex';
    });

    closeModal.addEventListener('click', function() {
        loginMcModal.style.display = 'none';
    });

    window.addEventListener('click', function(event) {
        if (event.target === loginMcModal) {
            loginMcModal.style.display = 'none';
        }
    });
});
</script>

<?php
get_footer(); // WordPress 页脚调用
?>

在主题根目录下的page文件夹内创建页面，然后在创建页面的时候选择模板为Minecraft Server Page

子比进阶玩法
9
5人已评分
分享
请登录后发表评论

    回复1
    只看作者
    最新最热
分享
建站综合交流-WordPress主题模板-zibll子比主题

建站综合交流

使用WordPress建站遇到了哪些好玩的？一起交流交流
发布
帖子
38
互动
184
阅读
9908
用户封面
xhjoyb的头像-WordPress主题模板-zibll子比主题代理会员
限时特惠活动
zibll子比主题限时优惠活动正在进行中
立即购买
扫码添加微信-WordPress主题模板-zibll子比主题
发布文章发布帖子
扫一扫在手机上体验主题