分享我的一些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原创
转贴请注明出处。
分享我的一些PJBlog小技巧相关推荐
- 分享几个Java面试小技巧,建议收藏!
Java可谓编程界的元老,其资深地位无人撼动.那么学习Java的你,在面试时过五关斩六将还顺利吗?通常来讲,程序员的逻辑思维很清晰,在表达自我方面直接,但这在面试中可行不通,毕竟面试涉及到人际交流,所 ...
- 网络知识:分享几个路由器设置小技巧,欢迎收藏!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 今天给大家分享几个路由器设置小技巧,欢 ...
- 网络基础:分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- 网络技巧:分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- 分享几个路由器设置小技巧,总有用得到的一天!
路由器是连接因特网中各局域网.广域网的设备.路由器的作用是用于连接不同的网络,同时选择信息传送的线路,从而实现各局域网内的设备共享网络,使其可以同时访问互联网. 分享几个路由器设置小技巧,总有用得到的 ...
- 分享几个微信实用小技巧(二)
苏生不惑第298 篇原创文章,将本公众号设为星标,第一时间看最新文章. 之前分享过分享几个微信实用小技巧 ,最近微信又更新到8.0.16版本,这里再整理几个微信实用小技巧. 检测是否被好友删除 上周分 ...
- 计算机技巧资讯,如何让电脑不卡,分享几个屡试不爽的小技巧给大家
[每日科技网]如何让电脑不卡,分享几个屡试不爽的小技巧给大家.1.卸载"**管家""60保安"等常用系统自带的安全管理系统软件.这些软件会占用大量的电脑内存,消 ...
- 分享几个省电小技巧 让你的mac电脑使用时间更长
相信很多mac用户都深有体会,mac电脑用久了就越耗电.尤其是系统升级后这种耗电问题更加严重了,如何解决这一难题呢?小编为大家分享几个省电小技巧 让你的mac电脑使用时间更长. 1.关闭蓝牙和电量百分 ...
- 寻找亚马逊测评师邮箱_你真的会精细化运营吗?毫无保留地分享亚马逊运营小技巧,月入过万不是事...
你是不是也开始了"机械化"运营的阶段? 你是不是也开始成为了"混吃等死"的摸鱼党?? 你是不是明明很想突破,却苦于迟迟没有找到突破口??? 看过来--毫无保留的 ...
最新文章
- 一个CV算法工程师在技术方面的反思!
- win下ubuntu安装mysql_MySQL在Win10与Ubuntu下的安装与配置
- 赛迪顾问2010-2011年度中国信息安全产品市场研究年度报告
- WCF入门教程(vs2010)
- leetcode算法题--将数字变成 0 的操作次数
- 《看透springmvc源码分析与实践》读书笔记二
- 10道C++输出易错笔试题收集(敢进来挑战吗?)
- Windows系统调用学习笔记(二)—— 3环进0环
- 职业相关课程学习笔记
- 存储类、作用域、生命周期、链接属性
- iphone8plus屏幕尺寸_百思买在苹果发布会前列出了一款“iPhone SE Plus”屏幕保护保护膜...
- angular中如何定义全局变量_如何在Angular 2 / Typescript中声明全局变量?
- 何时及为何使用代表? [重复]
- 质量评估指标:SSIM(Structural similarity 结构相似性)
- Gyroscope in smartphone 手机中的陀螺仪传感器
- echart:legend中显示value+自定义文字样式
- 转载四代重歼的一片博文 - 漏斗子:“三大战役”完成 人民币国际化就登场
- 【毕业设计】基于stm32的智能扫地机器人设计与实现 - 单片机 物联网
- STM32分别实现温湿度的采集和OLED显示屏显示数据
- 数据中心解决方案之灾备方案设计(上)
热门文章
- 【Oracle】082错题集-模拟系统
- MongoDb数组操作 - unwind解包、group分组统计、sort排序
- Windows下的指北针(指南针)--OpenGL版 Compass
- ffmpeg从某站提取视频、音频、详解
- 银联+移动+三星PK微信、余额宝
- centOS7重启网卡失败
- PHPMailer邮箱发送
- EBS 销售订单行单条一次或多次发运确认API(wsh_new_delivery_actions.confirm_delivery)详解
- php如何实现上一篇下一篇的功能
- 计算机专业边工作边考研,可以边工作边考研吗?