-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (135 loc) · 39.6 KB
/
Copy pathindex.html
File metadata and controls
138 lines (135 loc) · 39.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>Quirrel-Zh</title><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#fff"><meta name="application-name" content="Quirrel-Zh"><meta name="msapplication-TileImage" content="images/favicon.png"><meta name="msapplication-TileColor" content="#fff"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Quirrel-Zh"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" sizes="144x144" href="images/favicon.png"><meta name="description" content="quirrel-Zh的博客"><meta property="og:type" content="blog"><meta property="og:title" content="Quirrel-Zh"><meta property="og:url" content="https://www.f2iclo.com/"><meta property="og:site_name" content="Quirrel-Zh"><meta property="og:description" content="quirrel-Zh的博客"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://www.f2iclo.com/img/og_image.png"><meta property="article:author" content="小郑"><meta property="article:tag" content="码记栈 小郑 quirrel-Zh quirrel"><meta property="twitter:card" content="summary"><meta property="twitter:image:src" content="https://www.f2iclo.com/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.f2iclo.com"},"headline":"Quirrel-Zh","image":["https://www.f2iclo.com/img/og_image.png"],"author":{"@type":"Person","name":"小郑"},"publisher":{"@type":"Organization","name":"Quirrel-Zh","logo":{"@type":"ImageObject","url":"https://www.f2iclo.com/images/logo.png"}},"description":"quirrel-Zh的博客"}</script><link rel="alternate" href="/atom.xml" title="Quirrel-Zh" type="application/atom+xml"><link rel="icon" href="/images/favicon.png"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"><link data-pjax rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&family=Source+Code+Pro"><link data-pjax rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.10.0/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css"><!--!--><!--!--><style>.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#3273dc;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}</style><script src="https://cdn.jsdelivr.net/npm/pace-js@1.2.4/pace.min.js"></script><!--!--><!--!--><!-- hexo injector head_end start --><script>
(function () {
function switchTab() {
if (!location.hash) {
return;
}
const id = '#' + CSS.escape(location.hash.substring(1));
const $tabMenu = document.querySelector(`.tabs a[href="${id}"]`);
if (!$tabMenu) {
return;
}
const $tabMenuContainer = $tabMenu.parentElement.parentElement;
Array.from($tabMenuContainer.children).forEach($menu => $menu.classList.remove('is-active'));
Array.from($tabMenuContainer.querySelectorAll('a'))
.map($menu => document.getElementById($menu.getAttribute("href").substring(1)))
.forEach($content => $content.classList.add('is-hidden'));
if ($tabMenu) {
$tabMenu.parentElement.classList.add('is-active');
}
const $activeTab = document.querySelector(id);
if ($activeTab) {
$activeTab.classList.remove('is-hidden');
}
}
switchTab();
window.addEventListener('hashchange', switchTab, false);
})();
</script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 8.1.2"></head><body class="is-3-column"><nav class="navbar navbar-main"><div class="container navbar-container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/images/logo.png" alt="Quirrel-Zh" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">Home</a><a class="navbar-item" href="/archives">Archives</a><a class="navbar-item" href="/categories">Categories</a><a class="navbar-item" href="/tags">Tags</a><a class="navbar-item" href="/about">About</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-6-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-04-13T12:10:13.000Z" title="2026/4/13 20:10:13">2026-04-13</time>发表</span><span class="level-item"><time dateTime="2026-06-22T02:37:10.495Z" title="2026/6/22 10:37:10">2026-06-22</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Docker/">Docker</a><span> / </span><a class="link-muted" href="/categories/Docker/%E8%87%AA%E6%89%98%E7%AE%A1/">自托管</a></span><span class="level-item">15 分钟读完 (大约2188个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/04/13/homepage/">用 Docker 部署 GetHomepage：家庭服务仪表盘与书签入口</a></p><div class="content"><p><i style="color:gray;">本文为环境搭建记录，配置以官方文档为准：<a href="https://gethomepage.dev/">gethomepage.dev</a></i></p>
<p>家里或实验室里 NAS、路由、监控、常用网页越来越多，浏览器书签和各个管理后台来回切换很费时间。<a href="https://github.com/gethomepage/homepage">GetHomepage</a> 是一个可自托管的仪表盘：把服务卡片、Docker 状态、书签和小部件集中在一页，刷新浏览器就能总览。</p>
<p>本文将按顺序说明：</p>
<ul>
<li><strong>用 Docker Compose 拉起容器</strong>（端口、环境变量、权限）</li>
<li><strong><code>config</code> 目录里各配置文件的分工</strong></li>
<li><strong><code>settings.yaml</code> 主题、语言与背景</strong></li>
<li><strong>（可选）挂载本地图片 / 图标目录</strong>（不要挂载整个 <code>/app/public</code>）</li>
<li><strong><code>services.yaml</code> 分组与卡片的最小可用写法</strong></li>
<li><strong><code>bookmarks.yaml</code> / <code>widgets.yaml</code> 各自管什么</strong>（仅作入门，细节见官网）</li>
<li><strong>（可选）挂载 <code>docker.sock</code> 做 Docker 集成</strong>（见官方 Docker 安装页）</li>
</ul></div><a class="article-more button is-small is-size-7" href="/2026/04/13/homepage/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/webpack/">webpack</a></span><span class="level-item">25 分钟读完 (大约3684个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/03/23/webpack/">【webpack】webpack快速入门</a></p><div class="content"><h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><p>本质上，<strong>webpack</strong> 是一个用于现代 JavaScript 应用程序的 <em>静态模块打包工具</em>。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 <em>bundles</em>，它们均为静态资源，用于展示你的内容。</p></div><a class="article-more button is-small is-size-7" href="/2026/03/23/webpack/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-03-22T15:07:00.000Z" title="2026/3/22 23:07:00">2026-03-22</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.071Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Proxy/">Proxy</a></span><span class="level-item">8 分钟读完 (大约1146个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/03/22/build-proxy/">Overlay Network 搭建记录</a></p><div class="content"><p>第一步需要购买海外的 VPS。我这里是从 VMiss 购买了一台 <code>CN.HK.BGP.DC2.Basic</code> 搭建 HK 节点（日常使用 + Netflix），一台 <code>JP.TKY.IIJ.Basic</code> 主要用于 AI 解锁等屏蔽中国大陆、香港和台湾省的服务。</p>
<p>这两台 VPS 默认都装载 Debian 13 系统。接下来就可以开始搭建「加速服务」了。</p>
<p>在开启服务器后，使用 Termius 分别通过 SSH 和 SFTP 连接两台服务器，然后更新系统并开启 BBR 加速。</p></div><a class="article-more button is-small is-size-7" href="/2026/03/22/build-proxy/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-03-20T08:31:24.000Z" title="2026/3/20 16:31:24">2026-03-20</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/AI/">AI</a></span><span class="level-item">6 分钟读完 (大约948个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/03/20/cursor-proxy/">如何在 Cursor 中使用高级模型</a></p><div class="content"><p>由于 claude、gpt、gemini 等模型不提供中国区域的服务，导致在 Cursor 中也无法直接使用。即使在设置中一直选中 auto，将 auto/composer 的额度用光后继续使用，虽然显示消耗的是高级模型一栏的额度，但实际上依旧不会调用这些高级模型。</p></div><a class="article-more button is-small is-size-7" href="/2026/03/20/cursor-proxy/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-02-10T11:50:12.000Z" title="2026/2/10 19:50:12">2026-02-10</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/typescript/">typescript</a><span> / </span><a class="link-muted" href="/categories/web/typescript/javascript/">javascript</a></span><span class="level-item">8 分钟读完 (大约1170个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/02/10/howtousemsw02/">前端接口契约治理实践：MSW + 错误码 + OpenAPI 的一次落地</a></p><div class="content"><p><i style='color:gray;'>本文章为学习时通过AI总结，仅供参考</i></p>
<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>在一个中后台项目中，我们遇到了一个典型但长期被低估的问题：</p>
<ul>
<li>Swagger 文档先于页面设计完成</li>
<li>页面实际需要的数据结构与现有接口不一致</li>
<li>错误码基本等同于 HTTP Status，语义不足</li>
<li>前端页面中大量 <code>if (res.code !== 0)</code> + <code>toast(res.message)</code></li>
</ul>
<p>结果是：</p>
<ul>
<li>前后端对接口结构理解不一致</li>
<li>Mock 与真实接口行为不一致</li>
<li>错误提示不可控，难以国际化</li>
<li>后续维护成本持续升高</li>
</ul>
<p>我们最终决定 <strong>重构接口契约的生产流程</strong>，而不是继续修补页面代码。</p></div><a class="article-more button is-small is-size-7" href="/2026/02/10/howtousemsw02/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2026-02-10T11:30:55.000Z" title="2026/2/10 19:30:55">2026-02-10</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/typescript/">typescript</a><span> / </span><a class="link-muted" href="/categories/web/typescript/javascript/">javascript</a></span><span class="level-item">7 分钟读完 (大约976个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2026/02/10/howtousemsw01/">MSW 在前端项目中的正确打开方式：从“造数据”到“定义接口”</a></p><div class="content"><p><i style='color:gray;'>本文章为学习时通过AI总结，仅供参考</i></p>
<h2 id="为什么要重新理解-MSW"><a href="#为什么要重新理解-MSW" class="headerlink" title="为什么要重新理解 MSW"></a>为什么要重新理解 MSW</h2><p>在很多项目里，MSW 被当成了：</p>
<ul>
<li>一个 mock 数据工具</li>
<li>一个本地调试的临时方案</li>
<li>一个替代 mock.js 的库</li>
</ul>
<p>但在实际工程中，如果这样使用 MSW，价值会非常有限，甚至会制造新的混乱。</p>
<p>我们最终达成的共识是：</p>
<blockquote>
<p><strong>MSW 不是用来“造假数据”的，而是用来“定义接口行为”的。</strong></p>
</blockquote></div><a class="article-more button is-small is-size-7" href="/2026/02/10/howtousemsw01/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2025-12-02T09:43:16.000Z" title="2025/12/2 17:43:16">2025-12-02</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/Node-js/">Node.js</a></span><span class="level-item">6 分钟读完 (大约934个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2025/12/02/nvm-auto-switch/">自动切换 Node.js 版本：Windows & macOS 全平台完整指南</a></p><div class="content"><p>在日常前端开发中，我们经常需要为不同项目使用不同版本的 Node.js。</p>
<p>例如：</p>
<ul>
<li>老项目需要 Node 14/16</li>
<li>新项目需要 Node 18/20</li>
<li>一些工具链只能运行在特定版本上</li>
</ul>
<p>为了避免每次手动 <code>nvm use</code>，我们可以实现 <strong>进入项目目录时自动切换到正确的 Node 版本</strong> 。</p>
<p>本文将分别讲解：</p>
<ul>
<li><p><strong>macOS 自动切换 Node（nvm + zsh hook）</strong></p>
</li>
<li><p><strong>Windows 自动切换 Node（nvm-windows、fnm、Volta 三种方法）</strong></p>
</li>
<li><p><code>.nvmrc</code> 的正确用法</p>
</li>
</ul></div><a class="article-more button is-small is-size-7" href="/2025/12/02/nvm-auto-switch/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2025-03-13T09:46:45.000Z" title="2025/3/13 17:46:45">2025-03-13</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.071Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/Node-js/">Node.js</a></span><span class="level-item">10 分钟读完 (大约1547个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2025/03/13/CMJ&ESM/">前端工程模块化</a></p><div class="content"><h3 id="为什么需要模块化"><a href="#为什么需要模块化" class="headerlink" title="为什么需要模块化"></a>为什么需要模块化</h3><p>当前端工程到达一定规模后，就会出现下面的问题：</p>
<ul>
<li>全局变量污染：多个文件中定义的全局变量容易冲突</li>
<li>依赖混乱：多个文件之间的依赖关系复杂，难以维护</li>
</ul></div><a class="article-more button is-small is-size-7" href="/2025/03/13/CMJ&ESM/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2025-01-08T06:31:40.000Z" title="2025/1/8 14:31:40">2025-01-08</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.072Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/canvas/">canvas</a></span><span class="level-item">22 分钟读完 (大约3260个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2025/01/08/canvas-2D/">Canvas 2D 快速上手</a></p><div class="content"><p>使用Canvas进行2D绘制，需要使用Canvas的上下文对象，上下文对象提供了一些方法（API）来绘制图形。<br>我们不仅可以通过Canvas绘制图形，还可以通过Canvas绘制动画。</p></div><a class="article-more button is-small is-size-7" href="/2025/01/08/canvas-2D/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-09-10T09:02:10.000Z" title="2024/9/10 17:02:10">2024-09-10</time>发表</span><span class="level-item"><time dateTime="2026-03-23T06:01:42.071Z" title="2026/3/23 14:01:42">2026-03-23</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/web/">web</a><span> / </span><a class="link-muted" href="/categories/web/CSS/">CSS</a></span><span class="level-item">4 分钟读完 (大约546个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2024/09/10/CSS-border/">【CSS】横竖分割线/改变border长度</a></p><div class="content"><h3 id="实现效果"><a href="#实现效果" class="headerlink" title="实现效果"></a>实现效果</h3><blockquote>
<p>如何在<code>Home</code>下添加如图所示<strong>短横线</strong></p>
</blockquote>
<p><img src="/../images/CSS-border/%E5%AE%9E%E7%8E%B01.png"></p></div><a class="article-more button is-small is-size-7" href="/2024/09/10/CSS-border/#more">阅读更多</a></article></div><nav class="pagination" role="navigation" aria-label="pagination"><div class="pagination-previous is-invisible is-hidden-mobile"><a href="/page/0/">上一页</a></div><div class="pagination-next"><a href="/page/2/">下一页</a></div><ul class="pagination-list is-hidden-mobile"><li><a class="pagination-link is-current" href="/">1</a></li><li><a class="pagination-link" href="/page/2/">2</a></li></ul></nav></div><div class="column column-left is-4-tablet is-4-desktop is-3-widescreen order-1"><div class="card widget" data-type="profile"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="avatar" src="/images/avatar.png" alt="Quirrel"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">Quirrel</p><p class="is-size-6 is-block">努力中</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>河南 郑州</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><a href="/archives/"><p class="title">14</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories/"><p class="title">15</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags/"><p class="title">28</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/Quirrel-zh" target="_blank" rel="me noopener">关注我</a></div><div class="level is-mobile is-multiline"><a class="level-item button is-transparent is-marginless" target="_blank" rel="me noopener" title="Github" href="https://github.com/Quirrel-zh"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="me noopener" title="Email" href="mailto:becoolove@outlook.com"><i class="fas fa-envelope"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="me noopener" title="bilibili" href="https://space.bilibili.com/94076387"><i class="fab fa-bilibili"></i></a></div></div></div><div class="card widget" data-type="links"><div class="card-content"><div class="menu"><h3 class="menu-label">链接</h3><ul class="menu-list"><li><a class="level is-mobile" href="https://www.f2iclo.cn/" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">quirrel-zh</span></span><span class="level-right"><span class="level-item tag">www.f2iclo.cn</span></span></a></li><li><a class="level is-mobile" href="https://hexo.io" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">Hexo</span></span><span class="level-right"><span class="level-item tag">hexo.io</span></span></a></li><li><a class="level is-mobile" href="https://www.psvmc.cn/" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">码客说</span></span><span class="level-right"><span class="level-item tag">www.psvmc.cn</span></span></a></li></ul></div></div></div><div class="card widget" data-type="categories"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-mobile" href="/categories/AI/"><span class="level-start"><span class="level-item">AI</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/Docker/"><span class="level-start"><span class="level-item">Docker</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul><li><a class="level is-mobile" href="/categories/Docker/%E8%87%AA%E6%89%98%E7%AE%A1/"><span class="level-start"><span class="level-item">自托管</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/Linux/"><span class="level-start"><span class="level-item">Linux</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/Proxy/"><span class="level-start"><span class="level-item">Proxy</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/Python/"><span class="level-start"><span class="level-item">Python</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul><li><a class="level is-mobile" href="/categories/Python/WebTesting/"><span class="level-start"><span class="level-item">WebTesting</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/web/"><span class="level-start"><span class="level-item">web</span></span><span class="level-end"><span class="level-item tag">8</span></span></a><ul><li><a class="level is-mobile" href="/categories/web/CSS/"><span class="level-start"><span class="level-item">CSS</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/web/Node-js/"><span class="level-start"><span class="level-item">Node.js</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/categories/web/TypeScript/"><span class="level-start"><span class="level-item">TypeScript</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/web/canvas/"><span class="level-start"><span class="level-item">canvas</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/web/typescript/"><span class="level-start"><span class="level-item">typescript</span></span><span class="level-end"><span class="level-item tag">2</span></span></a><ul><li><a class="level is-mobile" href="/categories/web/typescript/javascript/"><span class="level-start"><span class="level-item">javascript</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/web/webpack/"><span class="level-start"><span class="level-item">webpack</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li></ul></div></div></div><div class="card widget" data-type="tags"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/AI/"><span class="tag">AI</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/API-Contract/"><span class="tag">API Contract</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CSS/"><span class="tag">CSS</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Canvas/"><span class="tag">Canvas</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CentOS/"><span class="tag">CentOS</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Clash/"><span class="tag">Clash</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Cursor/"><span class="tag">Cursor</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Docker/"><span class="tag">Docker</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Error-Code/"><span class="tag">Error Code</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Homelab/"><span class="tag">Homelab</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Homepage/"><span class="tag">Homepage</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Linux/"><span class="tag">Linux</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/MSW/"><span class="tag">MSW</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Mock/"><span class="tag">Mock</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Node-js/"><span class="tag">Node.js</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OpenAPI/"><span class="tag">OpenAPI</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Proxy/"><span class="tag">Proxy</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/VPS/"><span class="tag">VPS</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ddt/"><span class="tag">ddt</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/javascript/"><span class="tag">javascript</span><span class="tag">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/nvm/"><span class="tag">nvm</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/python/"><span class="tag">python</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/typescript/"><span class="tag">typescript</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/unittest/"><span class="tag">unittest</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/web/"><span class="tag">web</span><span class="tag">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/web-test/"><span class="tag">web test</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/webpack/"><span class="tag">webpack</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/zsh/"><span class="tag">zsh</span><span class="tag">1</span></a></div></div></div></div></div><div class="card widget" data-type="subscribe-email"><div class="card-content"><div class="menu"><h3 class="menu-label">follow.it</h3><form action="https://api.follow.it/subscription-form/OC82TmJiTGRITFVlSXp4eHBYSzNyU0VnZHcvc2ROdHJ0SmgwdlY2WFFFL2NrZExrS0ZEeXNxNk0zTFErTjhQWVJNOHpsVEpRcEU2dEdEM0RmUE9aTmIzeFdYRGMrcTNMUEFHQW5NR2FhdWVadVB0SmFZZm5SSTZ1THFTdVo5WlF8RFE3N0dNaCsyZjk5NXBSaTlHY0RTU2tRK0d6TWRkb1Nyak5Teng5ZUtqaz0=/8" method="post" target="_blank"><div class="field has-addons"><div class="control has-icons-left is-expanded"><input class="input" name="email" type="email" placeholder="Email"><span class="icon is-small is-left"><i class="fas fa-envelope"></i></span></div><div class="control"><input class="button" type="submit" value="订阅"></div></div></form></div></div></div><div class="column-right-shadow is-hidden-widescreen is-sticky"></div></div><div class="column column-right is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only order-3 is-sticky"><!--!--><div class="card widget" data-type="recent-posts"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><div class="media-content"><p class="date"><time dateTime="2026-04-13T12:10:13.000Z">2026-04-13</time></p><p class="title"><a href="/2026/04/13/homepage/">用 Docker 部署 GetHomepage：家庭服务仪表盘与书签入口</a></p><p class="categories"><a href="/categories/Docker/">Docker</a> / <a href="/categories/Docker/%E8%87%AA%E6%89%98%E7%AE%A1/">自托管</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2026-03-23T06:01:42.072Z">2026-03-23</time></p><p class="title"><a href="/2026/03/23/webpack/">【webpack】webpack快速入门</a></p><p class="categories"><a href="/categories/web/">web</a> / <a href="/categories/web/webpack/">webpack</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2026-03-22T15:07:00.000Z">2026-03-22</time></p><p class="title"><a href="/2026/03/22/build-proxy/">Overlay Network 搭建记录</a></p><p class="categories"><a href="/categories/Proxy/">Proxy</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2026-03-20T08:31:24.000Z">2026-03-20</time></p><p class="title"><a href="/2026/03/20/cursor-proxy/">如何在 Cursor 中使用高级模型</a></p><p class="categories"><a href="/categories/AI/">AI</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2026-02-10T11:50:12.000Z">2026-02-10</time></p><p class="title"><a href="/2026/02/10/howtousemsw02/">前端接口契约治理实践：MSW + 错误码 + OpenAPI 的一次落地</a></p><p class="categories"><a href="/categories/web/">web</a> / <a href="/categories/web/typescript/">typescript</a> / <a href="/categories/web/typescript/javascript/">javascript</a></p></div></article></div></div><div class="card widget" data-type="archives"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-mobile" href="/archives/2026/04/"><span class="level-start"><span class="level-item">四月 2026</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2026/03/"><span class="level-start"><span class="level-item">三月 2026</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/archives/2026/02/"><span class="level-start"><span class="level-item">二月 2026</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2025/12/"><span class="level-start"><span class="level-item">十二月 2025</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2025/03/"><span class="level-start"><span class="level-item">三月 2025</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2025/01/"><span class="level-start"><span class="level-item">一月 2025</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2024/09/"><span class="level-start"><span class="level-item">九月 2024</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2024/08/"><span class="level-start"><span class="level-item">八月 2024</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li></ul></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="/images/logo.png" alt="Quirrel-Zh" height="28"></a><p class="is-size-7"><span>© 2026 小郑</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p><p class="is-size-7"><a href="https://icp.gov.moe/?keyword=20265021" target="_blank">萌ICP备20265021号</a></p></div><div class="level-end"><div class="field has-addons"><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a></p></div></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script><script>moment.locale("zh-cn");</script><script>var IcarusThemeSettings = {
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script data-pjax src="/js/column.js"></script><script src="/js/animation.js"></script><a id="back-to-top" title="回到顶端" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script data-pjax src="/js/back_to_top.js" defer></script><!--!--><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js" defer></script><script>window.addEventListener("load", () => {
window.cookieconsent.initialise({
type: "info",
theme: "edgeless",
static: false,
position: "bottom-left",
content: {
message: "此网站使用Cookie来改善您的体验。",
dismiss: "知道了！",
allow: "允许使用Cookie",
deny: "拒绝",
link: "了解更多",
policy: "Cookie政策",
href: "https://www.cookiesandyou.com/",
},
palette: {
popup: {
background: "#edeff5",
text: "#838391"
},
button: {
background: "#4b81e8"
},
},
});
});</script><script src="https://cdn.jsdelivr.net/npm/lightgallery@1.10.0/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><!--!--><!--!--><!--!--><script data-pjax src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="想要查找什么..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script data-pjax src="/js/insight.js" defer></script><script data-pjax>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"想要查找什么...","untitled":"(无标题)","posts":"文章","pages":"页面","categories":"分类","tags":"标签"});
});</script></body></html>