博客主题使用时间长了，往往会对外观产生不满，特别是以wordpress为基础的博客，可选主题非常多，于是，为了改变外观而换主题成了一种习惯。有人说经常更换主题对SEO不利，我相信也有些道理，但是，作为比较随意的个人博客，其实也不必太过拘泥于优化的，我自己的就属于这一类型的博客，平时只管随便写写，随便说说，以乐趣为主，无论内容是什么，都只当作一种交流方式，若再能寻得一二知己，可以分担忧虑，可以共享快乐，也就心意满足了！话说主题外观，个人拙见，不满就换，或更换主题，或改变布局，一切随意。今天讨论一下博客主题的布局问题，以页面为例，一般博客都会有几个甚至多个页面，内容虽然不会相同，打开的布局多半都是一样的，为什么不让不同的页面呈现出不同的样式？

例如，将博客首页设置为三栏式固定布局，而其他页面则采用两栏式（让侧边栏固定在右边）布局，实行页面布局的多样化，让访问者获得多一点浏览体验，何乐而不为？然而又如何实现？

一直都在折腾, 摸索主题框架Thematic，有时不免感到些许迷茫，解开之后却又豁然开朗，自然也就乐在其中。这里当然还会继续拿Thematic作为试验，既然是框架，比较好下手的哦！目前Thematic最新稳定版为Thematic 0.9.7.7，有也希望拿折腾来寻得乐趣的朋友即管下载玩玩。

言归正题——

首要前提：必须安装一个Thematic子主题。当然，自己创建一个更好，更有个性，我自己的也是(个性却没有，惨！)，父主题都用别人的了，子主题还不自己做一个？有一篇文章介绍了子主题的创建方法，非常简单，不管父主题用的是哪一个，原理基本都一样。我曾经参考过此文：如何创建Twenty Ten子主题。老外的一篇文章对此则介绍得更加详细，不过是英文的，也可以参考：How to easily create a Thematic child theme。大概思路如下：

1.先在子主题目录下建立两个样式表文件，一个主管两栏布局，另一个主管三栏布局；

2.然后再在子主题的functions.php中调用这两个样式表文件。

第一步，建立一个右侧栏的两栏布局样式文件style.css，添加以下CSS样式导入代码：

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css'); 

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css'); 

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');//主管两栏布局
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css'); 

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css'); 

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

上面所导入的CSS样式都在同一个目录library之下。值得注意的是，不能将thematic目录下的原始样式文件style.css也导入了，不然就会乱套，哈哈！

第二步，接着继续建立一个用以显示首页的样式文件style-home.css，将上面style.css文件中的内容复制一遍过来，然后把其中控制页面布局的这一行：

@import url('library/layouts/2c-r-fixed.css');

替换为：

@import url('../thematic/library/layouts/3c-fixed.css');

更改后的style-home.css其内容应该是这样的：

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css'); //主管三栏布局
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

对比一下上面所建两个样式文件，不同之处其实只是一个布局上的问题，两栏布局引入2c-r-fixed.css，三栏布局则引入3c-fixed.css，仅此而已，多么简单！接着下来就是如何调用这两个样式表文件的问题了，也并不复杂。在子主题的functions.php文件中加入以下代码（如果没有functions.php这个文件，可以自己创建一个）：

// filter thematic_create_stylesheet to implement your own stylesheets
function my_stylesheet($content) {

// We test if we're on home or on your frontpage
if (is_home() || is_front_page()) { 

// let's load the 3c-fixed layout
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_directory') . "/style-home.css";
$content .= "\" />";
$content .= "\n\n";
} else { 

// let's load the 2c-r-fixed layout
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_directory') . "/style.css";
$content .= "\" />";
$content .= "\n\n";
} 

// $content will be handed back to thematic_create_stylesheet
return $content;
} 

// connect the filter to thematic_create_stylesheet
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

主要代码分释：

第一段，利用thematic_create_stylesheet 过滤，开始执行之前所建的两个样式表；

第二段，判断是否为首页；

第三段，如果为首页，则调用三栏布局样式表文件3c-fixed.css；

第四段，如果为非首页页面，则调用两栏布局样式表文件2c-r-fixed.css；

OK了，现在博客的页面已经拥有了两种不同的样式，打开首页是三栏布局，打开其他页面则是两栏布局。以后若要修改页面样式，只需从style.css或者style-home.css这两个文件下手即可。

小结：以上方法在Thematic 0.9系列中通过其内置的子主题（也就是Thematic主题根目录下的那个thematicsamplechildtheme）测试证实可行。不过，我在想，既然创建两个不同的样式表会产生两种不同的页面布局，那么，如果再多建立两个不同的样式表，是不是也能够多生成两个不同的页面布局呢？我想答案应该是肯定的，以后有时间再自己实战测试一下，然后再献上来与朋友们分享。

本文代码来源：thematic4you