本文为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！

学的快，忘得快，我要总结原因

没有榜首时间的沉积经历

编程是个经历活，搬砖能有多难么？但是不运用经历，那会适当累，这是必定的，就算你从前做过的功用，过一阵不必再捡起来，可能跟没做过差不多，并且往往还不如没做过，零散的记忆反而会让你麻痹大意，放弃了考虑，然后堕入泥潭，所以经历的沉积是适当重要的，关于咱们这个工种。

学的多，但是不成系统

见到啥学啥，自身没什么错，这是一种积累能量的办法，只不过，这些零散的能量假如不能及时内化构成自身实力，那么就会原模原样的还回去，风过无痕，所以一定要构筑自己的常识系统，这样便能够将常识网住。

学习漫无目的，没有方向

学习没有方针，学一个东西，没坚持几天，又去学其他了，总是东一榔头西一棒槌，最后到头来一场空，样样学，样样瘟，问题出在哪？就出在你没有方向，你迷了，要“正”过来，所以需求时间提示自己，你的方向是啥，结硬寨打呆仗。

说说我的处理方案

要有文章，但不能全是文章

首要必定要有文章，但要全是文章的话，那直接做个静态Blog得了，不能是静止的东西，要“活”的，并且文章太线性了，常识是存在脑子里的，是线性的？我觉得更应该是立体发散的常识网才对。

作用展现：

要有常识系统，并且是主动生成的

要有一个常识系统，一个依据众多经历文章生成的，具象化的网，文章目录将脑海里发散的常识点串成了线，而常识系统需求采用一种非线性的方式，来把常识网表达出来。

作用展现：

em～～～这不是我心里的姿态，我便是在antv上的多看了一眼，就选ta试试，颜值真不错。

文章和常识系统进行相关

众多文章就如同物质，生宣布来了常识系统，二者互为表里，彼此相关，经过不断更新调整这个常识系统，不断的将脑海里的常识投射出来并具像化，便利推敲，又利于记忆。

作用展现：

能够在线编写代码块，并且能够预览

在描绘一段代码的功用时，光用文字就会显得很苍白，相比之下，直接能够运行并能预览作用就显得更直观，整一个能够在线代码预览东西，就变得很有必要。

作用展现：

要有作用展现，要学以致用

光学不出作用，必定不可，要知行合一，真刀真枪的干，一起又能加强成就感，也是一个正向反馈，鼓励自己继续尽力。

作用展现：

拟定方案，并记载行进情况

咱们在修行的时分，需求拟定方针，在完成这个方针的时分，可能还需求拟定其他方针，这样时间跨度就会拉长，那么初心可能真就简略忘了，所以你需求知道自己从哪来，这样你才能知道你接下来要去哪，可能有些豪言壮语没做成，或许便是忘了你要干嘛了，所以咱们需求把方针管理起来。

作用图：

还在开发中，构思怎样做好～～～

技能栈

首要项目是用React写的，组件库用的Mui。

选React的原因：我喜欢React，JS浓度大，不必总翻api，现有的api组合就能搞大部分的事务，越写越灵敏。

选Mui的原因：首要我有调整款式的需求，Mui自身就推重css in js，主题设置这块适当强，能够很轻松的把控方方面面的体现细节，这关于一个有视觉需求的项目，十分有用。

接下来，概览一下，项目要害功用都是咋做的，具体完成细节后续我会单写文章深入说。

文章呈现

文章要采用markdown格局，所以我选择了react-markdown这个库，这个库超强的。

使用方式

大体如下

import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeComponents from './plugins/rehype-components'
import codeBlock from "./codeBlock";
...
<ReactMarkdown
    children={md} // md便是你传入的md文档内容
    rehypePlugins={[rehypeRaw]}
    remarkPlugins={[gfm]}
    components={{ ...codeBlock(rest) }}
/>
...

react-markdown用下来，我最钟意的几点便是：

• 有插件系统：对应了上面的rehypePlugins和remarkPlugins参数。

  • rehype？是啥：有了ta，你在Markdown里就能写html了
  • remark？是啥：有了ta，你就能用更多的标签。
  • 有了rehype，remark才能收效。

• 能够定制组件：对应了components参数。

  • 比方你在Markdown文档中写了一个

    # 测验文档
    <dddd></dddd>
    

  • 然后在components装备一下dddd

    

  • 作用：

    

