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

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 啦～

geelaw

2017-04-08 05:44:11 +08:00

@Kilerd
@hxtheone
大概自己做的怎么都会觉得好看😷还有一个原因是我把这些外观和 UI 功能背后的代码和它们放在一起觉得很棒，但是对于外观来说很棒就是好看，所以就用“好看”表达出来了

另外我是 Windows 8.1 UI 支持者，所以不难看出这些简洁的设定（我就不说“设计”了）对我来说会让我觉得优雅。

geelaw

2017-04-08 05:46:26 +08:00

@wolfan 看 index.html 的 meta 和根目录下的 browserconfig.xml 以及 tiles/?.xml （?=1..5 ）这些文件。

此外要工作正常还需要一般的动态磁贴要求，例如 XML 不超 5 KB 、图片不超 200 KB ，这很容易忘记导致磁铁不能显示。

geelaw

2017-04-08 22:20:41 +08:00

@minamike 关于图标不好看的问题，这个我无法解决，因为我没有把字体 host 在网上的权利，所以要得到正确的效果请安装 Segoe UI Emoji ，简单点就是使用 Windows 10 。阅读全文是点标题而不是点话语泡泡，那个是直接跳进评论。

@wuling 十年前的网站不是这种配色的，十年前的网站响应式很差吧。

geelaw

2017-04-08 23:11:41 +08:00

![期待的显示效果]( )

这个是期待的显示效果，在其他操作系统（字体）下 emoji 会有不同的样式。此外右边的图似乎不太好搞，它是主题图，宽度永远是 300px ，高度根据左边的摘要、修改日期和标签产生的高度决定，所以会有点乱。但是我不想它控制高度，所以高度上可能有不一致的现象。我正在考虑解决，例如要求主题图的高度至少是一个固定数。

geelaw

2017-04-09 04:34:27 +08:00

@minamike 感谢您提出的图片乱的问题。我修改了条目列举的实现， so that ：

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

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

吐槽一下 HTML 和 CSS 碎片化问题，我一开始用 flex-box 实现的，后来发现 Safari (El Capitan) 居然不支持！于是换回 CSS table 实现。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/353365

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.