现在的主题基于wlsy的simpleG, 主题包里给的链接是

http://www.g9net.com/2009/02/05/wordpress-theme-simpleg.html

, 不过貌似已经失效了… 偶把这个主题改了改, 以更符合偶被广泛批评的审美观.

说明下, 当你看到这篇文章的时候, 偶的施工已经基本完毕了. 所以很多东西你是没法具象地理解的, 所以这篇文章对你来说没有太大作用, 是的, 现在你就可以停下来了. 偶的文笔很一般, 技术就更烂了. 下面这些乱七八糟的你本来就不感兴趣, 指不定里面还有很幼稚的错误. 读下去对你有百害而无一利. 你还想继续围观? 好吧, 随你, 偶已经提醒过你了…

TODO

开工, 首先明确需求, 有哪些不太爽的地方:

• 首页标题的字体确定是什么, 比较奇怪的显示.
• 超链接的颜色和语义强调的颜色混淆, 要修改.
• 导航条的悬停颜色需要修改, 偏深了.
• 将页面放到导航条上面去.
• 博文标题的字体需要调大些或者加粗.
• pre的背景需要再浅一点.
• 提交评论的按钮是英文的.
• 右边边栏适当增加文字间距.
• 超链接的样式不统一.
• 页脚太高了, 弄简单点.
• 调查下页面宽度, 方便的话弄宽点.
• 围观下其他页面, 看有没有i18n问题
• 发文日期希望能具体到分钟.

步骤

工欲善其事, 必先利其器. 首先要做的事情是把以前懒得没去装的web开发插件装上, Colorzilla, Firebug, Measureit, Web Developer. 还算比较大路货吧.

接下来的没有绝对的步骤之分吧, 偶是想到哪个就做哪个…

首先看到字体, 原主题作者给出的字体替换顺序是:

"Lucida Grande",Verdana,helvetica,Arial,Tahoma,Sans-Serif;

为了让偶自己觉得好看点, 我在最前面加上了苹果的圆体:

"Vera Sans Yuanti", "Lucida Grande", Verdana, helvetica, Arial, Tahoma, sans-serif

据说有句俗话是一人吃饱全家不饿, 本着类似的精神, 剩下的字体替换顺序偶就懒得变了…

接下来处理的是pre, 这个tag相对来说比较独立, 比较容易处理, 找到这一行:

