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

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

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

    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
        1
    chengfu   2017-04-27 13:28:41 +08:00
    我闺女就叫 Eva,anyway,支持一个
        2
    nightwind   2017-04-27 13:29:38 +08:00
    支持~~~
    带把的,还是妹子?
        3
    qfdk   2017-04-27 13:41:26 +08:00 via iPhone
        4
    Kilerd   2017-04-27 13:41:52 +08:00 via iPhone
    @nightwind 带把的妹纸
        5
    seeker   2017-04-27 13:43:24 +08:00
    赞。楼主 SEO 考虑吗
        6
    shuirong1997   2017-04-27 13:44:25 +08:00
    @chengfu 那长大一定是女神一枚咯
        7
    shuirong1997   2017-04-27 13:45:42 +08:00
    @seeker 你是指?
        8
    seeker   2017-04-27 13:46:41 +08:00
    @shuirong1997 谷歌可以索引到你博客的正文吗?
        9
    jtsai   2017-04-27 13:46:58 +08:00
    @chengfu 俺女朋友叫 Eva
        10
    shuirong1997   2017-04-27 13:51:28 +08:00
    @seeker 博客里的文章是刚填加的,我刚 Google 了下,还搜不到.不过搜到了之前博客里的文章.我想等等就应该可以搜到了.
        11
    shuirong1997   2017-04-27 13:51:54 +08:00
    @jtsai 那可...真让人羡慕
        12
    shuirong1997   2017-04-27 13:57:36 +08:00
    @qfdk 感谢提醒,我注意到但忽略了.我写后端接口时顺便曲翻了翻文档,看到了这种写法,就试了试,发现不能用.没多想,就有在诸如  blog.save() 外面套了一层 Promise ...
        13
    geelaw   2017-04-27 13:58:32 +08:00   ♥ 1
    几个建议

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

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

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

    作为 SPA,你没有把元素删除干净——在主页,你可以通过读屏器读出“我和权威的故事”这篇博文 - -
        14
    chengfu   2017-04-27 14:02:25 +08:00
    @shuirong1997 哈哈,谢谢,肯定是啊~~~
        15
    scarlex   2017-04-27 14:03:39 +08:00
    我打开网站花了 18 秒...
        16
    qfdk   2017-04-27 14:06:26 +08:00 via iPhone
    似乎外面的框框不是圆角 差评 要 5px 的圆角才好看
        17
    neighbads   2017-04-27 14:10:17 +08:00
    @scarlex 1 分钟。。。。
        18
    shuirong1997   2017-04-27 14:11:10 +08:00
    @geelaw 感谢建议.汗颜,马上去看看怎么回事.和找文章看看 aria-label ...
        19
    ziki   2017-04-27 14:11:18 +08:00
    老人机字体,这么大一个
        20
    shuirong1997   2017-04-27 14:12:33 +08:00
    @qfdk 感谢差评,再微调下
        21
    shuirong1997   2017-04-27 14:13:52 +08:00
    @neighbads 1分钟是有点尴尬了.(着急上线没有顾及到这个,接下来就优化速度)
        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>

    对搜索引擎极不友好
        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 的源码,楼主你懂我的意思了吗
        24
    davidzhanwork   2017-04-27 14:22:40 +08:00 via Android
    打不开。。。
        25
    shuirong1997   2017-04-27 14:22:44 +08:00
    @gdsagdada 刚才没懂,现在懂了.( SEO 没有专门去了解过)
        26
    Anybfans   2017-04-27 14:43:36 +08:00
        27
    Akkuman   2017-04-27 14:48:18 +08:00 via Android
    话说,手机端看着不好看,电脑不错
        28
    IJustmaogepao   2017-04-27 17:12:15 +08:00
    第一反应是明日香和丽女神==,我是不是没救了(逃
        29
    Penton   2017-04-27 17:21:27 +08:00
    加 wx 发现昵称旁是蓝色的。。。
        30
    shuirong1997   2017-04-27 17:38:00 +08:00
    @Penton wx 是什么?
        31
    Penton   2017-04-27 20:26:18 +08:00
    @shuirong1997 #30 微信啊,还有 QQ 也是带把的。。。
        32
    chairuosen   2017-04-27 20:32:21 +08:00
    为什么背景不是凌波丽
        33
    shuirong1997   2017-04-27 21:50:42 +08:00
    @chairuosen 是凌波丽你又该问为什么不是这个...
        34
    chairuosen   2017-04-27 22:05:39 +08:00
    @shuirong1997 凌波丽是 EVA 里的,EVA 跟初音未来是俩东西。。
        35
    Pyjamas   2017-04-27 23:42:22 +08:00
    看到了王垠的文章。。
        36
    bertonzh   2017-04-27 23:50:46 +08:00
    界面看上去像 Material Design,实际上细节方面以及美观程度比真正的 Material Design 差很多。
    应该找个好的 MD 实现,把它的细节仔细地复制一遍。
        37
    RE   2017-04-28 00:21:12 +08:00
    什么!叫 EVA 竟然不是凌波丽明日香!
        38
    qhxin   2017-04-28 09:46:18 +08:00
    背景图应该放凌波丽啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊谁谁谁
        39
    rpdict   2017-04-28 10:32:12 +08:00
    别说了,我。。
        40
    trys1   2017-04-28 11:07:45 +08:00
    首页背景图,在页面收窄后,变形了
        41
    unique   2017-04-28 11:15:48 +08:00 via iPhone
    看起来不错,关注🌚
        42
    wangcansun   2017-04-28 16:50:52 +08:00
    很赞!
        43
    panda1001   2017-04-29 19:04:35 +08:00 via Android
    楼主的名字真好听
        44
    newworld   2017-04-30 11:29:04 +08:00
    @gdsagdada #23 层主赐教 我想知道 小白一枚
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   961 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 20ms · UTC 17:35 · PVG 01:35 · LAX 10:35 · JFK 13:35
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1