--- theme: smartblue --- >**本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！** # 学的快，忘得快，我要总结原因 ## 没有第一时间的沉淀经验编程是个经验活，搬砖能有多难么？但是不运用经验，那会相当累，这是肯定的，就算你曾经做过的功能，过一阵不用再捡起来，可能跟没做过差不多，而且往往还不如没做过，零星的记忆反而会让你麻痹大意，放弃了思考，从而陷入泥潭，所以经验的沉淀是相当重要的，对于我们这个工种。 ## 学的多，但是不成系统见到啥学啥，本身没什么错，这是一种积累能量的办法，只不过，这些零散的能量如果不能及时内化形成自身实力，那么就会原模原样的还回去，风过无痕，所以一定要构筑自己的知识体系，这样便可以将知识网住。 ## 学习漫无目的，没有方向学习没有目标，学一个东西，没坚持几天，又去学别的了，总是东一榔头西一棒槌，最后到头来一场空，样样学，样样瘟，问题出在哪？就出在你没有方向，你迷了，要“正”过来，所以需要时刻提醒自己，你的方向是啥，结硬寨打呆仗。 # 说说我的解决方案 ## 要有文章，但不能全是文章首先肯定要有文章，但要全是文章的话，那直接做个静态Blog得了，不能是静止的东西，要“活”的，而且文章太线性了，知识是存在脑子里的，是线性的？我觉得更应该是立体发散的知识网才对。 **成果展示：** ezgif.com-gif-maker (7).gif

## 要有知识体系，并且是自动生成的要有一个知识体系，一个基于众多经验文章生成的，具象化的网，文章目录将脑海里发散的知识点串成了线，而知识体系需要采用一种非线性的方式，来把知识网表达出来。 **成果展示：** ezgif.com-gif-maker (9).gif

em～～～这不是我心里的样子，我就是在antv上的多看了一眼，就选ta试试，颜值真不错。 ## 文章和知识体系进行关联众多文章就如同物质，生发出来了知识体系，二者互为表里，相互关联，通过不断更新调整这个知识体系，不断的将脑海里的知识投射出来并具像化，方便推敲，又利于记忆。 **成果展示：** ezgif.com-gif-maker (10).gif

## 可以在线编写代码块，并且可以预览在描述一段代码的功用时，光用文字就会显得很苍白，相比之下，直接可以运行并能预览效果就显得更直观，整一个可以在线代码预览工具，就变得很有必要。 **成果展示：** ezgif.com-gif-maker (8).gif

## 要有成果展示，要学以致用光学不出成果，肯定不行，要知行合一，真刀真枪的干，同时又能加强成就感，也是一个正向反馈，激励自己继续努力。 **成果展示：**

## 制定计划，并记录进步情况我们在修行的时候，需要制定目标，在实现这个目标的时候，可能还需要制定其他目标，这样时间跨度就会拉长，那么初心可能真就容易忘了，所以你需要知道自己从哪来，这样你才能知道你接下来要去哪，可能有些豪言壮语没做成，也许就是忘了你要干嘛了，所以我们需要把目标管理起来。 **效果图：**

还在开发中，构思怎么做好～～～ # 技术栈首先项目是用**Reac**t写的，组件库用的**Mui**。选**React**的原因：我喜欢React，JS浓度大，不用总翻api，现有的api组合就能搞大部分的业务，越写越灵活。选**Mui**的原因：首先我有调整样式的需求，`Mui`本身就推崇`css in js`，主题设置这块相当强，能够很轻松的把控方方面面的表现细节，这对于一个有视觉需求的项目，非常有用。 **接下来，概览一下，项目关键功能都是咋做的，具体实现细节后续我会单写文章深入说。** ## 文章呈现文章要采用**markdown**格式，所以我选择了`react-markdown`这个库，这个库超强的。 ### 使用方式大体如下 ```js import ReactMarkdown from 'react-markdown' import rehypeRaw from 'rehype-raw' import rehypeComponents from './plugins/rehype-components' import codeBlock from "./codeBlock"; ... ... ``` ### `react-markdown`用下来，我最钟意的几点就是： - **有插件系统**：对应了上面的`rehypePlugins`和`remarkPlugins`参数。 - rehype？是啥：有了ta，你在Markdown里就**能写html了** - remark？是啥：有了ta，你就能用**更多的标签**。 - 有了rehype，remark才能生效。 - **可以定制组件**：对应了**components**参数。 - 比如你在Markdown文档中写了一个 ```md # 测试文档 ``` - 然后在`components`配置一下`dddd`

