V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
shuirong1997
V2EX  ›  分享创造

Eva: 简洁,优雅的博客系统实现

  •  1
     
  •   shuirong1997 ·
    shuiRong · 2017-04-27 13:18:28 +08:00 · 6660 次点击
    这是一个创建于 2746 天前的主题,其中的信息可能已经有所发展或是发生改变。

    eva.jpg

    就像她的名字,Eva 是一个简洁,美观,优雅的博客,我相信所有坚持写用她写博客的人都能找到自己的女神.

    DEMO (后台开放,不做坏事呀,选择相信你)  Github

    Eva使用了轻量级的 JavaScript 框架Vue.js和 Web 框架Express.js来开发,界面设计参考了Material Design规范.如果你觉得这个项目不错,请为她点赞支持


    特性

    • 设计简洁,界面美观
    • 支持 Markdown 文章的预览和发布
    • 部署简单
    • 设计了很多贴心的细节

    预览

    1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 9.png


    PS: 从零开始写这个博客的缘由有两个:一是我之前的博客用 Hexo 搭建的,这样会始终受限于 Hexo,自由度低,比如想加的功能因为后端不支持就没办法上了.还有一个原因是我想趁此机会再练习下 Vue 和 Express .为过段时间找工作做准备.

    第 1 条附言  ·  2017-04-27 14:29:42 +08:00
    [很尴尬啊,没想到这么多人访问.]
    [我用的可是腾讯学生云,就 1M 带宽啊.诸位打开慢的话,请体谅.]
    第 2 条附言  ·  2017-04-28 11:22:10 +08:00
    [ 第一次上线的匆匆忙忙,导致有很多问题,接下来就逐个解决.]
    44 条回复    2017-04-30 11:29:04 +08:00
    chengfu
        1
    chengfu  
       2017-04-27 13:28:41 +08:00
    我闺女就叫 Eva,anyway,支持一个
    nightwind
        2
    nightwind  
       2017-04-27 13:29:38 +08:00
    支持~~~
    带把的,还是妹子?
    qfdk
        3
    qfdk  
       2017-04-27 13:41:26 +08:00 via iPhone
    Kilerd
        4
    Kilerd  
       2017-04-27 13:41:52 +08:00 via iPhone
    @nightwind 带把的妹纸
    seeker
        5
    seeker  
       2017-04-27 13:43:24 +08:00
    赞。楼主 SEO 考虑吗
    shuirong1997
        6
    shuirong1997  
    OP
       2017-04-27 13:44:25 +08:00
    @chengfu 那长大一定是女神一枚咯
    shuirong1997
        7
    shuirong1997  
    OP
       2017-04-27 13:45:42 +08:00
    @seeker 你是指?
    seeker
        8
    seeker  
       2017-04-27 13:46:41 +08:00
    @shuirong1997 谷歌可以索引到你博客的正文吗?
    jtsai
        9
    jtsai  
       2017-04-27 13:46:58 +08:00
    @chengfu 俺女朋友叫 Eva
    shuirong1997
        10
    shuirong1997  
    OP
       2017-04-27 13:51:28 +08:00
    @seeker 博客里的文章是刚填加的,我刚 Google 了下,还搜不到.不过搜到了之前博客里的文章.我想等等就应该可以搜到了.
    shuirong1997
        11
    shuirong1997  
    OP
       2017-04-27 13:51:54 +08:00
    @jtsai 那可...真让人羡慕
    shuirong1997
        12
    shuirong1997  
    OP
       2017-04-27 13:57:36 +08:00
    @qfdk 感谢提醒,我注意到但忽略了.我写后端接口时顺便曲翻了翻文档,看到了这种写法,就试了试,发现不能用.没多想,就有在诸如  blog.save() 外面套了一层 Promise ...
    geelaw
        13
    geelaw  
       2017-04-27 13:58:32 +08:00   ❤️ 1
    几个建议

    不要设置元素的 opacity 来达到背景半透明的效果,用 argb 设置背景色来取得半透明效果。因为如果你设置 opacity 会导致高对比度模式下无法正确地去掉这个透明度。

    “编辑”、“删除”、“…”按钮读不出来,你需要 aria-label ;此外应该加上 role=button。

    文章中没有分隔语义的横线,你需要 aria-hidden。

    作为 SPA,你没有把元素删除干净——在主页,你可以通过读屏器读出“我和权威的故事”这篇博文 - -
    chengfu
        14
    chengfu  
       2017-04-27 14:02:25 +08:00
    @shuirong1997 哈哈,谢谢,肯定是啊~~~
    scarlex
        15
    scarlex  
       2017-04-27 14:03:39 +08:00
    我打开网站花了 18 秒...
    qfdk
        16
    qfdk  
       2017-04-27 14:06:26 +08:00 via iPhone
    似乎外面的框框不是圆角 差评 要 5px 的圆角才好看
    neighbads
        17
    neighbads  
       2017-04-27 14:10:17 +08:00
    @scarlex 1 分钟。。。。
    shuirong1997
        18
    shuirong1997  
    OP
       2017-04-27 14:11:10 +08:00
    @geelaw 感谢建议.汗颜,马上去看看怎么回事.和找文章看看 aria-label ...
    ziki
        19
    ziki  
       2017-04-27 14:11:18 +08:00
    老人机字体,这么大一个
    shuirong1997
        20
    shuirong1997  
    OP
       2017-04-27 14:12:33 +08:00
    @qfdk 感谢差评,再微调下
    shuirong1997
        21
    shuirong1997  
    OP
       2017-04-27 14:13:52 +08:00
    @neighbads 1分钟是有点尴尬了.(着急上线没有顾及到这个,接下来就优化速度)
    gdsagdada
        22
    gdsagdada  
       2017-04-27 14:20:10 +08:00
    <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0"><link rel="shortcut icon" type=image/png href=/static/zhihu2.png><title>Eva</title><link href=/static/css/app.e566e243fdc705412436666108f607da.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.1cbc5d51d3ba1378d7f7.js></script><script type=text/javascript src=/static/js/vendor.de75f5fbbefb33c26abe.js></script><script type=text/javascript src=/static/js/app.f0d548dff95e73e0606f.js></script></body></html>

    对搜索引擎极不友好
    gdsagdada
        23
    gdsagdada  
       2017-04-27 14:21:16 +08:00
    <div class="reply_content">&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=utf-8&gt;&lt;meta name=viewport content=&quot;width=device-width,initial-scale=1,user-scalable=0&quot;&gt;&lt;link rel=&quot;shortcut icon&quot; type=image/png href=/static/zhihu2.png&gt;&lt;title&gt;Eva&lt;/title&gt;&lt;link href=/static/css/app.e566e243fdc705412436666108f607da.css rel=stylesheet&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=app&gt;&lt;/div&gt;&lt;script type=text/javascript src=/static/js/manifest.1cbc5d51d3ba1378d7f7.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=/static/js/vendor.de75f5fbbefb33c26abe.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=/static/js/app.f0d548dff95e73e0606f.js&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
    <br />
    <br />对搜索引擎极不友好</div>

    这是 v2 的源码,楼主你懂我的意思了吗
    davidzhanwork
        24
    davidzhanwork  
       2017-04-27 14:22:40 +08:00 via Android
    打不开。。。
    shuirong1997
        25
    shuirong1997  
    OP
       2017-04-27 14:22:44 +08:00
    @gdsagdada 刚才没懂,现在懂了.( SEO 没有专门去了解过)
    Anybfans
        26
    Anybfans  
       2017-04-27 14:43:36 +08:00
    这个 JS 我用了 13 秒 http://118.89.103.78/static/js/vendor.de75f5fbbefb33c26abe.js

    这个图片 4.8 秒 http://118.89.103.78/static/img/girl-min.8bdc6e4.jpg
    Akkuman
        27
    Akkuman  
       2017-04-27 14:48:18 +08:00 via Android
    话说,手机端看着不好看,电脑不错
    IJustmaogepao
        28
    IJustmaogepao  
       2017-04-27 17:12:15 +08:00
    第一反应是明日香和丽女神==,我是不是没救了(逃
    Penton
        29
    Penton  
       2017-04-27 17:21:27 +08:00
    加 wx 发现昵称旁是蓝色的。。。
    shuirong1997
        30
    shuirong1997  
    OP
       2017-04-27 17:38:00 +08:00
    @Penton wx 是什么?
    Penton
        31
    Penton  
       2017-04-27 20:26:18 +08:00
    @shuirong1997 #30 微信啊,还有 QQ 也是带把的。。。
    chairuosen
        32
    chairuosen  
       2017-04-27 20:32:21 +08:00
    为什么背景不是凌波丽
    shuirong1997
        33
    shuirong1997  
    OP
       2017-04-27 21:50:42 +08:00
    @chairuosen 是凌波丽你又该问为什么不是这个...
    chairuosen
        34
    chairuosen  
       2017-04-27 22:05:39 +08:00
    @shuirong1997 凌波丽是 EVA 里的,EVA 跟初音未来是俩东西。。
    Pyjamas
        35
    Pyjamas  
       2017-04-27 23:42:22 +08:00
    看到了王垠的文章。。
    bertonzh
        36
    bertonzh  
       2017-04-27 23:50:46 +08:00
    界面看上去像 Material Design,实际上细节方面以及美观程度比真正的 Material Design 差很多。
    应该找个好的 MD 实现,把它的细节仔细地复制一遍。
    RE
        37
    RE  
       2017-04-28 00:21:12 +08:00
    什么!叫 EVA 竟然不是凌波丽明日香!
    qhxin
        38
    qhxin  
       2017-04-28 09:46:18 +08:00
    背景图应该放凌波丽啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊谁谁谁
    rpdict
        39
    rpdict  
       2017-04-28 10:32:12 +08:00
    别说了,我。。
    trys1
        40
    trys1  
       2017-04-28 11:07:45 +08:00
    首页背景图,在页面收窄后,变形了
    unique
        41
    unique  
       2017-04-28 11:15:48 +08:00 via iPhone
    看起来不错,关注🌚
    wangcansun
        42
    wangcansun  
       2017-04-28 16:50:52 +08:00
    很赞!
    panda1001
        43
    panda1001  
       2017-04-29 19:04:35 +08:00 via Android
    楼主的名字真好听
    newworld
        44
    newworld  
       2017-04-30 11:29:04 +08:00
    @gdsagdada #23 层主赐教 我想知道 小白一枚
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2724 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:37 · PVG 16:37 · LAX 01:37 · JFK 04:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.