WordPress 使用 Google Code Prettify 高亮代码

Google Code Prettify 是 Google 开源的一个用于代码高亮的 Javascript 库,支持 C/C++, Java, Python, Ruby, PHP,Javascript 等等常见语言,目前包括 Google Code、Stackoverflow.com 在内的很多网站都在使用它。最吸引人的是,在使用它进行代码高亮时,甚至不需要指明语言类型,Prettify 会自动判断并处理。

google-code-prettify-javascript-syntax-highlighter

使用 Prettify 一般只需要包含两个文件:prettify.js 和 prettify.css,压缩过后的 prettify.js 大小差不多在 15K 左右,非常小巧。

简单使用

在网站页面中引用 Prettify文件:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

同时增加以下代码,让页面加载完成时执行 Prettify:

<script type="text/javascript">
window.onload = function(){prettyPrint();};
</script>

Prettify 会在网页中查找<pre class="prettyprint">...</pre>或者<code class="prettyprint">...</code>包围的代码片断,对它们进行高亮。

查看全文

WordPress 访客评论显示欢迎信息

最近逛了不少的博客,发现有一个共通的小细节:当你再次访问时,在评论框上方会显示类似“欢迎回来,xxx..”的信息。当时觉得这个想法挺不错的,一定程度上提高了用户体验,因为访客短期内再次访问时,不需要重复输入个人的信息。

关于这个话题,Neoease 有专门写过一篇文章来介绍如何实现 —— 提高 WordPress 访客评论时的用户体验。这次我在制作 dangopress 时,也顺手加上了这点。效果参考下图:

关键问题:获取访客信息

花点时间去研究,其实整个实现过程并不复杂。这里的关键点是,如何判断访客已经在近期发表过评论。

查看全文

WordPress 分开显示评论与 Pingback

WordPress 中的留言有三种类型,分别是普通评论、Pingback 和 Traceback。Pingback 和 Trackback 都是别人对你文章的引用,两者有一些区别,但是实际上差不多。就我博客上的评论来说 Pingback 类型的居多,因为这种引用是自动完成的。

当你在文章中引用另外一篇文章的地址时,Wordpress 就会给对应的网站发送Pingback,当这些网站收到回复时,就会将 Pingback 的信息显示在评论中。关于这 Pingback 和 Trackback 的更多对比,可以阅读下这篇文章 WordPress中的Ping、Trackback与Pingback:概念、区别与运用

当然,最终是否显示 Pingback/Trackback 类型的评论完全由主题自行决定。有些主题选择干脆只显示普通类型的评论,而有些主题显示全部评论。dangopress 主题选择了后者,这也是大多数主题的方式。但是如果将这几种类型的评论混杂在一起,难免显得有点混乱,所以在这里本文介绍一种将普通评论与 Pingback/Trackback 区分显示的方法,这个方法参考自 WordPress 2.7 Trackbacks 的两种处理方法 - NeoEase

除了做基本的区分之外,我们还希望能够分别显示普通评论与 Pingback/Trackback 的数目。最终的显示效果参考本博客:

查看全文

dangopress: 简单的自适应主题

dangopress 是我自己独立创作的第一款免费主题,主打简洁风格,双栏布局。主题包含代码高亮、支持第三方 CDN、支持网站统计分析、侧栏跟随等等功能,以及许多细节上的打磨和优化,有兴趣的同学可以下载体验。主题已经上传到 Github,可以免费下载,暂时还没有打算提交到官方主题库中。

我的性子比较喜欢折腾,主题经常换来又换去,下载了别人放出的主题之后,一定要亲手“打磨”过之后才会使用。几次下来,新鲜劲刚过,又开始寻觅新的主题。从开始使用 WordPress 开始,我就有一个愿望可以自己亲手实现一份主题,现在愿望实现了,感觉真不错。

主题的许多素材都是来源自网上,最初原型是来自 牧风 现在的主题,同时也参考了很多 Neoease 博客上的元素。当然还有,例如邮件回复、归档页面、最近评论等等,都来自网上各位同仁的分享。所以主题完成之后,我就立马上传到 Github 上了。

主题安装方法:

  • 推荐 Github Release 页面下载最新版本;
  • 从 Github 下载最新代码:
  • # git clone https://github.com/kodango/dangopress
    

    将 clone 下来的整个目录压缩成 zip 包。

到 WordPress 后台上传安装主题,主题有几个自定义的选项,请自行设置。如果有问题需要帮忙,欢迎在本博客评论。

dangopress 主题特性

dangopress 双栏设计,白底黑字,属于简洁风格。

主题拥有以下特性(包括但不仅限于):

  1. 集成侧栏跟随滚动功能
  2. 支持添加百度分享、百度统计以及 Google Analytics 统计代码,主题后台可配置;
  3. 默认自带代码高亮功能,通过 Google Code Prettify 实现;
  4. 评论支持回复邮件提醒功能,邮件内容已定制;
  5. 支持将博客静态文件上传到 CDN,主题后台可配置 CDN 地址前缀(本博客的一些静态文件都是托管在 OSS 上的,关于 WordPress 使用 OSS 可以参考我之前写得一篇文章);
  6. 侧栏包括最新、随机、置顶以及热评文章,以 Tab 选项卡形式呈现;
  7. 简单的多种宽度设备(手机、平板、电脑)样式自适应,效果见下方;

查看全文