- 效果：

所以说，靠`react-markdown`这两手儿，能玩出花儿～这块非常有趣，我会写一篇好好说说～～～ ## 生成知识体系 ### 知识体系的呈现使用的是Antv中一个示例，由于颜值高，而且还比较符合我的需求，就直接拿来用了，这里不展开说，先聊聊驱动显示的数据结构吧。

能够看出，存在`edges`和`nodes`两个数据，顾名思义，一个是边一个是节点。

但是这么多数据，如果考手敲，那可有的维护了，文章有变动，我就得同步修改知识体系，这简直无法接受，如果能够根据众多文章本身，分析出来知识体系，岂不是妙哉～ ### 根据现有文章，生成知识体系数据 - 在文章中，我加入自定义标签

参数分别是： - title：文章标题 - cover：文章封面 - subhead：副标题 - date：文章创建日期 - tags：分类，这个可是生成知识体系的关键 - 然后，在服务端，对文章内容进行解析，用正则表达式取得相关信息 ```js const parseDoc = async (path, id) => { var text = ""; let toReadFile = () => { return new Promise((res, req) => { fs.readFile(path, (err, data) => { text = data.toString(); res("异步"); }); }); }; await toReadFile(); // 先截取 describe 优化后面匹配性能 let describe = text.match(/([\d\D]*?)<\/describe>/)[1]; let title = describe.match(/title:\s*(.*?)\s*\n/)[1]; let subhead = describe.match(/subhead:\s*(.*?)\s*\n/)[1]; let cover = describe.match(/cover:\s*(\S*?)\s*\n/)[1]; let date = describe.match(/date:\s*(.*?)\n/)[1]; let tags0 = describe.match(/tags:\s*(\S*?)\s*\n/)?.[1]; let desJson = { title, subhead, cover, date, tags: [tags0], }; return desJson; }; ``` 然后就会根据这些信息，去生成知识体系，这块设计了不少环节，非常值得拿出来好好讲，这里先不展开说。 ## 在线代码块预览在线代码开发，比如掘金的“码上掘金”这样的，一直以来，都是我觉得非常秀的功能，我非常的好奇怎么实现，于是我开始在掘金研习，最后我看了一个大佬的文章，深受启发。

（*心里话：在掘金上技术好的大佬很多，但既有想法又有实力才实属珍贵，这样的人是会发光的，掘金确实是一个好地方，感激～）* 跟着大佬的思路，做出了我的版本： - **一个可以后台动态配置代码块的。**

配置数据，如下

```jsx const describe = { title: "React Router v6 demo", cover: "r6.png", subhead: "辅助强化 React-router v6 的功能", date: "2022/4/2", tags: "react" } const getReactCode = () => { let a = `const { useRoutes, useNavigate, MemoryRouter: Rouer } = ReactRouterDOM const { Button } = antd const LoginPage = () => { const navigateTo = useNavigate() return (

React Router v6 Demo

) } const CenterPage = () => { const navigateTo = useNavigate() return (

includes useRoutes and useNavigate api

) } const App = () => { const Routes = () => { return useRoutes([ { path: '/', element: }, { path: '/center', element: } ]) } return } const Index = () => { return ( ) } ReactDOM.render(

Hello Moderate, let's play!

, document.getElementById('root') )`; return a; }; const config = { describe, template: { js: getReactCode(), css: `.title{ color: red; font-weight:bold; font-size:50px; }`, html: `

