网站装修笔记20120331

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

页脚的百度统计

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

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

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

以上

用CSS3制作尖角标签按钮样式

演示地址:http://jiongks.name/demos/css3-tag/

CSS 3 tag demo

如图的效果。标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈。

  • 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片
  • 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的html结构

    <p>
    <a href="#">Tag1</a>
    <a href="#">Tag2</a>
    <a href="#">Tag3</a>
    <a href="#">Tag4</a>
    <a href="#">Tag5</a>
    </p>

之所以可以达到这样的效果,是因为我们运用了一些比较巧妙的技术。接下来告诉你实现方式:

阅读剩余部分...

分享Typecho插件:Markdown 解析器 + 编辑器

  1. 该插件是在 明城 的“使用 Markdown 解析器”的基础上完善的。
  2. 使用 Markdown 语法 编写和发布文章。
  3. 在正文上方加入了简单的格式按钮;
  4. tab键自动输入4个空格;
  5. 正文下方加入了预览功能;
  6. 在侧边栏加入了语法提示。

下面是三张截图,一个是工具栏,一个是预览区域,一个是语法提示区域

工具栏

预览

语法

有需要的童鞋可以移步到这里下载,但特别注意:一定要放在/usr/plugins/Markdown文件夹下,其它命名可能会导致500错误(感谢大家的反馈,我之前没有注意到这个细节)。

分享Typecho皮肤:我的字很大

截图

没错,就是前面提到过的字很大的皮肤,我给这款皮肤起了个非常土的名字叫:“我的字很大

有几点说明:

  1. 侧边栏我隐藏掉了,并没有预留合适的位置,因为希望界面简介
  2. 搜索栏我隐藏掉了,但预留了位置,就是右上角,在style.css文件里去掉#search {display: none;}那一段就好
  3. 右下角的文字算是版权信息,是通过创建body的一个css伪元素实现的,略有一些技巧,如果大家觉得碍事,当然可以在css文件中去掉
  4. 对IE6效果做了简单的降级

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

汇总自己过去的一些HTML5科普文章

新网站开张总得找点东西充数,刚好我这阵子集中看了一些w3c关于html5的文档,所以顺道把之前看过的东西汇总了一下。这些内容如果今后继续有积累的话,还会保持更新。

另外诸位对哪些html5新特性有科普需求的,不妨留言在下面,我会尽力而为 :-)

目前这些内容的最近更新时间是2012年3月

阅读剩余部分...