React + Markdown 做了一个新生手册(含Nodejs后端支持) https://zone.geekpie.org/

发布于 1周前 作者 phonegap100 来自 nodejs/Nestjs

React + Markdown 做了一个新生手册(含Nodejs后端支持) https://zone.geekpie.org/

设计上很欣赏浙大的求是潮的设计,所以第一眼看上去会觉得挺像。

基本结构就是用 React 做的整体框架,所有的内容文本用 markdown-it-loader 加载进来之后,用一个自己写的 parseMarkdown 来解析成逻辑树结构(因为直接解析的结果实际上是全部一层并列的),动效风格用的 Ant Motion 感觉还是没学到最重点的地方呢喵。

第一次试手的作品,还有很多地方不知道怎么做,比如像直接连接多说,结果搞不定怎么加载进来,最后实际上偷偷塞进去了一个 iframe 充数(。

代码在同性交友网: https://github.com/ShanghaitechGeekPie/fresh


35 回复

赞一个👍(别人家的新生手册系列)


赞一个👍(别人家的新生手册系列)

你们学校好厉害

这种大幅画面做整页背景的,是不是比较影响加载速度?

我以前也给我教授搞过这种的网站。这种网站的好处是不会写代码的人也可以更新网站,还不用做后台。
但是不知道你有没有发现,你这么做的话最大的问题就是整个网页内容没法被搜索引擎正确索引。而作为一个新生手册网站,这个缺陷是致命的。。。

页面设计很好看,也符合“新生”这个主题,有青春的校园气息。

只能说一个字:赞

做的棒,真有心。

确实。不过似乎 nodeJS 的 serverside 渲染可以做。。表示还没试过这个

说不影响那肯定是不可能的。不过开了缓存,然后图片是 progressive 模式相对来说影响会好一些。其实这些图片也就一二百 k ,考虑一下感觉还好。。顺带我觉得可以试一下在第一屏结束后预加载接下来的图片,这样会更好一些呢

为何不关闭 Django 的 debug 模式。。。

QAQ 这个不是 Django 啊……你不会摸到我们主站去了吧。。

Debug 模式什么的倒是真·无所谓的说。。反正都在 docker 部署下去的,也攻击不到什么有用的东西吧(我感觉这是个 flag 了)

线上一定要关闭 Debug 模式

同高三毕业生,想为即将入学的大学也做一份新生手册,请问可以参考你的网站吗

老实说这还是 hjs 在的时候跟他学的 23333

当然可以啦,其实我也是参考了求是潮的设计风格的来着呢

上海科技大学的校长是江绵恒啊, 牛 !

什么?你才上高三就设计这么牛逼的网站?

PPT 做得不错

哪有高三给自己做新生手册的。。。我都快大三了

赞!不过大学还是好好学算法,做 ACM 。

这需要用 React 做么……

Program

吕文涛

不错哦,页面清晰,用 markdown 给好评

求解安装方式方法教程

主要的安装脚本是直接写在 dockfile 里面的,如果想用可以直接进这个文件, RUN 开头的直接放到命令行执行

非常棒的项目!使用React结合Markdown来制作新生手册是一个既高效又易于维护的选择,Node.js后端支持则提供了强大的数据处理和API服务能力。以下是一些建议和优化思路,希望能帮助你进一步提升这个项目:

前端(React + Markdown)

  1. Markdown渲染: 使用react-markdown库来渲染Markdown内容。

    import ReactMarkdown from 'react-markdown';
    
    const markdownText = "# 欢迎来到新生手册\n\n这里是内容...";
    
    function App() {
      return (
        <div>
          <ReactMarkdown>{markdownText}</ReactMarkdown>
        </div>
      );
    }
    
  2. 样式定制: 通过CSS或CSS-in-JS库(如styled-components)来定制Markdown渲染后的样式。

后端(Node.js)

  1. Express框架: 使用Express.js来快速搭建API服务器。

    const express = require('express');
    const app = express();
    const port = 3000;
    
    app.get('/api/handbook', (req, res) => {
      res.json({ message: '获取新生手册内容' });
    });
    
    app.listen(port, () => {
      console.log(`服务器运行在 http://localhost:${port}`);
    });
    
  2. 数据库集成(可选): 如果需要存储用户数据或手册的更新历史,可以考虑集成MongoDB、MySQL等数据库。

希望这些建议能对你的项目有所帮助!继续加油,期待看到你的更多进展!

回到顶部