跳到主要内容

Drop by drop.

· 阅读需 10 分钟
Xingzhe
Xingzhe
OIteacher @ OIHack.cn

不定期更新** OIHack.cn **的成长日志！ 最近更新日期： 2024-12-10

Go，Drop by drop！​

22. 2024-12-17， [V0000.0001.0110]​

  • 重构学习笔记流程，并且将学习笔记和总结功能合并，开发一个AIWriteEditor
  • 根据AIWriteEditor，将讲义学习笔记重构
  • 重构 新的 我的学习笔记

21. 2024-12-10，学习笔记功能优化 [V0000.0001.0101]​

  • 增加 “我的学习笔记”功能
  • 优化导航栏用户下拉菜单 UI 样式效果，改为 css 缓动显示隐藏

20. 2024-12-8，学习笔记功能正式上线 [V0000.0001.0100]​

  • 优化学习笔记流程，增加审核版本字段
  • 正式部署上线

19. 2024-12-7，增加笔记审核 [V0000.0001.0011]​

  • 重新调整笔记组件，增加客户端缓存
  • 增加笔记审核和批阅功能（初步应用 AI）

17. 2024-11-27，上线第一个试运行版本 [V0000.0001.0010]​

  • 还有一些小 bug 没有解决，但不影响写笔记和总结
  • 将 slogan 改了一下： OI，So Cool，Hack it！

16. 2024-11-23~26，增加学习宝典 学习向导 [V0000.0001.0001]​

  • 23 日本打算上线第一个试运行版本（先就学生交作业），但是忽然又有了一个灵感：对于知识点的学习也增加一个 做笔记的功能，于是又抽空搞了 3 天
  • oihack.cn's logo 设计了 logo，一个参考《三体》里的水滴设计的 绿色的水滴。（主要借助了智谱清言设计原画、佐唐抠图去掉背景色，photoshop 变形、贴字）

15. 2024-11-15~22，增加练习向导 [V0000.0001.0000]​

  • 本来打算上线第一个试运行版本的（临时先给学生提交“学习总结”），忽然有了一个全新的灵感，拥抱时代的灵感 idea，于是暂停发布。
  • 将前几天的“问题学习总结”功能全面推翻，重新设计，改为 “练习向导”的模式组件，直接浮动在问题正文页面
  • 因为网站发布需要提前备案，于是绞尽脑汁想了一些网站域名，最终深夜灵感乍现——hack oi。可惜 hackoi.com 已经被国外一家解决方案供应商使用，于是只能退而求其次，注册了 oihack.cn/com。
  • 口号一同定下：oi is so cool，hack it！

14. 2024-11-14，增加 testcases 的显示 [V0000.0000.1010]​

  • testcases 组件
  • 实现了数据、文件和生成代码三种方式，功能复杂，但是 UI 还比较简洁，一劳永逸

13. 2024-11-13，增加二叉树的遍历 press 的编写​

  • 增加二叉树的遍历 press 的编写
  • 增加 docs 页面生成 pdf 并下载

12. 2024-11-12 开发简单的 admin board [V0000.0000.1001]​

  • 实现简单的 admin 看板，可以审核用户注册和总结发布

11. 2024-11-11，问题练习总结列逻辑完善 [V0000.0000.1000]​

  • 完善问题练习总结列表逻辑
  • 增加问题练习总结列表 UI
  • 了解了 react 组件内容的 children 显示用法

10. 2024-11-10，增加登录菜单​

  • 完成总结页面用 markdown 形式渲染显示
  • 调整实现题目页面的相关总结的 UI
  • 调整右上角登录按钮，显示 “我的”下拉菜单

9. 2024-11-9 增加总结列表​

  • 增加总结列表
  • 将题目页面和总结页面关联起来
  • 调整写总结界面 UI 显示
  • 研究了 markdown 内容在动态页面的显示技术

