网站装修笔记20120426

按照严计划,给我的网站加上了投票功能。他已经出现在了网站的侧边栏中。当然在某些media queries条件下,这些内容不在侧边,而在网页的最下面。

这从没有花太多时间在编码上。我直接引入了三方的问卷调查工具:Wufoo。等于嵌入了一个iframe。我会定期更换这里的投票内容,有些投票可能是为了我更了解大家,更好的优化我的网站为大家服务的,我会根据大家的反馈默默做出改变;而方便公开的统计数据和分析结果,我也会公布在这里跟大家分享。

第一期的投票内容比较“肤浅” 囧

您觉得现在囧克斯的皮肤好看吗?

在添加投票功能的时候,我注意到Typecho的一个不足,就是在创建新的侧边栏面板的时候,不免需要修改主题模板的sidebar.php文件,因为Typecho本身并没有给侧边栏预留插件接口,所以不可以生成自定义的侧边栏面板。我觉得改进的方式可以是这样的:

  1. 创建新的配置项,注明要显示的侧边栏面板和排序;
  2. 同时封装面板的html结构,不允许自定义面板结构,只允许自定义内容;
  3. 然后在Plugin一边加入自定义面板的接口。

这样主题模板和插件就进一步解耦,开发者就可以在不改动主题模板的情况下调整侧边栏的内容了。

一点个人心得,不知Typecho是否愿意接纳这个意见。

以上

网站装修笔记20120414

这周主要把我的几个HTML5幻灯片做了一下整理,在这里。从这次播放器的实现上看,幻灯片数据的结构约定有所改变,同时适配了更多的浏览器和设备。

在这个过程中,我也尝试了更多CSS3的变换效果,让幻灯演示多一点精彩,所以最终我为每个幻灯演示分别使用了不同的幻灯片切换动画。有3d的、有2d的,也有WP7中的Metro风格动画等等。

另外说到幻灯演示,我正在发起一个这方面的开源项目(估计经常关注我的朋友都已经听腻了),本月之内会启动。

接下来我想给网站做一个投票系统,放在侧边栏。

网站装修笔记20120406

今天为我的新网站做了两件事情:

  • 第一件事是为我的主题皮肤加入了侧边栏显示,并使用了css3 media queries技术进行了响应式设计,并借鉴了一些metro ui的思路
  • 第二件事是加入了友情链接插件,可以在侧边栏显示一些自定义的链接,方便将来和博友们交换链接

友情链接

先说友情链接插件的事情吧,我在Typecho的插件站找到了一款友情链接的插件,名字就叫Links,非常方便实用。我现在随便放了3个链接,看看样子。大家希望跟我交换链接的,可暂时留言至此,回头我会另外做个交换链接的页面。

友情链接示意图

响应式侧边栏

然后是侧边栏,我把最近文章和最近评论两个侧边栏的widget加入了名为large的css class。这类widget会在条件允许的情况下占用更大的空间。一般情况下宽度是普通widget的两倍。在一些特殊的界面宽度下,widget的宽度是一样的,大家没有什么分别。

对于css3 media queries的利用,我这里按窗口宽度分了5档1400px+/1050px+/650px+/400px+/400px-,进行响应式设计。每一档的内容宽度、侧边栏宽度和布局都不太一样。以适应不同的终端。举其中一个例子(1050px~1400px之间):

@media all and (min-width: 1050px) and (max-width: 1400px) {
    #wrapper {
        position: relative;
        padding-right: 280px;
    }
    #sidebar {
        position: absolute;
        width: 260px;
        top: 160px;
        right: 0;
    }
    #sidebar .widget,
    #sidebar .large {
        width: 98%;
    }
}

最终效果如图:

响应式设计预览

这款皮肤我会稍后更新共享在这里。

另外我最近抽空研究过了SAE Storage,接下来的事情是做一些有趣的侧边栏小控件出来,比如投票、相册、之类的。

先记下这么多

分享Typecho插件:百度统计助手

  1. 百度统计助手
  2. 只支持http协议,不支持https协议
  3. 在插件的“设置”里把统计代码最后的那串随机码填入保存即可
  4. 如果不开启统计,把填入的随机码清空即可
  5. 设置成功后页脚会多出一个百度的小图标

使用步骤

首先我们当然需要有一个百度统计的账号,然后通过这个账号生成我们要统计的统计代码(如下图):

获取百度统计代码

其中有一串随机码,我们把这串随机码记下来。值得注意的是,随机码前面有一个转意后的问号(%3F),不要把这几个字符算入随机码。

然后在插件设置中填入这串随机码(如下图),即可正常工作。

插件配置界面

有需要的童鞋可以移步到这里下载

网站装修笔记20120331

今天给我的网站加入了著名的百度统计。对,就是下面这个东西:

页脚的百度统计

相信这个小家伙会帮我更加了解我的网站的读者。
虽然就是嵌入了一段脚本,不过幕后的工作不止于此。我在此做个备忘:

  1. 更深入的了解了一下Typecho的插件机制,经过群友的提醒,才发现Typecho源码中有一组辅助插件开发的代码,它们被汇总放在了/var/Helper.php中。也弄清楚了Typecho中的Widget机制和命名规律。这让我决定通过插件的方式加入百度统计。
  2. 我不在主题footer.php中直接加入百度统计,还有一层原因,就是为了保持主题的纯净,让主题可以被其他人也使用同时不被百度统计在内。
  3. 通过插件加入百度统计之后,我又想到,可否让这个插件也分享给更多的百度统计的使用者。而不同的使用者,统计码都是不同的,这就需要我们把统计码做成一个插件的参数,而不是写死在插件里。于是又了解了一下插件的参数设置方式,把统计码做成了插件的参数。
  4. 最后,我同时研究了一些Typecho的路由机制(Routing)和SAE的Storage服务接口,这为我给我的网站加入更多的单元或板块提供了更多想象空间。

接下来的计划是把这个插件分享出来,然后重新梳理并设计一下网站的路由规则。

以上