分享我的一些PJBlog小技巧

Update: 现在已经不用PJBlog了，文章中的很多链接已经失效。需要什么帮助请直接联系我。

  
1. 去掉UBB斜体标签

    经常在Blog发布代码的同志会发现斜体标签[i]很恶心，一旦你代码里的某个数组遇上了循环变量，原本整齐的代码就会歪掉一大半。考虑到反正平时不太需要斜体，估计一定有人会像我一样想去掉这个UBB标签。
    去掉它要改两个地方。在common/ubbcode.asp中去掉下面这两行
re.Pattern="/[i/]([^/r]*?)/[//i/]"
strContent=re.Replace(strContent,"<i>$1</i>")
    还有一个地方要修改，就是common/function.asp中的自动闭合UBB那一段。你需要去掉function closeUBB(strContent)函数中arrTags数组里的"i"。也就是说，找到
arrTags=array("code","quote","list","color","align","font","size","b","i","u","html")
    并替换成
arrTags=array("code","quote","list","color","align","font","size","b","u","html")
    如果不做这一个操作的话，你会发现有多余的[/i]出现。


2. Blog顶部调用Twitter最近三条信息

    最近Twitter确实是火了一把，估计有人需要下面这段代码。为了加快Blog载入速度（Twitter慢死了），我将把JavaScript放在footer中调用。
    添加一个模块并且设为内容栏置顶，代码如下（红色部分需要自己修改）：
<div style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; TEXT-ALIGN: left; OVERFLOW:hidden; WHITE-SPACE:nowrap;" >
WHAT AM I DOING NOW by <a href="http://twitter.com/matrix67" target="_blank">twitter.com</a><br/>
<span id="stat0"></span>, <span id="stat0_time"></span> |
<span id="stat1"></span>, <span id="stat1_time"></span> |
<span id="stat2"></span>, <span id="stat2_time"></span>
</div>
    然后在footer.asp中添加如下代码：
<script type="text/javascript" src="http://www.twitter.com/t/status/user_timeline/1758881?count=3&named_obj"></script>
<script type="text/javascript"><!--
document.getElementById('stat0').innerHTML = Twitter.posts[0].text;
document.getElementById('stat0_time').innerHTML = Twitter.posts[0].relative_created_at;
document.getElementById('stat1').innerHTML = Twitter.posts[1].text;
document.getElementById('stat1_time').innerHTML = Twitter.posts[1].relative_created_at;
document.getElementById('stat2').innerHTML = Twitter.posts[2].text;
document.getElementById('stat2_time').innerHTML = Twitter.posts[2].relative_created_at;
--></script>
    这样的效果是两行文字，第二行不换行，让它超出边界不管（我觉得这样好看些）。Twitter太慢了，我玩了一天就不玩了，因此不给demo了，这里只贴个效果图：

3. PJBlog自带的一种悬停提示框特效

    header中有一段被注释掉了的js文件引用。把header.asp中的
<!--<script type="text/javascript" src="common/nicetitle.js"></script>-->
    改成
<script type="text/javascript" src="common/nicetitle.js"></script>
    然后你就能看到效果了。控制提示框样式的css在皮肤文件的typography.css中的div.nicetitle一段，你可以参考我所修改的样式（改为灰色背景）。
/*提示框CSS*/
   div.nicetitle {
    position: absolute;
    padding: 4px !important;
    padding: 6px 4px 4px 4px;
    top: 0;
    left: 0;
    font-family:Tahoma, Verdana;
    font-size: 12px;
    width: 15em;
    background: #CCCCCC;
    color: #222222;
    border: 1px solid #888888;
    text-align: left;
}


4. 把PJBlog的验证码改为算式验证码（两位加法）

    我研究这个研究了半天，把GetCode.asp改过去改过来调了半天终于搞出来了，效果见我的登陆界面matrix67.com/blog/login.asp。在分析BMP文件格式时头疼死了，后来才知道每一行输出像素必须是4的倍数（即使图象宽度不是4的倍数，不足的话要用0填空补足）。
    下载下面这个rar文件，解压缩后替换common/GetCode.asp文件。
点击下载此文件
    这样改后，图片宽度增加了，很多地方无法对齐，于是在common/function.asp中需要把
Function getcode()
    getcode= "<img src=""common/getcode.asp"" alt="""" style=""margin-right:40px;""/>"        
End Function
    改为
Function getcode()
    getcode= "<img src=""common/getcode.asp"" alt="""" style=""margin-right:8px;""/>"    
End Function
    这样才能和用户名、密码的输入框对齐。

    你可能还需要在文件内容中搜索所有出现过的“验证码：”并改为“算一算：”。
    昨天发现改了验证码后居然还有垃圾留言，没想通是为什么。



