Showing posts with label 模版. Show all posts
Showing posts with label 模版. Show all posts

Monday, September 21, 2009

用 Feed 实现 Blogger 分页

使用 Blogger 建博客,一个很不爽的问题是在首页下方没有分页功能,这会直接导致有兴趣的读者没有办法方便的翻阅以前的旧帖子;而 Blogger 提供的模板,无论是老的 Template,还是新的 Layout,都没有相关的标签来实现这个功能,因此要加上这个功能,就只能继续 hack 了。

这两天利用 Blogger 的完整帖子的 Feed,配合 PHP 实现了这个功能。思路为:
  • 读取原始的 index.html,把帖子的部分去掉,也就是 <Blogger>...</Blogger> 这段内容
  • 读取以下 Feed 地址,解析出文章的日期、时间、标题、正文、标签等,按照原来模板的格式,用 PHP 输出到原来 index.html 放文章的地方
    http://www.blogger.com/feeds/[blogId]/posts/full?max-results=[step]&start-index=[startIndex]&orderby=published
  • 根据当前页码以及总帖数计算分页,在页面底部添加分页链接
  • 如果有条件,可以利用 .htaccess 文件,将分页的 URL 由原来的
    xxx.php?page=x
    形式替换成对搜索引擎更友好的
    /index/x
    形式

如此一来,就可以在自己不存储任何文章数据的情况下,实现分页功能。当然,直到目前,以上的 Feed 地址仍然是被墙的,需要翻墙或者使用 HTTP 代理才能成功地获取内容。

Friday, October 24, 2008

挑战 XHTML 的 Strict 标准

我的 Blog 网页在 Doctype 声明上一直使用的是 XHTML 的 Strict 标准,当初在模板制作完成时是校验过的,可是随着后来无数次的修改、内容添加,现在已经不能通过 W3C 的语法校验了,加上 Google Blogger 在发布页面的时候似乎也并没有考虑目标模板的 Doctype 标准,也部分导致校验的失败。

经过一个下午的努力,终于基本上解决了所有 XHTML 的语法问题,总结如下。
<a> 标签没有 target 属性
在 Strict DTD 里面,超链接 <a> 标签 没有 target 属性,因此不能利用 target="_blank" 这样的代码来达到新开页面打开链接的目的。为了实现同样的功能,通常的办法是用 rel="external" 来替代 target="_blank",然后用如下 JavaScript 代码来处理链接:
function externalLinks() {
var linkArray = document.getElementsByTagName('a');
for (var i = 0; i < linkArray.length; i++) {
var link = linkArray[i];
if (link.getAttribute('rel') == 'external') {
link.target = '_blank';
}
}
}
然后将该 externalLinks() 函数添加到页面的 onLoad 事件中。如:
<body onload="externalLinks();">
<img> 标签必须添加 alt 属性
对于 <img> 标签来讲,alt 属性是必须的。给图片添加 alt,一方面当图片因为各种原因无法显示的时候,能给访问者以提示;另一方面也便于搜索引擎判断图片的内容,以及更准确的建立索引。
<img> 标签没有 border 属性
<img> 标签是没有 border 这个属性的。我们通常会加上 border="0",主要是因为把图片放在链接标签 <a> 里时,浏览器会加上一个链接默认颜色的边框,而这通常是多余的。在 Strict 标准中,不能用 border 属性来去掉边框,而只能使用 CSS 控制。同样 align 属性也是不存在的,要实现 absmiddle 这样的目的,也只能用 CSS 代替。
<blockquote> 标签内必须使用 block 级别的标签
<blockquote> 标签用来在页面上表示引用的内容,例如,最常见的,引用代码。我通常习惯将代码的内容放在 <code> 标签中,而这个标签是 inline 级的,不符合 Strict DTD 的要求。<strong>、<b> 等同样会导致问题。符合要求的 block 级标签包括:<address>, <blockquote>, <del>, <div>, <dl>, <fieldset>, <form>, <h>, <h2>, <h4>, <h5>, <h6>, <hr>, <ins>, <noscript>, <ol>, <p>, <pre>, <script>, <table>, <ul>。
不能使用 <embed> 标签
这个问题最容易出现在引用外部媒体文件时,例如 MP3 音乐、视频等。很多资料推荐同时使用 <object> 和 <embed> 来增强媒体引用元素的浏览器兼容性,但是很不幸的,Strict DTD 并未定义 <embed>。其实我们完全可以不使用 <embed> 一样能够兼容浏览器。例如 Youtube 给的代码一般是这样的:
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/uhsjNTEJD3c"
type="application/x-shockwave-flash"
allowfullscreen="true"
width="425" height="344"></embed>
</object>
这样无法通过校验。我们可以改成:
<object type="application/x-shockwave-flash"
width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"/>
<param name="allowFullScreen" value="true"/>
</object>
实体用法问题
在 XML 中,实体的写法是 &entity;,以一个 & 符号开头,一个分号结束。因此,Strict 标准的 XHTML 里面不允许出现任何单独的 & 符号,即使是在 URL 中用来分隔查询参数。需要用到这个符号的时候,要用 &amp; 来表示。通常一个实体用法的错误会同时导致 5 个校验时的错误,当解决以后,这 5 个错误会同时消失。由于 Blogger 在发布页面时 URL 直接使用了 & 符号,因此会直接导致 Strict 标准的 XHTML 校验失败。
重复的 id 值
对于 XHTML 标签来讲,id 属性的值必须唯一,如果一个文档中出项重复的 id 就会导致问题。出现这种问题,通常是把 id 属性放在了 Blogger 模板会循环输出的部分。
另外,Blogger 提供的模板中,backlinks 那一部分会导致 4 个不同类别的问题。凭心而论,Blogger 模板在 backlinks 这一块的代码实在写的很烂,用了三个不同的 js 文件,用 JavaScript 输出 CSS,不但使得不同模板之间难以更改这一部分显示的样式,也导致了很多 XHTML 的语法校验问题。例如 Blogger 自己的 Buzz,打开任一个文章的独立页面的源代码,Doctype 声明赫然是 XHTML 1.0 Strict,然而 backlink 那一块的代码不用校验也能看出漏洞百出。

