React + Markdown 做了一个新生手册 https://zone.geekpie.org/
eastpiger · 2016 年 7 月 24 日 · 9054 次点击这是一个创建于 3463 天前的主题，其中的信息可能已经有所发展或是发生改变。
设计上很欣赏浙大的求是潮的设计，所以第一眼看上去会觉得挺像。
基本结构就是用 React 做的整体框架，所有的内容文本用 markdown-it-loader 加载进来之后，用一个自己写的 parseMarkdown 来解析成逻辑树结构（因为直接解析的结果实际上是全部一层并列的），动效风格用的 Ant Motion 感觉还是没学到最重点的地方呢喵。
第一次试手的作品，还有很多地方不知道怎么做，比如像直接连接多说，结果搞不定怎么加载进来，最后实际上偷偷塞进去了一个 iframe 充数（。
代码在同性交友网： https://github.com/ShanghaitechGeekPie/fresh
 |
1
mcfloundinho 2016 年 7 月 24 日
赞一个👍（别人家的新生手册系列）
|
 |
2
roychan 2016 年 7 月 24 日
赞一个👍（别人家的新生手册系列）
|
 |
3
Parabolazz 2016 年 7 月 24 日
赞！
|
 |
4
ChiangDi 2016 年 7 月 24 日
你们学校好厉害
|
 |
5
sphawkcn 2016 年 7 月 24 日
这种大幅画面做整页背景的，是不是比较影响加载速度？
|
 |
6
quake0day 2016 年 7 月 24 日
我以前也给我教授搞过这种的网站。这种网站的好处是不会写代码的人也可以更新网站，还不用做后台。
但是不知道你有没有发现，你这么做的话最大的问题就是整个网页内容没法被搜索引擎正确索引。而作为一个新生手册网站，这个缺陷是致命的。。。 |
 |
7
SuperMild 2016 年 7 月 24 日
页面设计很好看，也符合“新生”这个主题，有青春的校园气息。
|
 |
8
dantegg 2016 年 7 月 24 日
赞👍
|
 |
9
Vanilla 2016 年 7 月 24 日
只能说一个字：赞
|
 |
10
iiduce 2016 年 7 月 24 日
做的棒，真有心。
|
 |
11
crazykuma 2016 年 7 月 24 日
做得真棒
|
 |
13
eastpiger OP @sphawkcn 说不影响那肯定是不可能的。不过开了缓存，然后图片是 progressive 模式相对来说影响会好一些。其实这些图片也就一二百 k ，考虑一下感觉还好。。顺带我觉得可以试一下在第一屏结束后预加载接下来的图片，这样会更好一些呢
|
 |
14
j3n5en 2016 年 7 月 24 日
为何不关闭 Django 的 debug 模式。。。
|
|
15
eastpiger OP @j3n5en QAQ 这个不是 Django 啊……你不会摸到我们主站去了吧。。
Debug 模式什么的倒是真·无所谓的说。。反正都在 docker 部署下去的，也攻击不到什么有用的东西吧（我感觉这是个 flag 了） |
1 |
17
strwei 2016 年 7 月 24 日
666
 |
 |
18
carlace 2016 年 7 月 24 日
同高三毕业生，想为即将入学的大学也做一份新生手册，请问可以参考你的网站吗
|
 |
21
Sauryer 2016 年 7 月 24 日
上海科技大学的校长是江绵恒啊, 牛 !
|
 |
22
AlisaDestiny 2016 年 7 月 24 日
什么？你才上高三就设计这么牛逼的网站？
|
 |
23
zonghua 2016 年 7 月 24 日
PPT 做得不错
|
|
24
eastpiger OP @AlisaDestiny 哪有高三给自己做新生手册的。。。我都快大三了
|
 |
25
everettjf 2016 年 7 月 25 日
赞！不过大学还是好好学算法，做 ACM 。
|
 |
26
FrankFang128 2016 年 7 月 25 日
这需要用 React 做么……
|
 |
27
CDog34 2016 年 7 月 25 日
很棒！
|
 |
28
vagary 2016 年 7 月 25 日
Program
吕文涛 |
 |
29
newghost 2016 年 7 月 25 日
不错
|
 |
30
willike 2016 年 7 月 25 日
很赞.
|
 |
31
hualuogeng 2016 年 7 月 25 日
赞一个
|
 |
32
Allianzcortex 2016 年 7 月 26 日
不错哦，页面清晰，用 markdown 给好评
|
|
33
carlace 2016 年 12 月 24 日
求解安装方式方法教程
|
Select Language