分享我的一些PJBlog小技巧

最新推荐文章于 2021-06-04 08:09:11 发布

matrix67

最新推荐文章于 2021-06-04 08:09:11 发布

阅读量1.1k

点赞数

分类专栏： Design of Design 文章标签： function pascal stylesheet destructor constructor comments

本文链接：https://blog.csdn.net/matrix67/article/details/4780411

版权

Design of Design 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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"></script>
    这样的效果是两行文字，第二行不换行，让它超出边界不管（我觉得这样好看些）。Twitter太慢了，我玩了一天就不玩了，因此不给demo了，这里只贴个效果图：

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

    header中有一段被注释掉了的js文件引用。把header.asp中的

    改成
<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" />
    在其下面加入这一行代码：
<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原创
转贴请注明出处。