Vixual

Blogger 的樣版下載網站

Blogger 可用的樣版

02 Aug 2007
1 comment
友善列印

在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼

db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式，特點為:

顯示行號
支援12種程式語言
模組化載入需要的程式語言
支援 “<pre>” 及 “<textarea>” 區塊
純文字檢視
複製到剪貼簿
直接列印程式碼

缺點就是載入速度較慢。

安裝步驟

修改 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 上，你可以視情況下載回來放到自己的伺服器)

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; }

儲存即可

使用方法

方法一 - 使用 “<textarea>” 區塊，需將 “&” 轉換為 “&”:
```
<textarea name="code" class="程式語言">
程式碼
</textarea>
```
方法二 - 使用 “<pre>” 區塊，需將 “&” 轉換為 “&”、”<” 轉換為 “<”、”>” 轉換為 “>”:
```
<pre name="code" class="程式語言">
程式碼
</pre>
```

參考網頁

使用 google-code-prettify 顯示程式碼

在 Blogger 中使用 google-code-prettify 顯示程式碼

google-code-prettify 是一支不錯的程式碼高亮度顯示程式，特點為:

支援 15 種程式語言(但某些語言似乎還沒完成)
程式僅兩個檔案
載入速度較快

缺點為:

跟 IE 的相容性比較不佳，在 IE 內複製程式碼時無換行符號
無行號顯示
僅支援 "<pre>" 區塊
程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決)

安裝步驟

修改 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 上，你可以視情況下載回來放到自己的伺服器)

繼續搜尋 "<body>"，在標籤內的 onload 事件加入:
```
prettyPrint();
```
儲存即可。

使用方法

使用 "<pre>" 區塊，需將 "&" 轉換為 "&"、"<" 轉換為 "<"、">" 轉換為 ">":

<pre class="prettyprint">
程式碼
</pre>

參考網頁

使用 dp.SyntaxHighlighter 顯示程式碼

28 Jul 2007
2 comments
友善列印

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

Blogger 中的文章因為沒有 “隱藏內文” 及 “繼續閱讀” 的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。

以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。

安裝步驟

編輯樣版，搜尋 “</head>”，在其上方加入:

<b:if cond='data:blog.pageType != "item"'>
<style>
#fullpost { clear:both; display:none; }
#read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; }
</style>
</b:if>

繼續搜尋 “<body>”，在標籤內的 onload 事件加入:

if(window.readMore){readMore();}

繼續在下一行加入:

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var tagSpan = document.getElementsByTagName('span');
var more1 = new Array();
var more2 = new Array();
function readMore(){
  var x = 0;
  for(var i=0; i&lt;tagSpan.length; i++){
    if(tagSpan[i].id == 'fullpost'){
      more1[x] = tagSpan[i];
      var readMore = document.createElement('a');
      readMore.setAttribute('id','read-more');
      readMore.setAttribute('href','javascript:toggleMore('+x+')');
      readMore.setAttribute('onclick','toggleMore('+x+');return false;');
      readMore.appendChild(document.createTextNode('Read more &gt;&gt;'));
      more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]);
      x++;
    }
  }
}
function toggleMore(theElement,theStatus){
  if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){
    more1[theElement].style.display = 'block';
    more2[theElement].innerHTML = '&lt;&lt; Less';
//  more2[theElement].parentNode.removeChild(more2[theElement]);
  }else{
    more1[theElement].style.display = 'none';
    more2[theElement].innerHTML = 'Read more &gt;&gt;';
  }
}
function expandAll(theStatus){
  for(var i=0; i&lt;more1.length; i++){
    toggleMore(i,theStatus);
  }
}
</script>
</b:if>

請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，”Read more” 的連結就會自動消失了。

儲存即可

使用方式

前文
<span id="fullpost">
欲隱藏的內文
</span>

全部展開/隱藏全文

<input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox">
<label for="expand-all">Expand All</label>

解決 “隱藏內文/繼續閱讀” 失效的問題

解決當 Blogger 的 “隱藏全文/繼續閱讀” 功能因為點選較新或較舊的文章而失效的狀況

