订阅本博客换新主题啦～
2011 9 17 10:19 PM 2655次查看
虽说很喜欢koi这个主题，但我毕竟经常需要贴代码，而原主题太窄，导致阅读比较困难，于是萌生了制作一款适合宽屏的主题的想法。
耗时一天多，这款新主题终于面世了；然后又花了一天，变成了现在这样。名字没想好，暂时叫null吧。虽说还有些细节需要调整，不过我已经迫不及待地放上来测试了。
借鉴了不少东西，做的过程中获得了不少感悟，于是记录下设计时的过程吧。
最初想做的是一个米色背景的，估计是被iPad上的各种阅读器给惯坏了。
可是实际选色时，却发现这种对比度较低的背景色上（例如 #f5f5f5 ），不适合使用比较鲜艳的色彩，这样就导致比较难区分超链接了。
忘了阅读器上是怎么处理的了，估计是用背景色设置一个色块吧。而且阅读器上基本上很少用超链接，毕竟打开新链接是很麻烦的。
于是想起了推他，发现这种白色的块状结构与浅色的背景很搭，于是自己就仿照这种做法了。
而一旦这样做了后，我发现各种东西都需要弄成圆角，确实麻烦了点。
顺带一提，不用支持IE真是件很轻松愉快的事。我直接在Chrome上测试效果，做完后拿到Firefox、Opera和Safari上对照一下，基本上没有兼容性问题。不过iPhone和iPad的浏览器不支持对按钮的4个角分别设置border-radius，好在这主题本来就是针对桌面浏览器的。
在布局的时候，我的想法是沿袭koi的方式做成2栏，左边是正文，右边是sidebar，上面是header，下面是footer。好处就是模板文件基本上不需要改动。
先考虑中间的body部分，它应该有个最小宽度，保证正文的可读性，同时避免正文和sidebar重叠；还应该有个最大宽度，这样正文可以随浏览器宽度拉伸，但不至于过长（感觉宽度超过900像素的正文读起来也比较费劲）；对于屏幕较大的用户，它还需要设置margin:0 auto来居中。
而要做到这种自适应宽度的效果，正文实际上只要设置右边距，给sidebar留出空间就行了，因为block元素会自动填满可用空间。而sidebar则可以用固定宽度，因为它显示的内容较短，不需要换行。一般的做法估计是将sidebar设为float:right，不过我不喜欢用float，于是就用绝对定位，并设置top和right了。
不过使用绝对定位也留下了一个问题：footer可能和sidebar重叠，因为后者脱离了文档流。
考虑了一番后，我决定将footer设为inline-block，因为内容较短，也就不会延伸到右边了。如果非要多弄些内容的话，用max-width也可以解决。
只不过这样一来，footer就紧跟在正文下方了，而不是页面的最下面。解决办法自然是无视，毕竟没人规定footer必须在最下面。
而header是最难处理的，因为我不会画logo，光秃秃地写上几个文字显得太丑了…
虽然想学Google的黑色导航条，不过内容有点多，全塞进去显得太乱了。
无奈之下只好设置一个不同的背景色来区分。而要让背景色能够扩展到全屏也很麻烦。
最初我是用负边距来填充的，但是后来发现分辨率更高的显示器上并不能填充完整，设置几千的负边距显得很傻，而且以right定位的元素也要做相应地修改。
后来只好在header外加了个header-wrapper，直接让它去填充背景色就OK了。
评论部分我用了点小技巧，用:after生成了一个小尖角：
.commentlist>li:after {
content: '';
position: absolute;
top: 35px;
left: -5px;
width: 10px;
height: 10px;
z-index: -1;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
background: #fff;
box-shadow: 2px 2px 3px #aaa;
}至于上一篇和下一篇文章的链接也着实煞费苦心，我是用span>a>span这样嵌套来实现的。
外层的span元素最大宽度设为50%，避免重叠（实际上稍小于45%比较好）。
中间的a元素需要做成这种白色的块，因此需要设为block或inline-block元素。由于在Firefox和Opera里还存在奇怪的文字对齐问题，还得手动设置height。
内层的span元素主要就是为了解决居中对齐和避免标题过长而存在的，于是需要设置这些属性：max-width:95%、text-overflow:ellipsis和overflow:hidden。
最后奇怪的是，较长的标题和很长很长的标题会呈现完全不同的现象，于是又将a元素设置了max-width:90%。只不过这样一来，外层的span宽度就不会扩展到50%了，导致并不是很长的标题也会显示省略号。原因我还没想通，只好加上title属性让用户可以预览完整的标题。
关于首页的文章，我本来想在hover时做些特效的，可惜试验了半天，感觉颜色不太搭，于是放弃了…
还想做成点击文章就进入文章页，这样就避免点标题链接了（我本地测试的文章标题都很短，比较难点）。
后来觉得如果用户只是想选择一段文本来复制的话，这样做就有点自作聪明了，于是还是放弃了。
还有右下角的定位按钮，我是直接使用fixed来做的。
这样就带来了一个bug：fixed是相对窗口定位，当窗口宽度过窄时，就会被挤到中间去了。而且iPhone和iPad上是不支持fixed。
修复它需要使用JavaScript，于是我放弃了。
顺便还去掉了评分功能，因为我感觉几乎没用：首先是没有一个踩的，其次很少有顶的，所以要支持的话，还是buzz转发或者留下评论吧。
做完后虽然感觉很朴素，不过还是上线测试了。
值得一提的是，这种风格在留白很多时还是很不错的，但由于我想保证正文宽度，就感觉不出那种味道了。
第二天睡醒后，我试着加了张背景图，结果发现效果很好，于是打消了不用图片完成这个主题的念头。
感谢这张来自www.repeatxrepeaty.com的背景图，我在很多地方都借用了～
不过用了背景图后，最大的问题就是header了。
直接用纯色背景肯定杯具，换另一个背景图也需要过渡得当，最后想起了我在新浪微博的处理，直接用透明色搞定了。
接着就是改颜色了。因为背景图是蓝白色的，所以大体上就采用这2种了。
此时又轮到0to255登场了。这可怜的网站不知何时起惹到了GFW，害得我需要挂代理…
于是又花了一个下午的时间，把它弄成了现在这副模样。
说实话感觉有点过亮了，却又不知如何下手。header应该也能做得更好，例如那个搜索按钮在hover时的颜色与背景色太接近了。
如果大家有什么好的建议的话，欢迎留言提出。
整个设计过程中，感觉CSS 3虽然很强大，但是还是有些不方便，如果增加这2个玩意就好了：
- 支持表达式计算，例如30% - 20px、max(10%, 50px)等。
- 支持has选择符，例如li:has(ul)和li:not(li:has(ul))分别选择父结点和叶子结点。
下一步的计划是继续调整样式，增加手机版，然后作为默认皮肤添加到Doodle Project里去。
不过下周末就要回家了，不知道在那之前能否完工＝。＝
最后鄙视一下Windows，我已经连续3天死机了…刚才发布本文时也死机了，好在Chrome会自动保存。
2011年9月21日更新：
在前端观察发现一个自适应窗口宽度的效果，在宽度较窄时，就把sidebar移到正文下方去。
实际上就是用@media only screen and (max-width:960px)来判断宽度，在里面把sidebar改成position:static。
觉得这个方法不错，于是也偷学过来了。不过要针对移动设备优化的话，还需要设置viewport。
向下滚动可载入更多评论，或者点这里禁止自动加载。