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

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

  •  1
     
  •   shuirong1997 · 205 天前 · 4391 次点击
    这是一个创建于 205 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    作为 SPA,你没有把元素删除干净——在主页,你可以通过读屏器读出“我和权威的故事”这篇博文 - -
        14
    chengfu   205 天前
    @shuirong1997 哈哈,谢谢,肯定是啊~~~
        15
    scarlex   205 天前
    我打开网站花了 18 秒...
        16
    qfdk   205 天前 via iPhone
    似乎外面的框框不是圆角 差评 要 5px 的圆角才好看
        17
    neighbads   205 天前
    @scarlex 1 分钟。。。。
        18
    shuirong1997   205 天前
    @geelaw 感谢建议.汗颜,马上去看看怎么回事.和找文章看看 aria-label ...
        19
    ziki   205 天前
    老人机字体,这么大一个
        20
    shuirong1997   205 天前
    @qfdk 感谢差评,再微调下
        21
    shuirong1997   205 天前
    @neighbads 1分钟是有点尴尬了.(着急上线没有顾及到这个,接下来就优化速度)
        22
    gdsagdada   205 天前
    <!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   205 天前
    <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   205 天前 via Android
    打不开。。。
        25
    shuirong1997   205 天前
    @gdsagdada 刚才没懂,现在懂了.( SEO 没有专门去了解过)
        27
    Akkuman   205 天前 via Android
    话说,手机端看着不好看,电脑不错
        28
    IJustmaogepao   205 天前
    第一反应是明日香和丽女神==,我是不是没救了(逃
        29
    Penton   205 天前
    加 wx 发现昵称旁是蓝色的。。。
        30
    shuirong1997   205 天前
    @Penton wx 是什么?
        31
    Penton   205 天前
    @shuirong1997 #30 微信啊,还有 QQ 也是带把的。。。
        32
    chairuosen   205 天前
    为什么背景不是凌波丽
        33
    shuirong1997   205 天前
    @chairuosen 是凌波丽你又该问为什么不是这个...
        34
    chairuosen   205 天前
    @shuirong1997 凌波丽是 EVA 里的,EVA 跟初音未来是俩东西。。
        35
    Pyjamas   205 天前
    看到了王垠的文章。。
        36
    bertonzh   205 天前
    界面看上去像 Material Design,实际上细节方面以及美观程度比真正的 Material Design 差很多。
    应该找个好的 MD 实现,把它的细节仔细地复制一遍。
        37
    RE   205 天前
    什么!叫 EVA 竟然不是凌波丽明日香!
        38
    qhxin   204 天前
    背景图应该放凌波丽啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊谁谁谁
        39
    rpdict   204 天前
    别说了,我。。
        40
    trys1   204 天前
    首页背景图,在页面收窄后,变形了
        41
    unique   204 天前 via iPhone
    看起来不错,关注🌚
        42
    wangcansun   204 天前
    很赞!
        43
    panda1001   203 天前 via Android
    楼主的名字真好听
        44
    newworld   202 天前
    @gdsagdada #23 层主赐教 我想知道 小白一枚
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   868 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 71ms · UTC 17:47 · PVG 01:47 · LAX 09:47 · JFK 12:47
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1