pre {background:#ccc;border:1px solid #DDD;overflow:auto;padding:10px;}

这一段我有几点不太喜欢: 首先是背景太深, 其次是上下的padding有点太大了, 另外, 这段里面border加了之后基本没感觉, 于是拿过来改了改:

pre {background:#ddd; border:1px dashed #aaa; overflow:auto;padding:5px 20px;}

现在的border比较明显, 但是也没到影响读者注意力的程度. 至于留空, 上下的留空我改小了, 左右的留空我改大了.

写到这儿, 偶发现页面宽度要早点改为好, 后面发现问题也容易补救. 拿Firebug看了看, 貌似正文宽度是在content这个div里被指定的. 跑过去一看, 发现已经给到960像素了, 哎哎, 再加大那么一点点也没啥实际意义了, 宽度这一点就算了吧.

接下来偶处理的是导航条, 原主题作者估计是和他的博客有相应的整合, 所以有这种导航条的配置. 导航条的内容在menu.php里面定义, 偶把这个文件改成了:

<li> <a href="/">首页</a></li>
<li> <a href="/about/">夏恺</a></li>
<li> <a href="/books/">书单</a></li>
<li class="rss"><a href="/feed/rss/">Feed</a></li>

对, 原来的动态内容全部静态化了, 这样的问题是如果我需要在首页上添加一个主页面时, 我会需要编辑menu.php这个文件, 不过我想这个我还能接受. 另外, 这样的好处是理论上能够更快那么一点点… 现在的问题是, 这儿的空间浪费比较严重, 不符合我的习惯. 于是我想把这个导航条放到上面去. menu.php这个文件是在header.php这个文件里被导入的. 打开这个文件后我又发现可以静态化的东西了, 顺手修了一把, 然后发现工作量就开始变大一点点了. 偶要把logo, 描述以及导航条放到适合的地方, 不过还好这边的定位还不算太困难. 在把网页拿到本地编辑了十分钟后, head的问题就搞定了~

博文标题字体大小也是比较容易调的, 找到那一行, 原始大小是18像素, 调成20就可以了.

页脚要弄简单点? 还有什么能比没有更简单呢? 反正本来也不太需要页脚来着…

下一个问题是将发文日期精确到分钟, 这个日期是由the_date函数给出的, 稍微搜索了wp的源代码, 发现这个函数是能够接受一个时间格式做参数的, 于是也是速度搞定~ 改完后, 这儿是酱紫的:

<?php the_date("Y-m-d H:i"); ?>

右边边栏的文字间距, 实际上也就是最近评论这一项的间距有点不正常, 这个也是比较容易搞定的, 找到对应的内容修改就可以了. 我在widget_recent_comments这个class里面增加一点点上下的margin就搞定了.

写到这儿, 基本上只剩下超链接风格统一和i18n的问题了, 后面那个虽然比较碎, 但是不算纠结, 于是先搞定i18n吧. 在几个页面上找了找, 改了一群php文件的内容就搞定了~ 剩下一个日历的月份貌似还没改, 也懒得看了…

配色… 现在的黄瓜色我还是蛮喜欢的, 不过稍稍有点深了, 于是改亮了一点~ 原来是8aab46, 现在统统改成了7d7. 改完之后发现和header的颜色有点小冲突, 于是把header的背景色改掉.

首先是上传, 前几天js, 视图, 文件句柄这块的代码比较乱, 今天首先整理了下. 保证代码中只有最简单的逻辑, 包括文件上传前js提示上传了什么文件, 视图函数里不保存这个文件, 而是直接返回字符串.

今天碰到的第一个问题是上传后js里面的onComplete没有执行. 我首先猜测是视图函数处理有错误. 看Apache的log发现返回的状态值是200, 这证明swf已经post过来数据而且拿到正确的返回值了. 进一步的debug发现视图函数的逻辑已经全部正确地处理完了. 我猜测是由于我的视图函数太简单, 没有读取和处理上传的数据, 导致swf客户端有问题, 于是用python的logging模块记录了request的具体信息. 用Django文件处理的样例函数保存了上传的数据. 测试发现上传的数据能够成功地保存, 因此服务器端是没有问题的. 这个应该是比较容易理解的, 因为无论服务器端是否处理上传的数据, 这个数据在swf客户端的眼里已经上传到服务器了. 那么我们接下来应该做的事情就比较简单了: 处理客户端js脚本的函数调用, 看到底是什么地方出了问题.

要debug, 首先将这个函数的内部逻辑减到最少, 我写了一个简单的函数, 里面只有一个alert语句, 然后在uploadify初始化的调用中, 写下:

        'onSelect'       : function (event, ID, fileObj){ onSelect(ID, fileObj);},
        //'onComplete'     : function (event, ID, fileObj, response, data){ onComplete(queueID, fileObj,          response, data);},
        'onComplete'     : function (event){ simplealert();},

点击, 执行上传, 发现alert语句能够正确执行.

我特意在视图函数里面加了一个sleep. 测试发现这个alert语句是在视图函数处理完(sleep完)之后才执行的, 因此, 目前我们的代码都还是按照我们的思路在运行的.

接下来的debug让我发现我在前面犯了一个很低级的错误, 我上次为了简单将有些函数调用里的queueID简写成了ID, 而今天在我写onComplete这个函数的时候又使用了旧的queueID这个名字. 真囧. 修改好以后onComplete就能在正常的视图函数返回后显示服务器端返回的内容了.

接下来测试是否能正常保存一个中文文件. 我前面是把post过来的内容直接存到一个固定的文件里面去. 而现在我尝试根据客户端传过来的文件创建一个新文件. 当上传一个英文名的文件时, 系统运行是正常的, 当上传一个中文名的文件时, 却有问题, 日志记录下的错误是UnicodeEncodeError, 又遇到编码问题了.

现在我的目的很简单, 就是上传的文件能够全部放到/home/apache/bookshop/media/temp/这个文件夹下. 几番尝试后, 发现适当地encode所涉及到的字符串就能解决中文文件上传的编码问题了:

    name = file.name.encode("utf8")
    dir = u'/home/apache/bookshop/media/temp/'.encode("utf8")
    filename = dir + name
    dest = open(filename, 'wb+')

下次该考虑进度条相关的逻辑了~ 今天已经晚了, 就这样吧~

这几天比较忙, 也比较懒. 元旦陪我妈在广州转悠, 回到家里累到什么都不想做. 周一上班后倒是努力了一把, 做了点美工. 主要是用PS生成了一个banner和一个favicon, 如下:

前面那个小的是favicon.ico, 后面那个是banner, 我这儿看图片是灰底的(这应该是这个WP主题的默认美工), 实际上这是一个透明的png图片. 总体显示效果如下图:

赞下华康少女字体, 嘿嘿~

今天首先研究了下如何调用Uploadify的钩子, 然后做了些简单的美工~

第四天(100106)进度

对js里面函数调用还是很不熟的, 看了下代码, 实验了下, 发现下面这种调用是可行的:

'onSelect'       : function (event, ID, fileObj){ onSelect(ID, fileObj);},

函数绑定是在uploadify实例化的时候给函数名来实现的. 具体的函数定义如下:

function onSelect(ID, fileObj){
    /* What shall we do in this function?
    * 1. Hide the Upload botton.
    * 2. Show a table that would tell the user what we gonna upload.
    * 3. Fade out the table.
    *
    * Table Structure:
    * Filename     Size    Status      Cancel */
    $("#upload-form-prompt").fadeOut("slow");
    $("#upload-form-file-button").fadeOut("slow");
    var filelis = '<tr name="' + ID + '"><td class="upload-form-filename">' + fileObj.name + '</td>';
    filelis += '<td class="upload-form-size">' + humanreadablesize(fileObj.size) + '</td>';
    filelis += '<td class="upload-form-status"><span class="ui-icon ui-icon-circle-arrow-n"></span></td>';
    filelis += '<td class="upload-form-cancel"><span class="ui-icon ui-icon-circle-close"></span></td></tr>';
    $("#upload-form-queue").append(filelis);
}

这个函数执行的主要功能是淡出相应的元素, 然后将待上传的文件信息放入一个表格, upload-form-queue. 注意到为了风格的统一, 我使用了jQueryUI提供的图标文件. 这个部分没有找到比较系统的资料, 基本是按照jQueryUI的themeroller页面来的. 上面说到的表格, 我们在html中是这么定义的:

<table id="upload-form-queue" class="ui-corner-all ui-widget">
    <tr>
        <th class="upload-form-filename">文件名</th>
        <th class="upload-form-size">文件大小</th>
        <th class="upload-form-status">文件状态</th>
        <th class="upload-form-cancel">取消</th>
    </tr>
</table>

相应的样式表为:

#upload-form-queue {
    display: none;
    border: 1px darkgray solid;
    background: #eee;
    width: 700px;
    text-align: center;
    padding: 5px;
}
#upload-form-queue span {
    display: inline-block;
}
.upload-form-filename {
    width: 450px;
    text-align: left;
    margin-left: 100px;
}

