请叫我一米

主题名称: AirSquare

主题链接: https://yimity.com/2011/12/01/airsquare.html

主题描述:AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。

主题版本: 1.0

主题作者: 一米

网站预览: http://demo.yimity.com/ 预览主题启用 Windows Phone 7 风格

后台预览：请发邮件给我，我给你地址和账号。

发布日期：12月01日。

主题预览：http://demo.yimity.com/

介绍：

AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。即使 JS 加载失败，功能同样正常可用。

安装：

1.将本文件解压，得到 airsquare 文件夹及其内部文件，将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台，外观-主题， 选择 AirSquare 主题，并且激活。

3. 进入后台，设置-阅读，博客页面至多显示 24 篇文章。

使用：

1. 上传成功，并激活成功即可使用。

2. 在 外观-主题选项中，点击“主题选项”即可设置相关的选项，不要忘记点击“更新选项”哦。

3. Logo 地址处，填上 Logo 图片的地址即可。 逐渐更新支持。

4. 后台所有输入框 HTML 都是可用的，但是建议该用的时候用，不该用的就不要用。

5. 统计代码 可以使用单选框选择是否可用，选中状态则起作用，否则统计代码即使在后台能看到，但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后，则会在鼠标悬停于右侧的时候搜索栏得最左边显示链接。

7. 多语言支持。目前只有中文简体，繁体中文及英语。

9. 其他任何问题，请联系 [email protected]。谢谢。

10. 主题为 1.0 版，如有先关建议或 Bugs 也请发邮件，谢谢。

当然，此份主题不是免费的，但是只出售 10 份，每份 99 元人民币。同时附赠价格同样 99 元的 BreakUp 一份。

购买者，享受不限时一对一服务，但是也只是我一人，当然了，大家都有工作，最好是晚上，最最好是星期周末把。

购买者，发送 知乎 邀请一枚，Hostloc 要请也有。

购买者，可以享受右侧页脚搜索栏社会化图标的更换服务。

最后，当然是走支付宝，你放心，我放心。

更新日志：

更新 , 时间 , 版本

增加留言模板和友链模板 , 2011.12.01 , 1.0.1

优化文章内容样式 , 2011.12.02 , 1.0.3

添加登陆后编辑功能 , 2011.12.14 , 1.0.4

话说，文件上传控件的样式，就如同下拉框的样式一样，没办法通过 CSS 直接进行控制，虽然不影响正常的网页浏览，但是对于一个设计师的心血来说，不能完全还原，还是比较令人郁闷的，但是，活人总不能叫尿憋死，所以总是有很多方法能够达到我们的目的，例如： Mr.Think 的这篇文章，或者这篇文章。但是第一个不兼容IE6，比较遗憾，虽然我现在在自己的项目上坚决不支持IE6，但是，解决方法还是要掌握的。

另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同，具体就不举例子了。

最近想到这个问题，所以写出来和大家分享下，也兼容IE6，那就是，用一个层，将 input 空间给包裹起来，然后将控件相对定位，将包裹的层，例如 a 绝对定位到控件之上，并且给其样式，可以使用 span 或者 a 元素，由你喜欢，但是为了兼顾 IE6 ，还是用 a 比较好，因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例，span 或者其他的，就自己发挥吧。

先看图。

那么接下来，就看代码了。

先是结构

	<input type="text" id="a" readonly="readonly" />
	<a href="javascript:void(0);" class="input">
		浏览
		<input type="file" id="file">
	</a>

此处第一个 input 为模仿 文件路径的输入框，使用 javascript 在选择完成之后，把文件路径填到此处。第二个 a 标签模仿控件，第三个 input 是实际起作用的控件，只不过隐藏了而已。

然后是 CSS

a.input {
	width:100px;
	height:25px;
	line-height:25px;
	background:#08f;
	text-align:center;
	display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
	overflow:hidden;/*去掉的话，输入框也可以点击*/
	position:relative;/*相对定位，为 #file 的绝对定位准备*/
}
a.input:hover {
	background:#f80;
}
a{
	text-decoration:none;
	color:#FFF;
}
#file {
	opacity:0;/*设置此控件透明度为零，即完全透明*/
	filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
	font-size:100px;
	position:absolute;/*绝对定位，相对于 .input */
	top:0;
	right:0;
}

然后是 javascript 代码，此处给了 原生的 javascript 和 jQuery 方式。

原生 javascript

<script type="text/javascript">
	var input1 = document.getElementById("file");// 获得控件对象
	input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
	function inputPath() {
		var input2 = document.getElementById("a"); // 获取 input 对象 input2
		input2.value=input1.value;  // 将控件 input1 的值赋给 input2 
	}
</script>

jQuery 方式

<script type="text/javascript">
$(function(){
	$("#file").change(function(){  // 当 id 为 file 的对象发生变化时
	        $("#a").val($("#file").val());  //将 #file 的值赋给 #a 
	})
})
</script>