5. 让你的PJBlog支持语法高亮

    不同于网上流行的那个JS，我使用的是这个JS，它要简单一些（只有一个JS文件），而且使用也非常简单（自动查找HTML的<code>标签）。它仅仅是对语法进行高亮，并没有显示行号和折叠等功能。但同时它只对代码颜色进行修改，更加整洁，兼容PJBlog本身的代码显示效果。这里是我的一个效果演示（Pascal代码高亮）。
    你可以在这里下载这个JS脚本的最新版本。这个文件里还带有一份该脚本详细的使用说明。它可以支持的语言我列在了下面，脚本文件总共37KB，因此你可能需要从中删除一些语言支持。至于怎么删除部分语言，你看了那个JS源码后就知道了。

• Python
  
• Ruby
  
• Perl
  
• PHP
  
• HTML
  
• CSS
  
• Javascript
  
• VBScript
  
• Delphi
  
• Java
  
• C++

    这个JS存在一个问题，它的某个定义与PJBlog重复了，前者的comment类是指的注释，而后者的comment是指的评论。你需要把JS文件中所有的'comment'替换为'comments'避免冲突（替换操作时要包括引号，因为我们只替换各个字符串定义）。
    我另外写了一个Pascal的关键字列表，比Delphi的关键字多一些，更适合Pascal语言。你可以把它加在JS文件里，需要的同学可以参考一下（顺便展示JS代码的高亮效果）：
var PASCAL_KEYWORDS = {'abs': 1,'addr': 1,'and': 1,'ansichar': 1,'ansistring': 1,'array': 1,'as': 1,'asm': 1,'begin': 1,'boolean': 1,'byte': 1,'cardinal': 1,'case': 1,'char': 1,'class': 1,'comp': 1,'const': 1,'constructor': 1,'currency': 1,'destructor': 1,'div': 1,'do': 1,'double': 1,'downto': 1,'else': 1,'end': 1,'except': 1,'exports': 1,'extended': 1,'false': 1,'file': 1,'finalization': 1,'finally': 1,'for': 1,'function': 1,'goto': 1,'if': 1,'implementation': 1,'in': 1,'inherited': 1,'int64': 1,'initialization': 1,'integer': 1,'interface': 1,'is': 1,'label': 1,'library': 1,'longint': 1,'longword': 1,'mod': 1,'nil': 1,'not': 1,'object': 1,'of': 1,'on': 1,'or': 1,'packed': 1,'pansichar': 1,'pansistring': 1,'pchar': 1,'pcurrency': 1,'pdatetime': 1,'pextended': 1,'pint64': 1,'pointer': 1,'private': 1,'procedure': 1,'program': 1,'property': 1,'pshortstring': 1,'pstring': 1,'pvariant': 1,'pwidechar': 1,'pwidestring': 1,'protected': 1,'public': 1,'published': 1,'raise': 1,'real': 1,'real48': 1,'record': 1,'repeat': 1,'set': 1,'shl': 1,'shortint': 1,'shortstring': 1,'shr': 1,'single': 1,'smallint': 1,'string': 1,'then': 1,'threadvar': 1,'to': 1,'true': 1,'type': 1,'unit': 1,'until': 1,'uses': 1,'val': 1,'var': 1,'varirnt': 1,'while': 1,'widechar': 1,'widestring': 1,'with': 1,'word': 1,'write': 1,'writeln': 1,'xor': 1,'assign': 1,'reset': 1,'rewrite': 1,'exit': 1,'halt': 1,'break': 1,'read': 1,'readln': 1,'new': 1,'length': 1,'append': 1,'close': 1};

LANGUAGES.pascal = {
  defaultMode: {
    lexems: [IDENT_RE],
    illegal: '("|//$[G-Zg-z]|/*|</)',
    contains: ['comments', 'string', 'number', 'function', 'class'],
    keywords: PASCAL_KEYWORDS
  },
  case_insensitive: true,
  modes: [
    {
      className: 'comments',
      begin: '{', end: '}'
    },
    {
      className: 'comments',
      begin: '//(//*', end: '//*//)',
      relevance: 10
    },
    C_LINE_COMMENT_MODE,
    {
      className: 'number',
      begin: NUMBER_RE, end: '^',
      relevance: 0
    },
    {
      className: 'string',
      begin: '/'', end: '/'',
      contains: ['quote'],
      relevance: 0
    },
    {
      className: 'quote',
      begin: '/'/'', end: '^'
    },
    {
      className: 'function',
      begin: 'function', end: '[:;]',
      lexems: [IDENT_RE],
      keywords: {'function': 1},
      contains: ['title', 'params', 'comments'],
      relevance: 0
    },
    {
      className: 'function',
      begin: '(procedure|constructor|destructor)', end: ';',
      lexems: [IDENT_RE],
      keywords: {'constructor': 1, 'destructor': 1, 'procedure': 1},
      contains: ['title', 'params', 'comments'],
      relevance: 10
    },
    {
      className: 'title',
      begin: IDENT_RE, end: '^'
    },
    {
      className: 'params',
      begin: '//(', end: '//)',
      lexems: [IDENT_RE],
      keywords: PASCAL_KEYWORDS,
      contains: ['string']
    }
  ]
};//pascal, written by matrix67.com

    下面这个压缩包里的css文件定义了各种类型的高亮颜色。各种颜色具体的值是我自己定的，你不喜欢可以修改一下以符合你的界面风格。
