ygdsnd Blog

博客更新毛玻璃效果(适配移动端)

Sat, 16 May 2026 00:00:00 GMT

你需要准备的

一个high iQ的脑子，遇到问题会问AI
要有一点点的编程基础
安装Node.js
注册github账号
安装一个源代码编辑器像visual studio code

正式开始

部署Fuwari博客：https://ygdsndblog.netlify.app/posts/fuwari
在根目录的 src 文件夹中，找到 styles文件夹，再用源代码编辑器打开main.css文件
在main.css代码中添加这一段代码

[!tip] 添加在最后一行


/* 导航栏毛玻璃 - 保留原有效果 */
#navbar-wrapper {
position: fixed !important;
top: 2px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 99999 !important;
width: 90% !important;
max-width: 1200px !important;
height: 73px !important;
border-radius: 36px !important;

backdrop-filter: blur(4px) !important;



pointer-events: initial !important; /* 改回auto，initial是重置所有规则，容易出问题 */
}

/* 浮动面板毛玻璃 - 保留原有效果 */
.float-panel,
#display-setting,
#light-dark-panel .float-panel {
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 20px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}
.float-panel *:not(input[type="range"]) {
background: transparent !important;
}
#display-setting input[type="range"].slider {
background: var(--color-selection-bar) !important;
-webkit-appearance: none !important;
appearance: none !important;
height: 1.5rem !important; /* 匹配原有高度 */
border: none !important;
outline: none !important;
}

/* 全站磨砂玻璃效果 一键覆盖 */
.widget-layout, /* 你漏了.，补上！否则样式不生效 */
.card-base,
.astro-auto-article,
.float-panel,
#toc-wrapper > div {
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 36px !important;
box-shadow: none !important;
}

/* 按钮毛玻璃 */
.btn {
background: rgba(255,255,255,0.2) !important;
backdrop-filter: blur(4px) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
}
:root {
 --card-bg: rgba(255, 255, 255, 0.25) !important;
}

/* 暗色模式 */
.dark {
 --card-bg: rgba(30, 30, 45, 0.35) !important;
}
.card-base {
 backdrop-filter: blur(6px) !important;
 -webkit-backdrop-filter: blur(6px) !important;
}
@media (max-width: 768px) {
 .card-base a.group.max-h-\[20vh\] {
     max-height: none !important;
     aspect-ratio: 4 / 3 !important;
     width: calc(100% - 2rem) !important;
     display: block !important;
     overflow: hidden !important;
 }

 /* 封面内层div */
 .card-base a.group.max-h-\[20vh\] .image-wrapper {
     width: 100% !important;
     height: 100% !important;
 }

 /* 封面图片 */
 .card-base a.group.max-h-\[20vh\] img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     aspect-ratio: unset !important;
 }
}
@media (max-width: 768px) {
 div.flex.flex-col.rounded-\[var\(--radius-large\)\].bg-\[var\(--card-bg\)\].py-1 {
     background: transparent !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     border: none !important;
     box-shadow: none !important;
 }
}
@media (max-width: 768px) {
 #navbar .card-base {
     background: transparent !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     border: none !important;
     box-shadow: none !important;
 }
}

自行调节

/* 顶部导航栏整体容器样式 */
#navbar-wrapper {
position: fixed !important; /* 固定定位悬浮页面 */
top: 2px !important; /* 距离顶部2px */
left: 50% !important; /* 向左居中定位起点 */
transform: translateX(-50%) !important; /* 水平居中对齐 */
z-index: 99999 !important; /* 最高层级防止被遮挡 */
width: 90% !important; /* 导航栏宽度占比 */
max-width: 1200px !important; /* 桌面端最大宽度限制 */
height: 73px !important; /* 导航栏固定高度 */
border-radius: 36px !important; /* 超大圆角圆润外观 */

backdrop-filter: blur(4px) !important; /* 基础毛玻璃模糊效果 */

pointer-events: initial !important; /* 鼠标事件正常生效 */
}

