Blog｜美丽Blog公开的秘密

现在这一版装修真的太顺眼了，从来没有这么顺眼过这就是我自己设计css的魅力吗（指我提出需求gpt老师完成和看fedi友友的装修blog抄抄）。

特别鸣谢塔塔的隐藏文章教程,漫游者迷路中的角落卡比漂浮，Asyncx的neodb卡片和小鱼评论区的图片悬浮！，还有elysium宝宝的天才想法！所以我来存档一下！

隐藏文章

把原来的posts内容导上来之后，发现2022年实在写了很多批判的内容，为了个人安全着想，决定隐藏2022年除了建站成功之外的其他posts。

我的博客是由astro驱动的，我的办法是拿着塔塔的博客再去问chatgpt老师说，我的astro博客也想要这个，我该怎么办，gpt老师说，首先要在你的posts的frontmatter中加上hidden: true，第二你的blog界面要隐藏加了hidden: true的文章，第三你的tag界面要隐藏加了hidden: true的文章。

blog页面

// 所有文章（包括 hidden 的），用于统计总数
const allPostsRaw = Object.values(
  import.meta.glob('./posts/*.md', { eager: true })
);
// 过滤掉 hidden: true 的文章，用于显示
const allPosts = allPostsRaw
  .filter((post) => !post.frontmatter.hidden)
  .sort((a, b) => new Date(b.frontmatter.pubDate).getTime() - new Date(a.frontmatter.pubDate).getTime());

tag页面

type Post = {
  frontmatter: {
    title: string;
    pubDate: string;
    tags?: string[];
    hidden?: boolean;
  };
  url: string;
};

export async function getStaticPaths() {
  const allPostImports = import.meta.glob('../posts/*.md', { eager: true });
  const allPosts = Object.values(allPostImports) as Post[];

  // 过滤掉 hidden: true 的文章
  const visiblePosts = allPosts.filter((post) => !post.frontmatter.hidden);

  // 提取所有标签并生成标签到文章的映射
  const tagMap = new Map<string, Post[]>();
  for (const post of visiblePosts) {
    const tags = post.frontmatter.tags || [];
    for (const tag of tags) {
      if (!tagMap.has(tag)) {
        tagMap.set(tag, []);
      }
      tagMap.get(tag)?.push(post);
    }
  }

  // 仅为包含公开文章的标签生成页面
  return Array.from(tagMap.entries()).map(([tag, posts]) => ({
    params: { tag },
    props: { posts },
  }));
}

美丽主界面

tag界面

我的tag界面用了随机颜色，特别漂亮！

<script type="module">
    const colors = [
      'rgba(255, 192, 203, 0.6)',  // pink
      'rgba(173, 216, 230, 0.6)',  // lightblue
      'rgba(240, 230, 140, 0.6)',  // khaki
      'rgba(144, 238, 144, 0.6)',  // lightgreen
      'rgba(216, 191, 216, 0.6)',  // thistle
      'rgba(255, 160, 122, 0.6)',  // lightsalmon
      'rgba(224, 255, 255, 0.6)',  // lightcyan
      'rgba(255, 215, 0, 0.6)',    // gold
      'rgba(176, 224, 230, 0.6)',  // powderblue
      'rgba(255, 182, 193, 0.6)'   // lightpink
     ];

    document.querySelectorAll('.tag').forEach(tag => {
      const color = colors[Math.floor(Math.random() * colors.length)];
      tag.style.backgroundColor = color;
      tag.style.borderColor = color;
    });

    document.querySelectorAll('.tag a').forEach(link => {
      link.addEventListener('mousedown', () => {
        link.classList.add('clicked');
      });
      link.addEventListener('mouseup', () => {
        setTimeout(() => link.classList.remove('clicked'), 150);
      });
    });
  </script>

和style。

<style>
  .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1em;
  }

  .tag {
    border: dotted 1px #aaa;
    border-radius: 10% 50% 10% 50%; /* 云朵形状 */
    padding: 0.75em 1.5em;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
    opacity: 0.8;
  }

  .tag:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    opacity: 1;
  }

  .tag a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: transform 0.1s ease;
    display: inline-block;
  }

  .tag a.clicked {
    transform: scale(0.9);
  }
</style>

about界面

我的about界面也是随机颜色，选中会加载下划线。

