Archive for the ‘ Coding ’ Category

SVN + Trac + Apache 完整安装攻略

SVN + Trac + Apache 完整安装攻略,而原本在 SVN 所欠缺的用户及权限管理接口,也都可以由 Trac 的外挂程式来搞定,可谓两全其美。

本文章适合熟悉 SVN 但没用个任何线上专案管理的人做为参考。

请注意,本人使用的 Linux 是 CentOS 4.x,RHEL 4.x 也适用。

Read more

[JavaScript]动态网页设计的相关网页 (dhtml)

国外网站

中文网站

其它

正规表示式 (Regular Expression) 语法整理

正规表示式 (Regular Expression, 简写 regex、regexp 或 RE) 是用于字串比对的小型语言,又称正则表达式、正规表示法、规则运算式、常规表示法 (Wiki)。

很多程式语言和软件都会附加“正规表示式”这项功能。在字串的处理上,针对大量、重复、有固定逻辑的文字,正规表示式是非常强而有力的工具! 即便不是程式设计师,在可以在运用到正规表示式的场合 (例如: 文字编辑器),能帮你节省许多文字处理的时间。但是不同的软件所附加的正规表示式可能略有差异,这部份就要稍加留意。

不过在初学者的眼中,正规表示式却又像是天书一样的难以理解。以下文章针对正规表示式的相关语法做解说,你可到线上测试工具,以实际的例子去做测试。

Read more

[Perl][JavaScript]以数学的原理处理四舍五入

我看过太多人都把四舍五入的问题看成是“字串”来处理,实际上,如果把四舍五入做为“数学”来解的话,程式大概只要几行即可解决。

以四舍五入取整数的例子来讲,其原理就是: 任何数值 +0.5 再取整数

但要注意的是,当四舍五入遇到“负数”时就会变成“五舍六入”,这是因为中间数要往数值大的那边进位的缘故。所以加上了负数的处理,程式至少又多了一行:
Read more

[JavaScript]让网页的“外部超连结”自动开启在新视窗

在编辑网页时,如果要让某个超连结 (Link) 开启在新的浏览器视窗,我们可以在超连结加上“href="_blank"”属性,但如果超连结很多,要一个一个加上去毕竟麻烦!!

以下的程式码可以帮你把网页内所有针对“外部”的超连结自动设为在新视窗开启。

一般网页

  1. 将下列程式码加到网页的 <head> 区段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 标签内的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外挂程式

如果你的网站是用 WordPress 架设,可直接在控制台搜寻并安装“Open external links in a new window”这个外挂程式 (版本: 1.3.1 作者: Kristian Risager Larsen),这样就不用添加任何程式码了。

另外需注意,如果本外挂程式与其它像 LightBox、FancyBox...之类的图片灯箱特效的程式一起使用,有可能会造成同时显示灯箱特效,又同时将图片开启于新视窗!!

在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码

db.SyntaxHighlighter 是一支不错的程式码高亮度显示程式,特点为:

  1. 显示行号
  2. 支援12种程式语言
  3. 模组化加载需要的程式语言
  4. 支援 “<pre>” 及 “<textarea>” 区块
  5. 纯文字检视
  6. 复制到剪贴簿
  7. 直接打印程式码

缺点就是加载速度较慢。