WebApp

Blogger

28 Jul 2007
5 comments
友善列印

安裝 VMware 的 VMware-Tools

在 VMware 安裝完虛擬電腦的 GuestOS 後，第一件事就要裝 VMware-Tools 了，VMware-Tools 主要是更新一些 for 你安裝的 GuestOS 的 Driver，讓這一台虛擬電腦可以跑得正常、跑得順暢，最重要的是，滑鼠可以在 HostOS 跟 GuestOS 之間自由穿梭。
Read more

在 Linux 中安裝 MPlayer

Linux 上的 MPlayer 就好比是 Windows 上的 KMPlayer 或暴風影音，內含 Player 及各種 Codec，只要安裝好，就可以播放任何格式的影片及音樂檔，以下介紹 MPlayer 的 TarBall 及 RPM 的安裝方法。

安裝好之後，"mplayer" 為文字介面的播放程式，而 "gmplayer" 為圖形介面的播放程式。下列的安裝步驟，如果選用 TarBall 的方式安裝，在安裝時則已設定好中文介面了，而 RPM 的方式只能裝在 CentOS 4.x 或 RHEL 4.x 的版本，並且介面為英文。

以原始碼 TarBall 方式的安裝步驟

先安裝可能缺少的套件:

yum install libpng*
yum install gtk2-devel

下載並複製 codec:

cd /usr/local/src
wget http://www.mplayerhq.hu/MPlayer/releases/codecs/all-20061022.tar.bz2
tar -jxvf all-20061022.tar.bz2
mv all-20061022 /usr/lib/codecs

下載 mplayer 原始檔:

cd /usr/local/src
wget http://www.mplayerhq.hu/MPlayer/releases/MPlayer-1.0rc1.tar.bz2
tar -jxvf MPlayer-1.0rc1.tar.bz2
cd MPlayer-1.0rc1

編譯及安裝 mplayer (安裝路徑為 "/usr/local/MPlayer1.0"):

./configure --enable-gui --with-codecsdir=/usr/lib/codecs --with-win32libdir=/usr/lib/codecs --with-reallibdir=/usr/lib/codecs --with-xanimlibdir=/usr/lib/codecs --disable-inet6 --language=zh_TW,en --prefix=/usr/local/MPlayer1.0 --charset=utf8
make
make install

設定字幕的字型檔 (其中的 ukai.ttf 可替換為任何 Unicode 的中文字型檔):
```
cp /usr/share/fonts/chinese/TrueType/ukai.ttf ~/.mplayer/subfont.ttf
```

安裝預設的 skin 給 gmplayer 使用:

wget http://www1.mplayerhq.hu/MPlayer/Skin/PowerPlayer-1.1.tar.bz2
tar -jxvf PowerPlayer-1.1.tar.bz2
mv PowerPlayer /usr/local/MPlayer1.0/share/mplayer/skins/default

建立程式聯結，以便直接執行執行程式:

ln -s /usr/local/MPlayer1.0/bin/mplayer /usr/local/bin/
ln -s /usr/local/MPlayer1.0/bin/gmplayer /usr/local/bin/

額外的 Skin 可以到這裡下載，下載完，請解開放到 [/usr/local/MPlayer1.0/share/mplayer/skins/]

以 RPM 方式安裝步驟(僅適用於 CentOS 4.x 或 RHEL 4.x)

下載 RPM 檔:

mkdir /tmp/mplayer
cd /tmp/mplayer
wget http://ftp.wl0.org/RPMS-rhel4-various/mplayer-1.0pre7-2.i386.rpm
wget http://ftp.wl0.org/RPMS-rhel4-various/mplayer-gui-1.0pre7-2.i386.rpm
wget ftp://fr2.rpmfind.net/linux/falsehope/home/rathann/apt/7.3/RPMS.stable/mplayer-skin-default-1.0-2.noarch.rpm

進行安裝:
```
rpm -ivh *.rpm
```
取代字幕的字型檔(其中的 ukai.ttf 可替換為任何 Unicode 的中文字型檔):
```
cp /usr/share/fonts/chinese/TrueType/ukai.ttf /usr/share/mplayer/subfont.ttf
```