/* 全局浮动弹窗/设置面板 毛玻璃样式 */
.float-panel,
#display-setting,
#light-dark-panel .float-panel {
background: rgba(255, 255, 255, 0.2) !important; /* 浅色半透明底色 */
backdrop-filter: blur(8px) !important; /* 高强度毛玻璃模糊 */
-webkit-backdrop-filter: blur(8px) !important; /* 兼容webkit内核浏览器 */
border: 1px solid rgba(255,255,255,0.25) !important; /* 浅色细边框提亮 */
border-radius: 20px !important; /* 弹窗圆角大小 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; /* 轻微投影增加层次 */
}
/* 浮动面板内部除滑动条外全部透明背景 */
.float-panel *:not(input[type="range"]) {
background: transparent !important;
}
/* 页面设置里的进度滑块自定义样式 */
#display-setting input[type="range"].slider {
background: var(--color-selection-bar) !important; /* 调用主题选中色 */
-webkit-appearance: none !important; /* 清除浏览器默认滑块样式 */
appearance: none !important;
height: 1.5rem !important; /* 滑块高度 */
border: none !important; /* 去除边框 */
outline: none !important; /* 去除选中外边框 */
}

/* 全站通用磨砂玻璃效果 统一套用元素 */
.widget-layout, /* 页面布局容器 */
.card-base, /* 基础卡片组件 */
.astro-auto-article, /* 文章内容模块 */
.float-panel, /* 浮动面板 */
#toc-wrapper > div /* 侧边目录容器 */
{
background: rgba(255, 255, 255, 0.2) !important; /* 统一半透明白底 */
backdrop-filter: blur(6px) !important; /* 中等强度毛玻璃 */
-webkit-backdrop-filter: blur(6px) !important; /* 浏览器兼容 */
border: 1px solid rgba(255,255,255,0.2) !important; /* 通透细边框 */
border-radius: 36px !important; /* 统一大圆角 */
box-shadow: none !important; /* 取消默认阴影 */
}

/* 页面通用按钮毛玻璃样式 */
.btn {
background: rgba(255,255,255,0.2) !important; /* 按钮半透明底色 */
backdrop-filter: blur(4px) !important; /* 轻度模糊 */
border: 1px solid rgba(255,255,255,0.2) !important; /* 按钮细边框 */
}

/* 全局CSS变量定义 亮色模式卡片底色 */
:root {
  --card-bg: rgba(255, 255, 255, 0.25) !important;
}

/* 深色模式全局变量 深色卡片底色 */
.dark {
  --card-bg: rgba(30, 30, 45, 0.35) !important;
}

/* 重复加固卡片毛玻璃兼容 */
.card-base {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 移动端适配 屏幕宽度768px及以下生效 */
@media (max-width: 768px) {
  /* 移动端文章封面卡片布局调整 */
  .card-base a.group.max-h-\[20vh\] {
      max-height: none !important; /* 取消最大高度限制 */
      aspect-ratio: 4 / 3 !important; /* 固定图片4:3比例 */
      width: calc(100% - 2rem) !important; /* 左右预留边距 */
      display: block !important; /* 块状居中显示 */
      overflow: hidden !important; /* 超出内容隐藏 */
  }

  /* 封面内层容器铺满父级 */
  .card-base a.group.max-h-\[20vh\] .image-wrapper {
      width: 100% !important;
      height: 100% !important;
  }

  /* 封面图片铺满裁切适配 */
  .card-base a.group.max-h-\[20vh\] img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important; /* 等比裁切不变形 */
      aspect-ratio: unset !important; /* 取消自带比例 */
  }
}

/* 移动端清除多余嵌套毛玻璃避免重叠模糊 */
@media (max-width: 768px) {
  div.flex.flex-col.rounded-\[var<span data-type="inline-math" data-value="LS1yYWRpdXMtbGFyZ2U="></span>\].bg-\[var<span data-type="inline-math" data-value="LS1jYXJkLWJn"></span>\].py-1 {
      background: transparent !important; /* 清空背景 */
      backdrop-filter: none !important; /* 关闭毛玻璃 */
      -webkit-backdrop-filter: none !important;
      border: none !important; /* 去除边框 */
      box-shadow: none !important; /* 去除阴影 */
  }
}

/* 移动端导航栏内卡片取消毛玻璃 */
@media (max-width: 768px) {
  #navbar .card-base {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      box-shadow: none !important;
  }
}

完成！

恭喜你完成了！赶紧pnpm dev测试下吧！如果没有问题，可否评论支持下呢？😃

小米手环10体验报告

Sat, 21 Feb 2026 00:00:00 GMT

