V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
eastpiger
V2EX  ›  Node.js

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

  •  5
     
  •   eastpiger · Jul 24, 2016 · 9249 views
    This topic created in 3568 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

    吕文涛
    newghost
        29
    newghost  
       Jul 25, 2016
    不错
    willike
        30
    willike  
       Jul 25, 2016
    很赞.
    hualuogeng
        31
    hualuogeng  
       Jul 25, 2016
    赞一个
    Allianzcortex
        32
    Allianzcortex  
       Jul 26, 2016
    不错哦,页面清晰,用 markdown 给好评
    carlace
        33
    carlace  
       Dec 24, 2016
    求解安装方式方法教程
    eastpiger
        34
    eastpiger  
    OP
       Jan 19, 2017
    @carlace 主要的安装脚本是直接写在 dockfile 里面的,如果想用可以直接进这个文件, RUN 开头的直接放到命令行执行
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2513 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 90ms · UTC 15:29 · PVG 23:29 · LAX 08:29 · JFK 11:29
    ♥ Do have faith in what you're doing.