Blogger 目前版本的网站出自著名设计师 Douglas Bowman 之手,其本人对 XHTML 以及 CSS 有着非常深刻的研究。在设计之初,Blogger 还没有 Backlinks 的功能,显然这个蹩脚的 Backlinks 是后来由其他人加上去的。不知道 Bowman 先生在看到这一幕后会做何感想。

Google 黑板报用的是同样的 backlink 代码,不过比 Buzz 知趣的是它的模板干脆去掉了 Doctype 声明。只不过作为 Google 旗下的网站,页面连 Doctype 声明都没有,也是一件汗颜的事情。

言归正传,以下列出 backlink 这部分代码导致的问题以及解决方法。
<div> 和 <dl> 之间的嵌套问题
在 Blogger 给出的默认模板代码中,是用 <dl> 来实现反向链接列表的;可问题在于,他们将 <BlogItemBacklinks> 放在了 <dl> 之内,而在生成页面时,会将 <BlogItemBacklinks> 这一对模板标签替换成一对 <div> 标签,从而导致 <div> 被嵌套在 <dl> 内。在 Strict DTD 里,<dl> 标签内只允许出现 <dt> 和 <dd> 两个子标签。解决办法是把 <BlogItemBacklinks> 放到 <dl> 外面,当然这样虽然让 XHTML 语法通过校验,但实际的运行结果,会导致每个反向链接条目会占用一个 <dl> 块,而不是预期的放在循环的若干个 <dt> 和 <dd> 中。通过 CSS 可以解决条目之间间距的问题。如果要完美解决这个问题的话,就只有自己重写 Blogger 提供的 JavaScript 函数来改变这一行为了。
<script> 标签的 defer 属性
在 Blogger 用模板生成页面时,除了将 <BlogItemBacklinks> 替换成一对 <div> 以外,还会在开标签的 <div> 之前加上一个 <script;> 用来引入相关的 JavaScript,同时给出了一个 defer="true" 属性,然而,根据 Strict DTD,defer 属性只能有一个值,只能是 defer="defer"。
<noscript> 内只能用 block 级别标签
在生成以上 <script> 标签的同时,Blogger 给出了一个 <noscript>,用来当浏览器不支持脚本的时候显示一个 Blog Search 的链接。可是 <noscript> 标签内只能用 block 级别的标签,直接用 <a> 这样的 inline 标签是不行的。
模板占位符问题
在模板中这段关于 backlink 的代码中,Blogger 用了一些模板标签作为占位符。通常模板标签会在生成具体网页时替换掉,但这里的占位符不会,它们要在实际生成 backlink 条目时被 JavaScript 程序换掉。但是在做 XHTML 语法校验时,这些占位符以 HTML 标签的形式存在于代码中,而又显然不属于 XHTML 定义的范围,从而导致校验失败。解决办法是将它们的尖括号转移,写成诸如 &lt;$BlogBacklinkTitle$&gt; 的形式,这样既能够被 JavaScript 成功识别,保证功能正常,又能通过 Strict 语法校验。要特别注意,其中 <$BlogBacklinkDeleteIcon$> 不要转义,这个模板标签是在页面生成时被替换的,而不是 JavaScript 的数据占位符。
最后,Google 黑板报最近也发布了一篇关于互联网标准性的文章,这篇文章也提供了很多关于改进网站 HTML 代码的参考信息。