`, }, resources: { css: [ { name: "antd-css", url: "https://cdn.bootcdn.net/ajax/libs/antd/4.19.4/antd.css", }, ], js: [ { name: "React", url: "https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js", }, { name: "react-dom", url: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js", }, { name: "history", url: "https://cdnjs.cloudflare.com/ajax/libs/history/5.3.0/history.production.min.js", }, { name: "react-router", url: "https://cdnjs.cloudflare.com/ajax/libs/react-router/6.0.1/react-router.production.min.js", }, { name: "react-router-dom", url: "https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.0.1/react-router-dom.production.min.js", }, { name: "antd", url: "https://cdnjs.cloudflare.com/ajax/libs/antd/4.23.5/antd.min.js", }, ], }, }; module.exports = config ```

- **一个可以前端展示所有代码块的。**

- **一个可以良好显示，兼容手机和pc两端的。**

而且更有趣的是，我可以在md文档插入代码块，这样就可以在阅读文章的同时，还能直观的预览代码的效果，这样对代码的意图会有更直观的理解。而且自己实现的代码编辑工具，虽然在技术力不足以跟专业的比较，但是在满足基本的功能之外，可以很大程度上根据自己的想法去做演化，这块是可以玩出花儿的～，这块非常值得细说，这里就先不展开讲。 ## 运维devops和自动化ci/cd ### 有必要学学运维了首先这个项目是需要部署到服务器上的，而且还是前后端分离的项目，为此就需要有一些运维的知识，笔者不才，略懂皮毛，仅仅是为了实现我的几个需求： - 部署我的服务端项目，用**Nodejs**写的，框架是koa，数据是mongodb。 - 部署我的前端项目 - 前后端分离，解决跨域问题 - https - 域名 - 服务器 - .... **运维真的好多事，经过一系列的折腾，我整理出了一套非常适合新手如我的运维解决方案：** - **docker启动服务程序**，并配置`docker-compose`，串联起项目及数据库等相关服务的部署流程。（不会？我也不咋会，面向百度，主要能实现功能就好了，先跑起来再说） -

配置docker，简单理解根据这个文件就能把项目构建成一个镜像。

FROM node:14 WORKDIR /app COPY . /app # 构建镜像时，一般用于做一些系统配置，安装必备的软件。可以多个run RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone #安装 RUN npm set registry https://registry.npm.taobao.org RUN npm install RUN npm install pm2 -g # CMD 启动容器只能有一个 CMD (阻塞控制台) CMD echo $SERVER_NAME && echo $AUTHOR_NAME && npm run prd && pm2 log # 环境变量 ENV SERVER_NAME="moderate-server" ENV AUTHOR_NAME="qanglee"

配置docker-compose，可以简单理解为，一个个镜像代表了对应的服务程序，docker-compose把这些镜像加载过程串联了起来。

version: '3' services: moderate-server: build: context: . dockerfile: dockerfile image: moderate-server container_name: moderate-server volumes: - '/home/play/projects/myUniverse:/myUniverse' # 数据持久化 - '/home/play/projects/myUniverse/docs:/docs' # 数据持久化 ports: - 3061:3060 moderate-redis: image: redis container_name: moderate-redis ports: - 6378:6379 environment: - TZ=Asia/Shanghai moderate-mongo: image: mongo # 引用官网 mongo 镜像 container_name: moderate-mongo restart: always volumes: - '.docker-volumes/mongo/data:/data/db' # 数据持久化 environment: - MONGO_INITDB_ROOT_USERNAME=。。。 - MONGO_INITDB_ROOT_PASSWORD=。。。 - TZ=Asia/Shanghai # 设置时区 ports: - '27016:27017' # 宿主机可以用 127.0.0.1:27016 即可连接容器中的数据库

- 执行`docker-compose up -d --build`，这就启动了整个部署过程了。 - **宝塔**，你懂的，贼好用

