博客

WordPress 当然也有表单的验证，不过大家都知道用户体验一点都不好，页面发生跳转，有时还会把表单清空了，而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容，WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发，工作原理看注释。

//表单验证
$(function(){
    $('#submit').click(function(){
        var $author=$('#author').val();   //名称
        var $email=$('#email').val();     //邮箱
        var $url=$('#url').val();         //网址
        var $textarea=$('textarea:first').val();   //评论
        var $errorNo=0;
        if($author==""){
            $('#author').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#author').css("background","#FFF");
        }
        if($email==""){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#email').css("background","#FFF");
        }
        if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
            $('#url').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#url').css("background","#FFF");
        }
        if($textarea==""){
            $('textarea:first').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('textarea:first').css("background","#FFF");
        }
        if($errorNo>0){
            return false;
        }
    });
});

这样一个非常简单的表单验证就出来了~效果就是小博现在这样，欢迎指正改进~

PS:8月14日修正，更严密的正则表达式。
PS2:2013年10月18日修正，真是弄巧反拙，简单复杂化……现已修正。

发现很多博客都添加了边栏的显示隐藏功能，但是没有保存状态，只要一切换页面边栏又出来的，隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程，使边栏隐藏状态保存到 Cookie ，切换页面照样隐藏，效果就像小博这样。

本来我使用的 jQuery 代码是五木好同志的“完美终结版”，但是使用 cookie 后会出现第一次点击无效的情况，估计是因为他使用的是 toggle 方法，toggle 就是模拟鼠标的连续单击事件，在两种状态下切换，隐藏边栏是第一状态，如果你本来就隐藏了边栏，第一次点击时还是切换到第一状态，其实状态没有改变，出现无效点击的错觉。

下面分享我使用的方法：

jQuery(function(){
	var thesidebar = $.cookie("sidebar"); //读取cookie "sidebar"的值
	if(thesidebar=="hide"){  //"sidebar"的值为"hide"则隐藏边栏
		$('#sidebar').hide().prev().animate({width: "860px"}, 1000); //隐藏边栏并设 #content 宽860px，宽度和速度要修改，结构不同也要改~
		$("#menu-item-2304 a").text("显示边栏"); //修改按钮文字，这里使用的是控制按钮的ID，肯定要修改的
	}
	$("#menu-item-2304 a").click(function(){ //设置按钮点击动作
		if($('#sidebar').is(':visible')){ //如果边栏显示则执行以下代码
			$(this).text("显示边栏");
			$('#sidebar').hide().prev().animate({width: "860px"}, 1000);
			$.cookie("sidebar", "hide", { expires: 3 }); //写入属性 sidebar ，值为 hide ，有效时间 3 天
		}else{ //如果边栏隐藏则执行以下代码
			$(this).text("隐藏边栏");
			$('#sidebar').delay(800).show(0).prev().animate({width: "599px"}, 800); //显示边栏并设 #content 为原来的宽度，宽度和速度要修改，结构不同也要改~
			$.cookie("sidebar", null); //删除 cookie "sidebar"
		};return false //点击链接不跳转
	});
});

原理通过上面的注释应该可以理解了，哈哈。要注意一点，jQuery 本身是不支持 Cookie 操作的，需要使用官方的插件，你可以在这里下载到，http://plugins.jquery.com/project/Cookie，下载后像挂 jQuery 库一样挂上，那就ok了。

具体情况是这样，某个博客的所有日志都有“[视频]”或“[图片]”这样的前缀，现在想把这些前缀去掉。其实方法非常简单，用替换字符函数即可，将“[视频]”或“[图片]”替换成空字符串，语句：

UPDATE wp_posts SET post_title = REPLACE(post_title, '[视频]','');
UPDATE wp_posts SET post_title = REPLACE(post_title, '[图片]','');

然而一时没想替换来，找到了取指定字符数后的所有字符串：

UPDATE wp_posts SET post_title = SUBSTRING(post_title,5);

使用 SQL 语句就省去了很多劳动力呀。

多次打开添加新文章的页面，然后以同样的次数关闭，我发觉我进入了一个误区，就是为了别人而写博。想当年没有流量的时候什么蛋疼傻逼的东西我都会写一下，然而现在稍微有几个好同志浏览，我就傻逼了，我要拿出月光博客转来的东西背熟，那就是相传已久的“博客为谁而写”，来，跟我一起背：你的博客是为你自己而写，博客作者绝对不应该迎合自己的读者，坚持自己的原则是写作的底线，无论你的博客是出名还是不出名，博客始终都应该是为自己而写的，博客本身就是一个个性化的平台，为了他人而改变自我是一种可悲的事情，如果你的博客连为自己写作的能力都无法达到，那么你的博客就已经死亡了。

言归正传，刚才把硕大的文章尾部广告隐藏了，有点本末倒置的嫌疑，然后在评论框旁边加上了，使用了 ZWW 大叔（我觉得这称呼特亲切，虽然你老大已不小，虽然我是男的而且取向正常…我多次提到 ZWW 是因为他是我心目中的一个牛逼，而且小博用的是他的皮）的唆使读者点击的背景图。广告这东西，对我来说点缀的功能更多些。

PS：蟑螂药投放效果显著，未曾看见蟑螂出没，还发现一只倒在毒药旁，善哉善哉…

