demo 浏览地址：https://fishjar.github.io/comparison-note/

• 不同编程语言，许多特性是相似的，也有许多特性是不同的。
• 在学习多种语言之后，记忆上有诸多混淆，查找文档又散落各处。
• 所以萌发了做一个这样的笔记项目，通过直观的对比记录来学习、查阅相关知识。

• 支持markdown文档，支持无限深度的目录
• 支持导出静态页面
• 支持 github 自动集成/部署
• 初衷是为编程语言学习做的笔记系统，其实不限于此

• reactjs
• nextjs
• markdown
• bootstrap
• github actions

├── bin
│   └── index.js            # 递归导出菜单的脚本
├── src
│   ├── components          # 公用组件
│   │   ├── CodeBlock.js
│   │   ├── Footer.js
│   │   ├── Header.js
│   │   ├── Layout.js
│   │   ├── MarkDown.js
│   │   └── Nav.js
│   ├── pages
│   │   ├── _app.js
│   │   ├── index.js
│   │   └── [...param].js
│   └── utils
│       ├── index.js
│       └── navs.json       # 导出的菜单数据
├── docs                    # 导出静态页面的文件夹
├── LICENSE
├── next.config.js
├── notes                   # markdown笔记文件夹
├── package.json
├── README.md
└── yarn.lock

• 笔记使用markdown格式，文件后缀请使用.md
• 全部笔记必须保存到notes文件夹
• 每个文件夹请编写一个README.md文件，且支持title字段定义显示的文件夹名称
• 每个文件夹的其他.md文件会当作比较笔记

# 安装依赖
yarn

# 导出菜单
yarn nav

# 开发
yarn dev

# 编译
yarn build

# 运行
yarn start

# 导出静态页面
yarn export

• 修改next.config.js中的ASSET_PREFIX
• 修改package.json中的homepage
• 给action创建一个名为ACCESS_TOKEN的secrets
• 直接push到master分支，actions会自动部署

• getInitialProps
  • 按理在服务器运行可以使用fs，path等nodejs库，但是没运行成功。
  • 最后只好加了一个独立脚本bin/index.js来生成菜单列表。
• react-syntax-highlighter
  • 导入类似react-syntax-highlighter/dist/esm/styles/hljs是不行的
  • 必须改成react-syntax-highlighter/dist/ejs/styles/hljs。
• next.js的路由
  • 开发时的路由是 js 控制的，可能没有/结尾
  • 但是到处静态html后，其实是访问某目录下的index.html文件，所以路径会有个/结尾
  • 并且部署到非顶级目录时，路由参数也会有变化
  • 这会导致一些路由判断的麻烦
• github pages部署
  • 所有css和js文件 404。
  • 解决是添加.nojekyll文件，否则_next目录下的css和js访问不到。

• 初次使用nextjs，发现坑不少，局限性也挺大
• 转一圈，发现
  • 如果只是简单的几个页面，根本不需要什么nextjs，也不需要react，
  • 或许直接一个脚本更简单灵活
• 有时间再写一个脚本版本