关于最近的新项目

博主： MaxBlog
发布时间：2024 年 11 月 06 日
872 次浏览
2 条评论
5071字数
分类：项目记录

以下是修改后的完整博客文章，已经按照要求使用了代码格式展示代码、使用 `scode` 说明内容，并使用按钮链接格式提供项目地址：

---

# 新开了服务器并安装了新项目

近期，我新开了一个服务器，并在其上安装了两个操作系统：一个是 Windows，另一个是 Ubuntu。这个新环境为我的项目提供了更好的部署和管理空间。

![2024-11-06T08:31:13.png][1]

之后，我计划会添加更多的项目，提升整体的功能和服务。为了更好地展示这些项目，我新建了一个门户页面。

新的门户页面链接：[https://home.maxtral.fun/](https://home.maxtral.fun/)

## 说明：

下面是当前项目中的一些关键代码：

### HTML 结构：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAX-门户-1</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="dist/bundle.js" defer></script>
<div class="container">
    <div class="background" id="blurContainer"></div>
    <div class="navigation" id="navigation">
        
        <button class="time-button" id="timeButton">
            
        </button>

<div class="search-wrapper">
            <label for="searchInput"></label>
            <input
                    type="text"
                    placeholder="百度搜索"
                    id="searchInput"
                    class="search-input"
            />
            <button class="search-icon" id="searchButton">🔍</button> 
        </div>
        
        <div class="popup-content" id="announcementPopup">
            <button class="close-button" data-popup="announcementPopup">关闭</button>
            <div class="announcement-content">
                
            </div>
        </div>

<div class="popup-content" id="commentPopup">
            <button class="close-button" data-popup="commentPopup">关闭</button>
            <h3>留言板</h3>

<div class="message-form">
                <div class="input-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" class="input" placeholder="请输入你的昵称">
                    <div id="nicknameError" class="error">请输入昵称</div>
                </div>
                <div class="input-group">
                    <label for="newMessage">留言内容</label>
                    <textarea id="newMessage" class="textarea" placeholder="写下你的留言...">

请输入留言内容

``` ### 样式表（CSS）： ```css /* 基础样式 */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; position: relative; padding-top: 10vh; } .background { position: absolute; inset: 0; background-image: url('backgrand.jpg'); background-size: cover; background-position: center; transition: all 0.5s; filter: blur(0) brightness(100%); } .background.active { filter: blur(4px) brightness(75%); } .navigation { display: flex; flex-direction: column; align-items: center; gap: 5rem; position: relative; z-index: 10; width: 100%; max-width: 64rem; } /* 时间按钮样式 */ .time-button { font-size: 2rem; color: white; background: #216b94; border: none; border-radius: 10px; outline: none; cursor: default; user-select: none; pointer-events: auto; padding: 10px 20px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } .time-button:hover { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(255, 255, 255, 0.4); transform: translateY(-2px) scale(1.05); } ``` ### 项目地址： [button color="success" icon="" url="https://home.maxtral.fun/" type="round"]体验地址[/button] ![2024-11-13T16:20:53.png][2] --- 新的状态页面：[button color="success" icon="" url="http://nezha.maxtral.fun/" type="round"]状态页面[/button] ![2024-11-13T16:21:43.png][3] 哪吒面板是一个开源、轻量、易用的服务器监控与运维工具。以下是**哪吒面板的Docker安装代码**： 1. **一键安装脚本**： ```bash curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh ``` 执行此脚本后，你将需要输入一些信息，包括OAuth提供商、Client ID、Client Secret等。 2. **Docker Compose启动Dashboard**： ```bash docker compose -f docker-compose.yaml up -d ``` 这是启动哪吒监控面板Dashboard的命令，你需要有一个`docker-compose.yaml`文件来定义服务。 3. **配置Caddy反代**： ```caddy ops.ysicing.net { tls [email protected] import LOG /var/log/caddy/nzops_ysicing_net.log reverse_proxy 10.76.0.7:44544 } agent.ops.ysicing.net { tls [email protected] import LOG /var/log/caddy/nzops_agent_ysicing_net.log reverse_proxy { to 10.76.0.7:44545 transport http { versions h2c 2 } } } ``` 这是使用Caddy进行反向代理的配置示例，用于将域名指向哪吒面板的Dashboard和Agent服务。请根据你的具体需求和环境调整上述命令和配置。如果你需要更详细的安装步骤和配置信息，可以参考哪吒面板的[官方文档](https://github.com/naiba/nezha)。新的热榜页面：[button color="success" icon="" url="https://hot.imsyy.top/#/" type="round"]热榜页面[/button] 今日热榜是一个聚合平台，汇集了来自不同来源的热门话题和新闻。它让用户能够一目了然地查看当前的热点事件，无论是社交媒体上的热议，还是新闻网站上的头条。通过这个平台，用户可以节省时间，不必逐个访问各个网站，就能掌握全网的热门动态，是获取信息和了解时事的便捷工具。今日热榜是一个汇聚全网热点的平台，它提供了一个界面，让用户能够一览各大网站的热门内容，包括新闻、社交媒体等，方便用户快速了解当前的热门话题和趋势。 ![2024-11-13T16:22:10.png][4] [1]: https://bucket.maxtral.fun/typecho/2024/11/06/2024-11-06T08:31:13.png [2]: https://bucket.maxtral.fun/typecho/2024/11/14/2024-11-13T16:20:53.png [3]: https://bucket.maxtral.fun/typecho/2024/11/14/2024-11-13T16:21:43.png [4]: https://bucket.maxtral.fun/typecho/2024/11/14/2024-11-13T16:22:10.png

以下是修改后的完整博客文章，已经按照要求使用了代码格式展示代码、使用 scode 说明内容，并使用按钮链接格式提供项目地址：

新开了服务器并安装了新项目

近期，我新开了一个服务器，并在其上安装了两个操作系统：一个是 Windows，另一个是 Ubuntu。这个新环境为我的项目提供了更好的部署和管理空间。

之后，我计划会添加更多的项目，提升整体的功能和服务。为了更好地展示这些项目，我新建了一个门户页面。

新的门户页面链接：https://home.maxtral.fun/

说明：

下面是当前项目中的一些关键代码：

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAX-门户-1</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="dist/bundle.js" defer></script>
<div class="container">
    <div class="background" id="blurContainer"></div>
    <div class="navigation" id="navigation">
        <!-- 时间显示框 -->
        <button class="time-button" id="timeButton">
            <!-- JavaScript 将在此处插入当前时间 -->
        </button>

        <!-- 搜索框和搜索图标 -->
        <div class="search-wrapper">
            <label for="searchInput"></label>
            <input
                    type="text"
                    placeholder="百度搜索"
                    id="searchInput"
                    class="search-input"
            />
            <button class="search-icon" id="searchButton">&#128269;</button> <!-- 搜索图标按钮 -->
        </div>
        <!-- 公告弹窗 -->
        <div class="popup-content" id="announcementPopup">
            <button class="close-button" data-popup="announcementPopup">关闭</button>
            <div class="announcement-content">
                <!-- 公告内容将通过 JavaScript 从 announcement.txt 加载 -->
            </div>
        </div>

        <!-- 留言板弹窗 -->
        <div class="popup-content" id="commentPopup">
            <button class="close-button" data-popup="commentPopup">关闭</button>
            <h3>留言板</h3>

            <!-- 留言表单 -->
            <div class="message-form">
                <div class="input-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" class="input" placeholder="请输入你的昵称">
                    <div id="nicknameError" class="error">请输入昵称</div>
                </div>
                <div class="input-group">
                    <label for="newMessage">留言内容</label>
                    <textarea id="newMessage" class="textarea" placeholder="写下你的留言..."></textarea>
                    <div id="messageError" class="error">请输入留言内容</div>
                </div>
                <div class="button-container">
                    <button class="button submit-message-button">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"></path>
                        </svg>
                        发布留言
                    </button>
                </div>
            </div>

            <!-- 留言列表 -->
            <div id="messageList" class="message-list">
                <!-- Messages will be inserted here -->
            </div>
        </div>

        <!-- 计划任务弹窗 -->
        <div class="popup-content" id="taskPopup">
            <button class="close-button" data-popup="taskPopup">关闭</button>
            <h3>计划任务管理</h3>

            <!-- 任务表单已移除，游客无法添加任务 -->

            <!-- 折叠任务区块 -->
            <div class="task-section">
                <h2 class="section-title">待开发任务</h2>
                <button class="toggle-button" data-section="pendingTasks">展开</button>
                <div id="pendingTasks" class="task-list collapsed"></div>
            </div>

            <div class="task-section">
                <h2 class="section-title">开发中任务</h2>
                <button class="toggle-button" data-section="inProgressTasks">展开</button>
                <div id="inProgressTasks" class="task-list collapsed"></div>
            </div>
            <div class="task-section">
                <h2 class="section-title">已完成任务</h2>
                <button class="toggle-button" data-section="completedTasks">展开</button>
                <div id="completedTasks" class="task-list collapsed"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

样式表（CSS）：

/* 基础样式 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    position: relative;
    padding-top: 10vh;
}

.background {
    position: absolute;
    inset: 0;
    background-image: url('backgrand.jpg');
    background-size: cover;
    background-position: center;
    transition: all 0.5s;
    filter: blur(0) brightness(100%);
}

.background.active {
    filter: blur(4px) brightness(75%);
}

.navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 64rem;
}

/* 时间按钮样式 */
.time-button {
    font-size: 2rem;
    color: white;
    background: #216b94;
    border: none;
    border-radius: 10px;
    outline: none;
    cursor: default;
    user-select: none;
    pointer-events: auto;
    padding: 10px 20px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2),
                -5px -5px 15px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.time-button:hover {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3),
                -2px -2px 10px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px) scale(1.05);
}

