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

宣传一下自己的实现朴素且长得漂亮的博客(日常+技术流)

  •  
  •   geelaw · 2017-04-08 01:27:50 +08:00 · 4122 次点击
    这是一个创建于 2768 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Gee Law ’ s Blog 或者粘贴网址 https://geelaw.blog/

    可以发现的几个网站设计的亮点(也就是产品经理常说的 细节):

    • 代码 vanilla ,没有库依赖,无浏览器 detection ,内容纯静态;
    • 元素 sematic ,纯 CSS 实现 responsive design ,对 screen reader 友好;
    • 支持无脚本环境,视觉效果无折扣,所有东西都完美 fallback ;
    • 打印机友好,打印效果在不同视觉状态下一致(托 semantic + css 的福);
    • 剪贴板友好,可见元素和元素结构长得差不多(托 semantic 的福);
    • 支持 Windows 高对比度,部分图片有高对比度版;
    • 支持 Windows 动态磁贴,固定到“开始”屏幕将轮播最近 5 条博文标题、摘要和主题图;
    • 元数据丰富,支持 Open Graph 和 Twitter Card 以及 vendor-neutral 元数据。

    不好之处也有不少:

    • 支持高对比度的图片牺牲了部分 semantic 和剪贴板友好性;
    • Disqus 部分不支持在更改主题后自动更改主题(如果强行 reset 会导致数据丢失);
    • 从博文 source build 网站的脚本写得很糟,不敢开源。

    所以求关注我的 blog 啦~

    27 条回复    2017-05-10 07:09:58 +08:00
    unique
        1
    unique  
       2017-04-08 01:37:44 +08:00
    还不错,挺极客的
    boolean93
        2
    boolean93  
       2017-04-08 01:38:53 +08:00   ❤️ 1
    Gee Law? 怎么读着像“基佬”?(逃)
    Kilerd
        3
    Kilerd  
       2017-04-08 03:10:48 +08:00 via iPhone
    怪我不懂艺术,哪里好看了?
    freedomSky
        4
    freedomSky  
       2017-04-08 04:07:44 +08:00
    @boolean93 我也这么读都出来了..hah
    hxtheone
        5
    hxtheone  
       2017-04-08 04:53:20 +08:00
    并没觉得哪里漂亮
    wolfan
        6
    wolfan  
       2017-04-08 05:07:10 +08:00 via Android
    动态磁贴是怎么实现的?
    geelaw
        7
    geelaw  
    OP
       2017-04-08 05:44:11 +08:00 via iPhone
    @Kilerd
    @hxtheone
    大概自己做的怎么都会觉得好看😷还有一个原因是我把这些外观和 UI 功能背后的代码和它们放在一起觉得很棒,但是对于外观来说很棒就是好看,所以就用“好看”表达出来了

    另外我是 Windows 8.1 UI 支持者,所以不难看出这些简洁的设定(我就不说“设计”了)对我来说会让我觉得优雅。
    geelaw
        8
    geelaw  
    OP
       2017-04-08 05:46:26 +08:00 via iPhone
    @wolfan 看 index.html 的 meta 和根目录下的 browserconfig.xml 以及 tiles/?.xml (?=1..5 )这些文件。

    此外要工作正常还需要一般的动态磁贴要求,例如 XML 不超 5 KB 、图片不超 200 KB ,这很容易忘记导致磁铁不能显示。
    wuling
        9
    wuling  
       2017-04-08 11:09:08 +08:00
    要不是看了楼主说的这些优点,我会以为这是 10 年前的博客...
    minamike
        10
    minamike  
       2017-04-08 11:45:43 +08:00   ❤️ 1
    移动端还行 桌面端的右边图片好违和 看起来好乱 还有那个切换亮色暗色的图标为什么要用屎黄色 阅读全文和 tag 的图标太写实 和扁平风格不符
    wolfan
        11
    wolfan  
       2017-04-08 12:22:11 +08:00
    @geelaw 原来如此
    LaudOak
        12
    LaudOak  
       2017-04-08 12:52:07 +08:00
    geelaw
        13
    geelaw  
    OP
       2017-04-08 22:20:41 +08:00 via iPhone
    @minamike 关于图标不好看的问题,这个我无法解决,因为我没有把字体 host 在网上的权利,所以要得到正确的效果请安装 Segoe UI Emoji ,简单点就是使用 Windows 10 。阅读全文是点标题而不是点话语泡泡,那个是直接跳进评论。


    @wuling 十年前的网站不是这种配色的,十年前的网站响应式很差吧。
    geelaw
        14
    geelaw  
    OP
       2017-04-08 23:11:41 +08:00
    ![期待的显示效果]( )

    这个是期待的显示效果,在其他操作系统(字体)下 emoji 会有不同的样式。此外右边的图似乎不太好搞,它是主题图,宽度永远是 300px ,高度根据左边的摘要、修改日期和标签产生的高度决定,所以会有点乱。但是我不想它控制高度,所以高度上可能有不一致的现象。我正在考虑解决,例如要求主题图的高度至少是一个固定数。
    Hackghost
        15
    Hackghost  
       2017-04-08 23:24:24 +08:00 via iPhone
    捕捉茶园学长一只
    geelaw
        16
    geelaw  
    OP
       2017-04-09 04:34:27 +08:00
    @minamike 感谢您提出的图片乱的问题。我修改了条目列举的实现, so that :

    - 当且仅当宽视图且有图片时显示图片;
    - 如果显示图片,则图片宽度是 320px ,高度至少是 240px ;
    - 如果左侧文字多,则增加图片高度;
    - 如果左侧文字少,则在摘要和标签之间增加空白。

    相比之前,设定最小高度让条目列举看起来整齐不少;此外标签、日期、评论数的显示也改变了一下,感觉新版本的更整齐。

    吐槽一下 HTML 和 CSS 碎片化问题,我一开始用 flex-box 实现的,后来发现 Safari (El Capitan) 居然不支持!于是换回 CSS table 实现。
    minamike
        17
    minamike  
       2017-04-09 08:30:09 +08:00 via iPhone
    @geelaw Safari 不是要用-webkit-box-flex 吗
    geelaw
        18
    geelaw  
    OP
       2017-04-09 12:06:00 +08:00
    @minamike 居然忘了还有 vendor-prefix 可以用 orz ,懒得再改了,反正现在这个也能用。而且这样还可以兼容更多版本的 IE (虽然我没打算兼容 IE10-)。
    boolean93
        19
    boolean93  
       2017-04-09 16:42:52 +08:00   ❤️ 1
    对了,提一个小建议,就是给个最大宽度,否则在我的 21:9 显示器上面看会很丑很丑
    dnsjia
        20
    dnsjia  
       2017-04-09 19:10:38 +08:00 via Android
    sensui7
        21
    sensui7  
       2017-04-09 20:56:21 +08:00
    所有链接改成磁贴的风格, 能否更好看一点? 特别是导航条的风格, 目前看来有点太普通了.

    评论的链接放标题或者日期后面能否更好一点

    各个元素的 margin 和 padding 是否能细调一下, 现在是否有点随意了呢?

    article 元素做成大磁贴, 是否能比现在简单的用分割线要好一点?
    geelaw
        22
    geelaw  
    OP
       2017-04-09 22:02:47 +08:00
    @boolean93 感谢您的建议,我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式,并且打印的时候如果宽度大于 1600px 也会采用分栏(大约 720px 到 850px 一栏)。
    geelaw
        23
    geelaw  
    OP
       2017-04-09 22:15:24 +08:00
    @sensui7 感谢您的回复。

    上面贴的图已经过时了。

    磁贴的信息容量比较有限,展现了标题、摘要和题图之后就没什么其他的空间了(最多可以再用 badge 表现一下评论数),此外磁贴是一个大的点击目标,这样就不能列出标签、直达评论的链接了。另一种设定是采取双面 /peeking 的磁贴,一面是题图+评论数,另一面是标题和摘要,这样做的好处是很容易解决可访问性(对比度)的要求。但是可能因为 timing 不好让读者必须等待磁贴翻面。此外还有一些问题,例如有些文章是没有题图的,这些磁贴的图就不太好弄,再比如现在的题图都是按照 4:3 选择的,增加磁贴之后剪裁很成问题。

    现在评论数就是在日期后面,之所以右侧放置是为了保持对齐,如果多次访问我的网站会发现昨今二日里气泡的位置改变了——从数字左边变到右边,这个也是对齐考虑,因为数字的加载需要一段时间,要让数字出现的位置尽量不改变其他元素的位置,否则会有跳动的感觉。

    感觉主页可以考虑一下使用磁贴设计,现在的设计对 archive 页面比较合适。
    sensui7
        24
    sensui7  
       2017-04-09 23:04:15 +08:00
    @geelaw 虽然我之前用的 lumia 手机, 但我对磁贴这一形式理解还停留在色块上, 你的回复让我意识到了交互性的特点, 感谢.
    leokino
        25
    leokino  
       2017-04-18 00:52:32 +08:00
    @geelaw 建议微调一下排版和个元素的 padding 等。可以先上图然后在 css ,避免代码难度影响美观。
    coolcfan
        26
    coolcfan  
       2017-05-10 00:05:05 +08:00
    @geelaw #22 这个逻辑可能还是需要细化,比如都是 21:9 的显示器,2560x1080 屏幕上最大化的浏览器里,横向排版看起来很正常,但是在 3440x1440 屏幕上 snap 到一侧的浏览器窗口里,横向排版看起来就有些别扭了……
    geelaw
        27
    geelaw  
    OP
       2017-05-10 07:09:58 +08:00
    @coolcfan 只要窗口的宽度达到 1600px 就会横向,你可以选择调节 snap 的比例~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3585 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:26 · PVG 12:26 · LAX 20:26 · JFK 23:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.