安装步骤

  1. 修改 blogger 样板,搜寻 “</body>”,在 “上方” 加入(你可以选择你要的语言加载即可):
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
    <script class='javascript'>
    dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>

    (因为 “偷吃步” 的关系,程式直接连到 dp.SyntaxHighlighter 的 SVN 上,你可以视情况下载回来放到自己的服务器)

  2. dp.SyntaxHighlighter 原本已经有一个 CSS 档了,但如果将这个 CSS 档以 “Link” 的方式加载,却无法正常显示。所以,请自行增加下列 CSS 到 blogger 样板的 CSS 区段:
    /*dp.highlighter*/
    .dp-highlighter {
      font-family: "Consolas", "Courier New", Courier, mono;
      font-size: 12px;
      background-color: #E7E5DC;
      width: 99%;
      overflow: auto;
      margin: 18px 0px 18px 0px;
      padding-top: 1px; /* adds a little border on top when controls are hidden */
      border:1px inset;
      max-height:200px;
    }
    .dp-highlighter .bar {
      padding-left: 45px;
    }
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar {
      padding-left: 0px;
    }
    .dp-highlighter ol {
      list-style: decimal; /* for ie */
      list-style: decimal-leading-zero; /* better look for others */
      background-color: #fff;
      margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
      padding: 0px;
      color: #5C5C5C;
    }
    .dp-highlighter.nogutter ol {
      list-style-type: none !important;
      margin-left: 0px;
    }
    .dp-highlighter ol li,
    .dp-highlighter .columns div {
      border-left: 3px solid #6CE26C;
      background-color: #f8f8f8;
      padding-left: 10px;
      line-height: 14px;
    }
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div {
      border: 0;
    }
    .dp-highlighter .columns {
      color: gray;
      overflow: hidden;
      width: 100%;
    }
    .dp-highlighter .columns div {
      padding-bottom: 5px;
    }
    .dp-highlighter ol li.alt {
      background-color: #fff;
    }
    .dp-highlighter ol li span {
      color: Black;
    }
    /* Adjust some properties when collapsed */
    .dp-highlighter.collapsed ol {
      margin: 0px;
    }
    .dp-highlighter.collapsed ol li {
      display: none;
    }
    /* Additional modifications when in print-view */
    .dp-highlighter.printing {
      border: none;
    }
    .dp-highlighter.printing .tools {
      display: none !important;
    }
    .dp-highlighter.printing li {
      display: list-item !important;
    }
    /* Styles for the tools */
    .dp-highlighter .tools {
      padding: 3px 8px 3px 10px;
      font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: silver;
      background-color: #f8f8f8;
      text-align1: right;
      padding-bottom: 10px;
      border-left: 3px solid #6CE26C;
    }
    .dp-highlighter.nogutter .tools {
      border-left: 0;
    }
    .dp-highlighter.collapsed .tools {
      border-bottom: 0;
    }
    .dp-highlighter .tools a {
      font-size: 9px;
      color: #a0a0a0;
      text-decoration: none;
      margin-right: 10px;
    }
    .dp-highlighter .tools a:hover {
      color: red;
      text-decoration: underline;
    }
    /* About dialog styles */
    .dp-about { background-color: #fff; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; }
    /* Language specific styles */
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
    .dp-highlighter .string { color: blue; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; }
    .dp-highlighter .preprocessor { color: gray; }
  3. 储存即可

使用方法

  • 方法一 - 使用 “<textarea>” 区块,需将 “&” 转换为 “&amp;”:
    <textarea name="code" class="程式语言">
    程式码
    </textarea>
  • 方法二 - 使用 “<pre>” 区块,需将 “&” 转换为 “&amp;”、”<” 转换为 “&lt;”、”>” 转换为 “&gt;”:
    <pre name="code" class="程式语言">
    程式码
    </pre>

参考网页

在 Blogger 中使用 google-code-prettify 显示程式码

google-code-prettify 是一支不错的程式码高亮度显示程式,特点为:

  1. 支援 15 种程式语言(但某些语言似乎还没完成)
  2. 程式仅两个档案
  3. 加载速度较快

缺点为:

  1. 跟 IE 的相容性比较不佳,在 IE 内复制程式码时无换行符号
  2. 无行号显示
  3. 仅支援 "<pre>" 区块
  4. 程式码过长时不会自动显示卷轴 (可透过修改 CSS 解决)

安装步骤

  1. 修改 blogger 样板,搜寻 "</head>",在 "上方" 加入
    <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
    <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

    (因为 "偷吃步" 的关系,程式直接连到 google-code-prettify 的 SVN 上,你可以视情况下载回来放到自己的服务器)

  2. 继续搜寻 "<body>",在标签内的 onload 事件加入:
    prettyPrint();
  3. 储存即可。

使用方法

      使用 "<pre>" 区块,需将 "&" 转换为 "&amp;"、"<" 转换为 "&lt;"、">" 转换为 "&gt;":
<pre class="prettyprint">
程式码
</pre>

参考网页

在 CentOS 4.x 安装 Subversion 1.4.3

Subversion (简称 SVN) 是目前最热门的版本控制套件,因为语法与 CVS 相近,又是改良自 CVS,几乎所有平台的 OS 都有支援,目前正快速地进占版本控制的霸主地位。以下介绍 Subversion 在 CentOS 4.x 或 RHEL 4.x 下的安装步骤。

安装 Subversion

安装步骤:

  1. 先移除系统上的 Subversion 1.2.x
    rpm -e subversion
  2. http://summersoft.fay.ar.us/pub/subversion/latest/rhel-4/i386/ 下载最新版的 subversion,下载符合下一个步骤中相同名称的 rpm 套件。
  3. 依序安装:
    rpm -U apr-x.x.x-x.i386.rpm
    rpm -U apr-util-x.x.x-x.i386.rpm
    rpm -ivh subversion-x.x.x-x.i386.rpm
    rpm -ivh mod_dav_svn-x.x.x-x.i386.rpm
    rpm -ivh subversion-perl-x.x.x.x.i386.rpm
    rpm -ivh subversion-tools-x.x.x-x.i386.rpm
  4. 这样就 OK 了!

以 SVN+SSH 存取档案库

使用 “SVN+SSH” 的存取方式就是直接使用主机上的用户帐号做存取。而你所要被用户存取的档案库其实就是一个子目录,因此要存取的用户必须有可以读取及写入该目录的权限。

语法:

svn+ssh://帐号@主机名称/档案库绝对路径

范例:

svn+ssh://[email protected]/var/svn/repositories

其中 user1 必须要在 192.168.1.1 这台主机上有 [/var/svn/repositories] 目录的读取及执行权限 (建议设为群组)

从 Web 存取档案库

网页主机需安装有 “dav_svn_module” 模组,在 httpp.conf 内设定:

LoadModule dav_svn_module modules/mod_dav_svn.so
LoadModule authz_svn_module modules/mod_authz_svn.so
<location>
DAV svn
#设定 SVN 储存库的根目录
SVNParentPath /var/svn
#设定 SVN 储存库的目录
#SVNPath /var/svn/repositories
Satisfy Any
Require valid-user
AuthType Basic
AuthName "SVN Repository"
#用户认证的帐号/密码档 (使用 htpasswd 建立)
AuthUserFile /etc/svn/svn_htusers
#用户存取权限设定档
AuthzSVNAccessFile /etc/svn/svn_access
</location>

参考网页

[Perl]Perl 的相关网页资源

手册

教学/手册

Read more

[Perl]CGI 模组常用语法

加载 CGI 模组

use CGI qw/:standard/;
my $CGI = CGI->new();

取得所有输入的参数名称

@param_name = $CGI->param();

取得特定参数的内容

$value = $CGI->param( "param_name" );

取得所有参数的名称及内容

%param = $CGI->Vars;

转换 $url 为 url 可接受的字串

$url_escape = $CGI->escape( $url )

取得目前网页的编码

$charset = $CGI->charset();

指定网页的编码,并送出网页表头

print $CGI->header( -charset=>"utf-8", -expires=>"-1d" );

return top