@sensui7 感谢您的回复。

上面贴的图已经过时了。

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

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

感觉主页可以考虑一下使用磁贴设计，现在的设计对 archive 页面比较合适。

@boolean93 感谢您的建议，我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式，并且打印的时候如果宽度大于 1600px 也会采用分栏（大约 720px 到 850px 一栏）。

@minamike 居然忘了还有 vendor-prefix 可以用 orz ，懒得再改了，反正现在这个也能用。而且这样还可以兼容更多版本的 IE （虽然我没打算兼容 IE10-）。

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

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

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

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


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

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


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

我的是把博文、发布器用 git 托管在 VSTS 上，在 GitHub 上建立一个用于托管页面的站点。

本地使用的时候 clone 两个仓库，分别放在 Blog 和 BlogSiteRoot 目录里面。

Blog 里面有 PostsSource （动态内容，包括含扩展语法的 Markdown ，以及 JSON 配置的 tags 、 authors 等）和 Publisher （静态内容和发布脚本），运行发布脚本会清空 BlogSiteRoot 然后把静态内容复制进去，再把动态内容生成好之后放进去。

BlogSiteRoot 的另一个作用是可以在本地运行 IIS 直接显示效果，调试好了再分别 commit 、 push 两个仓库。

如果要自动化发布的话可以搞一个虚拟机专门接管这个玩意儿，用 web-hook 告诉虚拟机运行发布脚本再 commit 、 push 进去。不过我觉得反正要调试的，所以没必要自动化发布。

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

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