如果你足够细心的话, 你会发现这个表格是隐藏起来的. 这个表格的显示是在onSelectOnce函数中实现的:

function onSelectOnce(data){
    $("#upload-form-queue").show();
}

onSelectOnce函数对一次文件选择操作(无论你选择多少个文件)只执行一次. onSelectOnce和onSelect的执行顺序是, 首先执行若干个onSelect函数, 然后执行一个onSelectOnce函数. 这个逻辑上感觉不太合理, 例如有些操作最好是在知道文件个数的条件下才好完成. 不过我这个只用不写的人就不要多说话了…

在整个界面完成后, 上传是自动开始的, 不过目前我们先加了一个测试用的超链接, 用来触发上传操作:

<div>
<a href="javascript:$('#upload-form-file-input').uploadifyUpload();">上传</a>
</div>

此时我点击按钮, 选择要上传的文件后, 刚才隐藏的#upload-form-queue这个表格会出现, 里面有我所选择的待上传的文件:

此时, 如果我定义OnOpen函数, 则能正确alert出待上传的文件的相关信息.

今天处理昨天留下的一个显示问题. 一方面, 这样写就的按钮没有鼠标悬停等效果, 另一方面, 在单个页面状态下(没有使用jQueryUI时), 前文所述的按钮显示是正常的. 而在我编写的实际页面中, 这个单独的页面实际上是通过ajax方式调用而来并显示到一个标签页中的. 此时这个按钮确无法正常显示了.

