对比学习笔记

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

github 部署说明

修改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，
- 或许直接一个脚本更简单灵活
有时间再写一个脚本版本

fishjar/comparison-note

对比学习笔记

前记

项目特性

技术栈

目录说明

笔记编写说明

开发说明

github 部署说明

截图

一些坑

后记