OK，打完收工.

对，还有演示呢：

主题名称: BreakUp

主题链接: https://yimity.com/2011/08/01/breakup.html

主题描述:BreakUp. 全站 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。

主题版本: 0.8

主题作者: 一米

网站预览: https://yimity.com/

发布日期：8月6日，七夕节。

介绍：

全站 Ajax 支持，SEO 不受影响，JS加载失败，同样可用。支持键盘左右键翻页，支持图片标志，支持自定义菜单，自适应宽度设计。

安装：

1.将本文件解压，得到 breakup 文件夹及其内部文件，将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台，外观-主题， 选择 BreakUp 主题，并且激活。

3. 进入后台，设置-阅读，博客页面至多显示 1 篇文章。

使用：

1. 上传成功，并激活成功即可使用。

2. 在 外观-主题选项中，点击“主题选项”即可设置相关的选项，不要忘记点击“更新选项”哦。

3. Logo 地址处，填上 Logo 图片的地址即可。

4. 后台所有输入框 HTML 都是可用的，但是建议该用的时候用，不该用的就不要用，比如 网站描述或者关键字。

5. 统计代码 可以使用单选框选择是否可用，选中状态则起作用，否则统计代码即使在后台能看到，但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后，则会在导航栏最右边链接。

7. 描述及关键词 SEO内容，如果是首页，则显示后台设定内容，如果是单页则会使用当前文章的前200字符作为描述，此文章标签作为关键字。建议最好填写。如果不填写，则默认为站点标题和副标题。

8. 多语言支持。目前只有中文简体，繁体中文及英语。

9. 其他任何问题，请联系 [email protected]。谢谢。

10. 主题为0.8版，说明只是到目前为止的完善，如有先关建议或 Bugs 也请发邮件，谢谢。

当然，因为我最近想买一个可以看书的 Android 平板，所以此份主题不是免费的，但是只出售 10 份，每份 99 元人民币。现接受预定，预定期8月1日至5日晚24时止。预订价 88 元。先付 10 元定金即可。不买不退哦亲。

购买者，享受不限时一对一服务，但是也只是我一人，当然了，大家都有工作，最好是晚上，最最好是星期周末把。

购买者，发送 G+ 邀请一枚，如果想要 知乎 邀请也有，Hostloc 要请也有，现在又增加了 Google Music 邀请，不过只有两枚。还有我可以邀请的，都可以邀请你。

购买者，可以享受首页导航右侧社会化图标的更换服务。

额，我要忙死了。为了平板值！

最后，预定链接：http://item.taobao.com/item.htm?id=12445127655  支付宝，你放心，我放心。

更新：时间 版本

2011.8.16 0.8.1
1. 更改左右方向键翻页为上下 Page 键翻页，防止评论时冲突。
2. 修复评论上部的 回复 和 引用 错误。
3. 完善菜单，增加支持三级菜单，鼠标悬停“网络”可查看。
4. 更新语言文件
5. 计划改变首页样式，中间为文章列表，右侧为侧边栏，单篇文章则中间为文章，右侧为评论。

其实很简单的，代码是大神的代码，只是作为一个记录而已。那就上代码。

此函数的主要作用为：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload=func;
    }else {
        window.onload = function() {
        oldonload();
        func();
       }
     }
   }

1. 把现有的 window.onload 的事件处理函数的值存入变量 oldonload 。

2. 如果在这个处理函数上还没有绑定任何函数，则默认把新函数添加给它。

3. 如果在这个处理函数上已经绑定了一些函数，就把新的函数追加到现有指令的末尾。

使用的时候，就类似于这样。

addLoadEvent(函数名);
addLoadEvent(函数名);

例如：

addLoadEvent(a);
function a() {
//something here
}

升级了 WordPress 3.2 之后，主题有些许不兼容了，表现在我的 lazyload 插件不能用了，还有我的返回顶部插件，我的 ajax 评论插件也不能用了，怎么办呢，找问题呗，然后就发现是新版本的 WordPress 使用的 jQuery 库为 1.6.1 版本，和我某些插件的 1.4.2 版本不兼容，OK，问题找到了，那就解决问题。
其实很简单，就是一句代码，在你博客主题文件中的 function.php 文件中，添加一段代码即可。

<?php wp_deregister_script(‘jquery’);？>

作用就是反注册 jQuery 这个 js 库。从而使 WP 不加载 jQuery 这个库。所以 WP 就不加载 1.6.1 版本的这个 jQuery 库了，但是要手动在主题的 header.php 中引用兼容版本的 jQuery 库。

其实，还有一个重要的问题，就是 使用了这个代码之后，WP 后台很多需要 jQuery 的功能都不正常了，那就没办法了，不使用这个代码了。但是去掉之后，如果 jQuery 没有回去，那就用另外一句代码让它回去。

