# ccforeverd 的学习笔记

> ccforeverd's study notes

## Docs

- [序言](/getting-started): 这是 [`ccforeverd`](https://github.com/ccforeverd/) 的学习笔记, 让我们赶快开始吧!
- [更新日志](/git-history)
- [技术栈更新](/置顶/技术栈更新): 整理一下技术栈, 持续更新...
- [Git 生成更新日志](/文档/Git生成更新日志): 根据 Git 提交记录生成更新日志
- [vocs 踩坑记](/文档/vocs踩坑记): 记录使用 vocs 开发时遇到的蛋疼事情
- [制作文章图片集合](/文档/制作文章图片集合): 使用 `Vite` 插件, 为文档工具制作图片集合
- [部署 Nginx 静态服务](/文档/部署nginx静态服务): 使用 Github Actions + SSH 部署 Nginx 静态服务
- [收集 (架构向)](/收集/awesome-framework): 记录我喜欢且常用的架构
- [网站收集 (图片向)](/收集/awesome-pic): 收集了一些图片网站
- [网站收集 (技术向)](/收集/awesome-tech): 收集一些遇到的, 可能会用上的网站
- [Canvas 输出图片并下载](/技巧/canvas下载图片): Canvas 输出图片并自动下载, 再使用浏览器标签快捷操作
- [SSH 私钥权限限制](/技巧/ssh私钥权限): 时间长了会忘记, 记录一下
- [优化三目](/技巧/优化三目): 偶遇一则三目表达式:
- [化纤棉材料](/其它/化纤棉材料): 记录常见棉服化纤棉材料的信息
- [首屏加载优化](/优化/首屏加载优化): 首屏加载优化方式的梳理和总结
- [简历目录](/resume): 一个隐藏菜单, 用于跳转简历和面试相关页面
- [面试准备](/resume/preparation/interview): Web3 做过什么
- [陈美珍-海外信贷平台产品专家](/resume/chen): 电话：188-1155-6331 | 邮箱：[chenmeizhen829@163.com](mailto:chenmeizhen829@163.com) | 英语：CET-6（工作交流流利）
- [Next.js CLI](/books/Nextjs/1.NextCli): 此本小册基于的是目前最新版本的 `v14` 版本, 需要 [`Node.js 18.17`](https://nodejs.org/en) 及以后版本, 支持 `macOS`, `Windows`, `Linux` 系统
- [Suspense 与 Streaming](/books/Nextjs/10.Suspense与Steaming): `Suspense` 是 `Next.js` 项目中常用的一个组件, 了解其原理和背景有助于我们正确使用 `Suspense` 组件
- [服务端组件和客户端组件](/books/Nextjs/11.服务端组件和客户端组件): 服务端组件和客户端组件是 `Next.js` 中非常重要的概念. 如果没有细致的了解过, 你可能会简单的以为所谓服务端组件就是 `SSR`, 客户端组件就是 `CSR`, 服务端组件在服务端进行渲染, 客户端组件在客户端进行渲染等等, 实际上并非如此. 本篇就让我们深入学习和探究 `Next.js` 的双组件模型吧!
- [App Router](/books/Nextjs/2.AppRouter): 路由 (`Router`) 是 `Next.js` 应用的重要组成部分. 在 `Next.js` 中, 路由决定了一个页面如何渲染或者一个请求该如何返回
- [链接与导航](/books/Nextjs/3.链接与导航): 上篇我们介绍了如何定义路由, 本篇我们讲讲如何在 `Next.js` 中实现链接和导航
- [路由](/books/Nextjs/4.路由): 实际项目开发的时候, 有的路由场景会比较复杂, 比如数据库里的文章有很多, 我们不可能一一去定义路由, 此时该怎么办? 组织代码的时候, 有的路由是用于移动端, 有的路由是用于 PC 端, 该如何组织代码? 如何有条件的渲染页面, 比如未授权的时候显示登录页? 如何让同一个路由根据不同的场景展示不同的内容?
- [路由控制](/books/Nextjs/5.路由控制): 在前面的文章中, 我们讲解了路由定义和导航的各种方式. 本篇文章我们会继续学习路由的一些进阶功能, 包括路由控制, 加载 `UI`, 错误处理等
- [路由处理程序](/books/Nextjs/6.路由处理程序): 路由处理程序是指使用 Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request "https://developer.mozilla.org/en-US/docs/Web/API/Request") 和 [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response "https://developer.mozilla.org/en-US/docs/Web/API/Response") API 对于给定的路由自定义处理逻辑
- [中间件](/books/Nextjs/7.中间件): 中间件 (Middleware), 一个听起来就很高级, 很强大的功能. 实际上也确实如此. 使用中间件, 你可以拦截并控制应用里的所有请求和响应
- [CSR SSR SSG ISR](/books/Nextjs/8.CSR_SSR_SSG_ISR): 以前学习 `Next.js` 可能是听说了 `Next.js` 一个框架就可以实现 `CSR`, `SSR`, `SSG`, `ISR` 这些功能, 但在 `Next.js v13` 之后, `Next.js` 推出了基于 `React Server Component` 的 `App Router`
- [React Server Component 与 SSR](/books/Nextjs/9.ReactServerComponent与SSR): `Next.js v13` 推出了基于 `React Server Component` 的 `App Router` 路由解决方案. 对于 `Next.js` 而言堪称是一个颠覆式的更新, 更是将 `React` 一直宣传的 `React Server Component` 这个概念真正推进并落实到项目中
- [Web3 React Add Chain](/Web3React/AddChain): 使用 ethereum / ethers / viem / wagmi 实现添加链
- [BigNumber Round 静态属性](/Web3React/BigNumberRound): 介绍 BigNumber Round 静态属性
- [Web3 React Connect Wallet](/Web3React/ConnectWallet): 使用 ethereum / ethers / viem / wagmi 实现钱包连接
- [Web3 React Switch Chain](/Web3React/SwitchChain): 使用 ethereum / ethers / viem / wagmi 实现添加链
- [Rehype 插件文档整理](/Vocs/rehype-plugin): 这是根据当前页面 [rehype/doc/plugins.md](https://github.com/rehypejs/rehype/tree/main/doc) 整理的内容概要。该文档主要介绍了 rehype 生态系统中的插件列表、工具、使用方法以及如何创建插件。
- [rehype](/Vocs/rehype): **rehype** 是一个用于处理和转换 HTML 的工具生态，基于 **AST（抽象语法树）** 的方式对 HTML 进行解析、遍历和修改。\
它隶属于 **unified** 体系，专注于 HTML 领域，使用的 AST 规范是 **hast**。
- [解决vscode的css文件中tailwind修饰器的报错](/VSCode/解决vscode的css文件中tailwind修饰器的报错): 在 `vscode` 中打开 `.css` 文件编写 `tailwind` 时遇到报错:
- [TypeScript 工具集](/TypeScript/工具集): 简述收集到的 TypeScript 工具集
- [基于Taro的小程序Monorepo改造](/Taro/基于Taro的小程序Monorepo改造): 基于Taro的小程序Monorepo改造
- [Figma & Tailwind 切图之字体渐变](/Tailwind/Figma切图-字体渐变): 如何在 Figma 中使用 Tailwind 对 `字体渐变` 进行切图
- [SEO 总结](/SEO/总结): 总结 SEO 常用内容:
- [createWithEqualityFn ⚛️ - Zustand](/React/Zustand/createWithEqualityFn): 网页类型: 普通网站
- [PM2 常用命令](/PM2/常用命令): `npm i -g pm2` 安装 `PM2`
- [日志位置](/PM2/日志位置): `PM2` 日志存储位置, 一般在 `~/.pm2/logs` 目录下, 或 `/root/.pm2/logs` 目录下
- [示例: 实现天气预报查询服务](/Nest/示例-实现天气预报查询服务): 使用 Nest 请求和风天气免费 API 实现天气预报查询服务
- [使用 SSH 来部署 Nest 服务](/Nest/部署-使用ssh): 通过 Github Actions + SSH 部署 Nest 服务
- [NPM 包 - Ajv](/NPM/ajv): Ajv 是一个 JSON Schema 验证器
- [NPM 包 - Simple Git](/NPM/simple-git): 在 nodejs 环境简单易用的 git 工具
- [Monorepo 搭建](/Monorepo/Monorepo搭建): `Monorepo` + `pnpm` 搭建流程
- [原子组件-Placehold](/Mantine/AtomPlacehold): 介绍原子组件 `Placehold` 的使用方法
- [Table 固定 head 滚动 body](/Mantine/Table固定head滚动body): 如何在 Mantine 中实现 Table 固定 head 滚动 body
- [MacOS 使用 pmset 命令行设置自动重启](/MacOS/MacOS使用pmset设置自动重启): 简述如何使用 `pmset` 命令行设置自动重启。
- [使用 Game Porting Toolkit 运行原神](/MacOS/使用GamePortingToolkit运行原神): 讲述如何在 `MacOS` 上启动原神
- [解决软件打开 "已损坏, 无法打开" 的问题](/MacOS/解决-已损坏-无法打开): 使用 "xattr -cr \<文件地址>" 命令
- [Git pull 避免提交历史变复杂](/Git/git-pull避免提交历史变复杂): `git pull` 是 `git fetch` 和 `git merge` 的组合
- [删除本地和远程分支](/Git/删除本地和远程分支): 切换到其它分支
- [SOLID 原则在前端的应用](/Classic/SOLID原则在前端的应用): 简介 `SOLID` 原则在前端的应用
- [2 栏自适应高度布局](/CSS/2栏自适应高度布局): 使用 Grid 布局实现 2 栏自适应高度布局
- [Chrome AI](/AI/chrome-ai): `Chrome` 浏览器内置 `AI` 功能, 可以在本地设备上运行 `Gemini Nano` 模型, 为用户提供更快速、更安全的 `AI` 功能. 本文介绍如何开启 `Built-in AI` 功能, 并展示如何在 `Web` 应用中使用 `Gemini API`