可以很方便整很多事儿，比如： - **部署网站** - **https证书** - 通过`nginx`反向代理解决**跨域问题** - **域名绑定** - ... ### github actions实现自动化部署，这功能可是相当重要首先我们构建的知识体系，如果无法实现全自动的去演化，而是通过手动的去增增减减，修修补补，那么积极性很容易在如此枯燥的过程中消磨掉，所以： **一个可以把主要精力关注在沉淀经验知识上，省去枯燥费神的维护过程的方法，就变得非常关键。** 那么github actions就可以轻松办到，仅仅通过配置一个文件，就能实现仅仅push文件内容到github，就能全自动的服务构建，非常的方便。

配置如下，有兴趣可以看看。

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions # github actions 中文文档 https://docs.github.com/cn/actions/getting-started-with-github-actions name: deploy for main on: push: branches: - 'main' # 只针对 dev 分支 paths: - '.github/workflows/*' - 'src/**' - 'Dockerfile' - 'docker-compose.yml' - 'bin/*' - 'docs/*' - 'config/*' - 'records/*' jobs: deploy-dev: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: set ssh key # 临时设置 ssh key run: | mkdir -p ~/.ssh/ echo "${{secrets.MODERATE_SSH_KEY_PC}}" > ~/.ssh/id_rsa # secret 在这里配置 https://github.com/imooc-lego/biz-editor-server/settings/secrets chmod 600 ~/.ssh/id_rsa ssh-keyscan "你的服务ip" >> ~/.ssh/known_hosts - name: deploy # 部署 run: | ssh root@你的服务ip " cd /projects/moderate-server; git checkout dev git pull; yarn; docker-compose up -d --build " - name: delete ssh key # 删除 ssh key run: rm -rf ~/.ssh/id_rsa

**这样提交完之后，就会触发github actions**

搞运维遇到的坑可老多了，这一块实际上还有很多值得探索和分享的经验，以后可以单读写一下排坑记录，在此就先不展开说了～～～ ## 成果展示目前成果这块，我就把我之前在掘金游戏投稿大赛获奖的项目放上了，我排倒第一，实至名归。

效果图：

## 制定作战计划，记录成长点滴这个是我当下在思考的功能模块，哈哈哈，苦于自己的想法太多，很多点子没想好怎么组织起来，但大体的思路，就是记录自己的成长轨迹，因为我觉得： **不念过去，不见未来** 不记住自己的过往，不反思，不总结，不接受，那么你又怎么看的见自己的未来，找到前进的方向。所以，基于我的感悟，我觉得人应该制定目标，并把目标裱起来，时刻的提醒自己，我在做什么，我做完了什么，我要做什么。所以，我画出了这个原型图。

上方的点图跟github类似，记录自己进步的情况，很好的感知自己的学习周期。 **任务分为：** - **主题任务**：当下的奋斗目标，可以适机切换，一点一点前进。 - **持续任务**：天天都要做的，不能间断的，比如修身齐家，学英语啥的。 - **娱乐任务**：非功利的，兴趣使然的，不求回报的。 # 结尾 [工具在线预览地址](https://moderate.run) 至此，**用真心**打造的**知识沉淀工具**，就差不多介绍到这里了，之后我会挑出几个我觉得有价值，能帮到别人的功能点进行深入分享，敬请期待。有问题可以随时咨询我，或者留言，我有个群叫**闲D岛**，群号是551406017，结识一帮志同道合的伙伴，交流技术，欢迎水群，共同进步。 # 题外话虽然总是保持上进，但却时常患得患失，感觉自己会的多了，就越发的觉得自己弱爆了，虽然这很合理，但这不应是停止进步的理由，停下来可以有很多种理由，但不应该是因为见识到了大，就因自己的小而停下来，如果一个人发出的光，让你睁不开眼睛，无法正视前方的路，那就别看，正经儿的光是会让你振奋，会给予你能量，而且也不妨再天真一点，这样也许你就可以做你自己了，而只有自己能让自己放光，至少我是这么觉得的。