<style>
  .about-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 2em 1em;
    text-align: left;
  }

  .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 2em;
  }

  .motto-list {
    text-align: left;
    font-size: 1em;
    line-height: 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .motto {
    position: relative;
    padding-bottom: 0.2em;
    display: inline-block;
    transition: all 0.3s ease;
  }

  .motto:hover {
    transform: translateY(-2px);
    opacity: 0.95;
  }

  .motto::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }

  .motto:hover::after {
    transform: scaleX(1);
  }

  .year {
    font-weight: bold;
  }

  /* 预设随机配色池 */
  .color1 { color: #c06c84; }
  .color2 { color: #6c5b7b; }
  .color3 { color: #355c7d; }
  .color4 { color: #f67280; }
  .color5 { color: #ffa07a; }
</style>

friends界面

这个部分也是随机颜色的色块，但是颜色不太一样，美美的。而且加上了每次加载都打乱顺序！

<script type="module">
  const colors = [
    'rgba(255, 192, 203, 0.3)',
    'rgba(173, 216, 230, 0.3)',
    'rgba(240, 230, 140, 0.3)',
    'rgba(144, 238, 144, 0.3)',
    'rgba(216, 191, 216, 0.3)',
    'rgba(255, 160, 122, 0.3)',
    'rgba(224, 255, 255, 0.3)',
    'rgba(255, 182, 193, 0.3)',
    'rgba(221, 240, 255, 0.3)',
    'rgba(250, 250, 210, 0.3)'
  ];

  // 💡 洗牌函数
  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  const ul = document.querySelector('.friend-links');
  const items = Array.from(ul.children);

  // 打乱顺序
  shuffle(items);

  // 清空并重新插入
  ul.innerHTML = '';
  items.forEach(item => ul.appendChild(item));

  // 设置随机背景色
  document.querySelectorAll('.friend-links li a').forEach(link => {
    const color = colors[Math.floor(Math.random() * colors.length)];
    link.style.backgroundColor = color;
    link.style.borderColor = color;
  });
</script>
  </script>

和style

<style>
.friend-links {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
  font-size: 0.95rem;
  font-family: 'Noto Serif SC', serif;
  margin-top: 2rem;
}

.friend-links li a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.6rem 0.9rem;
  border-radius: 60% 20% 20% 60% / 30% 50% 30% 50%;
  border: 1px dotted transparent;
  font-weight: 500;
  word-break: keep-all;
  opacity: 0.85;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  backdrop-filter: blur(2px);
  font-family: 'Noto Serif SC', serif;
}

.friend-links li a:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 1;
}
</style>

美丽CSS

基础界面

我的博客基础界面是美丽背景下的点阵手帐本，请看！

/* 页面基础设置 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Serif SC', 'Noto Sans CJK', 'Microsoft YaHei', serif;
  font-weight: normal;
  letter-spacing: 0.5px;
  line-height: 1.6;
  background: url('https://github.com/sikonn/picx-images-hosting/raw/master/GpSldJRawAAKrZm.8l0b5hxxh9.webp') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 容器样式 */
.container {
  margin: 2rem auto;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 720px;
  width: 90%;
  box-sizing: border-box;
  text-align: left;
  backdrop-filter: blur(4px);
  background-image: radial-gradient(#ccc 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
  border: 2.5px dashed #e4d0d0;
  position: relative;
}

导航栏

/* —— 导航栏基础 —— */
.navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  transform: scale(0.9); /* 整体缩小 */
  transform-origin: top center;
}

.navbar a {
  position: relative;
  padding: 0.4em 0.9em;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 7px;
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 下划线 hover 动画 */
.navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.navbar a:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.navbar a:hover::after {
  transform: scaleX(1);
}

/* 多彩效果：根据顺序设置颜色 */
.navbar a:nth-child(1) { color: #c06c84; border: 1px dashed #c06c84; }
.navbar a:nth-child(2) { color: #6c5b7b; border: 1px dashed #6c5b7b; }
.navbar a:nth-child(3) { color: #355c7d; border: 1px dashed #355c7d; }
.navbar a:nth-child(4) { color: #f67280; border: 1px dashed #f67280; }
.navbar a:nth-child(5) { color: #ffa07a; border: 1px dashed #ffa07a; }

neodb卡片

.db-card {
  display: flex;
  height: 180px; /* 固定高度 */
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed rgba(255, 219, 224, 0.6); /* 浅粉色虚线边框 */
  margin: 1rem 0;
  background: rgba(241, 228, 233, 0.5); /* 浅粉半透明背景 */
  font-family: 'Noto Serif SC', serif;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.db-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.db-card-subject {
  display: flex;
  width: 100%;
  color: inherit;
}

.db-card-post {
  flex-shrink: 0;
  height: 100%; /* 高度 = 卡片高度 */
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
}

.db-card-post img {
  height: 100%;          /* 图片高度 = 卡片高度 */
  width: auto;           /* 宽度按比例适应 */
  object-fit: contain;   /* 保持图片比例，不裁剪 */
  display: block;
}

.db-card-content {
  padding: 1rem 1rem 1rem 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.db-card-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: #222;
}

.rating {
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.db-card-abstract {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.4rem;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .db-card {
    flex-direction: column;
    height: auto;
  }

  .db-card-post {
    width: 100%;
    height: auto;
    justify-content: center;
  }

  .db-card-post img {
    width: 100%;
    height: auto;
  }
}

引用块

/* 引用块 - 便签纸风格 */
blockquote {
  background: #fff0f6; /* 淡淡粉色背景 */
  padding: 1rem 1rem;
  margin: 0 0 8px 0;  /* 这里把底部margin调小，比如8px或者更小 */
  color: #6b4c4c;
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 0 10px #ffe6eb; /* 内阴影，营造纸质感 */
  border-radius: 8px;
  position: relative;
  font-family: 'Georgia', serif;
  transition: box-shadow 0.3s ease;
  cursor: default;
  padding-bottom: 8px;  /* 适当减少内边距 *
  margin-bottom: 0;     /* 取消外边距 */
}

/* 引用块悬停时稍微亮一点 */
blockquote:hover {
  box-shadow:
    3px 3px 10px rgba(0, 0, 0, 0.15),
    inset 0 0 12px #ffd1d9;
}
blockquote > *:last-child {
  margin-bottom: 0;     /* 去掉最后一个子元素的底部外边距 */
  padding-bottom: 0;    /* 去掉最后一个子元素的底部内边距 */
  line-height: 2;     /* 适当调整行高 */
}
blockquote::before,
blockquote::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #ffd6e0,
    #ffd6e0 5px,
    #ffc0cb 5px,
    #ffc0cb 10px
  );
  top: -10px;
  transform: rotate(-3deg);
  opacity: 0.7;
}

blockquote::before {
  left: 10px;
}

blockquote::after {
  right: 10px;
  transform: rotate(5deg);
}

点击图片放大

/* 弹出层样式 */
img.zoomable {
  cursor: zoom-in;
  transition: 0.3s;
}

img.zoomable:active {
  cursor: zoom-out;
}

.zoom-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoom-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

图片悬浮

这个是在小鱼的评论区里面学的！

img.float-img50 {
  float: left;
  width: 40%;
  margin-right: 1em !important;
  margin-bottom: 0.5em !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

@keyframes floatBalloon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 向上浮动10px */
  }
  100% {
    transform: translateY(0);
  }
}

悬浮卡比

这个也是全抄象友的，只是换成了听歌摇滚的卡比酱！

body::after {
  content: ""; /* 伪元素需要内容 */
  position: fixed; /* 固定位置 */
  bottom: 20px; /* 离底部 20px */
  right: 20px; /* 离右侧 20px */
  width: 73px; /* 动图宽度 */
  height: 85px; /* 动图高度 */
  background-image: url("https://res.stelpolva.moe/stpv/615a661f-3b7c-4ba9-b29a-f1b8eee13979.apng"); /* 动图 URL */
  background-size: contain; /* 保持比例，但不裁剪 */
  background-position: center; /* 图片居中 */
  z-index: 9999; /* 确保在页面最上层 */
  animation: floatBalloon 5s infinite ease-in-out; /* 添加动画 */
}

elysium宝宝刚刚评论说如果能放音乐不敢想能玩多久！天才宝宝！我立马行动，翻出了最爱乐队的音乐卡遗憾发现下载截止到3.31，于是用了noteburner转换了他们的歌单50首歌，遗憾的是只有一分钟试听（等我下次去live买了一定下载！！！）

于是，摇滚卡比音乐播放功能堂堂上线！点击就可以听到卡比耳机里在听什么啦！点击一下播放，点击两下暂停，点击三下切歌！

<script>
        document.addEventListener('DOMContentLoaded', () => {
          document.querySelectorAll('img').forEach(img => {
            // 🛑 如果是卡比图就跳过，不加放大效果
            if (img.closest('#musicToggle')) return;

            img.classList.add('zoomable');
            img.addEventListener('click', () => {
              const overlay = document.createElement('div');
              overlay.className = 'zoom-overlay';
              overlay.innerHTML = `<img src="${img.src}" alt="${img.alt}" />`;
              overlay.addEventListener('click', () => {
                overlay.remove();
              });
              document.body.appendChild(overlay);
            });
          });
        });
      </script>

<!-- 卡比图标，作为控制器 -->
    <div id="musicToggle">
      <img src="https://res.stelpolva.moe/stpv/615a661f-3b7c-4ba9-b29a-f1b8eee13979.apng" alt="Toggle Music" width="73" height="85" />
    </div>

    <!-- 隐藏的音乐播放器 -->
    <audio id="audioPlayer" preload="auto" src="/music/music1.m4a"></audio>

    <script>
      const audioPlayer = document.getElementById('audioPlayer');
      const musicToggle = document.getElementById('musicToggle');
      const totalTracks = 50;
      let currentTrack = 1;
      let clickCount = 0;
      let clickTimer;

      function updateTrack() {
        const fileName = `music${currentTrack}.m4a`;
        audioPlayer.src = `/music/${fileName}`;
        audioPlayer.play();
      }

      musicToggle.addEventListener('click', () => {
        clickCount++;
        clearTimeout(clickTimer);

        clickTimer = setTimeout(() => {
          if (clickCount === 1) {
            audioPlayer.play();
          } else if (clickCount === 2) {
            audioPlayer.pause();
          } else if (clickCount === 3) {
            currentTrack = currentTrack < totalTracks ? currentTrack + 1 : 1;
            updateTrack();
          }
          clickCount = 0;
        }, 300); // 300ms 内连续点击识别为多击
      });

      audioPlayer.addEventListener('ended', () => {
        currentTrack = currentTrack < totalTracks ? currentTrack + 1 : 1;
        updateTrack();
      });
    </script>

/* 卡比图标悬浮动画 */
#musicToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  animation: floatBalloon 5s infinite ease-in-out;
}

@keyframes floatBalloon {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 隐藏 audio 控件 */
#audioPlayer {
  display: none;
}

评论区css

天呐这评论区也太萌了吧！可惜没找到怎么换默认头像和怎么关闭设备信息和浏览器信息（大哭）

/* 🌸 Waline 评论区 - 便签纸风格 🌸 */
#waline {
  max-width: 800px;
  margin: 2rem auto;
  background: #fff0f6;
  border-radius: 12px;
  padding: 1.5rem;
  font-family: 'Georgia', serif;
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 0 10px #ffe6eb;
  position: relative;
  transition: box-shadow 0.3s ease;
}

/* 🩷 顶部胶带效果 */
#waline::before,
#waline::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #ffd6e0,
    #ffd6e0 5px,
    #ffc0cb 5px,
    #ffc0cb 10px
  );
  top: -10px;
  opacity: 0.6;
}
#waline::before {
  left: 12px;
  transform: rotate(-3deg);
}
#waline::after {
  right: 12px;
  transform: rotate(5deg);
}

/* === 2. 输入区域容器（仿便签块） === */
.wl-input,
.wl-editor {
  background: #fff0f6;
  padding: 1rem;
  border-radius: 8px;
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 0 10px #ffe6eb;
  font-family: 'Georgia', serif;
  color: #6b4c4c;
  margin-bottom: 1rem;
  position: relative;
  transition: box-shadow 0.3s ease;
}

/* === 3. 输入框（昵称、邮箱、网址） === */
.wl-input input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #f3b6c1;
  padding: 6px;
  width: 100%;
  font-family: 'Georgia', serif;
  color: #6b4c4c;
  outline: none;
}

/* === 4. 评论文本框（textarea） === */
.wl-editor textarea {
  background: transparent;
  border: none;
  width: 100%;
  min-height: 100px;
  font-family: 'Georgia', serif;
  color: #6b4c4c;
  resize: vertical;
  outline: none;
}

/* === 5. 提交按钮 === */
#waline button[type="submit"],
.wl-btn {
  background-color: #f3b6c1;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
#waline button[type="submit"]:hover,
.wl-btn:hover {
  background-color: #ff9dbb;
}

/* === 6. 评论展示区域 === */
.wl-comment,
.wl-panel {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  border-radius: 0;
  border: none;
}

/* === 7. 头像圆形 === */
.wl-avatar {
  border-radius: 50%;
}

/* === 8. 条纹装饰在文本框上方 === */
.wl-editor::before,
.wl-editor::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #ffd6e0,
    #ffd6e0 5px,
    #ffc0cb 5px,
    #ffc0cb 10px
  );
  top: -10px;
  opacity: 0.7;
  z-index: 1;
}
.wl-editor::before {
  left: 10px;
  transform: rotate(-3deg);
}
.wl-editor::after {
  right: 10px;
  transform: rotate(5deg);
}

以上！希望有朋友愿意试试！也希望未来的自己看到说真好！