第三天(091221)进度

前一个问题比较容易解决. 昨天我尝试了很多jQuery选择器的方法都无法选择object, 后来就放弃了. 今天换了个思路, 给这个object会出现的地方加了一个span来包裹起来, 然后选择这个span就可以了:

<span id="upload-swf-wrapper"><input type="file" id="upload-form-file-input" /></span>
<span id="upload-form-file-button" class="ui-state-default ui-corner-all fg-button">上传文件</span>

然后在jQuery里面写:

    $("#upload-swf-wrapper").hover(
        function(){
            $("#upload-form-file-button").addClass("ui-state-hover");
        },
        function(){
            $("#upload-form-file-button").removeClass("ui-state-hover");
        }
    )
    .mousedown(function(){
            $("#upload-form-file-button").parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
            if( $("#upload-form-file-button").is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
            else { $("#upload-form-file-button").addClass("ui-state-active"); }
    })
    .mouseup(function(){
        if(! $("#upload-form-file-button").is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
            $("#upload-form-file-button").removeClass("ui-state-active");
        }
    });

相应的样式表代码为:

#upload-swf-wrapper {
    height: 30px;
    width: 75px;
}

虽然这不是一个完全干净的方法, 但是对于我这个不懂Flash的人来说, 我已经做到最好了. 于是我对这个hack还是很满意的.

第二个问题就更讨厌一点了, 由于这种现象在Firefox和IE8里面都能够重现, 因此应该是我的代码里面有问题. 我尝试将这个上传的表单放到html里面, 即不采用ajax方式来调用这个页面, 发现问题依旧存在, 因此我遇到的问题应该是和jQueryUI的tab效果之间的兼容性问题. 在jQueryUI的js和css文件里面搜索了下z-index, 没得到有用的结果. 那么只能老老实实尝试了…

尝试过无效的方法:

• 将Uploadify的背景图像设成透明的gif并将hideButton设为false.
• 将body的z-index设为-5.
• 将按钮的html放在swf的前面.
• 用CreateCSS方法设置

罢了罢了, 本来上传页面就需要比较大的页面空间, 那么它作为一个单独的页面发布吧. 另外, 主页里面的其他tab也不要考虑用ajax调用了, 直接放在模板里面吧.

需求

今天有时间再整理下上传页面的需求:

