首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Node.js
Express
PPA for Ubuntu
ppa:chris-lea/node.js
V2EX  ›  Node.js

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

  •  5
     
  •   eastpiger · 2016-07-24 03:26:02 +08:00 · 6946 次点击
    这是一个创建于 1231 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    34 回复  |  直到 2017-01-19 22:24:20 +08:00
        1
    mcfloundinho   2016-07-24 08:22:27 +08:00
    赞一个👍(别人家的新生手册系列)
        2
    roychan   2016-07-24 08:52:15 +08:00
    赞一个👍(别人家的新生手册系列)
        3
    Parabolazz   2016-07-24 08:59:21 +08:00
    赞!
        4
    ChiangDi   2016-07-24 09:05:12 +08:00
    你们学校好厉害
        5
    sphawkcn   2016-07-24 09:43:52 +08:00
    这种大幅画面做整页背景的,是不是比较影响加载速度?
        6
    quake0day   2016-07-24 09:51:09 +08:00
    我以前也给我教授搞过这种的网站。这种网站的好处是不会写代码的人也可以更新网站,还不用做后台。
    但是不知道你有没有发现,你这么做的话最大的问题就是整个网页内容没法被搜索引擎正确索引。而作为一个新生手册网站,这个缺陷是致命的。。。
        7
    SuperMild   2016-07-24 09:54:33 +08:00
    页面设计很好看,也符合“新生”这个主题,有青春的校园气息。
        8
    dantegg   2016-07-24 10:44:28 +08:00
    赞👍
        9
    Vanilla   2016-07-24 12:58:44 +08:00
    只能说一个字:赞
        10
    iiduce   2016-07-24 13:05:24 +08:00
    做的棒,真有心。
        11
    crazykuma   2016-07-24 13:22:39 +08:00
    做得真棒
        12
    eastpiger   2016-07-24 14:26:15 +08:00 via Android
    @quake0day 确实。不过似乎 nodeJS 的 serverside 渲染可以做。。表示还没试过这个
        13
    eastpiger   2016-07-24 14:29:00 +08:00 via Android
    @sphawkcn 说不影响那肯定是不可能的。不过开了缓存,然后图片是 progressive 模式相对来说影响会好一些。其实这些图片也就一二百 k ,考虑一下感觉还好。。顺带我觉得可以试一下在第一屏结束后预加载接下来的图片,这样会更好一些呢
        14
    j3n5en   2016-07-24 15:00:55 +08:00
    为何不关闭 Django 的 debug 模式。。。
        15
    eastpiger   2016-07-24 15:20:02 +08:00
    @j3n5en QAQ 这个不是 Django 啊……你不会摸到我们主站去了吧。。

    Debug 模式什么的倒是真·无所谓的说。。反正都在 docker 部署下去的,也攻击不到什么有用的东西吧(我感觉这是个 flag 了)
        16
    wph95   2016-07-24 15:33:11 +08:00   ♥ 1
    @eastpiger 线上一定要关闭 Debug 模式
        17
    strwei   2016-07-24 15:35:29 +08:00
    666
        18
    carlace   2016-07-24 16:15:25 +08:00
    同高三毕业生,想为即将入学的大学也做一份新生手册,请问可以参考你的网站吗
        19
    eastpiger   2016-07-24 16:43:06 +08:00
    @wph95 老实说这还是 hjs 在的时候跟他学的 23333
        20
    eastpiger   2016-07-24 16:43:36 +08:00
    @carlace 当然可以啦,其实我也是参考了求是潮的设计风格的来着呢
        21
    wayne1943   2016-07-24 18:30:41 +08:00
    上海科技大学的校长是江绵恒啊, 牛 !
        22
    AlisaDestiny   2016-07-24 21:44:26 +08:00
    什么?你才上高三就设计这么牛逼的网站?
        23
    zonghua   2016-07-24 22:15:17 +08:00
    PPT 做得不错
        24
    eastpiger   2016-07-24 22:23:37 +08:00 via Android
    @AlisaDestiny 哪有高三给自己做新生手册的。。。我都快大三了
        25
    everettjf   2016-07-25 01:48:32 +08:00
    赞!不过大学还是好好学算法,做 ACM 。
        26
    FrankFang128   2016-07-25 01:54:05 +08:00
    这需要用 React 做么……
        27
    CDog34   2016-07-25 05:52:52 +08:00
    很棒!
        28
    vagary   2016-07-25 08:21:16 +08:00
    Program

    吕文涛
        29
    newghost   2016-07-25 09:03:11 +08:00
    不错
        30
    willike   2016-07-25 09:39:09 +08:00
    很赞.
        31
    hualuogeng   2016-07-25 20:59:35 +08:00
    赞一个
        32
    Allianzcortex   2016-07-26 09:02:50 +08:00
    不错哦,页面清晰,用 markdown 给好评
        33
    carlace   2016-12-24 19:01:38 +08:00
    求解安装方式方法教程
        34
    eastpiger   2017-01-19 22:24:20 +08:00
    @carlace 主要的安装脚本是直接写在 dockfile 里面的,如果想用可以直接进这个文件, RUN 开头的直接放到命令行执行
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2263 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 05:17 · PVG 13:17 · LAX 21:17 · JFK 00:17
    ♥ Do have faith in what you're doing.