原创主题《金光碧色》

笔者偶尔会抱怨BlogEngine.NET的主题太少,很羡慕WordPress丰富的主题资源。前段时间手痒想给博客换个新主题,但找遍WordPress TOP20之类的排行榜也没有发现特别满意的,一想到就算找到满意的也得花功夫改写成BlogEngine.NET的格式,倒不如释放一下自己的原创热情。

evis-me_royalgold-theme_screenshot

素材

首先是页面的CSS布局,从零开始搭CSS是很折腾人的,一个CSS布局模板可以省掉很多辛苦。CSS-Tricks网站提供了一个“完美的自适应宽度的布局”: http://css-tricks.com/the-perfect-fluid-width-layout/,其特点如下。

  • 左右两栏式;
  • 在主流浏览器下效果良好;
  • 宽度最小可以缩减到780px,最大可以增加到1260px;
  • 侧边栏保持固定宽度,并与主内容区域同高;
  • 页面内容在极大分辨率下保持居中。

笔者基于这个布局的源码,将侧边栏移到了右边,微调了最小最大宽度,最主要的,加入了一系列包括边框、阴影之类的背景图片。这个“完美布局”模板在使用时有以下几点需要注意。

  • 侧边栏是float:right属性挤过去的,这意味着主内容区域里不能很早就用clear:right或者clear:both来清理浮动,否则会造成清理之后的内容与之前的内容间产生很大片空白;
  • 主内容要设计min-height,以避免侧边栏内容高度大于主内容时,下半截没有背景的情况;
  • 这个模板包含一些针对IE的CSS-hack,在IE下人工改变浏览器宽度时,渲染效果会有不稳定的情况。

然后是背景。只所以这个主题会有金色系这样的配色,主要还是因为偶然找到了这样的图案纹理: http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/。矢量纹理的好处是后期加工很方便。

还有就是纯CSS的层叠菜单。Google了很多,最后还是采用了http://purecssmenu.com/提供的代码。笔者针对自己的需要,砍掉了不少代码。

HTML源代码

早期版本的HTML、CSS、切图都可以在Google Code上找到,SVN地址如下:

https://evis-lab.googlecode.com/svn/themes/royalgold/src

《金光碧色》主题

主题为什么取这名字就不要深究了。

在上述HTML版本之后,笔者就将HTML代码合并到BlogEngine.NET的Standard主题中了,后来的开发、除错都是基于ASP.NET页面进行的。从结果来看,主题有如下特性。

  • 金色系配色;
  • 纯CSS(CSS2.1)布局,左右两栏,最窄780px、最宽1000px自适应,侧边栏宽度固定为300px;
  • 纯CSS层叠菜单;
  • 在IE7/8,Chrome,Maxthon2/3下测试通过;
  • 适用于BlogEngine.NET 2.0RC及2.0,之前版本尚未测试。

已知bug:

  • 在IE7/8下,Google广告之类的iframe内容会将弹出来的层叠菜单遮住;
  • 在IE7/8下,任何时间都会出现横向的滚动条。

最新版本的《金光碧色》主题可以从这里下载,解压缩至BlogEngine.NET相关目录即可使用。

如果有哪位朋友有兴趣将主题迁移到WordPress,同样请留言,笔者会提供相应支持。

后记

果然是自己从未尝试过的色系,看久了多少有点眼晕的感觉……

制作主题这种事情,笔者认为最舒服的还是做效果图的阶段。神马Web Standard,神马HTML5、CSS3,业界推广这么长时间了,想做个布局、加个边框之类的,开发量还是这么大,甚至避免不了CSS Hack。这么多年了,多浏览器兼容仍旧是个大问题。有时想想,还是表格布局来的畅快。还有,开发工具还是这么单薄……等等各种抱怨。

说回来,Web页面开发这类工作,还得是设计师和前端工程师合作来做,别太期待团队里出来一个英雄,从美工到前端,加上体验设计,甚至再到后端,把一个网站硬生生的扛下来。领域太广、细节太多、耗时太长。哦,笔者可没说自己是这样的人物。


EvisBlog.NET is now open source

本博客的源代码,即定制开发的BlogEngine.NET,现已开源并托管在Google Code Hosting。网址是:http://evis-blogenginedotnet.googlecode.com/
The source code of this blog, which is developed based on BlogEngine.NET, is now open source and hosted at Google Code Hosting. The URL address is http://evis-blogenginedotnet.googlecode.com/.

为应对Ms-RL协议相应条款,本博客引擎名称改为EvisBlog.NET。其他详细信息请参考之前的文章:Welcome to EvisMe.BlogEngine.NET using Microsoft Access database
This blog engine is renamed to EvisBlog.NET in reaction to the related items of Ms-RL license. For other details you may refer to the previous post Welcome to EvisMe.BlogEngine.NET using Microsoft Access database.


Welcome to EvisMe.BlogEngine.NET using Microsoft Access database

如果你能看到这篇博文,意味着EvisMe.BlogEngine.NET正运行在Access数据库上,而且已针对OLEDB正确配置了DbBlogProvider。
If you see this post it means that EvisMe.BlogEngine.NET is running with Access database and the DbBlogProvider is configured against OLEDB correctly .

EvisMe.BlogEngine.NET的基础是BlogEngine.NET 1.4.5.10,一套著名的ASP.NET博客引擎,经由博主定制开发形成了现在你所看到的版本。
EvisMe.BlogEngine.NET is cusmized by the blogger based on BlogEngine.NET 1.4.5.10.

如果你是技术人员,你可能会关心以下信息。
You may be interested in the following information as a technical person.

Open Source BlogEngine.NET

你可以在BlogEngine.NET的官方网站上找到相关教程、文档、技巧以及更多。BlogEngine.NET是开源软件,它被托管在微软的开源社区CodePlex,在那里你可以找到其他非发布版本的下载。
You can find BlogEngine.NET on the official website. Here you will find tutorials, documentation, tips and tricks and much more. The ongoing development of BlogEngine.NET can be followed at CodePlex where the daily builds will be published for anyone to download.

BlogEngine.NET

Customized EvisMe.BlogEngine.NET

如果你通过浏览本站发现此定制版本可能对你有用,我会很荣幸的提供下载。虽然对原版的改动不是很大,EvisMe.BlogEngine.NET也开源并托管在Google Code。源代码正在整理中,会尽快发布出来。
I’ll provide the download of this customized version with great pleasure if you may find it useful to you. EvisMe.BlogEngine.NET is still open source at Google Code, though it has only a little contribution. I’m working on a SVN issue until the source code can be released.