AI正在绞尽脑汁想思路ING···

HantaMintのAI摘要

Spark-Lite

一个简易の主页模版

可执行程序2025-07-202025-07-20

🍋碎碎念

呜呜呜，再不更就要变成咸鱼了

本来换了一个imsyy的主页，但是那个天气API说是可以空着，但是每次都会弹出来报错说天气API获取失败，而且这个没多久就看够了，翻了一下以前积攒的素材库，从里面东抄西抄，再加上搜索引擎的输出总算做出来了这个玩意，效果如下

源代码属于免费，禁止收费，别逼我存档，不要让我对国内的网络失望！！！

🍪源代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ℋℴ𝓂ℯ | ℋ𝒶𝓃𝓉𝒶</title>
    <link rel="stylesheet" href="https://fontsapi.zeoseven.com/292/main/result.css">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://at.alicdn.com/t/c/font_4979364_d45pscvlqs.js"></script>
    <!-- APlayer 核心样式 -->
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css">
    <style>
        * {
            font-family: "LXGW WenKai";
        }
        body {
            align-items: flex-start; /* 调整为flex-start */
            height: 100vh;
            background-image: url('https://i.p-i.vip/68/20250720-687c506561da7.webp'); /* 背景图片URL */
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* 使背景图片固定 */
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #content {
            background-color: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            box-sizing: border-box;
            overflow-y: auto;
            margin-top: 20px; /* 添加顶部外边距 */
            margin-bottom: 20px; /* 添加底部外边距 */
        }
        card {
            background-color: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            box-sizing: border-box;
            margin-top: 20px; /* 添加顶部外边距以避免标题被遮挡 */
        }
        box {
            display: flex; /* 启用Flexbox */
            flex-direction: column; /* 设置主轴方向为垂直方向 */
            justify-content: space-between; /* 设置项目在主轴方向上的对齐方式为平均分布 */
            align-items: center; /* 设置项目在交叉轴上的对齐方式为居中 */
        }
        details {
          background-color: rgba(255, 255, 255, 0.5);
          border: 1px solid #ffffff;
          border-radius: 5px;
          min-height: 25px;
          padding: 5px;
          font-size: 16px;
          margin-bottom: 10px;
        }
        a {
          position: relative;
          display: inline;
          text-decoration: none;
          color: #000;
        }
        a::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background-color: #2eb6ff;
          transform-origin: bottom right;
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        a:hover::before {
          transform-origin: bottom left;
          transform: scaleX(1);
        }
        hr {
          margin: 10px 0;
        }
        .icon {
          width: 2em;
          height: 2em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
          padding: 5px;
        }
        footer {
          color: #ffffff;
          text-align: center;
        }
        #myBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 50px;
          height: 50px;
          z-index: 99;
          border: none;
          outline: none;
          background-color: rgba(255, 255, 255, 0.5);
          color: white;
          cursor: pointer;
          padding: 15px;
          border-radius: 100%;
          animation-duration: 0.25s;
          animation-name: deep;
        }
        #myBtn:active {
          animation-duration: 0.25s;
          animation-name: deep1;
        }
        @keyframes deep {
          from {
            background-color: rgba(255, 255, 255, 0.0);
          }

          to {
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
        @keyframes deep1 {
          from {
            background-color: rgba(255, 255, 255, 0.5);
          }

          to {
            background-color: rgba(255, 255, 255, 0.0);
          }
        }
        /* 为滚动条整体设置样式 */
        ::-webkit-scrollbar {
          width: 5px;
          height: 10px;
        }

        /* 为滚动条的轨道设置样式 */
        ::-webkit-scrollbar-track {
          background: rgba(#101F1C, 0.1);
          border-radius: 2em;
        }

        /* 为滚动条的滑块设置样式 */
        ::-webkit-scrollbar-thumb {
          background-color: rgba(144,147,153,0.5);
          border-radius: 2em;
          transition: background-color .3s;
          cursor: pointer;
        }

        /* 当鼠标悬停在滑块上时改变滑块的颜色 */
        ::-webkit-scrollbar-thumb:hover {
          background-color: rgba(144,147,153,.3);
        }
        /* 手机端适配 */
        @media (max-width: 768px) {
          #content, card {
            width: 90% !important; /* 适配手机屏幕宽度，留边距 */
            padding: 15px !important; /* 减少内边距 */
            min-width: auto !important; /* 移除最小宽度限制 */
          }
  
          h1, h2 {
            font-size: 1.5rem; /* 缩小标题字体 */
          }
  
          a {
            display: block; /* 链接垂直排列，避免拥挤 */
            margin: 8px 0; /* 增加链接间距 */
          }
  
          .icon {
            width: 1.5em; /* 缩小图标 */
            height: 1.5em;
          }
        }
    </style>
</head>
<body>
    <box>
      <card>
        <h1>Hantaの主页 · <small style="font-size: smaller;">一个简约的个人主页</small></h1>
        <hr>
        <a href="https://github.com/exef-star">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
        <a href="https://space.bilibili.com/3537111871392719">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bilibili"></use>
          </svg>
        </a>
        <a href="https://res.abeim.cn/api/qq/?qq=2667174454">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-QQ"></use>
          </svg>
        </a>
        <a href="mailto:2667174454@qq.com">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-mail-"></use>
          </svg>
        </a>
      </card>
      <div id="content">
        <h1>loading. . .</h1>
      </div>
      <card>
        <h2>网站列表</h2>
        <details>
          <summary>网页 | 点击展开/折叠</summary>
          <hr>
          <a href="https://hanta2011.top/"><i class="fa fa-link"></i>主页</a>
          <a href="https://blog.hanta2011.top/"><i class="fa fa-link"></i>博客</a>
          <a href="https://home.hanta2011.top/"><i class="fa fa-link"></i>个人主页</a>
          <a href="https://count.hanta2011.top/"><i class="fa fa-link"></i>统计板</a>
          <a href="https://umami.hanta2011.top/"><i class="fa fa-link"></i>Umami</a>
          <a href="https://pan.hanta2011.top/"><i class="fa fa-link"></i>Openlist</a>
          <a href="https://music.hanta2011.top/"><i class="fa fa-link"></i>音乐</a>
          <a href="https://site.hanta2011.top/"><i class="fa fa-link"></i>站点监控</a>
          <a href="https://status.hanta2011.top/"><i class="fa fa-link"></i>更高级の站点监控</a>
          <a href="https://status.hanta2011.top/"><i class="fa fa-link"></i>mini-cover</a>

        </details>
        <details>
          <summary>博客线路 | 点击展开/折叠</summary>
          <hr>
          <a href="https://blog.hanta2011.top/"><i class="fa fa-link"></i>主线路</a>
          <a href="https://blog-1.hanta2011.top/"><i class="fa fa-link"></i>备用线路</a>
          <a href="https://hanta.hanta2011.top/"><i class="fa fa-link"></i>全球线路</a>
        </details>
      </card>
      <footer>
        <p>富强 | 民主 | 文明 | 和谐 | 自由 | 平等 | 公正 | 法制 | 爱国 | 敬业 | 诚信 | 友善</p>
        <small>© 2025 Hanta. All rights reserved.</small>
      </footer>
    </box>
    <button onclick="topFunction()" id="myBtn" title="回顶部"><i class="fa fa-hand-o-up" style="font-size: large;"></i></button>

    <!-- MetingJS 依赖 -->
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js"></script>

    <div class="music-player">
      <meting-js
          server="netease"
          type="playlist"
          id="8674117203"
          fixed="true"
          theme="#2eb6ff"
          loop="all"
          order="random"
          lrc-type="3"
          volume="0.8">
      </meting-js>
    </div>

    <script>
      window.onload = function () {
        const ap = document.querySelector('meting-js').aplayer;

        // 添加可视化效果
        ap.on('canplay', function () {
          const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
          const analyser = audioCtx.createAnalyser();
          const source = audioCtx.createMediaElementSource(ap.audio);

          source.connect(analyser);
          analyser.connect(audioCtx.destination);

          // 绘制音频波形
          function visualize() {
            requestAnimationFrame(visualize);
            const dataArray = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(dataArray);
            // 自定义绘制逻辑
          }
          visualize();
        });
      };
    </script>

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-m/marked/4.0.2/marked.min.js"></script>
    <script>
        // 外部Markdown文件的URL
        const markdownFileUrl = 'https://hub.gitmirror.com/https://raw.githubusercontent.com/exef-star/exef-star/main/README.md'; // 替换为你的Markdown文件URL

        async function fetchAndParseMarkdown() {
            try {
                const response = await fetch(markdownFileUrl);
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                const markdownContent = await response.text();

                // 使用marked.js解析Markdown内容
                const htmlContent = marked.parse(markdownContent);

                // 将解析后的HTML内容插入到div中
                document.getElementById('content').innerHTML = htmlContent;
            } catch (error) {
                console.error('Error fetching and parsing Markdown:', error);
                document.getElementById('content').innerHTML = '<p>无法加载Markdown内容。</p>';
            }
        }

        // 初始化时获取并解析Markdown文件
        fetchAndParseMarkdown();
    </script>
    <script>
      // 当网页向下滑动 20px 出现"返回顶部" 按钮
      window.onscroll = function () { scrollFunction() };

      function scrollFunction() {
        console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
        } else {
          document.getElementById("myBtn").style.display = "none";
        }
      }

      // 点击按钮，返回顶部
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
</body>
</html>

🍹一些设置项（仅参考）

第六行为标题栏：

<title>ℋℴ𝓂ℯ | ℋ𝒶𝓃𝓉𝒶</title>

第7和13~15行为字体，可以自己找字体css文件然后引入

<link rel="stylesheet" href="https://fontsapi.zeoseven.com/292/main/result.css">

* {
    font-family: "LXGW WenKai";
}

19行为背景图片设置，可以自己找图片然后替换

background-image: url('https://i.p-i.vip/68/20250720-687c506561da7.webp'); /* 背景图片URL */

第9行和193~212行为社交链接设置，使用的是iconfont，可以自己去iconfont官网生成自己需要的图标然后引入编辑

<script src="https://at.alicdn.com/t/c/font_4979364_d45pscvlqs.js"></script>

<a href="https://github.com/exef-star">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-github"></use>
    </svg>
</a>
<a href="https://space.bilibili.com/3537111871392719">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bilibili"></use>
    </svg>
</a>
<a href="https://res.abeim.cn/api/qq/?qq=2667174454">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-QQ"></use>
    </svg>
</a>
<a href="mailto:2667174454@qq.com">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-mail-"></use>
    </svg>
</a>

244行下脚的版权信息，可以自己修改：

<small>© 2025 Hanta. All rights reserved.</small>

191行为大标题栏，可以自己修改：

<h1>Hantaの主页 · <small style="font-size: smaller;">一个简约的个人主页</small></h1>

255~263行为音乐播放器设置，配置如下：

<meting-js
    server="netease"
    type="playlist"
    id="8674117203"
    fixed="true"
    theme="#2eb6ff"
    loop="all"
    order="random"
    lrc-type="3"
    volume="0.8">
</meting-js>

server：netease（网易云音乐(默认)）、tencent（QQ音乐）
type：lrc(歌词)、url(歌曲链接)、pic(歌词)、song(歌曲信息)、playlist(歌单，默认)、artist(歌手)、search(搜索)。
id：歌单ID或歌曲ID

295行，你的Github个人主页的markdown文件地址，可以自己修改：

const markdownFileUrl = 'https://raw.githubusercontent.com/exef-star/exef-star/main/README.md';

🍨后记

发给群友的时候，反馈说移动端看不出来内容，排查删掉display: flex和justify-content: center这两个元素就恢复正常了。

⭐封面图

图片来自哲风壁纸

封面图