8. 2024-11-8，增加总结页面 [V0000.0000.0111]​

  • 增加登录、注册相关基本用户管理系统
  • 增加总结页面，增加总结详情页面。
  • 增加总结写入、删除功能。
  • 基本逻辑实现。

7. 2024-11-7，增加题目页面 [V0000.0000.0110]​

  • 设计后题库内容
  • 增加题目书写模板功能，提高写题目的效率
  • 将 mdx 的用法研究清楚，并应用到题目书写模板中

6. 2024-11-6，体验优化 [V0000.0000.0110]​

  • 给题目页面增加样例输入数据点击复制按钮，如果是传统 jquery 方式开发，分分钟搞定，但是在 docusaurus 下，react+mdx 环境，我查了 n 个 LLM 模型，最后才用折衷的方式暂时解决了。
  • markdown 非常适合写文字，但是也还是有一些先天不足，最常见的就打开新窗口的 a 链接，每次都是想 N 多方法，最后还是只能用 解决。
  • 写了一个 随机一言组件（分为三步，功能实现，优化性能）。
  • 越来越体验到 docusaurus 的简洁和强大，！

5. 2024-11-5，开始写内容 [V0000.0000.0101]​

  • 写了第一篇 blog 缘起
  • 虽然 docusaurus 文档比较丰富完善，facebook 大厂风格，但是其间还是踩了无数的坑，这也是兴奋点所在（每一个练习信奥赛的朋友必备品质）。
  • 有时间了分享下 docusaurus 的配置、扩展经验

4. 2024-11-4，基本将 docusaurus 研究清楚，将网站框架初步搭起来 [V0000.0000.0100]​

  • 网站名称及目标确定——信奥赛学习资源网
  • 网站主要分为两大块：学习宝典和经典题库。
  • 细化起点——从哪里开始，以及信奥赛学习内容怎么一步步添加
  • docs 插件是 docusaurus 的自带插件，非常好用，功能强大，我配置了学习宝典和经典题库两个 docs 实例，就出事了——由于我用的是默认的 theme-classic 默认主题插件（毕竟内容才是重点，重意不重形^_^），但是问题出现了。
  • 花了 5 分钟将 blogs 和 docs 的展示数学公式的 remarkMath 和 rehypeKatex 插件配置好了，但是用了多个 docs 实例后，有一个实例总是不能显示数学公式，于是就花了近 4 个小时，踩了无数个坑，应用 kimi、cursor、智谱清言、Google、百度等终于解决 blog 和多个 docs 实例的数学公式显示问题解决了！如果没有 kimi、cursor 等工具，不知道还有多少个小时。

3. 2024-11-3，掌握 docusaurus docs 插件和 blog 插件 的参数配置 [V0000.0000.0011]​

  • 信奥赛和算法相关题目和文档数学公式的编写和显示是必不可少，所以必须配置 docusaurus 支持数学公式。于是第一次踩坑开始：通过官方文档花了 5 分钟将这个问题解决——配置：
ES module docusaurus.config.js
ES module docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
};
config css for katex
export default {
  //...
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

2. 2024-11-2，选用 docusaurus 架设 [V0000.0000.0010]​

  • 于是明确目标，分解需求，分析用什么技术建设。经过七七四九小时的技术选型，试验、折腾了七八种建站系统。
  • 最终决定采用 docusaurus——一个 facebook 开源的超级优秀的写文档的软件（我之前灭有用过），用它来架设本站 V1.0 版。docusaurus = documentation + saurus ，网友爱称大恐龙。理由：
    • 系出名门——facebook，用户众多，开源。
    • 脚手架齐全简洁——好上手
    • 支持自由插件定义和 MDX——后期可无限折腾，满足程序员的想象力，让程序员拥有掌控感。
    • 满足行者学习新东西的兴奋感。

1. 2024-10-31，觉得要重新做一个网站 [V0000.0000.0001]​

  • 缘起：每个人都有表达的欲望！
  • 愿景：积累沉淀信奥赛教学与学习资源，分享心得，让更多人 体会数学之美，惊叹算法之妙！。