作为小米手环系列的忠实用户，从手环7用到手环10，每一代的升级都能感受到米对“轻智能穿戴”的理解不断深化。与前代相比，小米手环10最大的外在变化在于这块1.72英寸的AMOLED屏幕。它不仅尺寸是当前同品类中的佼佼者，更首次在小米手环上实现了极致超窄的四等边设计，以往被诟病的“大下巴”终于消失，亮屏后的观感非常匀称、协调。屏幕峰值亮度提升至1500尼特，相比上一代提升了25%。在最近几天的实测中，即使是正午的强光下户外行走，抬手看时间也毫无障碍。

我体验的是标准版，机身采用了铝合金中框，配合哑光喷砂与CNC工艺，质感远超以往的塑料机身，完全不像一款起售价仅269元的产品。整机重量（不含表带）控制在16g左右，搭配氟橡胶表带佩戴起来非常轻盈。消息提醒能看微信和QQ，不能回。其实真要回消息也不会对着手腕戳，所以无所谓。但有个场景挺方便：拎着东西的时候，来消息瞟一眼就知道了，不用掏手机。

运动记录：模式丰富，适配多种场景

运动模式方面，小米手环10支持150+种运动模式，涵盖户外健走、骑行、泳池游泳、室内单车等常见场景，其中游泳模式支持5ATM防水，能实现AI泳姿识别、九轴姿态转身检测，还可以自定义泳池长度，满足游泳爱好者的需求。

新增的蓝牙心率广播功能很实用，开启后能被手机或码表识别。实测户外跑步时，手环能精准记录里程、配速、步频等数据，不过由于没有独立GPS，里程和配速误差略大，需要连接手机才能获得更精准的数据。

此外，手环还支持运动记录、跑步课程、训练状态分析等功能，能根据运动数据给出针对性建议，帮助用户科学运动，避免受伤。运动后，数据会同步到小米运动健康APP，生成详细的运动报告，方便用户回顾运动效果。

续航表现：持久耐用，告别充电焦虑

续航一直是小米手环系列的优势，小米手环10也不例外。官方数据显示，手环满电状态下可实现21天超耐久续航，开启AOD模式可续航9天，重载模式可续航8天。

实测下来，我开启全天血氧监测、高精度睡眠监测、抬腕亮屏和AOD模式，每天接收消息、记录步数，5天后还剩余35%的电量，满电用一周妥妥的；如果关闭AOD模式和部分健康监测功能，续航能轻松超过10天。

充电方面，手环依旧采用磁吸充电设计，5V 1A充电功率，充电速度中规中矩，不过由于续航持久，平时也不需要频繁充电。

不足与遗憾：这些痛点仍需优化

虽然小米手环10有不少亮点，但一个多月体验下来也发现了一些不足，尤其是对于追求极致体验的用户来说，可能会有些遗憾。

首先，没有独立GPS，这是最大的短板。对于认真训练的跑步、骑行爱好者来说，没有独立GPS意味着运动数据不够精准，必须连接手机才能获得准确的里程和配速，出门运动时还要额外携带手机，不够便捷。

其次，第三方兼容性较差。手环的数据只能同步到小米运动健康APP和苹果健康，不支持其他运动平台。

最后，部分功能存在小瑕疵。比如消息提醒存在约1秒的延迟，且当iPhone开启专注模式时，手环不会同步静音，需要手动开启勿扰模式；在一些场所无法使用微信支付。

总结与购买建议：谁值得入手？

总的来说，小米手环10是一款“精准定位入门级市场”的优质产品，它没有追求全能，但却把日常最常用的功能做到了极致，颜值与实用性兼顾。如果你预算有限，想要一款颜值高、功能全、续航久的智能手环，小米手环10值得试试。

我的材质包发布啦！

Mon, 09 Feb 2026 00:00:00 GMT

【PVP材质包】2026年最精致的棍棒材质包！提升FPS！手感爆炸！

Fuwari静态博客搭建教程

Sat, 13 Sep 2025 00:00:00 GMT

你需要准备的

一个high iQ的脑子，遇到问题会问AI
要有一点点的编程基础
安装Node.js
注册github账号
安装一个源代码编辑器像visual studio code

正式开始

下载Fuwari博客的仓库的压缩包：https://github.com/saicaca/fuwari
解压
安装pnpm：打开cmd运行npm install -g pnpm
在项目根目录打开cmd运行：pnpm install 和 pnpm add sharp
成功本地部署Fuwari

改写Fuwari的示例信息和示例文章

在根目录的 src 文件夹中，找到 config.ts 改写示例信息

这是我的config.ts参考

