Linux ABC

linuxabc租用的是DreamHost的空间，该空间提供了PHP+MySQL，用户可通过SSH或者Web panel进行管理，由于我是跟别人合租的，因此没有Web Panel的管理权限，也罢，SSH更适合我一点，方便、快捷。

2.7.1相对于2.6而言融入了很多新的特性，出来也有一段时间了，已趋稳定，因此我打算升级到2.7.1，与此同时，放弃了自己打造theme的幻想，直接用Jinwen的js-o3-lite，网页设计还真不是自己的强项。

wordpress升级很方便，基本的步骤是用新的wordpress替换掉就版本的wordpress，然后重新更新一下数据库即可。

1、用FlashFXP将2.7.1压缩包上传到DreamHost

2、备份旧的wordpress

3、将wp-config.php拷贝出来

4、删除linuxabc.net.cn目录

5、将新版本的wordpress解压到linuxabc.net.cn

6、根据旧的wp-config.php更改linuxabc.net.cn/wp-config.php

主要是数据库的用户名和密码

7、在IE中打开http://www.linuxabc.net.cn/wp-admin.php

这时会出现要求更新数据库的提示，点击“确定”即可完成整个升级步骤，非常简单。

LinuxABC采用了传统的布局：

由于目前content和sidebar未设背景色，沿用了body的#，显得很呆板，而且读者不容易将视线聚焦在左边的内容上，所以alfie决定将content的背景色改成白色，sidebar的颜色改成灰色系，改完之后发现两边不等高，如下图的左边所示，其实alfie的的初衷是实现右边的效果。

于是上网搜了一下，原来这个问题早已有之，众人也是八仙过海各显神通，总结了一下有以下四种解决方法。

一、分层交错法

英文原文是：Equal Height Columns with Cross-Browser CSS & No Hacks

原文的例子是三栏的，定义三个不同背景色的div：

通过控制width的百分比，将各个层错落显示，达到每个col显示不同的颜色，而且是等高的。

详细的实现方式请参阅原文。

二、border-right

alfie无意中进入http://www.alistapart.com/，看到了border-right这种解决方式，下面以LinuxABC为例简要说明。

首先将wrapper的背景色设为白色，content也设为白色，并且border-right的宽度为sidebar的宽度，sidebar的背景色设为#EDEDED

• 当content高于sidebar时，由于content的border-right的颜色即为sidebar的背景色，因此sidebar短缺的部分由content的border-right背景色不足；
• 当sidebar高于content时，由于wrapper是content和sidebar的父容器，content短缺的背景由wrapper补足；

这样就实现了两栏等高的问题，如果读者想知道三栏的实现方式，可以参考原文：Multi-Column Layouts Climb Out of the Box

index.php:

<div id="wrapper"> <div id="content">This is the content</div> <div id="sidebar">This is the sidebar</div> </div>

style.css:

#wrapper{
   background-color: #FFFFFF;
   overflow: hidden;
   width: 100%;
}
#content{
   background-color: #FFFFFF;
   width: 600px;
   border-right: 400px solid #EDEDED; 
   /* The width and color of the sidebar */
   margin-right: -400px; 
   float: left;
}
#sidebar{
   background-color: #EDEDED;
   width: 400px;
   float: right;
}

说明：知道http://www.alistapart.com/是谁创建的吗？是《网站重构》的作者Jeffrey Zeldman，alfie也是今天到书店无意中在《网站重构》这本书中发现的，这个世界好奇妙。

三、JavaScript

通过JavaScript或jquery的插件也可以实现多栏之间的等高，不过这种方式应用面不广，所以这里就不详谈了。

四、table

这是下下策，在没有css之前table的确是网页设计师的挚爱，但现已经是昔日黄花了，不提也罢。

alfie最终决定采用第二种方法，因为它够简单，效果也不错，方法一虽然很强大，但似乎过于小题大做了。

在web2.0的时代，网页设计大量采用了圆角效果，套用《大腕》里的一句台词就是“你不圆都不好意思跟别人打招呼。”，alfie也不能免俗，决定为LinuxABC的页面元素加入圆角效果。

目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。

曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少：

1. JQuery Curvy Corners
2. JCorners
3. JQuery Corner Gallery
4. rounded corners

对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。

为LinuxABC的

1. topNavi的左上角和右上角做圆角效果；
2. wrapper的左下角和右下角做圆角效果；

JQuery Corner Galley：

<script>
   $(document).ready(function(){
      ...
      $('#topNavi').corner("round top 4px");
      $('#content').corner("round bottom 5px");
      ...
   });
</script>
<div id="topNavi">...</div>
<div id="content">...</div>

Rounded Corners：

<script>
   $(document).ready(function(){
      ...
      $('.rounded').corner();
      ...
   });
</script>
<div class="rounded {4px top}" id="topNavi">...</div>
<div class="rounded {5px bottom-left}" id="content">...</div>

rounded corners这种方式无疑更方便些，而且后期的维护相对简单。

短短几行代码就能搞定大部分的圆角效果，jquery实在是太神奇，想不爱她都不行！

由于alfie经常要写技术文档，经常需要在文章中插入代码块，于是比较了几种代码高亮的解决方案。

一、通过style.css格式化代码块

这种方式是最原始的，一般的主题的样式表中都会有都会有类似下面的语句：

code{
    font:1em 'Courier New',Courier,Fixed;
    display:block;
    overflow:auto;
    text-align:left;
    margin: 10px 0;
    padding: 5px 10px;
    background: #FBF5DF;
    border-top: solid 1px #EDE0B3;
    border-bottom: solid 1px #EDE0B3;
}

只需要在代码块前后加上<code> 和</code>就可以在文章中简单的格式化代码块了，不过这种方式比较简陋，仅能实现代码的字体和大小，无法实现关键字高亮、缩进等。效果见上

全文阅读 »

大多数主题使用一个统一的样式表: style.css，这并不能满足一些特殊需要，例如linxuabc的首页(index.php)和全文页(single.php)布局就不一样，所以需要实现在不同页面中使用不同的样式表。

全文阅读 »