feat: update blog

src/.vuepress/sidebar/index.ts

@@ -57,14 +57,7 @@ export const zhSidebarConig = sidebar({
 
   "/code/vue/": vue,
 
-  "/code/node-js/": [
-    "",
-    "intro",
-    "install",
-    "environment",
-    "program",
-    "module",
-  ],
+  "/code/node-js/": "structure",
 
   "/code/mini-app/": miniapp,
 

src/.vuepress/styles/index.scss

+@media (min-width: 751px) {
+  #docsearch-container {
+    min-width: 136px !important;
+  }
+}

src/.vuepress/theme.ts

@@ -67,7 +67,7 @@ export default hopeTheme({
     blog: true,
 
     comment: {
-      type: "waline",
+      provider: "Waline",
       serverURL: "https://mister-hope-blog-comment.vercel.app/",
     },
 
@@ -79,6 +79,7 @@ export default hopeTheme({
 
     mdEnhance: {
       align: true,
+      codetabs: true,
       demo: true,
       flowchart: true,
       footnote: true,

src/code/github/deploy.md

@@ -72,11 +72,16 @@ git init --separate-git-dir=. <部署位置>
 
 ```sh
 git config receive.denyCurrentBranch ignore
+git config --global --add safe.directory <部署文件夹>
 ```
 
-这是由于 Git 默认拒绝外部对当前分支的推送操作，因为这可能会覆盖或变更工作区文件。
+::: note
 
-设置完毕后，Git 会允许外部对当前工作区分支进行推送操作。
+Git 默认拒绝外部对当前分支的推送操作，因为这可能会覆盖或变更工作区文件。所以我们需要显式通知 Git 不要拒绝当前分支的推送操作。
+
+另外在新版本 Git 中，考虑到安全因素，Git 会在检出时检测项目文件夹是否属于其他组成员，如果检测到会默认拒绝相关操作以防止其他用于获取到本不应该获取到的代码信息。因为部署文件夹的所有者通常不会是 git，所以我们需要标记对应的部署文件夹“安全”。
+
+:::
 
 ## GitHub Actions
 

src/code/github/intro.md

@@ -13,7 +13,7 @@ tag:
 
 ## 基本概念
 
-### repository
+### Repository
 
 仓库。一个仓库即是一个项目。仓库是 GitHub 上的主要内容。每当您新建一个项目并想要在 GitHub。
 
@@ -21,29 +21,41 @@ tag:
 
 收藏。在每一个仓库主页的上方可以看到 star 按钮。其上的数值为收藏该项目的人数。点击星星即可将当前仓库收藏到您的账号上。您可以收藏一些您比较喜欢，或者项目对您来说有很大价值的项目。同时，点击数字可以看到哪些人收藏了这个项目。
 
-### fork
+### Fork
 
 复刻。在每一个仓库主页的上方可以看到 Fork 按钮。点击该按钮的作用是将当前项目复刻一份到自己的仓库中，这样，您就可以在此仓库仓库上查看当前、历史的版本，切换分支、或者是随心所欲的进行修改。原项目的新的推送、对历史版本的修改、甚至原作者删除了他的 repo，都不会对您 fork 的项目产生任何影响。
 
-### issue
+### Issue
 
-议题。这是一个类似讨论区的地方。如果您在使用该项目的过程中遇到了问题，可以在相应项目的 Issue 板块按照项目的要求提出 Issue。在 Issue 中可以汇报一个 bug，或者是提出一个 Feature Request (功能请求)。项目的拥有者会针对您汇报的情况对您做出回复。同时，项目拥有者还可以为此 issue 增加 label (标签)，以帮助项目成员或是项目的其他使用者更好的理解您提出 issue。也可以将您的 issue assign (分派) 给特定的项目成员解决。
+议题。你可将这里理解为 Bug 汇报区与新功能提交区。
+
+如果您在使用该项目的过程中遇到了问题，可以在相应项目的 Issue 板块按照项目的要求提出 Issue。在 Issue 中可以汇报一个 bug，或者是提出一个 Feature Request (功能请求)。项目的拥有者可以针对您汇报的情况对您做出回复。
+
+同时，项目拥有者还可以:
+
+- 为此 issue 增加 label (标签)，以帮助项目成员或是项目的其他使用者更好的理解这个 issue 的分类
+- 将此 issue assign (分派) 给特定的项目成员解决。
+- 将此 issue 加入特定的 project (项目) 以安排处理日期与进度。
 
 ::: tip
 
-为了 GitHub 的友好交流环境，请在汇报 bug 时永远带上 bug 的一个简易的复现流程，可以直接建立一个简单的 bug repository 并把链接放置在您提出的 issue 中。
+为了 GitHub 的友好交流环境，请在汇报 bug 时永远带上 bug 的一个简易的复现流程，可以直接建立一个简单的 reproduction repo 并把链接放置在您提出的 issue 中。
 
 :::
 
-### pull request
+### Pull Request
 
 发起推送请求，简称 **PR**。如果是您自己的项目，您可以从一个分支向另一个分支发起推送请求。如果您想对别人的(您无权进行推送)项目进行代码的推送请求的化，需要先 fork 这个仓库。在自己 fork 的项目上进行修改，然后提交到自己的项目上，之后，建立一个从自己仓库到对方仓库的 PR。如果对方觉得您的新改动很不错，在经过测试或者 review 后就会接受它，这样原有项目就可拥有这些新的代码了.
 
-### watch
+### Dicussion
+
+GitHub 的讨论区，和 Issue 区主要用于 Bug 和 Feature Request 的追踪不同，通常情况下，你可以在讨论区开帖子询问使用中遇到的问题，以便其他人进行答复。你也可以在 Dicussion 区提供项目的看法与建议，比如对某个功能进行改进的方式以及相关理由。你也可以展示你自己使用项目的一些新的或是与项目相关的一些内容。
+
+### Watch
 
 关注，在每一个仓库主页的上方可以看到 Watch 按钮。如果您关注了某个项目,那么这个项目有了变化的时候,您就会得到通知.在您点击关注后，您还可以点击下拉列表进一步设置关注级别。您可以选择接受 Release (新发布) 通知，也可以选择 Watching 来监听所有的通知。当您选择 Ignore 的话，即使有人在这个仓库中 metion (提到) 了您，您也不会得到通知。
 
-### review
+### Review
 
 审查。当项目收到 PR 时，项目的拥有成员可以对这份 PR 的代码改动进行审查，在 Review 的过程中，可以对代码的特定行或特定几行通过 comment(评论) 的方式来提出自己对代码改动的意见。
 

src/code/language/js/README.md

@@ -7,7 +7,11 @@ copyright: 此部分博客采用 <a href="https://creativecommons.org/licenses/b
 star: true
 ---
 
-> 部分内容参考/来自廖雪峰、阮一峰书籍与博客
+::: note
+
+部分内容参考/来自廖雪峰、阮一峰书籍与博客
+
+:::
 
 <!-- more -->
 

src/code/mini-app/guide/service/api/README.md

 ---
-title: API <Badge text="重要" type="error" />
+title: API
 icon: api
 category: 小程序
 ---
 
-小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。详细介绍请参考 [API 文档](https://developers.weixin.qq.com/miniprogram/dev/api/)。
+小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。详细介绍请参考 [API 文档](https://developers.weixin.qq.com/miniprogram/dev/api/)。 <Badge text="重要" type="error" />
 
 <!-- more -->
 

src/code/mini-app/guide/service/lifetime.md

 ---
-title: 生命周期 <Badge text="不需要立即掌握" />
+title: 生命周期
 icon: state
 category: 小程序
 ---
 
 ::: tip
 
+<Badge text="不需要立即掌握" />
+
 以下内容您不需要立马完全弄明白，不过如果您深入了解并开发小程序后，它及其有帮助。
 
 :::

src/code/node-js/README.md

@@ -21,7 +21,7 @@ Node.js 是一款全球使用广泛的框架，可以用在前端与后端上，
 
 - [编程](program.md)
 
-- [Node.js 模块](module.md)
+- [Node.js CJS 模块](cjs.md)
 
 以上，就是 Node.js 的简易介绍，系统学习可以查看下方的详细教程。
 

src/code/node-js/environment.md

 ---
 title: 搭建 Node 开发环境
 icon: leaf
+order: 3
 category: Node.js
 tag:
   - Node.js
@@ -25,14 +26,14 @@ VS Code 以文件夹作为工程目录 (Workspace Dir)，所有的 JavaScript
 
 假设我们在 `C:\Work\` 目录下创建了一个 hello 目录作为工程目录，并编写了一个 `hello.js` 文件，则该工程目录的结构如下:
 
-```md
+```
 hello/ <-- workspace dir
 |
-+- hello.js <-- JavaScript file
-|
-+- .vscode/ <-- VS Code config
+├─ hello.js <-- JavaScript file
 |
-+- launch.json <-- VS Code config file for JavaScript
+└─ .vscode/ <-- VS Code config
+      |
+      └ launch.json <-- VS Code config file for JavaScript
 ```
 
 可以用 VS Code 快速创建 `launch.json`，然后修改如下:

src/code/node-js/install.md

 ---
 title: 安装 Node.js
 icon: install
+order: 2
 category: Node.js
 tag:
   - Node.js
@@ -14,9 +15,9 @@ tag:
 
 ## 安装 Node.js
 
-目前 Node.js 的 LTS 版本是 16.14.2。首先，从 Node.js 官网下载对应平台的安装程序。点击 LTS 版本的下载按钮。
+目前 Node.js 的 LTS 版本是 16.15.1。首先，从 Node.js 官网下载对应平台的安装程序。点击 LTS 版本的下载按钮。
 
-- [Node.js官网](https://nodejs.org/en/)
+- [Node.js 官网](https://nodejs.org/zh-cn/)
 
 ### 安装过程
 
@@ -24,31 +25,29 @@ tag:
 
   在安装过程中，无需勾选 "Automatically install the necessary tools"。选中此项会在电脑中安装 VS 等日常开发使用不到的软件。
 
-  安装完成后，在 Windows 环境下，请打开命令提示符，然后输入 `node -v` ，如果安装正常，您应该看到 `v12.18.0` 这样的输出:
+  安装完成后，在 Windows 环境下，请打开命令提示符，然后输入 `node -v` ，如果安装正常，您应该看到 `v16.15.1` 这样的输出:
 
   ```bash
   C:\Users\IEUser>node -v
-  v12.18.0
+  v16.15.1
   ```
 
   继续在命令提示符输入 node，此刻您将进入 Node.js 的交互环境。在交互环境下，您可以输入任意 JavaScript 语句，例如 `100 + 200`，回车后将得到输出结果。
 
-  要退出 Node.js 环境，连按两次 `Ctrl+C` 。
+  要退出 Node.js 环境，连按两次 `Ctrl + C` 。
 
 - 在 Mac 或 Linux 环境下，请打开终端，然后输入 `node -v`，您应该看到如下输出:
 
   ```sh
   $ node -v
-  v12.18.0
+  v16.15.1
   ```
 
 ## npm
 
-在正式开始 Node.js 学习之前，我们先认识一下 npm。
+npm 是 Node.js 的包管理工具(package manager)。
 
-Npm 是什么东东? npm 其实是 Node.js 的包管理工具(package manager)。
-
-为啥我们需要一个包管理工具呢? 因为我们在 Node.js 上开发时，会用到很多别人写的 JavaScript 代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生: 大家都把自己开发的模块打包后放到 npm 官网上，如果要使用，直接通过 npm 安装就可以直接用，不用管代码存在哪，应该从哪下载。
+我们在 Node.js 上开发时，会用到很多别人写的 JavaScript 代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生: 大家都把自己开发的模块打包后放到 npm 官网上，如果要使用，直接通过 npm 安装就可以直接用，不用管代码存在哪，应该从哪下载。
 
 更重要的是，如果我们要使用模块 A，而模块 A 又依赖于模块 B，模块 B 又依赖于模块 X 和模块 Y，npm 可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
 
@@ -58,42 +57,82 @@ Npm 是什么东东? npm 其实是 Node.js 的包管理工具(package manager)
 
 ```bash
 C:\>npm -v
-6.13.1
+8.12.1
 ```
 
-> 如果版本号太小，说明 npm 版本较低，请使用此命令升级到最新版本: `npm install -g npm`。
+> 如果版本号太小，说明 npm 版本较低，请使用此命令升级到最新版本: `npm i -g npm`。
 
 如果直接输入 `npm`，您会看到类似下面的输出:
 
 ```bash
 C:\> npm
+npm <command>
 
-Usage: npm <command>
+Usage:
 
-where <command> is one of:
+npm install        install all the dependencies in your project
+npm install <foo>  add the <foo> dependency to your project
     ...
 ```
 
-上面的一大堆文字告诉您，npm 需要跟上命令。现在我们不用关心这些命令，后面会一一讲到。目前，您只需要确保 npm 正确安装了，能运行就行。
+上面的一大堆文字告诉您，npm 需要附带命令。现在我们不用关心这些命令，后面会一一讲到。目前，您只需要确保 npm 正确安装了，能运行就行。
 
-## 墙
+## 国内镜像站
 
 大家都知道天朝是有墙的，有的时候，访问国外的 Node.js 服务器可能会十分缓慢以至于您想把它砸了。
 
-所以贴心的马云爸爸提供了淘宝镜像，淘宝镜像有一个自己定制的 `cnpm` 工具，服务器在国内，十分快捷。不过大家在使用 `cnpm` 安装模块之后再使用 npm 安装会报错，只能重新删掉 `node_modules` 文件夹重新执行 `npm install` 全新安装才会不报错。
+所以贴心的马云爸爸提供了淘宝镜像源。你可以将 npm 的源配置为国内镜像源，以在每次安装依赖的时候从国内镜像站拉取镜像。这可以极大的提升安装速度。
 
-::: warning
+::: note
+
+如果官方源的速度还可以的话请尽可能使用官方源。
+
+国内源毕竟是镜像站点，同步官方源的包会出现延迟，所以有时候你可能会遇到 `version xxx not found` 之类的错误，这是因为所需要的版本还没来得及被镜像站点同步所导致。
 
-如果大家可以使用 `npm` 命令，非常不建议大家使用 `cnpm` 命令安装模块。
+你可以通过访问 `npmmirror.com/sync/<包名>` 来手动同步一个包。
 
 :::
 
-安装 `cnpm` 的命令如下:
+设置及国内源的命令如下:
 
 ```sh
-npm install -g cnpm --registry=https://registry.npm.taobao.org
+npm config set registry https://registry.npmmirror.com/
+```
+
+::: warning
+
+`https://registry.npm.taobao.org/` 是老的淘宝源地址，现已停止维护，请不要使用!!!
+
+:::
+
+## 启用 Corepack
+
+Node.js 自带的包管理工具 npm 并不是那么的强大，其安装速度也很慢，所以社区开发了一些其他的包管理工具如 `yarn` 和 `pnpm`，它们有自己的优势。
+
+Mr.Hope 推荐使用 pnpm 进行包管理，因为它使用硬链接索引包文件，安装速度更快而且节省磁盘空间。
+
+从 v16 开始，Node.js 引入了 Corepack 工具，并在 package.json 支持了 `packageManager` 选项以支持第三方管理工具。
+
+你需要通过下方命令启用 Corepack:
+
+```bash
+corepack enable
 ```
 
+这样每个项目会自动应用根目录 package.json 中的 `packageManager` 选项。比如设置 `"packageManager": "pnpm@7.2.1"` 的时候，会自动下载并使用 `pnpm@7.2.1`。
+
+::: info 设置全局的 packageManager
+
+你可以使用 `corepack prepare packageManager@semver` 来全局准备一个 packageManager 版本，并使用 `--activate` 选新娘 全局激活。
+
+比如以下命令下载 `pnpm@7.2.1` 并将其作为默认的全局包管理器:
+
+```bash
+corepack prepare pnpm@7.2.1 --activate
+```
+
+:::
+
 ## 小结
 
 请在本机安装 Node.js 环境，并确保 Node.js 和 npm 能正常运行。

src/code/node-js/intro.md

 ---
 title: Node.js
 icon: creative
+order: 1
 category: Node.js
 tag:
   - Node.js
@@ -56,8 +57,8 @@ Chrome 浏览器是跨 Windows 和 Mac 平台的，并且，Google 认为要运
 
 ## Node.js 相关链接
 
-- [Node.js 官网](https://nodejs.org/en/)
+- [Node.js 官网](https://nodejs.org/zh-cn/)
 
-- [Node.js 最新文档](https://nodejs.org/en/docs/)
+- [Node.js 最新文档](https://nodejs.org/zh-cn/docs/)
 
-- [Node.js 最新 API 文档](https://nodejs.org/dist/latest-v14.x/docs/api/)
+- [Node.js 最新 API 文档](https://nodejs.org/dist/latest-v16.x/docs/api/)

src/code/vue/README.md

@@ -5,12 +5,6 @@ prev: ../website/https.html
 category: 基础
 ---
 
-::: warning
-
-目前此部分为 Vue 2 的文档，待 Vue 3 出官方中文文档后，本博客会进行跟进。
-
-:::
-
 Vue.js 是世界上主流的前端框架。
 
 官方介绍为：渐近式 JavaScript 框架。一款用于构建 Web 界面，易学易用，性能出色且功能丰富的框架。

src/code/vue/install.md

@@ -62,9 +62,3 @@ npm 模块介绍
 Vue 官方提供的浏览器插件 VueTools 可以更好的帮助开发。
 
 使用 VPN 用 Chrome 打开[安装网址](https://chrome.google.com/webstore/detail/nhdogjmejiglipccpnnnanhbledajbpd)，安装 VueTools 开发工具
-
-::: tip
-
-VPN 可以使用赛风 3 或 Betternet。
-
-:::