import type {
ExpressiveCodeConfig,
ImageFallbackConfig,
LicenseConfig,
NavBarConfig,
ProfileConfig,
SiteConfig,
UmamiConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";

export const siteConfig: SiteConfig = {
title: "ygdsnd Blog",
description:
   "分享内网穿透、静态网站搭建等的个人博客",

keywords: [],
lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
themeColor: {
   hue: 220, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
   fixed: false, // Hide the theme color picker for visitors
   forceDarkMode: false, // Force dark mode and hide theme switcher
},
banner: {
   enable: false,
   src: "/xinghui.avif", // Relative to the /src directory. Relative to the /public directory if it starts with '/'

   position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
   credit: {
   	enable: true, // Display the credit text of the banner image
   	text: "Pixiv @chokei", // Credit text to be displayed

   	url: "https://www.pixiv.net/artworks/122782209", // (Optional) URL link to the original artwork or artist's page
   },
},
background: {
   enable: true, // Enable background image
   src: "/background.jpg", // Background image URL (supports HTTPS)
   position: "center", // Background position: 'top', 'center', 'bottom'
   size: "cover", // Background size: 'cover', 'contain', 'auto'
   repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
   attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local'
   opacity: 0.5, // Background opacity (0-1)
},
toc: {
   enable: true, // Display the table of contents on the right side of the post
   depth: 2, // Maximum heading depth to show in the table, from 1 to 3
},
favicon: [
   // Leave this array empty to use the default favicon
   {
   	src: "https://picui.cn/thumbnails/999b613e0650a058c527d40b3c236bb7.png", // Path of the favicon, relative to the /public directory
   	//   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
   	//   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
   },
 ],
};

export const navBarConfig: NavBarConfig = {
links: [
   LinkPreset.Home,
   LinkPreset.Archive,
   LinkPreset.About,
   {
   	name: "个人主页",
   	url: "https://ygdsnd.github.io", // Internal links should not include the base path, as it is automatically added
   	external: true, // Show an external link icon and will open in a new tab
   },
 ],
};

export const profileConfig: ProfileConfig = {
avatar: "https://picui.cn/thumbnails/1c4df8c405b2dd1983b2ac4672922ecf.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
name: "ygdsnd",
bio: "一个普通人",
links: [
   {
   	name: "Bilibli",
   	icon: "fa6-brands:bilibili",
   	url: "https://space.bilibili.com/1210398385",
   },
   {
   	name: "GitHub",
   	icon: "fa6-brands:github",
   	url: "https://github.com/ygdsnd",
   },
],
};

export const licenseConfig: LicenseConfig = {
enable: true,
name: "CC BY-NC-SA 4.0",
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
};

export const imageFallbackConfig: ImageFallbackConfig = {
enable: false,
originalDomain: "",
fallbackDomain: "",
};

export const umamiConfig: UmamiConfig = {
enable: false,
baseUrl: "",
shareId: "",
timezone: "",
};

export const expressiveCodeConfig: ExpressiveCodeConfig = {
theme: "github-dark",
};

在根目录下的 src/content/posts 文件夹中有示例文章，文章介绍了一些md语法和技巧，将其保存到别处or删除

开始写文章

在项目根目录执行：pnpm new-post <文章标题>
在项目根目录下的 src/content/posts 文件夹中会多出一个 xxx.md文件

打开它

title: xxx //title：文章标题
published: 2025-10-1  //published：文章创建时间
description: ''  //文章描述，显示在文章标题下方
image: ''  //封面图
tags: []  //文章标签
categories: ''  //文章分类
draft: false
lang: ''

本地预览，然后部署在Netlify上

本地预览：在项目根目录执行：pnpm dev后，打开浏览器进入http://localhost:4321/
打包项目：在项目根目录执行：pnpm build后,在根目录形成一个dist文件夹，里面就是打包好的项目。
部署Netlify，在浏览器打开https://app.netlify.com/，登录你的Github账号，把打包好的项目直接移进首页就行了。
部署完成后，Netlify 会生成一个临时 URL，你可以通过该链接访问网站。
在 Netlify 仪表板中，进入站点设置。添加自定义域名，并更新 DNS 设置以指向 Netlify 提供的地址。

ygdsnd Blog

博客更新毛玻璃效果(适配移动端)

你需要准备的

正式开始

完成！

小米手环10体验报告

我的材质包发布啦！

Fuwari静态博客搭建教程

你需要准备的

正式开始

改写Fuwari的示例信息和示例文章

开始写文章

本地预览，然后部署在Netlify上

到这里，你已经成功搭建了你的个人博客😍