使用 Rollup 搭建 TypeScript 的体验环境，避免每次修改都要使用 tsc 重新编译。

Web Components 是浏览器原生支持的。详细见 MDN

三个核心概念：

1. Custom Elements（自定义元素）：
   1. 可以创建自己的 HTML 标签，类似 <my-component>，并且定义其行为和生命周期函数。
   2. 相关生命周期回调包括 connectedCallback、disconnectedCallback、attributeChangedCallback等
2. Shadow DOM（影子 DOM）：
   1. 提供了 DOM 和 CSS 的封装，防止组件内部的样式和结构影响到外部
   2. 使组件更具可复用性，避免了样式污染
3. HTML Templates（HTML 模板）：
   1. 通过 <template> 和 <slot> 元素，可以创建可复用的结构和内容插槽
   2. <template> 中的内容不会立即渲染，只有在 JS 中手动克隆和插入到 DOM 时才会渲染

给博客接入评论系统，采用 giscus，原理就是 Github 的 Discussion 评论系统。

默认情况下，Docusaurus 的 blog 列表分页是「较新的博文/较旧的博文」的形式。如果想改成数字按钮形式，需要自定义分页组件。

我的需求如下：

1. 需要一个除了 /blog 以外的路径，例如：/code
2. code 列表页可以使用自定义的分页组件，blog 列表页使用默认的分页组件

文档：https://docusaurus.io/docs

create-docusaurus是一个创建 Docusaurus 应用的脚手架工具。

初始化项目：

npx create-docusaurus@latest my-website classic --typescript --package-manager pnpm

• 项目名：my-website
• 模板：classic
• 使用 typescript
• 使用 pnpm

如果查看 tsconfig.json 或者执行pnpm typecheck报错，安装以下依赖：

pnpm add -D @docusaurus/theme-classic @types/node

文件类型：img、docx、xlsx、ppt、pdf、md、txt、audio、video

网页渲染方式主要有：

• 客户端渲染（Client Side Rendering）
• 服务端渲染（Server Side Rendering）
• 静态站点生成（Static Site Generation）