1. 页面上显示一个提示和一个按钮.
2. 点击上传按钮选择文件后, 判断文件数是否为零. 如果为零, 则页面不发生任何改变.
3. 如果文件数不为零, 提示信息淡出, 按钮移位并改变大小, 添加取消按钮(全局), 和上传文件选择按钮并排摆放.
4. 显示待上传的文件列表. 包括文件名, 文件大小, 文件状态(待上传/已上传/正在上传), 取消按钮(单个文件).
5. 点击全局取消后文件列表还在, 点击单个文件取消后暂停一秒然后淡出.
6. 暂停两秒后自动开始上传.
7. 如果是单个文件上传, 进度条显示单个文件上传的进度(以大小为单位); 如果是多个文件上传, 则进度条显示总体上传进度(以文件数计算)
8. 暂时不考虑文件上传完成后的逻辑

昨天部门组织去珠海泡温泉, 晚上腐败, 玩了一天没写代码, 今天早上爬起来继续~

第二天(091220)进度

今天看了下uploadify的源码, 发现它提供了一个选项(‘hideButton’)来不显示这个swf文件. 实验了下, 发现它实际上是将这个swf的背景设为白色, 这个元素仍然可见. 又看了看调用相关swf文件的代码, 这个东东貌似是通过swfobject来调用自己写的一个swf文件. 罢了罢了, 想要实现我先前的隐藏swf的设想似乎是不太靠谱的, 退而求其次吧. 把这个东西的背景设成白色, 然后放一个z-index比较低的按钮在那儿吧, 这样用户看似点击了按钮, 实则点击了这个swf, 希望这样风格能够统一点. 至于背景色不是白色的情形我们到时候再单独处理吧.

上述思路的实现: 首先在jQueryUI中创建一个按钮出来, 这部分代码很简单. 我们要使用uploadify, 需要在HTML中加入一个file input. 此时, 我们在file input后添加按钮即可:

<input type="file" id="upload-form-file-input" />
<span id="upload-form-file-button" class="ui-state-default ui-corner-all">上传文件</span>

添加完后发现边框和字之间没有空间, 于是给按钮的文字添加了一点空间:

#upload-form-file-button {padding: 5px;}

这样页面上应该有两个按钮, 一个是uploadify的swf按钮, 一个是我们刚创建的jQueryUI的按钮. 我们接下来需要将两个按钮重叠起来, 隐藏前一个, 并将后一个按钮的z-index调低. 我们首先通过uploadify的width和height参数将两个按钮调整到一样大. 我在Firefox 3.6中将宽度设为75, 高度设为30后, 两个按钮大小一样. 接下来要隐藏前一个按钮. 我们首先将jQueryUI的按钮放到swf的下面, 这个通过绝对定位和z-index实现:

#upload-form-file-button {margin-left: -75px; position: absolute; z-index: -1;}

这样, 后一个按钮和前一个按钮就基本完全重叠了. 不过现在的问题是swf的按钮挡住了jQueryUI的按钮. 我们还要做点点设置. 在uploadify中将hideButton设为true, 再将wmode设为透明(transparent)就可以了. 这两个选项, 前一个我的理解是设置背景色为白色, 设置完后swf的按钮消失变成了白色; 后一个是将swf元素设为透明, 这样如果swf元素和其他元素重叠, 则显示后一个元素. 这样, 我们的要求就基本实现了. 简单拿我的IE8在IE里面测试了下, 发现除了jQuery按钮的圆角效果没有出来外, 显示效果和选择效果和Firefox下一致. Firefox下的效果图:

好吧, 现在还残留了一个小问题, 鼠标悬停时jQueryUI的按钮没有应该有的动画效果, 手工添加hover函数, 甚至在uploadify里面添加hover函数貌似都没成功. 这个等有时间再解决吧~

上一篇博客里面提到我想写一个电子书分享管理系统, 这个系统里面必不可少的部分是文件上传的实现. 这篇文章会写下我在实现这个功能时的想法和具体操作.