Saturday, January 06, 2007

Blogger 自定义域名

昨天 Blogger Buzz 放出消息,声称 Blogger 现在可以支持自定义域名。对于自己喜欢的 *.blogspot.com 域名已经被注册,或者难以使用 FTP 发布的国内 Blogger 用户来讲,这是个好消息。根据这篇帮助的提示,只需注册一个域名,简单的设置一个 CNAME 记录,就可以用 BlogSpot 托管空间而使用自己的域名。

我新建了一个域名来发布上次测试用的 Blog,地址是:http://blogtest.windia.net

Blogger 提供的新的模版编辑体系还是很实用的,关键是相对传统的模版,新模版加入了很多新的功能和特性,这些对于 FTP 发布使用传统模版的用户是无法使用的。

不过,值得担心的是,如果 Blogger 和其托管站点 *.blogspot.com 一旦再被封,自定义的域名是否也会同样失效?目前 Blogger 要求自定域名的 CNAME 记录指向 ghs.google.com,这个域名和 *.blogspot.com 的 IP 地址是不相同的,希望能够在 *.blogspot.com 万一再次遭殃的时候能够幸免于难。

Friday, November 10, 2006

升级到 Blogger Beta 后的问题

昨天收到 Blogger 的升级邀请,将我的 Blogger 帐号升级为了新推出的 Blogger Beta。由于升级的过程中,没有对原有模版中的内容进行更新,也没有自动重新重建页面,因此今天在重新修正了模版文件并将整个站点重建。在这个过程中还是发现了一些问题:
  • 模版中的中文内容变成了乱码
  • 在转换到 Blogger Beta 过后,发现原模版中所有的中文内容全部变成了乱码。看来正如 Blogger Beta 的 Known Issues 所说,Blogger Beta 目前仅支持英文

    幸亏模版有备份,阿门……

  • 模版标签 <$BlogOwnerAboutMe$> 失效
  • 发现原有模版中的 <$BlogOwnerAboutMe$> 在构建页面时被替换成了空字符串,也就是说现在在模版上使用这个标签显示不出任何内容。

    不过与此同时,<<$BlogMemberProfile$> 标签输出的内容中仍然正确包含了 About Me 的信息。我想这应该是个 bug,而且已经通过 Blogger 的反馈系统提交了。只是没有回应…… 没有办反,暂时只有用这个标签代替。其输出的内容与我自己写的几乎完全相同,我之所以原来没有用,是因为我不需要 About Me 这几个字,而是用图片替换掉了。现在只好在页面上用 JavaScript 来取掉这几个字。

  • 发布时不再提供 rss.xml 文件
  • 老版本的 Blogger 支持 Atom 0.3 和 RSS 2.0 两种格式的 Feed,在发布时分别对应 FTP 发布根目录下的 atom.xml 和 rss.xml,现在看来仅发布了 atom.xml 而没了 rss.xml。

    与此同时,Atom Feed 的版本升级为 1.0。我是通过 FeedBurner 来发布我的 Feed 地址的。不过,升级过后,通过 Maxthon 无论直接通过 atom.xml 还是 FeedBurner 的地址,都会发生“无法解析 Feed 的格式”错误。除此之外,Google Reader、FireFox 2.0 的订阅都没有问题。看样子这个只能怪 Maxthon 了。
    关于新版的 Site Feed 设置,比较奇怪的一点是 Blogger 除了提供对 Post 的订阅以外,还提供了对所有 Comments 以及单篇 Post 的 Comments 的订阅,然而发布到 FTP 上的所有文件中,和 Site Feed 相关的只有 atom.xml 这么一个文件,所以无从得知如何实现对 Comments 的订阅。或许是要使用 BlogSpot 的用户才有这个功能?

    Update on 2006/11/14:
    Blogger Help 上的一个条目说:RSS 格式的 Feed 只在 Blogger Pro 提供,如果非 Pro 用户想要使用 RSS 格式的 Feed,请使用 FeedBurner

    另外,现在知道了订阅整站 Comment 和分单帖子 Comment 的地址,它们分别是
    http://beta.blogger.com/feeds/blogID/comments/default

    http://beta.blogger.com/feeds/blogID/postID/comments/default

    Update on 2006/11/16:
    似乎 rss.xml 的发布又恢复了。现在发布新帖的时候,发布文件列表中有这个文件。Known Issues for New Bloggers 上面说明了该问题的情况。

  • 无法特别为标签页面定制模版内容
  • 老版本的 Blogger 模版标签中有几个条件标签可以分别对 IndexPage、ItemPage 和 ArchivePage 进行内容的定制,因为这几个页面的元素显然是不同的。现在多了个 Label 页面,不过却没有特别提供一个 LabelPage 的标签来方便模版条件输出。

    之所以提这个功能,是因为它最大的好处是可以在 Label Page 上显示当前这个页面的内容属于哪个 Label,这样不致于让读者产生困惑。现在的 Label Page 和 Index Page 除了帖子不同外,其它格式基本上完全一样。

  • 可能出现读者访问速度非常缓慢且无法发表评论
  • 当然这个不能怪 Blogger。不过最近大多数人都无法访问 beta.blogger.com 这个域名,对升级后的 Blogger 确实会产生很大的影响。

    首先模版中有多处需要引用 beta.blogger.com 站点上的资源,而且这些资源通常写在网页头中。读者必须要等待浏览器判断这些资源访问超时后才会继续显示后面正常的网页内容,看到的现象就是,网页除了窗口标题出现以外,内容全白,大约等半分钟后网页内容出现。即使 CSS 和模版图片全部用自己的,也无法避免需要引用 beta.blogger.com 上的 JavaScript 来实现 Backlinks 以及一些 Post Control 的功能。除非你完全不用这两个功能,则可以基本上避免引用 beta.blogger.com 站点而导致页面打开缓慢。

    另外,众所周知对 Blogger 的帖子发表评论需要连接到 Blogger 站点上发布。这个过程实际上是 Blogger 在收到新的内容后对相关页面的重建过程。Blogger Beta 的 Blog 站点,读者自然要到 beta.blogger.com 上去发表评论,这个站点打不开,所以不能评论。

    虽然我们可以通过在 C:\Windows\System32\Drivers\etc\host 文件中添加
    72.14.219.190 beta.blogger.com

    这样一行内容来实现访问该站点,但是这仅能方便自己而已,你无法要求自己 blog 所有的读者在发表评论之前都这么做。因此,请所有 Blogger 的用户在升级之前三思!

