V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
eastpiger
V2EX  ›  Node.js

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

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

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

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

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

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

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

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

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