React + Markdown 做了一个新生手册 https://zone.geekpie.org/

[eastpiger]

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

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

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

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

[mcfloundinho]

赞一个👍（别人家的新生手册系列）

[roychan]

赞一个👍（别人家的新生手册系列）

[Parabolazz]

赞！

[ChiangDi]

你们学校好厉害

[sphawkcn]

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

[quake0day]

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

[SuperMild]

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

[dantegg]

赞👍

[Vanilla]

只能说一个字：赞

[iiduce]

做的棒，真有心。

[crazykuma]

做得真棒

[eastpiger]

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

[eastpiger]

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

[j3n5en]

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

[eastpiger]

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

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

[wph95]

@eastpiger 线上一定要关闭 Debug 模式

[strwei]

666

[carlace]

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

[eastpiger]

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

[eastpiger]

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