需求: 上传界面, 一开始页面上只有一个上传按钮, 点击按钮后选择一个或多个文件上传. 上传过程中不刷新页面, 显示进度条. 开始上传后, 显示界面提示让用户填写书籍相关信息. 例如书名, 作者, 出版社等等. 从文件名正则匹配拿到尽量多的信息. 匹配出来的东西显示在对应的输入框里面, 剩下未识别的内容允许用户拖动到对应的域里面去. 如果是单个文件上传, 上传完成后服务器端代码用适当的工具软件读取上传完的文件, 从里面拿到适当的信息, 也反馈到客户端, 也能够让用户拖动等等. 如果是多个文件, 则在填写文件信息的页面上提供导航功能. 如果某个文件信息填写已完成, 而文件上传尚未完成, 提示用户需要等待上传完成后才能提交文件信息. 好吧, 这个是一个很纠结的需求…

参考链接:

• jQuery插件: Uploadify

第一天(091217)进度

今天基本是在调研. 前两天找到一个ajax上传的jQuery插件, 是点击按钮后上传. 看了看这个插件的代码, 发现它的原理是点击按钮后创建一个隐藏的file input, 然后通过一个隐藏的iframe来提交文件, 这样能够在页面不刷新的情况下上传文件, 思路很是直接. 今天又看了看, 发现这个插件不能满足我的要求, 因为它肯定没有办法支持多个文件同时上传. 这个是HTML表单的限制, 单个file input里面只能放一个文件. 网上有另外一个jQuery插件来实现HTML/js的多文件上传, 思路也很直接: 创建多个file input, 除了显示一个file input以外其他全部设为隐藏. 这个js的缺点在于不能一次选定多个文件, 而且在不改源代码的情况下, 似乎没有办法让已经选定的文件立即开始上传(因为这个似乎没有做ajax上传, 好吧我没有特别认真地去看代码, 也许它的确有这个功能). 最后找到的Uploadify也许能够实现我想要的功能. 这个插件利用Flash来打开文件选择窗口, 这样我们能够在上传窗口中同时选取多个文件. 于是我打算拿这个插件来试试.

试用Uploadify: 这个插件的大小有点唬人, 最新版标称大小是600K+, 不过实际上js脚本大小只有几K, 即使包括其他的资源文件, 也是很小的一个插件. 看着demo页面的html改好了, 试验下, 发现目前有这么几个问题:

1. 按钮颜色和我用的jQueryUI的smooth主题不搭
2. 按钮的字写的是BROWSE
3. 没有选择后立即上传, 而是点击上传链接后上传
4. 上传的进度条没用jQueryUI的进度条

这几个问题都有希望能解决. 第一个和第二个实际上是对这个swf文件的不满. 有几种思路来解决这些问题: 首先想到的是改flash源文件, 这个文件在作者提供的压缩包里面有, 改的话也不算难, 拿Flash打开, 改改就行了. 不过存在的问题是不具有普适性, 不方便修改. 后来发现这个插件的配置项里面有相应的选项能够修改按钮的提示内容和背景图片, 不过这个仍然不是完美的解决方案. 我设想能够将这个swf隐藏起来, 自己创建一个按钮, 点击这个按钮时调用swf的内容来实现多个文件的选择, 这样完全不依赖这个插件的swf文件, 最好了, 不过能不能这样tweak还不知道. 明天再尝试下. 第三个问题也应该比较容易解决, 这个插件给了很多钩子, 能够很容易地自定义(写到这儿, 不由得想怒赞下这个插件!), 没有尝试过, 不过应该能够得到解决, 最后一个问题是进度条, 这个看起来也不会是太大的障碍. 明天有空再解决吧.

1. 和一群人交换链接
2. 改css和图片, 这个主题太窄了, 80个字符的代码都不能在一行显示….
3. 开Shell权限, Hostmonster反应速度有点慢
4. 架Django
5. 把最近整django admin的一些经验写下了, 要不然过了两周就什么都忘了…
6. 加个favicon.ico
7. 填充关于页面…