所以说，靠react-markdown这两手儿，能玩出花儿～

这块十分有趣，我会写一篇好好说说～～～

生成常识系统

常识系统的呈现

使用的是Antv中一个示例，因为颜值高，并且还比较符合我的需求，就直接拿来用了，这儿不展开说，先聊聊驱动显现的数据结构吧。

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

但是这么多数据，假如考手敲，那可有的保护了，文章有变化，我就得同步修正常识系统，这简直无法接受，假如能够依据众多文章自身，分析出来常识系统，岂不是妙哉～

依据现有文章，生成常识系统数据

• 在文章中，我参加自定义标签

  

  参数分别是：

  • title：文章标题
  • cover：文章封面
  • subhead：副标题
  • date：文章创立日期
  • tags：分类，这个但是生成常识系统的要害

• 然后，在服务端，对文章内容进行解析，用正则表达式取得相关信息

  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(/<describe>([dD]*?)</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;
  };
  

然后就会依据这些信息，去生成常识系统，这块规划了不少环节，十分值得拿出来好好讲，这儿先不展开说。

在线代码块预览

在线代码开发，比方的“码上”这样的，一直以来，都是我觉得十分秀的功用，我十分的猎奇怎样完成，于是我开始在研习，最后我看了一个大佬的文章，深受启示。

（心里话：在上技能好的大佬许多，但既有主意又有实力才实属宝贵，这样的人是会发光的，确实是一个好地方，感谢～）

跟着大佬的思路，做出了我的版别：

• 一个能够后台动态装备代码块的。

  装备数据，如下

  
  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 (
        <div>
          <div >React Router v6 Demo</div>
          <div>
            <Button
              type="primary"  
              onClick={() => {
                navigateTo('center')
              }}
            >
              跳回
            </Button>
          </div>
        </div>
      )
    }
    const CenterPage = () => {
      const navigateTo = useNavigate()
      return (
        <div>
          <div>includes useRoutes and useNavigate api</div>
          <div>
            <Button
              type="primary"  
              onClick={() => {
                navigateTo('/')
              }}
            >
              跳转
            </Button>
          </div>
        </div>
      )
    }
    const App = () => {
      const Routes = () => {
        return useRoutes([
          {
            path: '/',
            element: <LoginPage />
          },
          {
            path: '/center',
            element: <CenterPage />
          }
        ])
      }
      return <Routes></Routes>
    }
    const Index = () => {
      return (
        <Rouer>
          <App />
        </Rouer>
      )
    }
    ReactDOM.render(
      <h1>
        <div className={'title'} >Hello Moderate, let's play!</div>
        <Index />
      </h1>,
      document.getElementById('root')
    )`;
    return a;
  };
  const config = {
    describe,
    template: {
      js: getReactCode(),
      css: `.title{
          color: red;
          font-weight:bold;
          font-size:50px;
      }`,
      html: `<div id="root"></div>`,
    },
    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类似，记载自己行进的情况，很好的感知自己的学习周期。

使命分为：

• 主题使命：当下的奋斗方针，能够适机切换，一点一点行进。
• 继续使命：天天都要做的，不能间断的，比方修身齐家，学英语啥的。
• 娱乐使命：非名利的，兴趣使然的，不求回报的。

结尾

东西在线预览地址

至此，用诚心打造的常识沉积东西，就差不多介绍到这儿了，之后我会挑出几个我觉得有价值，能帮到他人的功用点进行深入共享，敬请期待。

有问题能够随时咨询我，或许留言，我有个群叫闲D岛，群号是551406017，结识一帮志同道合的伙伴，交流技能，欢迎水群，共同行进。

题外话

虽然总是坚持进步，但却时常患得患失，感觉自己会的多了，就越发的觉得自己弱爆了，虽然这很合理，但这不应是中止行进的理由，停下来能够有许多种理由，但不应该是因为见识到了大，就因自己的小而停下来，假如一个人宣布的光，让你睁不开眼睛，无法正视前方的路，那就别看，正派儿的光是会让你振作，会给予你能量，并且也不妨再单纯一点，这样或许你就能够做你自己了，而只要自己能让自己放光，至少我是这么觉得的。