点击下载此文件

    现在你需要把这个highlight.css文件连同前面的highlight.js文件保存在common目录下。然后在common/ubbcode.asp中找到
re.Pattern="/[quote/](.*?)/[//quote/]"
    在它上面加入以下代码：
re.Pattern="/[code=(.[^/]]*)/](.*?)/[//code/]"
strContent= re.Replace(strContent,"<div class=""UBBPanel""><div class=""UBBTitle""><img src=""images/quote.gif"" style=""margin:0px 2px -3px 0px"" alt=""程序代码""/> 程序代码</div><div class=""UBBContent""><pre><code class=""$1"">$2</code></pre></div></div>")
    然后在header.asp中找到
<link rel="stylesheet" rev="stylesheet" href="skins/<%=Skins%>/UBB/editor.css" type="text/css" media="all" /><!--UBB编辑器代码-->
    在其下面加入这一行代码：
<link rel="stylesheet" rev="stylesheet" href="common/highlight.css" type="text/css" media="all" />
    最后在footer.asp中加入以下代码：
<script type="text/javascript" src="common/highlight.js"></script>
<script type="text/javascript">
   initHighlightingOnLoad();
</script>

    以后你就可以通过使用形如[ code=delphi] TheOneILove:=SexyMM [ /code]的UBB标签来高亮各种语言的代码。
    目前已知的问题：由于这个脚本需要用<pre>，而用了<pre>后将导致无法换行，因此你可能会想为这个UBB框单独设一个css强制换行。我最讨厌换行的问题了，IE和FireFox总是不能兼顾，后来干脆把overflow设成hidden，两边看上去都顺眼，超了右边界的就让它去吧。


6. 让你的TagsCloud看起来更明显，更大

    看看我的标签云，你会发现虽然每个标签的文章也不多，但大小同样很明显。更改tag.asp可以让你的Tags在日志数不多的情况下大小对比同样强烈。
    在tag.asp中找到
<%
  function getTagSize(c)
   dim i
   for i=1 to 10
    if int(c)<i*2.5 then
        getTagSize=12+i
        exit function
    end if
   next
   getTagSize=22
  end function
%>
    改成
<%
  function getTagSize(c)
   dim i
   for i=1 to 20
    if int(c)<i*1.5 then
        getTagSize=12+i
        exit function
    end if
   next
   getTagSize=34
  end function
%>
    说明一下，改了之后的意思为，标签大小共有20个等级，从12px起，每多1.5篇文章字体就大一号，有1.5 x 20=30篇文章时字号达到12+20=32，如果文章数超过30了标签字体大小都是34px。你可以自己改这几个数字直到满意位置。
    字体变大后会引起一个问题：标签过于挤了一些，行与行之间的空隙窄得难以忍受。你可能会想为标签云单独设一个css。还是tag.asp文件，你需要把
<div class="Content-body">
    改成
<div class="Content-tagscloud">
    并把你的皮肤文件夹内layout.css文件中对Content-body的定义复制一份，修改line-height属性并重命名为Content-tagscloud。参考我的改法（不同的皮肤具体的内容不同）。

    我所用的皮肤中相关的定义如下：
  /*---日志内容框--*/
  .Content-body{margin:8px 2px 2px 8px;overflow:hidden;text-align:left;width:98%;line-height: 160%;background-image: url();background-repeat: repeat-y;background-position: right;color: #292929;}
    在它下面添加一段代码，整个内容变成这样：
  /*---日志内容框--*/
  .Content-body{margin:8px 2px 2px 8px;overflow:hidden;text-align:left;width:98%;line-height: 160%; background-image: url();background-repeat: repeat-y;background-position: right;color: #292929;}
  .Content-tagscloud{margin:8px 2px 2px 8px;overflow:hidden; text-align:left;width:98%; line-height: 35px;background-image: url();background-repeat: repeat-y; background-position: right;color: #292929;}
    这样，标签云的行距就拉开了。


发现Bug或者有任何问题请在下面报告一下。

Matrix67原创
转贴请注明出处。