项目地址：

新的状态页面：

哪吒面板是一个开源、轻量、易用的服务器监控与运维工具。以下是哪吒面板的Docker安装代码：

一键安装脚本：

curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh

执行此脚本后，你将需要输入一些信息，包括OAuth提供商、Client ID、Client Secret等。

Docker Compose启动Dashboard：
```
docker compose -f docker-compose.yaml up -d
```
这是启动哪吒监控面板Dashboard的命令，你需要有一个docker-compose.yaml文件来定义服务。

配置Caddy反代：

ops.ysicing.net {
    tls [email protected]
    import LOG /var/log/caddy/nzops_ysicing_net.log
    reverse_proxy 10.76.0.7:44544
}
agent.ops.ysicing.net {
    tls [email protected]
    import LOG /var/log/caddy/nzops_agent_ysicing_net.log
    reverse_proxy {
        to 10.76.0.7:44545
        transport http {
            versions h2c 2
        }
    }
}

这是使用Caddy进行反向代理的配置示例，用于将域名指向哪吒面板的Dashboard和Agent服务。

请根据你的具体需求和环境调整上述命令和配置。如果你需要更详细的安装步骤和配置信息，可以参考哪吒面板的官方文档。

新的热榜页面：

今日热榜是一个聚合平台，汇集了来自不同来源的热门话题和新闻。它让用户能够一目了然地查看当前的热点事件，无论是社交媒体上的热议，还是新闻网站上的头条。通过这个平台，用户可以节省时间，不必逐个访问各个网站，就能掌握全网的热门动态，是获取信息和了解时事的便捷工具。

今日热榜是一个汇聚全网热点的平台，它提供了一个界面，让用户能够一览各大网站的热门内容，包括新闻、社交媒体等，方便用户快速了解当前的热门话题和趋势。

最后修改：2024 年 11 月 14 日

如果觉得我的文章挺有趣，赞赏一杯小奶茶

计划任务管理

待开发任务

开发中任务

已完成任务

新开了服务器并安装了新项目

说明：

HTML 结构：

样式表（CSS）：

项目地址：

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

关于最近的新项目

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款