額外的 Skin 可以到這裡下載，下載完，請解開放到 [/usr/share/mplayer/Skin/]

疑難雜症

Q. 播放影片時，無法顯示中文字幕?
A. 到 [喜好設定] -> [字幕及OSD]，將 "編碼" 選 "繁體中文字集 (BIG5)"，將 "統一碼字幕" 打勾．再到 [字型] 將 "編碼" 選 "統一碼"。
Q. 播放影片時，影片無法縮放大小?
A. 到 [喜好設定] -> [視訊]，將 "可用的驅動程式" 選 "gl2" 或別的類型，再重新啟動程式播放影片。

Server

29 Jun 2007
2 comments
友善列印

在 CentOS 4.x 安裝 Subversion 1.4.3

Subversion (簡稱 SVN) 是目前最熱門的版本控制套件，因為語法與 CVS 相近，又是改良自 CVS，幾乎所有平台的 OS 都有支援，目前正快速地進佔版本控制的霸主地位。以下介紹 Subversion 在 CentOS 4.x 或 RHEL 4.x 下的安裝步驟。

安裝 Subversion

安裝步驟:

先移除系統上的 Subversion 1.2.x
```
rpm -e subversion
```
到 http://summersoft.fay.ar.us/pub/subversion/latest/rhel-4/i386/ 下載最新版的 subversion，下載符合下一個步驟中相同名稱的 rpm 套件。

依序安裝:

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

這樣就 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>

參考網頁

在 Windows 使用 Public/Private-Key 遠端登入 SSH 的方法

CentOS,
svn

在 Linux 中切換預設的桌面

在 Linux 中切換預設桌面的指令為:

switchdesk

ex. 切換為 KDE 桌面:

switchdesk kde

KDE 與 GNome 桌面的執行指令分別為 startkde 與 gnome-session

Server

Linux

[Perl]Perl 的相關網頁資源

手冊

gotAPI.com

教學/手冊

在 Windows 使用「非對稱金鑰」來遠端登入 SSH 的方法

在 Linux Server 下使用 SSH 的「非對稱金鑰」來進行遠端登入的方式相信大家應該都不陌生 (沒實做過的可參考鳥哥或 study-area 的文件)，下面我所要介紹的是在 Windows 下使用金鑰來遠端登入 SSH 的方法。

開始之前，先說一下「非對稱金鑰」:

「非對稱金鑰」是一種加密機制，由用戶端以特定的加密演算法產生兩把「非對稱」金鑰: 即「公鑰 (Public-Key)」與「私鑰 (Private-Key)」。然後我們會把「私鑰」留在自己的電腦，再把「公鑰」傳送到遠端主機，當兩把金鑰碰在一起就會進行加解密比對，以確認是否彼此的身份是可以信任的，藉以執行特定的作業。

說得更簡單一點，與其說是「公鑰」與「私鑰」，不如說是「鎖頭」與「鑰匙」，由我自己來打造一組鎖頭及鑰匙，我把這個鎖頭裝在一個門上，然後我就可以用我的這一把鑰匙來打開這扇門了! 同時呢，我也可以把相同的鎖頭裝在很多的門上，那我就可以用這一把鑰匙來開啟很多門了…這樣子的概念是否有比較清楚了呢?!

Blogger 可用的樣版

安裝步驟

使用方法

參考網頁

安裝步驟

使用方法

參考網頁

安裝步驟

使用方式

全部展開/隱藏全文

解決 “隱藏內文/繼續閱讀” 失效的問題

以原始碼 TarBall 方式的安裝步驟

以 RPM 方式安裝步驟(僅適用於 CentOS 4.x 或 RHEL 4.x)

疑難雜症

安裝 Subversion

以 SVN+SSH 存取檔案庫

從 Web 存取檔案庫

參考網頁

手冊

教學/手冊

PAGE NAVI

INFORMATION

簡繁轉換

熱門文章

文章分類

友站連結

近期迴響

贊助商連結

其它