![\"班级毕业合照\"](\"https://net.undz.cn/static/png/d475374f852406e91f793537bbbe6bd2.png\")
\nhttps://net.undz.cn/static/png/d475374f852406e91f793537bbbe6bd2.png
在搭建 undz.cn 的过程中，我希望博客首页能有一个沉浸式的Hero，并且导航栏在滚动时能够平滑过渡，同时在非首页时恢复正常的样式。本文将分享我实现这一效果的 TopNavBeautify 组件的设计思路与完整代码。
TopNavBeautify 是一个无渲染组件（不产生实际 UI 元素），通过监听滚动事件和路由变化，动态为 .theme-container 添加/移除特定的 CSS 类，从而触发导航栏的样式变化。它的主要作用包括：
.vp-blog-hero 元素）。< 60px 时添加 ayund-scroll-top 类。ayund-scroll-blog-hero-inner 类。const blogHeroElms = document.getElementsByClassName('vp-blog-hero');\nconst hasHero = blogHeroElms.length > 0;\nif (hasHero) {\n themeElm.classList.add('ayund-blog-hero');\n} else {\n themeElm.classList.remove('ayund-blog-hero');\n}vuepress-theme-hope 的主题中，博客首页会自动生成 vp-blog-hero 容器。我们通过它的存在来判断当前页面是否为博客首页。
const scrollTop = document.documentElement.scrollTop;\nif (scrollTop < 60) {\n themeElm.classList.add('ayund-scroll-top');\n} else {\n themeElm.classList.remove('ayund-scroll-top');\n}滚动距离小于 60px 时，我们认为导航栏位于“顶部透明区域”，此时移除阴影和背景。这个阈值可以根据您的页面布局微调。
\n对于首页Hero，我们还需要一个更精细的控制：当滚动距离小于Hero高度减 30px 时，导航栏文字使用亮色（适合深色Hero背景）；超过该距离后，导航栏恢复默认文字颜色。
\nif (scrollTop < blogHeroElm.clientHeight - 30) {\n themeElm.classList.add('ayund-scroll-blog-hero-inner');\n} else {\n themeElm.classList.remove('ayund-scroll-blog-hero-inner');\n}使用 vue-router 的 afterEach 钩子，在每次路由跳转后重新执行样式检测。由于 DOM 更新可能有延迟，使用 nextTick 加 setTimeout 等待 50ms。
router.afterEach(() => {\n nextTick(() => {\n setTimeout(() => {\n CheckScrollTopClass();\n }, 50);\n });\n});另外，checkRootPath 函数会在离开首页时强制移除 ayund-scroll-blog-hero-inner 类，避免样式残留。
当用户点击移动端的侧边栏切换按钮时，页面布局会变化，滚动位置可能不变，但我们需要重新检测是否仍满足“滚动距离小于 60px”的条件。因此，我们为 .vp-toggle-sidebar-button 绑定了 click 事件。
toggleSidebarElm.removeEventListener('click', CheckSidebarOpen);\ntoggleSidebarElm.addEventListener('click', CheckSidebarOpen);这里先移除再添加是为了防止重复绑定。
\n在 SCSS 中，我们定义了几个关键的样式规则：
\nayund-scroll-top 和 ayund-blog-hero 时，导航栏 box-shadow: none。background: transparent）。ayund-scroll-blog-hero-inner 状态下，导航栏内的链接、图标、按钮颜色都改为浅色（#eee），并添加文字阴影，以适应深色Hero。[data-theme='dark']）下，我们隐藏了下拉箭头（.arrow），保持界面整洁。该组件需要被注册为全局组件。在 .vuepress/client.ts 或 .vuepress/config.ts 中通过 rootComponents 引入：
import TopNavBeautify from './components/TopNavBeautify.vue';\n\nexport default defineClientConfig({\n rootComponents: [\n TopNavBeautify,\n // 其他全局组件...\n ],\n});组件的 <template> 中只包含一个隐藏的占位元素，不会影响页面布局。
TopNavBeautify 组件，以极低的成本实现了导航栏的动态美化，提升了博客首页的视觉体验。这种“无渲染组件 + CSS 类切换”的模式非常适合对第三方主题进行轻量级定制，而无需 fork 整个主题。如果您也在使用 VuePress，希望这篇文章能给您带来一些用途。
\n\n", "date_published": "2026-06-13T00:00:00.000Z", "date_modified": "2026-06-13T14:25:00.000Z", "authors": [], "tags": [ "前端", "VuePress" ] }, { "title": "《过年别逼孩子叫人：一句“快叫叔叔”，可能让他更不敢开口》", "url": "https://undz.cn/posts/kids_dont_like_to_say_hello_to_people.2026-06-06.html", "id": "https://undz.cn/posts/kids_dont_like_to_say_hello_to_people.2026-06-06.html", "summary": "《过年别逼孩子叫人：一句“快叫叔叔”，可能让他更不敢开口》 孩子不爱开口叫人（比如见到亲戚不愿意打招呼）其实是很常见的现象，这通常不是“没礼貌”或“性格不好”。 一、先理解孩子为什么不愿意叫人 气质类型：有些孩子天生慢热、谨慎，需要更多时间观察和适应新环境和陌生人。 曾被强迫或负面评价：如果之前被逼着叫、或者叫完后没有得到积极回应，孩子可能产生抗拒。 ...", "content_html": "\n相关资源
\n\n
孩子不爱开口叫人（比如见到亲戚不愿意打招呼）其实是很常见的现象，这通常不是“没礼貌”或“性格不好”。
\n如果孩子除了不爱叫人，还有以下表现，可以考虑咨询儿童心理或发育行为医生：
\n孩子不爱开口叫人，绝大部分情况下不是教养问题，而是发展阶段的正常现象。耐心和接纳比任何说教都更重要。给孩子时间，用示范和鼓励代替强迫，慢慢地他会找到自己的社交节奏。
\n", "date_published": "2026-06-06T00:00:00.000Z", "date_modified": "2026-06-06T16:07:10.000Z", "authors": [], "tags": [] }, { "title": "《妈妈，你还没教我》", "url": "https://undz.cn/posts/mom_you_have_not_taught_me_yet.2026-06-06.html", "id": "https://undz.cn/posts/mom_you_have_not_taught_me_yet.2026-06-06.html", "summary": "《妈妈，你还没教我》 门铃响了，我躲在沙发后面。 妈妈去开门，进来的是妈妈的老同学，还有一个我不认识的阿姨。妈妈笑着说：“快，叫阿姨。” 我张了张嘴，声音卡在喉咙里。 妈妈又轻轻推了我一下：“叫阿姨呀。” 我低下了头。 我不知道该怎么叫。这位阿姨是谁呢？是妈妈的同事？还是小时候见过的谁？妈妈没告诉我她叫什么，我也没有任何一个称呼可以叫。 妈妈替我解了围...", "content_html": "\n门铃响了，我躲在沙发后面。
\n妈妈去开门，进来的是妈妈的老同学，还有一个我不认识的阿姨。妈妈笑着说：“快，叫阿姨。”
\n我张了张嘴，声音卡在喉咙里。
\n妈妈又轻轻推了我一下：“叫阿姨呀。”
\n我低下了头。
\n我不知道该怎么叫。这位阿姨是谁呢？是妈妈的同事？还是小时候见过的谁？妈妈没告诉我她叫什么，我也没有任何一个称呼可以叫。
\n妈妈替我解了围，说：“这孩子，不太爱说话。”然后她们就聊起来了。我站在旁边，手指绞着衣角，觉得自己的脸热热的。
今天，我们真的毕业了。
\n
\nhttps://net.undz.cn/static/png/d475374f852406e91f793537bbbe6bd2.png
六年，六个故事，六次成长。
\n一年级，我们是 “捕风的异乡人” ，怯生生地走进校园，一切都是新鲜的。
\n二年级， “为了没有眼泪的明天” ，我们学会了擦干眼泪，勇敢面对小小的挫折。
\n三年级， “千朵玫瑰带来的黎明” ，我们在知识的芬芳中迎来每一个充满希望的清晨。
\n四年级， “巨龙与自由之歌” ，我们在难题面前不再畏惧，唱响属于自己的歌。
\n五年级， “向深水中的晨星” ，我们开始探索更广阔的世界，追寻心中的光。
\n六年级， “我们终将重逢” ——今天，我们毕业了，但这不是结束，而是另一段旅程的起点。
谢谢您，老师。六年的陪伴，您把知识和关爱种在我们心里。老师，您辛苦了！
\n谢谢你们，同学。、、、、、、、、、，还有每一位同窗。
\n六年的时光因为有你们而变得热闹、有趣。一起上课，一起吃饭，一起在操场上奔跑……这些平凡的每一天，都是我最珍贵的回忆。
马上就要分开了，虽然不舍，但我知道，友谊不会因为距离而变淡。无论走到哪里，我们都是六年同窗的好朋友。
\n谢谢您，母校。宽敞的教室、绿茵的操场、食堂里香喷喷的饭菜……这里的一草一木，都见证了我们的成长。无论将来走到哪里，我们都不会忘记，这里是我们梦想开始的地方。
\n毕业不是结束，而是新的开始。九月，我们就要走进不同的中学，开始新的旅程。也许会有新的挑战，但我们已经长大了，不怕。
\n我们会在新的学校里继续努力，不辜负老师的期望，不辜负父母的付出，也不辜负自己的梦想。
\n最后，祝老师们身体健康，祝同学们前程似锦，祝母校越来越好！
\n我们毕业啦！未来，我们来了！
\n", "image": "https://net.undz.cn/static/png/d475374f852406e91f793537bbbe6bd2.png", "date_published": "2026-07-01T00:00:00.000Z", "date_modified": "2026-06-06T00:52:42.000Z", "authors": [], "tags": [] }, { "title": "AyWebHosting", "url": "https://undz.cn/project/website_hosting.html", "id": "https://undz.cn/project/website_hosting.html", "summary": "AyWebHosting——更简单的个人静态网站托管 免费托管，无限可能 您将免费获得一个类似 https://undz.cn/yourname/ 的网站路径，或者一个三级子域名（例如 yourname.undz.cn、yourname.io.hb.cn 等）。 支持以下域名格式： yourname.undz.cn yourname.io.hb.cn ...", "content_html": "\n您将免费获得一个类似 https://undz.cn/yourname/ 的网站路径，或者一个三级子域名（例如 yourname.undz.cn、yourname.io.hb.cn 等）。
支持以下域名格式：
\nyourname.undz.cnyourname.io.hb.cnyourname.exm2.eu.ccyourname.ayd2.eu.ccyourname.net2.eu.ccyourname.net3.eu.ccyourname.eu.cc如果您需要托管个人静态网站，请联系我：
\n相关信息
\n当前自动化部署系统正在开发中，由于正在准备期末考和毕业考，较忙，预计于7月1日开放，预计还有
\n尊敬的 Ys Post 用户：
\n非常抱歉地通知您，Ys Post 原有服务将于即日起停止运营。
近期我们监测到，Ys Post 被大量滥用，成为批量注册海外平台（如各类论坛、社交媒体等）的工具。这种行为严重违反了我们的初心，也对其他正常用户的体验造成了影响。
\n为了维护服务的公平性与可靠性，我们不得不作出艰难决定：终止 Ys Post 原有服务。
\n作为替代，我们推出全新邮件服务 —— AyExMail （ https://exm.undz.cn ）。
\n相比 Ys Post，AyExMail 在以下方面进行了重要升级：
\n我们将持续优化 AyExMail 的反滥用策略，同时保持对合法用户的低门槛。感谢您一直以来的理解与支持。
\n给您带来的不便，深表歉意。
\n2026-05-26
\nAyExMail 运营组织
主线序章（蒙德） 序章 第一幕 捕风的异乡人
\n主线序章（蒙德） 序章 第二幕 为了没有眼泪的明天
\n主线序章（蒙德） 序章 第三幕 巨龙与自由之歌
主线第一章（璃月） 第一章 第一幕 浮世浮生千岩间
\n主线第一章（璃月） 第一章 第二幕 辞行久远之躯
\n主线第一章（璃月） 第一章 第三幕 迫近的客星
\n主线第一章（璃月） 第一章 第四幕 我们终将重逢
主线第二章（稻妻） 第二章 序幕 振袖秋风问红叶
\n主线第二章（稻妻） 第二章 第一幕 不动鸣神，恒常乐土
\n主线第二章（稻妻） 第二章 第二幕 无念无想，泡影断灭
\n主线第二章（稻妻） 第二章 第三幕 千手百眼，天下人间
\n主线第二章（稻妻） 第二章 第四幕 回响渊底的安魂曲
主线第三章（须弥） 第三章 第一幕 穿越烟帷与暗林
\n主线第三章（须弥） 第三章 第二幕 千朵玫瑰带来的黎明
\n主线第三章（须弥） 第三章 第三幕 迷梦与空幻与欺骗
\n主线第三章（须弥） 第三章 第四幕 赤土之王与三朝圣者
\n主线第三章（须弥） 第三章 第五幕 虚空鼓动，劫火高扬
\n主线第三章（须弥） 第三章 第六幕 卡利贝尔
主线第四章（枫丹） 第四章 第一幕 白露与黑潮的序诗
\n主线第四章（枫丹） 第四章 第二幕 仿若无因飘落的轻雨
\n主线第四章（枫丹） 第四章 第三幕 向深水中的晨星
\n主线第四章（枫丹） 第四章 第四幕 谕示胎动的终焉之刻
\n主线第四章（枫丹） 第四章 第五幕 罪人舞步旋
\n主线第四章（枫丹） 第四章 第六幕 睡前故事
主线第五章（纳塔） 第五章 第一幕 荣花与炎日之途
\n主线第五章（纳塔） 第五章 第二幕 黑石湮落白石下
\n主线第五章（纳塔） 第五章 第三幕 镜与谜烟的彼方
\n主线第五章（纳塔） 第五章 第四幕 命定将焚的虹光
\n主线第五章（纳塔） 第五章 第五幕 炽烈的还魂诗
\n主线第五章（纳塔） 第五章 第六幕 你存在的时空
\n主线第五章（纳塔） 第五章 幕间 万火归一
独立间章 间章 第一幕 风起鹤归
\n独立间章 间章 第二幕 危途疑踪
\n独立间章 间章 第三幕 倾落伽蓝
\n独立间章 间章 第四幕 悖理
主线空月之歌 空月之歌 第一幕 雪浪与苍林之舞
\n主线空月之歌 空月之歌 第二幕 尘与灯的挽歌
\n主线空月之歌 空月之歌 第三幕 不存在的国土
\n主线空月之歌 空月之歌 第四幕 回望湮灭的月光
注意
\n此面向公众的为GitHub加速服务，不是VPN，请注意区分！
\n在国内访问 GitHub 及其相关资源（如 raw、gist、各类 assets）时，经常遇到速度慢、甚至无法打开的问题。本文介绍一个基于 Cloudflare Worker 实现的代理服务，提供两种代理模式：无需授权的 GitHub 专用加速 和 需要授权的通用代理，帮助你稳定、快速地访问 GitHub 生态资源。
\n", "date_published": "2026-05-20T00:00:00.000Z", "date_modified": "2026-05-20T12:52:03.000Z", "authors": [], "tags": [ "GitHub" ] }, { "title": "", "url": "https://undz.cn/go.html", "id": "https://undz.cn/go.html", "summary": "继续访问 取消", "content_html": "免费在线解析、播放网易云音乐
\n\n\n我目前是全能型全栈开发，还会服务器运维现在是做云运维
\n很简单，对于我来说，因为中国人的人际交往的非常复杂，他是千变万化的，不像机器，虽然是死板的，但你想让她干什么就干什么，他绝不会违抗你。
\n这比人要好太多了，所以我就成为了一个IT行业的工作者
不过呢，到也有一个苦恼（其实可以来说一直是这样的），自己不善于社交，这东西你没办法拒绝的，你总要和人交往，
\n「社交」百科上的定义为“在一定的历史条件下，个体之间相互往来，进行物质、精神交流的社会活动”，显然这里的个体指的是人。所以社交是指你和其他之间往来的活动能力，那为什么程序员不擅长这项技能呢？我的一点思考
\n首先，程序员的工作大部分是面向机器的，程序员善于「机交」，让计算机说一计算机不敢说二。自然相比很多与人打交道的工作来说，程序员缺乏锻炼社交的机会。
\n其次，程序员工作中与人打交道的部分，主要也是讨论和解决问题，讨论和解决问题一定是一个很tough的过程，大家关注的核心点还是怎么解决问题，而不是怎么「社交」让对方舒服，这也让程序员养成了直击问题核心的习惯，不绕来绕去的，不玩虚的，不打太极似的玩「社交」。
\n最后，能最快最准确的寻找解决方案是最重要的，也能为自己带来可观的回报，所以潜意识里也不会把社交当成一项对自己来说很重要的技能，或者说精力有限，花精力在这些事情上，不如好好提升自己的技术水平、提升自己分析和解决问题的能力。
\n其实，不止程序员，很多靠技术吃饭的人，都会比靠人脉、资源吃饭的人社交能力差。本质上还是，什么能力会影响你的饭碗，你就会提升什么能力。
\n", "date_published": "2026-04-20T00:00:00.000Z", "date_modified": "2026-06-06T16:07:10.000Z", "authors": [], "tags": [ "个人" ] }, { "title": "1.计算机和操作系统", "url": "https://undz.cn/posts/basic/computer_and_os.html", "id": "https://undz.cn/posts/basic/computer_and_os.html", "summary": "1.计算机和操作系统\n一、计算机的基本组成和工作原理\n先来一段计算机导论节选：", "content_html": "\n先来一段计算机导论节选：
\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-04-21T14:08:16.000Z", "authors": [], "tags": [ "计算机与操作系统" ] }, { "title": "10.开源的那些事", "url": "https://undz.cn/posts/basic/open_source.html", "id": "https://undz.cn/posts/basic/open_source.html", "summary": "10.开源的那些事 当我们在伤害开源的时候，在伤害什么？【差评君】 为什么程序员们愿意在 GitHub 上开源，给别人免费使用和学习？ 各种开源协议介绍 提示 看到这里，你应该理解为什么我的项目基本都开放源代码了。", "content_html": "\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-04-21T14:08:16.000Z", "authors": [], "tags": [ "开源的那些事" ] }, { "title": "11.一套最舒适的开发环境", "url": "https://undz.cn/posts/basic/dev_env_ready.html", "id": "https://undz.cn/posts/basic/dev_env_ready.html", "summary": "11.一套最舒适的开发环境\n一套最舒适 最好的开发环境应该是什么样子的呢？\nWindows\n\n将系统更新到最新，包括驱动等\n将系统归属地改为香港，设定好时间日期格式(设定为香港可以访问到更多有趣的内容)\n在系统设置中配置好 开发者选项\n配置好 翻墙和代理服务\n安装 Chrome\n安装并配置 \n安装并配置 VSCode\n安装并配置 WSL\n设定好 WSL...", "content_html": "\n一套最舒适 最好的开发环境应该是什么样子的呢？
\n机器语言是计算机最原始的语言，是一种指令集的体系。这种指令集称为机器码。仅由 0 和 1 组成。 CPU 在工作的时候只认识机器语言。每台机器都会存在自己的指令集。
\n最早计算机是以 穿孔纸带 进行编程的。带孔为 1，无孔为 0，经过光电输入到计算机当中。纸带就充当了存储介质。后面被 磁带 所取代。
\n机器语言的 可读性、可移植性差，编程非常繁杂。
\n但是直接和机器打交道，运行速度可以接近硬件的极限，资源占用少；
汇编语言，即一种低级语言，他用人类容易记忆的语言和符号来表示一组 0 和 1 的代码。相当于是 0 和 1 的一种高层次封装，一组 0 和 1 用一个单词表示。
不同的处理器有不同的汇编语言语法和编译器，编译的程序无法在不同的处理器上执行，缺乏可移植性，难于从汇编语言代码上理解程序设计意图，可维护性差，即使是完成简单的工作也需要大量的汇编语言代码，很容易产生 bug，难于调试，使用汇编语言必须对某种处理器非常了解，而且只能针对特定的体系结构和处理器进行优化，开发效率很低，周期长且单调。
\n能够保持机器语言的一致性，直接、简捷，并能像机器指令一样访问、控制计算机的各种硬件设备，如磁盘、存储器、CPU、I/O 端口等。使用汇编语言，可以访问所有能够被访问的软、硬件资源，目标代码简短，占用内存少，执行速度快。
所以汇编语言一般用来开发 CPU 指令集，驱动程序，逆向工程，破解，单片机，嵌入式开发，系统底层开发等。
\n运行速度和执行效率低于汇编语言，程序大小与编译器有关。
\n高级语言接近 算法语言 ，易学、易掌握，提供结构化程序设计的环境和工具，使得设计出来的程序可读性好，可维护性强，可靠性高；高级语言远离机器语言，与具体的计算机硬件关系不大，可移植性好，重用率高；由于把繁杂琐碎的事务交给了编译程序去做，所以自动化程度高，开发周期短，且程序员得到解脱，可以集中时间和精力去从事对于他们来说更为重要的创造性劳动，以提高程序的质量。
高级语言按照执行方式又可以被分为 编译型语言 和 解释型语言
\n编译型语言：
\n编译语言，一般会通过编译器处理，先将代码编译为机器码，再加以执行。比如 exe 文件，以后需要运行的时候就不用再重新编译了，运行时不需要再编译，所以执行效率很高。
解释型语言：
\n解释型语言，一般通过 解释器 将代码一句一句直接执行，不需要像编译语言一样先编译为机器码之后再执行。在执行期，动态将代码逐句解释并执行。典型的如脚本语言。
脚本语言：
\n脚本语言是一种解释型语言，脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。脚本语言一般都 有相应的脚本引擎来解释执行。 他们一般需要解释器才能运行。一个脚本通常是解释运行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。而宏语言则可视为脚本语言的分支，两者也有实质上的相同之处。脚本语言一般都是以文本形式存在,类似于一种命令。
文件路径是用于描述文件系统资源的一个文本标识。 文件系统是对文件存储设备的空间进行组织和分配，负责文件存储并对存入的文件进行保护和检索的系统。 文件存放在外部存储器中的某些位置上，经由文件系统管理后，被系统以文件路径标识，系统可以通过文件路径检索到对应文件。
\n这里放上一篇解释的比较清楚的文章
\nhttps://www.ecdove.com/p/245.html
文件名就是文件的名称，是为了方便人们区分计算机中的不同文件，而给每个文件设定一个指定的名称。
\n文件名不能包含控制字符: < > / \\ | : \" \\* ?
文件扩展名 也称为文件的延伸文件名、后缀名，是操作系统用来标记文件类型的一种机制。通常来说，一个扩展名是跟在主文件名后面的，由一个分隔符分隔。
\n文件扩展名其更重要的作用是让系统决定当用户想打开这个文件的时候用哪种软件运行，如 Windows 系统中 .exe 文件是可执行文件，.doc 文件默认用 Microsoft Word 打开的 Word 文件。
误区
\n文件扩展名是一个文件的必要构成部分。❌
\n任何一个文件都可以没有扩展名。没有扩展名的文件需要选择程序去打开它，有扩展名的文件会自动用设置好的默认程序去打开。文件扩展名是一个常规文件的构成部分，但一个文件并不一定需要一个扩展名。
文件扩展名表明了该文件是何种类型。❌
\n文件扩展名可以人为设定，扩展名为 TXT 的文件有可能是一张图片，同样，扩展名为 MP3 的文件，依然可能是一个视频。
ps:凡是可以人为随意修改的东西，都是不可信的
\n你可以试试 在桌面新建一个 demo.txt 文件，在里面写上一句话，然后修改后缀名为 demo.html，然后刷新桌面看看。它的内容都没有变，只是解析这个文件的默认程序和方法变了。
绝对路径例子：
\nc:\\user\\www\\index.html
\n/user/www/index.html
\n/Users/aeyund
也就是说，路径的起始符号为路径分隔符 / 或者 \\ 或者盘符 c: , 该路径就表示为绝对路径，其中 类Unix系统 的路径分隔符都为 / , 只有 windows 系为 \\, 这一点要注意。
\n绝对路径指向一个文件路径的固定位置，不会因为当前工作目录的变化而变化，所以为了准确描述，它必须包含根目录。
相对路径例子：
\n./www/index.html
\n../index.html
\nwww/index.html
也就是说，路径起始符号为 ./ ../ 或者是 www/ 这样的目录名 的就是相对路径。也就是以当前工作目录或文件所在目录为起点表示的相对位置。
\n其中 ./ 表示当前目录。 ../ 表示上一层目录。
\n其中 ./www 和 www 是等价的，都表示当前目录下的 www 目录。
\n同理 ./www/index.html 和 www/index.html 也是等价的，都表示当前目录下的 www目录下的 index.html 文件。
提示
\n通过相对路径和绝对路径，我们就可以在系统中准确的表示和定位一个文件或者目录了。
\n一般在项目开发中，一般都是基于于项目所在的目录为基准点使用相对路径来描述项目中文件和文件之间的关系。
比如说，我们要在 main.js 文件中引入另一个 tools.js 文件。
\nmain.js 文件在 /user/aeyund/my-project/main.js
\ntools.js 文件在 /user/aeyund/my-project/tools.js
绝对路径引用:
\nimport tools from '/user/aeyund/my-project/tools.js';相对路径引用:
\nimport tools from './tools.js';此时，这两种引用方式都是正确的，代码都可以顺利运行。因为两个文件都在 aeyund/my-project 下。
这个时候，如果另一个人下载了项目，他的工作目录不是 aeyund ， 是 aeundz，那么文件的的路径就变成了:
main.js 文件会变成 /user/aeundz/my-project/main.js
\ntools.js 文件会变成 /user/aeundz/my-project/tools.js
那么绝对路径引用就必须得修改成下面这样:
\nimport tools from '/user/aeundz/my-project/tools.js';而此时，相对路径不需要修改，因为两个文件依然在 my-project 下面。如果一个项目有上百个文件，那么移动项目的位置将会是一场灾难。
windows 下一般定位资源必须得带上盘符，比如 c:\\user\\aeyund\\image
\nLinux 系统则是 /home/aeyund/image
\n而一般的网络资源则是 /ma.ico
他们之间的区别是什么呢?
\n一般 windows 会存在很多磁盘，c:\\、d:\\、e:\\，没有盘符则无法在系统中准确描述一个文件所在位置的。
\n而 Linux 一般会把拓展的硬盘分区放在 /mnt/c、/mnt/d、/mnt/e，下。所以 Linux 下表示根目录有且只有一种方式： /。
你自己本地的一个文件例如 c:\\user\\aeyund\\my-project\\index.html 要怎么才能共享给别人，让别人都能访问到呢？不太可能把电脑搬到人家里去吧？
这个时候，如果你的机器有一个公网的 ip 地址，这个时候就可以使用 统一资源定位符 来表示该文件了。这个时候这个文件又叫做网络资源或者公网资源。
统一资源定位符的标准格式如下：
\n[协议类型]://[服务器地址]:[端口号]/[资源层级Unix文件路径][文件名]例如 http://123.123.123.1234:8080/ma.ico
\n协议类型为 http
\n服务器地址为 123.123.123.1234
\n端口号为 8080
\n资源层级文件路径为 ma.ico
如果你注册了一个域名undz.cn 并指向了你的服务器 IP ，然后资源服务器的端口设定为 80，那么地址就变成了
如果设定端口为 443，那么资源地址就会是
翻译成白话文就是
\n使用 HTTP 协议的方式(如浏览器)，去访问 ip 地址为 123.123.123.1234 的服务器，因为公网的 ip 地址都是唯一的，所以一定可以定位到该服务器。然后端口也有了，那么就可以准确定位到这个服务器上的这个服务了。然后就可以尝试去和这个服务索要 /ma.ico 文件了。
这个就是，统一资源定位符 的唯一性。而且是全世界唯一，所以任何人都可以通过这个 唯一性 去定位和访问这个文件了。
路径，则是在这台机器上(也就是本地)具有 唯一性，所以本地用户就可以准确的定位这个文件并访问。
一个文件的路径必须具备 本地唯一性，一个公网资源路径则必须具备世界唯一性。
注意
\n统一资源定位符 中的域名一般是不区分大小写的
\nhttps://undz.cn/ma.ico
\n和
\nHTTPS://undz.cn/ma.ico
\n是一样的
不知道你有没有遇到过，打开一个.txt文件却发现文件乱码了？这种时候往往是因为使用了不一样的编码格式去打开文件导致的。
比如当前正在编写的这篇文章，如果采用 GBK 编码打开，就会变成一堆不认识的字符：
\n但是同样的一篇文章采用 UTF-8 打开则可以正常阅读：
\n因为这篇文章就是在 UTF-8 编码规则下编写的。 而GBK编码是 windows 系统早期的默认编码。
提示
\n如果没啥特殊需求，一般编写文件内容默认使用 UTF-8 是一定没错的。 UTF-8 现在基本是大多数操作系统的默认编码。
也是因为编码的问题，所以一般来说，很多国外开发的老式软件无法在 中文目录下成功运行，所以目录名一般不推荐使用中文。
\n拓展阅读 ASCII 编码、GBK 编码，Unicode 编码和 UTF-8
\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-04-21T14:08:16.000Z", "authors": [], "tags": [ "文件编码" ] }, { "title": "4.终端与 shell", "url": "https://undz.cn/posts/basic/cmd_shell.html", "id": "https://undz.cn/posts/basic/cmd_shell.html", "summary": "4.终端与 shell\n简明扼要\n终端，外表看起来就只是一个窗口，上面可以键入字符，当你输入特定字符的时候它会打印出一些反馈。这个字符一般就是Shell 命令。\nMacOS 现在默认的 shell 解释器是 Zsh;\nLinux 上的一般默认为 Bash;\nWindows 下默认为 PowerShell;\n\n相关阅读\n安装并开始设置 Windows 终...", "content_html": "\n终端，外表看起来就只是一个窗口，上面可以键入字符，当你输入特定字符的时候它会打印出一些反馈。这个字符一般就是Shell 命令。
\nMacOS 现在默认的 shell 解释器是 Zsh;
\nLinux 上的一般默认为 Bash;
\nWindows 下默认为 PowerShell;
命令行使用的示例：
\n注意
\nPowerShell 的语法和 Bash shell 并不相同，但是在编程领域，Bash shell 无疑是占据领导地位的，在很多场景下都可以开箱即用，所以十分建议专门学习一下 Bash shell。
在 windows 下推荐使用 Git bash 或 WSL 来进行日常操作。
\n\n\n好了，到这一步为止，你终于学会了命令行的基本使用了。
\n
\n\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-06-13T08:45:18.000Z", "authors": [], "tags": [ "终端与shell" ] }, { "title": "5.系统软件包管理器", "url": "https://undz.cn/posts/basic/apt_homebrew.html", "id": "https://undz.cn/posts/basic/apt_homebrew.html", "summary": "5.系统软件包管理器\n当你学会命令行的基本使用之后，那么就相当于一只脚踏入了另一个世界。\n除了从应用商店安装下载之外，一般情况下还可以通过 软件包管理系统 来安装各种好用的命令和工具。\nLinux\n一般 debian 系 的系统比如 Ubuntu 默认的包管理器都是 apt 命令\n\nmacOS\nmacOS 上一般都是用 Homebrew 来进行包管理\n...", "content_html": "\n不得不说，微软爸爸家的文档是真的优秀
\n
\n什么是 PowerShell？
\nPowerShell 入门
当你学会命令行的基本使用之后，那么就相当于一只脚踏入了另一个世界。
\n除了从应用商店安装下载之外，一般情况下还可以通过 软件包管理系统 来安装各种好用的命令和工具。
一般 debian 系 的系统比如 Ubuntu 默认的包管理器都是 apt 命令
# 例如 安装git命令\napt install git\n\n# 卸载 git命令\napt remove git\n\n# 查看一些可更新的包\nsudo apt update\n\n# 升级软件\nsudo apt upgrade\n\n# 安装 curl\nsudo apt install curlmacOS 上一般都是用 Homebrew 来进行包管理
\n当然，原版的安装可能需要 科学上网
\n那么你可能需要看下面这篇文章
\nHomebrew 国内如何自动安装（国内地址）（Mac OS）
之前我会在 windows 上使用各种包管理器来安装各种插件，但自从有了 WSL 之后，我所有的和命令行相关的工作全部用 WSL 去完成了。
windows 下最适合的方式就是用 git-bash 和 WSL ，以及鼠标点点点。
看啥不如看官方文档(可能需要科学上网)
\nhttps://docs.github.com/zh/get-started
\n也可以看这篇
\nhttps://zhuanlan.zhihu.com/p/337959303
这年头什么都有教学视频
\nhttps://www.bilibili.com/video/BV1ug4y1571s/
\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-04-21T14:08:16.000Z", "authors": [], "tags": [ "VisualStudioCode" ] }, { "title": "8.如何使用搜索引擎", "url": "https://undz.cn/posts/basic/search_engine.html", "id": "https://undz.cn/posts/basic/search_engine.html", "summary": "8.如何使用搜索引擎\n搜索引擎 是一个跨时代的发明，基本上我们每天都会用到。但是你真的会使用搜索引擎吗？\n搜索引擎的选择\n\n注意\n在中国，虽然大部分人都知道 百度 ，但是身为一个搜索引擎它并没有履行好自己的职责。\n有兴趣吃瓜的可以查看以下链接：\nhttps://zh.wikipedia.org/wiki/对百度的争议\n魏则西事件\n以上这些都只是一小部分...", "content_html": "\n搜索引擎 是一个跨时代的发明，基本上我们每天都会用到。但是你真的会使用搜索引擎吗？
\n注意
\n在中国，虽然大部分人都知道 百度 ，但是身为一个搜索引擎它并没有履行好自己的职责。
\n有兴趣吃瓜的可以查看以下链接：
\nhttps://zh.wikipedia.org/wiki/对百度的争议
\n\n以上这些都只是一小部分。也就是说，你无法信任 百度 查询出来的任何东西。
\n一般情况下，我推荐的搜索引擎只有两个
\n\n\n不过实践证明，国内的 Bing 属于特供版，内容会不太一样。
\n
只需要认真阅读这篇文章即可：
\n\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-06-13T08:45:18.000Z", "authors": [], "tags": [ "如何使用搜索引擎" ] }, { "title": "9.科学上网和国内镜像", "url": "https://undz.cn/posts/basic/proxy_to_net.html", "id": "https://undz.cn/posts/basic/proxy_to_net.html", "summary": "9.科学上网和国内镜像\n怎么讲呢，网络是自由的，但又不那么的自由。因为国内阻止了 Google 所以 百度 发家，百度又不干好事。\nGithub 被 墙 但是国内的 Gitee 简直 依托答辩。\n墙 成了国内互联网企业发展护城河，让中国在孱弱时期避免被外来互联网技术和文化入侵，但是也一定程度上阻碍了科学技术的普及和发展。\n我们使用的 编程语言、各种命令...", "content_html": "\n怎么讲呢，网络是自由的，但又不那么的自由。因为国内阻止了 Google 所以 百度 发家，百度又不干好事。
\nGithub 被 墙 但是国内的 Gitee 简直 依托答辩。
\n墙 成了国内互联网企业发展护城河，让中国在孱弱时期避免被外来互联网技术和文化入侵，但是也一定程度上阻碍了科学技术的普及和发展。
\n我们使用的 编程语言、各种命令行工具、系统、开源仓库、包管理服务等大部分都是国外创造的。不翻墙，甚至很多工作都无法进行，文件资料无法查阅。
\n一般来说，比较大的公司有相关的 合法的国际专线 ，但是对于个人开发者来说，成本是巨大的，也是不现实的。
\n这么说吧，如果说 科学上网 是违法的，那么没有任何一名程序员是无辜的。出于 学习 为目的的翻墙无可厚非，师夷之长技以制夷。
\n如果想要 合法 的使用一些国外的程序相关服务，应该怎么办呢？
\n比如 npm 是 Nodejs 的包管理器，它的官网是 https://www.npmjs.com/，国内正常情况下你一定打不开。
\nhttps://registry.npmjs.org/ 是 npm 的 官方源，npm install 指令依赖这个地址，但是在国内这个指令 90% 一定会执行失败。
类似的还有 Python 的 pip 指令；
\nGolang 的 go get 指令；
\nLinux 的 apt install 指令；
\nHomebrew 的 brew install 指令；
\n.....
不使用 科学上网 那应该怎么办呢？
阿里开源镜像站： https://developer.aliyun.com/mirror/
\n网易开源镜像站： http://mirrors.163.com/
\n搜狐开源镜像站： http://mirrors.sohu.com/
\n北京交通大学开源镜像站： http://mirror.bjtu.edu.cn
\n兰州大学开源软件镜像站： http://mirror.lzu.edu.cn/
\n厦门大学开源软件镜像站： http://mirrors.xmu.edu.cn/
\n上海交通大学开源软件镜像站： http://ftp.sjtu.edu.cn/
\n清华大学开源软件镜像站： http://mirrors.tuna.tsinghua.edu.cn/
\n天津大学开源软件镜像站： http://mirror.tju.edu.cn/
\n中国科学技术大学开源软件镜像站： http://mirrors.ustc.edu.cn/
\n东北大学开源软件镜像站： http://mirror.neu.edu.cn/
\n东软信息学院开源软件镜像站： http://mirrors.neusoft.edu.cn/
\n浙江大学开源软件镜像站： http://mirrors.zju.edu.cn
\n北京理工大学开源软件镜像站： http://mirror.bit.edu.cn
\n华中科技大学开源软件镜像站： http://mirrors.hust.edu.cn/
\n中山大学开源软件镜像站： http://mirror.sysu.edu.cn/
\n大连理工大学开源软件镜像站： http://mirror.dlut.edu.cn/
通常情况下
\ngo语言 使用 https://goproxy.cn/
\nnpm 使用 https://www.npmmirror.com/
\nLinux Debian 使用 https://mirrors.tuna.tsinghua.edu.cn/help/debian/
\nHomebrew 使用 https://developer.aliyun.com/mirror/homebrew
一般来说，阿里镜像源的稳定性最好，使用人数也比较多。
\n\n\n学会使用国内的镜像，一般的编程和包安装下载应该都不是什么大问题了。一般来说，安装类的命令执行失败，90% 的原因都和 墙(GFW) 有关。
\n
\n在早期，国内的各大镜像源都喜欢夹带私货，比如把 官方包 替换成自己的 私人包，在命令行中打广告，甚至是在包中插入病毒和挖矿程序，包版本落后等等等.....
\n不过随着国内监管力度的加大，现在这种情况比较少见了。
\n我相信中国人是世界上最聪明的，但是这个世界上最伟大的发明创造却鲜有中国的身影。可能会有中国人参与其中，但他们都非中国籍。
\n(中国人的聪明才智，似乎也很少用到正道上。)
很多资源的获取都离不开 https://github.com
\n但是大多数时候这个地址都无法被打开，如果还不会 科学上网 可以试试下面这个方案。
\nMicrosoft Store 搜索 Watt Toolkit 并安装。Watt Toolkit 并勾选 Github一键加速 就可以正常访问 github.com 了如果你想要使用 Google、 ChartGPT 或者想要获取国内外一手资讯等，还是得了解一下 科学上网 这件事情的。
\n\n", "date_published": "2026-04-16T00:00:00.000Z", "date_modified": "2026-06-13T08:45:18.000Z", "authors": [], "tags": [ "科学上网和国内镜像" ] }, { "title": "编程开发基础入门", "url": "https://undz.cn/posts/basic/", "id": "https://undz.cn/posts/basic/", "summary": "编程开发基础入门\n前言\n前段时间 淘宝 Steam 安装教程 事件在网上大火。就是在大多数人看来 安装Steam 这么简单的一件事情居然会难倒这么多人。大家只是想玩一个游戏而已，为什么会如此魔幻?\n一方面是国内的大环境下所有厂商都在尽全力让人们把视线转向移动端，尽可能掠夺大家的时间和精力。传统 PC 相关的技能普及度正在降低。\n另一方面是因为一些国家政...", "content_html": "\n请一定要做一个遵纪守法的好公民
\n
前段时间 淘宝 Steam 安装教程 事件在网上大火。就是在大多数人看来 安装Steam 这么简单的一件事情居然会难倒这么多人。大家只是想玩一个游戏而已，为什么会如此魔幻?
一方面是国内的大环境下所有厂商都在尽全力让人们把视线转向移动端，尽可能掠夺大家的时间和精力。传统 PC 相关的技能普及度正在降低。
\n另一方面是因为一些国家政策，GFW 的存在也让信息闭塞了起来，间接的增加了很多门槛。其中也包括了国内计算机基础知识的普及与落后。
我自己也是从编程小白一步步走过来的，我很清楚 对于一个小白来说， 想要靠自己打破认知壁垒入门编程是多么困难的一件事情。而编程在这个时代能做的事情实在是太多了太多了。掌握一定的编程技术无论是生活还是工作方便程度都能够带来质的飞跃。所以我特意花了几天时间编写了这篇 基础教程，希望可以帮助更多人。
相关信息
\n这些都是基础中的基础，如果不懂得这些知识和概念，你不是 计算机零基础，而是 负基础 。
\n适用于触屏和鼠标的简易绘图软件。 安装包下载
\n\nAyCanvars 是一款基于 C# 和 .NET Framework 4.6.2 开发的绘图程序，专为课堂批注、自由绘画等场景设计。支持触屏与鼠标双重操作，界面原创，图标独立设计。
\n当前版本：v1.2.0（2026-04-08）
\n下载链接
\n支持系统：Windows 7/8/10/11（需 .NET Framework 4.6.2）
\n安装步骤：运行安装包，按提示选择安装模式、路径，同意 GPL v3.0 协议即可。
v1.2.0（2026-04-08）
\nv1.1.0（2026-04-06）
\nv1.0.0（2026-03-28）
\n开源协议：GNU General Public License v3.0
\n作者：韵典（AeYunDian）
\n版权年份：2025-2026
\nGitHub：https://github.com/AeYunDian/AyCanvars
\n著作权：已提交中国版权保护中心（受理中）
网站：https://undz.cn
\nB站：https://space.bilibili.com/3494370328185235/
\n邮箱：admin@undz.cn
使用DirectX_Repair、微软 .NET 运行库安装工具和微软常用运行库合集 修复系统
下载好的游戏打不开，提示缺少 xxx.dll，如：
\n![\"计算机缺失d3d12.dll\"](\"https://duba-seo-cdn.jinshan3.cn/img/8e9ab042713ac11c61bdfe4be0dcc6b0.png\")
\n这多半是因为系统缺少运行库，特别是在精简系统中，这篇文章教你快速修复运行库。
如果你的游戏提示“d3dx9_43.dll丢失”“DirectX错误”等，则需要修复DirectX运行库。
\n步骤详解：
在导航栏 - 工具 - 高级筛选 中，也可以手动选择要修复的 dll 文件
\n当然，这款软件修复 C++ 运行库没有那么全，这时候就要接下来这款软件了。
未完待续
\n", "image": "https://duba-seo-cdn.jinshan3.cn/img/8e9ab042713ac11c61bdfe4be0dcc6b0.png", "date_published": "2026-03-10T00:00:00.000Z", "date_modified": "2026-04-13T13:24:08.000Z", "authors": [], "tags": [ "教程" ] }, { "title": "列表", "url": "https://undz.cn/list/", "id": "https://undz.cn/list/", "summary": "查看文章列表", "content_html": "查看文章列表
\n\n您可以在左边选个一个项目查看
\n", "date_published": "2026-03-12T13:12:19.000Z", "date_modified": "2026-03-22T13:06:47.000Z", "authors": [], "tags": [] }, { "title": "Crossfire: Ys 正式发布", "url": "https://undz.cn/project/crossfire.html", "id": "https://undz.cn/project/crossfire.html", "summary": "Crossfire: Ys 4.0.6 版本 正式发布", "content_html": "Crossfire: Ys 4.0.6 版本 正式发布
\n\n这款游戏使用Unity引擎构建，目前只支持Windows端，短期时间内没有支持其他端的计划
\n最低配置
\n推荐配置：
\nUnity POST网络请求实现教程
\n\n此文章只是POST请求，没有GET、DELETE、PULL等其它类型
\n为什么一开始是这个呢？因为这是我遇到的第一个问题
代码使用系统的Http库
\nusing System.Net.Http;
在Unity项目内新建一个名为GameApiClient.cs的C#代码文件。
using System;\nusing System.Collections;\nusing System.Collections.Generic;\nusing System.Net;\nusing System.Net.Http;\nusing System.Text;\nusing System.Threading.Tasks;\nusing UnityEngine;\n\n\npublic class GameApiClient : MonoBehaviour\n{\n public static GameApiClient Instance { get; private set; }\n private HttpClient Client = new HttpClient();\n private string Domain = \"https://api.io.hb.cn/api/\";\n private HttpResponseMessage response;\n void Awake()\n {\n\n if (Instance == null)\n {\n Instance = this;\n DontDestroyOnLoad(gameObject);\n Debug.Log(\"GameApiClent创建成功！\");\n }\n else\n {\n Destroy(gameObject);\n Debug.Log(\"已存在GameApiClent，销毁重复的\");\n }\n }\n\n public async Task<HttpResponseMessage> PostNetData(string path, string json)\n {\n\n var content = new StringContent(json, Encoding.UTF8, \"application/json\");\n Client.Timeout = TimeSpan.FromSeconds(5);\n response = await Client.PostAsync(Domain + path, content);\n\n return response;\n }\n}在游戏第一个场景创建一个空游戏对象，绑定这个代码文件，启动游戏，如果游戏的日志有一条GameApiClient创建成功！，则代表以上步骤你都完成了
一个应用应该写一个类来处理网络请求，在其它类中处理返回
\n要想在其他代码中发送POST请求，只需调用 GameApiClient.Instance.PostNetData(string path, string json)
警告
\n网络请求是异步的，所以需要使用await来调用
\n在GameApiClient.cs中写了API的地址，这里是https://api.io.hb.cn/api/，你需要替换为自己服务器的地址。
该函数的返回格式是HttpResponseMessage，所以需要定义一个HttpResponseMessage类型的变量
using Newtonsoft.Json;\nprivate string Path_BagGet = \"/v1/bag/get\";\npublic async Task<int> GetBagData()\n{\n var data = new { uuid, token };\n string json = JsonConvert.SerializeObject(data);\n HttpResponseMessage response = await GameApiClient.Instance.PostNetData(Path_BagGet, json);\n string responseBody = await response.Content.ReadAsStringAsync();\n Debug.Log(response.StatusCode);\n switch (response.StatusCode)\n {\n case HttpStatusCode.OK:\n var bagData = JsonConvert.DeserializeObject<BagData>(responseBody);\n return int.Parse(bagData.level.ToLower());\n default:\n return -1;\n\n }\n}关于此代码
\n该代码取自 Crossfire: Ys 的部分片段，可能无法直接运行
\nswitch语句处理需要根据服务器具体返回做判断， Crossfire: Ys 的网络处理逻辑是专门写几个类，游戏启动时自动加载，在其他需要用户信息时直接调用，
\n我也推荐你使用这种做法，更加规范，如以后有变动，只需改几个文件，而不是在各个犄角旮旯一个个改。