就在不久的刚刚，我竟然把主机根目录的文件全部删掉了！说真的，当时我心跳加速了，心想没了没了啥都没了…我让自己冷静下来，因为我是打有准备的仗的。我是想删掉一个新站的文件的，却把另外两个站都搞掉了，包括小博…其他都可以不要，小博不能不要！

我翻看备份的模板文件，8月4日！昨天！好！很好！我太细心了~我太聪明了~折腾几下就把小博弄复活了，这相当于挂主机的演习，当初把图片附件托在其他地方并且及时备份折腾成果成就了这次的胜利，谢谢。

各位同学在搞这搞那前后千万别忘了备份啊。

这两天投入到驾校学习中，发觉学车没有之前那么痛苦，只因年轻淫出现了，而且有女生！不再像寒假时的孤零零…博客我觉得已经差不多了，接下来想认真写写日志，折腾就少一点了，各位大牛小牛乳牛继续努力，以后再窃取你们胜利的果实。

我第三次申请 Google Adsense 了，第一次由于少不更事，凑到10美元时被k了，申诉无果；第二次，很快就被k了，估计有了案底；第三次，就是现在了，测试几天看结果…感觉广告给博客增添了不少色彩。广告放到文章底部，而且无耻地设置为访客可见，主要是防止自己误点…Orz…千万别作弊。

这几天参观牛们的博客都得到回复，喔呵呵呵呵，鄙人颇感快慰。

不知道什么时候开始我有了完美主义者的特征:
1、在工作的时候，别人说话或打岔时，注意力会被破坏，并且由此感到愠怒
2、在计划购物时，不想理睬促销的人，而是去找一些你需要的信息然后再作定夺
3、对那些随随便便的人感到非常厌恶，并且暗自批评他们对自己的生活太不负责
4、不停地想，某件事如果换另一种方式，也许更加理想
5、经常对自己或他人感到不满，因而经常挑剔自己所做的任何事或他人所做的任何事
6、经常顾及别人的需求,而放弃自己的需求和机会
7、经常认为干任何事都是全力以赴的，却又常常希望自己能够再轻松些
8、常常心里计划今天该做什么，明天该做什么
9、经常对自己的服装或居室布置感到不满意，而时常变动它们
10、不断地为别人没能一次就把事情做好，而亲自去重做这项工作

以上内容来自百度百科。

完美主义的特征在折腾模板上体验得淋漓尽致（各个浏览器显示正常、页面和 CSS 符合 W3C 标准如此等等），就连统计也考虑了很久才使用 Google Analytics ，原因是代码不用插入到 html 标签里面，所以，Monster 代码质量分析可以 0 错误（虚荣），打住！不要再谈这些蛋疼东西了，轻松点。

话说以上10条特征每条都超过80%符合我，我是完美主义者？我是完美主义者！折腾的完美主义者！蛋疼的完美主义者！万恶的完美主义者！我不要做完美主义者…

童鞋，你是蛋疼的完美主义者吗？

PS：谨以此蛋疼文字迎来新的月份。

为了找到真理，原文基于vertical-align的表单元素垂直对齐方式研究不厌其烦地进行测试，此精神值得我们学习。

而结论也非常简单，看真相：

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

小站使用的是 ZWW 的 zSofa ，显然还能看出一点原来的影子。此模板最大的特点呢，是大家看不到的，那就是 single、archives、index 等页面整合在一个 index 中，或者说是没有 single 和 archives 页，通过判断显示不同的内容。这有什么好处呢？控制体积？作用不太明显，而且对于修改者来说需要更多的理解时间…囧。

基本上使用后就没有停止过修改，期间参考过很多牛人的博客，学习了不少东东，让我回忆回忆做了些什么。

去掉/修改：
1.收窄了；
2.导航使用 WordPress 3.0 的自定义菜单；
3.分类目录页只显示文章标题；
4.使用 Google 自定义搜索引擎；
5.去掉后台模板设置项，自觉很多余；
6.评论部分的 CSS 与其他 CSS 分开，只在有评论的地方调用；
7.去掉 CSS 中大量多余属性，并将部分插件的 CSS 整合到一个文件，然后使用工具压缩、合并；
8.替换原来的分页；
9.评论倒序，输入框搬到评论上方

增加了：
1.首页文章收缩；
2.导航菜单、搜索框、边栏、返回顶部的动态效果；
3.lazyload 图片渐显，lightBox 图片查看
4.页面 loading 状态显示；
5.小图标区分内外链
6.“上一篇”和“下一篇”；
7.相关日志标题添加标签；
8.手动维护的 keywords 和 description
9.文章标题和友链的 title 美化
9.启用的插件:Akismet,Baidu Sitemap Generator,cbnet Different Posts Per Page,Code Markup,Comment Info Detector,DB Cache Reloaded,Google XML Sitemaps,Simple Tags,WP-PostViews,WP-Syntax,WP Keyword Link

全世界好像只有我在折腾…习惯了每修改一次就备份一下，然而今天备份次数特别多，5次。认识的人中类似我的还是好像没有的，今天又周期性地感触起来:作为电子商务的学生我很不关心电子商务。

模板就这样好了，不改了，做点别的，找个时间把模板用到的东西总结一下~