This is a simple math knowledge wiki built with Next.js.

春季学期开学了😢，blog一隔就是9天...

近期的修改主要集中在前端代码组织优化，以及网站ui的优化和组件大小适应。

在 Component 的管理上，可以加上 index.ts 来简化函数引用，就不用再指定到具体的目录位置。

然后在 MathJax 渲染过程中有遇到 Hydration Warning 的问题，我也不清楚背后的具体问题，但是可以通过在tag后加上 suppressHydrationWarning 的方式来禁止报错。

另外，网站新增了Playground和Developer两个页面。前者是给合作者使用的，在Github仓库中有合并保护机制；后者则起到Manual和调试的双重作用。

一个比较大的改动是网页的ui部分，现在的css全部替换为了tailwindcss，我一开始以为这是对css可定制化的一种亵渎... 但是，真香。tailwindcss提供了一个很干净的初始状态，在这一状态下所有的tag基本都会失效，变为plane text，开发者就可以在此基础上去赋予表现形式，而且documentation写得很清楚，对于初学者来说是一个很舒适且有趣的体验。通过 hover: active: visited: 关键词也可以实现很不错的交互，还有 transition 等来实现动画。

对于屏幕大小适应问题，可以采用 md: lg: 等关键词来根据屏幕大小决定渲染方式。现在整体的网页渲染在手机端是没有大问题了，除了一些字号问题。

由于有许多重复的 className，所以前端代码也对这些模块进行了封装，后续会更新在Developer页面中～

最后附上Tailwind CSS的网址：https://tailwindcss.com/docs.

增加了代码块组件，采用的是 react-syntax-highlighter 库，从npm下载数据上来看比 react-code-blocks 更popular一些，缺点在于需要自己写copy按钮。话虽这么说，但其实 react-code-blocks 自带的按钮在单行的时候会出格，也需要人为处理。

下面总结一下目前开发过程的常用代码，方便之后做简化工作和开发指南，目前当作日志写。

BTW，开发指南其实能起到一个feature分离调试的作用，方便后期分branch开发。

1. Inline code & Separate code

首先是关于行内代码，类似于 react-syntax-highlighter 这样，为了能和文字保持垂直对齐，建议将 verticalAlign 设置为15%，并且在代码块两端各加一个空格以保证美观，下面是详细配置：

1style={{
2  backgroundColor: '#f5f2f0',
3  padding: '0.2em 0.4em',
4  borderRadius: '4px',
5  fontSize: '0.9em',
6  verticalAlign: '15%',
7}}

关于独立代码块，目前提供了 CodeBlock 组件，只需配置code和language参数即可:

1import CodeBlockWithCopy from 'components/CodeBlock';
2
3const code = 'Sample Code';
4
5<CodeBlockWithCopy code={code} language='javascript' />

2. 获取资源目录

1tree -I node_modules -I .git -I .next

3. 关闭端口(后端)

1netstat -nlp | grep 3000 # get pid
2kill -9 <pid>

4. 链接MySql(后端)

1mysql -u root

5. mysql.socket的路径导向

由于存在系统差异，需要用os库来判别系统类型：

1const socketPath = os.platform() === 'darwin'
2// darwin 表示 macOS, linux 表示 Linux（包括 Ubuntu）
3? "/tmp/mysql.sock"  // macOS 默认路径
4: "/var/run/mysqld/mysqld.sock";  // Ubuntu 默认路径

6. 网页启动（后端）

1npm run build
2# npm start
3nohup npm start # 关闭terminal后不停止

此站搭建了数日，这是第一篇blog，用以记录些许心得。

此站的服务器用的是阿里云ECS，购买它已是一年前的事情。当时也是一时兴起，想着有自己的网站是很酷的事情，没有考虑什么成本便下手了。后面又经历了各种审核和等待，但时值大一开学之际，实在是身心俱疲，就渐渐遗忘了这一想法。

本站最早采用的是阿里巴巴官方的Linux系统，并采用“宝塔面板+WordPress”的构建形式，这一架构后续被我认为是受限于人，宝塔面板是还不错，但WordPress实在是让我爱不起来，光配置CSS还需要插件这一件事就足以让人头大了，后期我还想能把网页源码移植到github上，但都需要插件，我又不是很熟悉wordpress的后端架构，于是只能想着换一个系统镜像。阿里巴巴不错，换系统镜像是不要钱的。

一直听说centos挺适合做后端服务器的，于是也试了试，但在npm和nodejs的版本问题上总是遇到问题，版本低了网页不能编译，版本高了又显示系统的glibc库版本过低，折腾了许久也没解决，遂投靠ubuntu...

顺带一提，前端架构我用的是React+Next.js的组合，React官方也是推荐使用framework的。之所以选择React还是因为其爸爸是Facebook，有较为坚实的支撑，而且效率也挺高的，和Vue.js相比也应该会更有目的性一些，当然React本身也是主流语言。这一架构其实解决了很多问题，主要因为几乎所有代码都是自己写的，css自由，github也可以同步。同步过程是先在自己的电脑上做好编辑，然后push到远程repo，再到服务器端pull下来执行即可。我还写了一个两行的.sh文件用于快速的编译执行，这一整套同步过程的时间可以控制2min以内。

本站目前的ambition真没多大，以此为起点的一年内可能都会作为个人讯息共享和管理个人知识的平台，后期我可能会考虑部署一些小项目or小型AI工具（好占存储...），空闲的时候加加feature，修修bug。也希望能够带上小伙伴一起开发，看能不能作为一个学习实践平台，毕竟本身就涉及到“操作系统+网络+编程+算法+数据结构”多个方面，还算是一片不错的试验场 doge。

说起数学公式，目前采用的是MathJax，由于古早的react-mathjax库年久失修，故采用“better-react-mathjax”，相当nice。之后会考虑在这一问题上做一点语言简化，最好能有一个线上的类tex编辑器，能够可视化整个书写过程。开发中要防止XSS之类的攻击，避免代码注入，我有考虑在后端部署一个C++文件，但还需要考虑同步渲染的问题。

但现在网站并不稳定，由于网页并非静态，也增加了这一方面的难度，还需要配置好pm2和nginx才能避免 502 Bad Gateway。

最后关于整个项目的结构，今天已经实现了与mysql的api后端通信，采用的是单表模式，有全局编号，链接效率会更高。整个知识部分分为三层：topic，knowledge和sub，其中sub是每一篇文章的小节标题，用来做边栏目录。后期希望能和文章书写过程结合起来，那就美滋滋了。

今天就写到这吧～ @w@ 最后放上我的邮箱：gxr_111@sjtu.edu.cn，歪比巴卜