<?php wp_register_script(‘jquery’); >

嘿嘿嘿，重新注册。OK。
其实，还有一种方式可以解决 js 的冲突，那就是使用

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); >

函数。具体介绍请移步这里查看。
具体方法就是在你的主题文件的 function.php 里面，添加

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action('init', 'my_init_method');
?>

然后将，里面的 js 的地址，换成你想使用的地址即可。当然了，那个 jquery 关键字，也是要替换的。

不过貌似后台必须使用1.6.1才可以，唉，我的lazyload要割爱了啊。

打完收工。

看到蓝色理想上有人问这个效果，而且刚好项目不是那么紧张，所以就简单的写了一个效果，也是基于 jQuery 的，关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可，好了，废话少说，上代码，还是放到最后吧。坚持传统。什么是传统，我也不知道，额。

先是 HTML 的结构，其实这里完全不用 这么多 id 的，只是为了少输入字符，代码每个字都是键盘输入，不能怪我懒，还有，如果你有好的自动补全的文本编辑器，不妨推荐下，注意啊，是文本编辑器，言归正传，对于 id 和 class 的使用，还是适可而止，不要学我啊。当然，怎么个适可而止法，不是本文的重点，那就略过。

<div id="a">
	<div id="b">
		<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
	</div>
	<div id="c">
		<div class="relative">R</div>
		<div class="absolute">
			<span>S</span><span>T</span><span>U</span><span>V</span>
		</div>
	</div>
</div>

#a是大框架，里面包括 #b 和 #c ，#b 是已经显示在搜索框上部的，当然最后一个 span 让其先隐藏，是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外，其他的例如 .absolute 都叫它隐藏，为的是鼠标移上去他才可以显示。

然后是 CSS 代码，写的不好不要嘲笑，刚入门，见谅，并且指导，或者交流。

	<style>
		body {
			width:400px;
			margin:100px auto 0 auto;
		}
		#a {
			width:400px;
		}
		#b,#c {
			float:left;
		}
		#b span, #c span,.relative {
			display:block;
			width:60px;
			height:30px;
			line-height:30px;
			background:#ccc;
			margin:0 5px;
			text-align:center;
			cursor:pointer;
		}
		#b span {
			float:left;
		}
		#c span,.relative {
			margin-bottom:2px;
		}
		.absolute {
			display:none;
		}
		.current {
			border-bottom:2px solid red;
		}
	</style>

这里就是让显示的显示，隐藏的隐藏，然后让两个.relative 和 .absolute 各就各位，也就是定好位子，这里叫布局，其实这个很简单，就是用了一个 float ，其他没有了。

然后是脚本，当然了，第一步还是引入 jQuery 库，这个不要我再写了吧，如果记不住，那就不用往下读了，直接到末尾拷贝代码吧，如果想记住，那就用手多输入几遍啊。

下面是 jQuery 代码，写的不好，见谅。

<script type="text/javascript">
$("#c").hover(function(){
	$(".absolute").show();
},function(){
	$(".absolute").hide();
});
$(".absolute>span").click(function(e){
	var $target = $(e.target);
	var text = $target.text();
	if ($(".new").text()) {
		var z = $(".new").text();
		$(".new").text("");
		$(".new").show().append(text);
		$target.text(z);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}else {
		$target.remove();
		$(".new").show().append(text);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}
});
$("#b>span").click(function(e){
	$("span").removeClass("current");
	var $target = $(e.target);
	$target.addClass("current");
})
</script>

主要是原理，代码没什么的。

先看前四行，就是数遍移上去之后，让隐藏的显示，然后鼠标移除后，让隐藏的继续隐藏，其实也就是让刚才显示的隐藏元素继续再隐他的藏。

.absolute>span， 找到 .absolute 下面的 span ，绑定单击事件 e 是参数，e.target 是 jQuery 中封装的被点击目标对象，text(); 获取被点击目标中的文字。

然后直接判断 .new 中是否有文字，有的话先把文字暂时存到 z 中，然后将这个 .new 中的文字清空，然后让他显示，并把刚才被点击对象的文字插入进去，然后再把被点击对象的文字用 z 替换下，最后将所有 span 的 current 样式删掉，再给 .new 添加 current 样式。

此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢，就是为了好找。最后那么样子删样式只是为了方便。

然后，又然后了，不要郁闷，我也不是很喜欢用这么多。

然后，如果 .new 中没有文字的话，那好办了，直接将被点击的对象的文字删掉，让后将其插入进 .new 中就好了，后面的删除，添加样式都一样。

最最然后，#b>span 也是找到 #b 中的 span ，当点击的时候，去掉所有 span 的 current 样式，然后再给被点击对象一个 current 样式。OK，完成了。

演示见了这里：点击看演示喽