Friday, August 18, 2006

模版更新

看了 Blogger Beta 新的 Archive 树状的列表方式,非常喜欢,于是花了点时间,把自己现在的模版也改成了这个样子。刚好做 Calender 的时候,已经有一份完整的时间、帖子标题和地址的对应数据,所以做这个树状的 Archive 列表,只是表现的问题而已。不过,尽管如此,还是花了我好几个小时的时间。

另外,打开了 Blogger 的 Backlink 功能。由于要改模版,Blogger 提供这个功能以后一直没有动,嫌麻烦。不过,把这个功能打开容易,要把样式调整的和整体一致,还是花了不少功夫。

弄好后,把自己比较得意的帖子都看了一下,除了 Throwing Tables Out the Window 那篇以外,别的帖子几乎没什么 backlinks,可能还是因为我写的东西都比较私人吧。

Sunday, October 09, 2005

So We've Got A New Face Here!

上次翻译了那篇倡导 tableless layout 的文章后,心里头就一直想着尝试一下。所以今天响应这个号召,在坚决不用 table 的原则下,把面孔改成了这个样子。实际没有什么设计的成分,主要是尝试对 CSS 的利用。结果是完全实现了原来必须要用 table 才能完成的版面,还是有点成就感。另外,今天还大概看了一下 CSS 2.0 的参考,突然发现了 CSS 很多以前不知道的却很实用的功能,尤其是,居然可以让溢出容器的文字串自动省略并以“...”结尾;以前这个功能需要用服务端程序来实现,而且还挺麻烦的……