前幾天公司電腦掛點，由於程式碼都有上版控，文件類現在都用雲端，軟體大多用簡單免費的工具，所以重建工作環境沒有花多少時間，但為了下次可以更快，把一些基本必備的東西列一下。
2015/07/12
常用工具筆記
記錄一下自己幾乎每天都會用到的工具，這樣在轉移工作環境時安裝環境時也比較快速。
文字編輯
VIM 是我的謀生工具，撰寫程式全靠他。
一般文字的處理我會使用 notepad++，隨時記錄事情，notepad++ 有一個很方便的地方是他可以將你貼上的內容暫存，所以你電腦無預警重開的話資料都還在。
資料庫管理
目前使用過最強大的資料庫管理 GUI 非 Navicat 莫屬，但他要錢，還不便宜，我很想買一套，不過真的太貴了。
SSH
非常強大且免費的免費軟體，我也使用他來連結 ptt，我也會同時安裝 Xftp 來存取 ssh 的檔案，lrzsz 沒有這個方便，不過他不是我的主力 FTP 軟體。
檔案管理
用過類似 TotalCommander 工具的人根本不太會想用 Windows 內建的檔案管理工具，FreeCommander 對我來說是各方面都不需要設定的簡單版 TotalCommander，幾乎是裝好不用改什麼就符合我的需求。
秀圖軟體
選擇這套軟體主要是因為安裝檔案小，開啟速度快，該有的編輯功能也都有。
FTP/SFTP
這套軟體的有幾個功能使用上很方便，快速篩選檔案、同步流覽（他的同步流覽強在如果另一邊沒有相等的資料夾會問你要不要建立目錄，其他的 FTP 通常都是自動解除同步流覽）、自動偵測更新檔案上傳（這是我當初選用他的最大原因，不過感覺他對必須上傳檔案的判斷有些問題，希望越改越好）。
Git
即便公司不是使用 Git 當作 repository base 也沒關係，因為他的 terminal 介面也很好用，用打的比用滑鼠點的快多了。
遠端管理
這套強大的遠端管理工具應該不用我多做介紹了。
以上的軟體絕大部分都可以在 File Hippo 找到，我也會順裝他的 Manager，保持我的軟體更新，上面幾個軟體都有一樣的特點，免費、輕快，大部分都有偵測自動更新，這樣的軟體最合我胃口了，用的喜歡的各位記得給原作者 donate 喔。
2013/07/30
Git Notebook
將 Dropbox 當作 Server
# 以 case/test/ 資料夾為範例 # --bare 是指不建立 .git 目錄，而把裡面的檔案直接放在目前目錄下 # 適合在沒有修改檔案或開發的機器上 ~/Dropbox/case/test/git init --bare
本機端設置
/var/www/test $ git init # 初始化 git /var/www/test $ git config --global user.name "Daivd" # 初始使用者名稱 /var/www/test $ git config --global user.email "chan15tw@gmail.com" # 初始使用者 Email /var/www/test $ git conifg --global diff.tool vimdiff # 指定 vimdiff 當作檔案差異比較軟體 /var/www/test $ git remote add test ~/Dropbox/case/test/ # 設定遠端目錄 /var/www/test $ git config branch.master.remote test /var/www/test $ git config branch.master.merge refs/heads/master /var/www/test $ git config push.default current /var/www/test $ touch 1.txt # 建立一個檔案 /var/www/test $ git add . # 新增檔案到 repo /var/www/test $ git commit . -m "add new file" # commit 檔案 /var/www/test $ git commit --amend -m "add new file 1.txt" # 修改剛剛的 commit message /var/www/test $ git push test master # 將剛改變的結果 push 到 test 的 master /var/www/test $ git pull test master # 將 test server 上的最新結果 pull 下來
其他常用指令
/var/www/test $ git log # 查看歷史資料 /var/www/test $ git status # 查看當前 git 狀況 /var/www/test $ git difftool 1.txt # 比較 1.TXT 跟之前版本的差異 /var/www/test $ gitk 1.txt # 圖形化介面
git add -p
使用 git add -p 時 git dd 會進入互動模式，會逐一秀出你編輯過的內容並且讓你決定要不要加到這次的 commit，執行後下方會有幾個選項
y - stage this hunk n - do not stage this hunk q - quit; do not stage this hunk nor any of the remaining ones a - stage this hunk and all later hunks in the file d - do not stage this hunk nor any of the later hunks in the file g - select a hunk to go to / - search for a hunk matching the given regex j - leave this hunk undecided, see next undecided hunk J - leave this hunk undecided, see next hunk k - leave this hunk undecided, see previous undecided hunk K - leave this hunk undecided, see previous hunk s - split the current hunk into smaller hunks e - manually edit the current hunk ? - print help
我認為比較會用到的有
y - 加入這個 hunk n - 跳過這個 hunk q - 離開這次的 stage a - stage 這次的 hunk 並且 stage 此單一檔案接下來所有的 hunk d - 跳過這整個檔案的 hunk g - 會列出這個檔案所有的 hunk 讓你選擇編號前往 / - 搜尋 hunk j - 跳過這個 hunk 不儲存, 前往下一個未儲存的 hunk J - 跳過這個 hunk 不儲存, 前往下一個不管有沒有儲存過的 hunk k - 跳過這個 hunk 不儲存, 前往上一個未儲存的 hunk K - 跳過這個 hunk 不儲存, 前往上一個不管有沒有儲存過的 hunk e - manually edit the current hunk
透過這個方法，可以實現某個檔案我們修改了幾個部分，卻只想先 commit 某些部分的願望。
2013/03/31
VIM 搜尋與取代同時加入遞增號碼
我們常常使用 y 來複製重複的程式，尤其是陣列，例如：
$arr[] = '';
使用 yy 後執行 5p，便會產生六個陣列
<?php $arr[] = ''; $arr[] = ''; $arr[] = ''; $arr[] = ''; $arr[] = ''; $arr[] = ''; ?>
今天學到一個技巧可以帶入遞增的數字
:let i=1 | 2,7g/\[/s//\='['.i/ | let i=i+1
便可以得到下面的結果
<?php $arr[1] = ''; $arr[2] = ''; $arr[3] = ''; $arr[4] = ''; $arr[5] = ''; $arr[6] = ''; ?>
2012/11/15
2012/11/08
Notepad++、Vim 加入 Consolas 字型，Windows、Linux 適用
身為一個 web developer，最常做的事情就是打字，每天面對密密麻麻的英文，選擇一個舒適的字體對視覺及心情來說都有很大的影響，很多人會推 Monaco font，個人是喜歡 Consolas 的樣式，簡單寫一下如何在 Linux 安裝 Consolas 字型，讓 notepad++ 以及 vim 可以吃到。
notepad++
vim
我的測試環境是 Mint，我想 Ubuntu 系列應該不會差太多，Mint 可以直接吃 Windows 的 font，所以只要把 C:\Windows\Fonts\ 裡面有關 Consolas 的 ttf 檔案複製出來，直接丟到 Linux 的 fonts 資料夾就可以用，Mint 的路徑為 /usr/share/fonts/truetype，我不確定是不是一定要放到 truetype 這個目錄裡面，不過網路上有人建議這樣放，但我想放在 fonts 下面應該也可 run，如果不確定 fonts 資料夾在哪可以使用 whereis fonts 來找找看，複製完之後執行刷新字型的 command
sudo fc-cache fc-list | grep Consolas # 接著查看有沒有安裝成功 Consolas:style=Italic Consolas:style=Bold Consolas:style=Bold Italic Consolas:style=Regular # 看到這些內容就表示有抓到新字型了
在 terminal 的情況下，無法讓 vim 單獨讀取字型，必須修改 terminal 的設定
改完以後整個 terminal 介面就變美美的啦
notepad++ 就簡單許多，選自訂 -> 設定程式語言格式，在字型部分選擇 Consolas 即可
Windows gvim 的部分，只要在 vimrc 加上 set guifont=Consolas:h11 即可，h 後面是指字級，可以隨喜好調整
2012/10/24
VIM 讀取文件範圍
vim 的 :r 功能可以讀入指定檔案內容到目前的檔案，例如
:r test.html # vim 會在游標處將 test.html 的所有文字讀入 :10r test.html # 在第十行插入 test.html 的內容
不過如果我們只是要插入該檔案某個範圍，vim 本身並沒有提供相關的支援，必須透過語法的結合達到此目的，Windows, Linux 都適用
:r! sed -n 6,12p test.html # 讀入 test.html 六到十行的內容 :10r! sed -n 6p test.html # 於第十行讀入 test.html 第六行的內容
2012/08/31
2012 泳渡日月潭
2011 年 12 月 14 號發起的活動，時間咻一下的就到了，當下的心態是，台灣活動這麼多，人生就比當歸長一點，不去留下一些有難度的回憶，總覺得非常可惜，就像朱大說的，你要當航海王，總得出海吧，跟好友 Max 練習準備之下，對這次的挑戰是很有信心跟把握的，我們水瓶座跟摩羯座的真男人是準備好再上路，所以再行前整理了一些重點給團友參考以及提醒，由於希望做到快速讓團友了解，就盡量不贅述了，做重點式的圖文分享。
參考網站
日月潭總長 3.3 KM
一般人平均的時間是 2 - 2.5 小時，以游完為目的，不用太勉強自己。
必要的裝備
為了安全，大會有強制要攜帶安全配備，魚雷浮板是大家最建議的，就不要花其他心思在想一些替代方案了，泳帽的部分大會會發放，並且規定要戴，所以基本上就是自備魚雷浮板、泳鏡、泳帽就可以下水了，魚雷浮板的作用是在休息而非助游喔，許多體育用品店都可以取得，價格約在 $600 上下，據說當地也有的租，但有點冒險就是了，有些比較好的價格稍高一點，有比較多的收納裝置，就看個人取捨，不能穿蛙鞋，千萬不要做這種事 = =。
其他小配備
- 防曬油：怕曬傷的朋友建議一定要塗防曬油，兩三個小時的游泳背部一定會曬到
- 拖鞋：下水前有一段路要走，中間沒有地方讓你放置鞋子，地面很燙，赤腳可能會不舒服，建議穿著拖鞋，要下水前再置入防水袋，方便到對岸以後可以穿回
- 零錢：建議帶 $500 以內的百元鈔，如果游到撐不住的話，可以坐遊艇回出發點，一次 100 元
- 空塑膠桶：網友說其實防水袋之類的產品最後東西一定還是會濕，難得成功泳渡想要拍照的人，網友建議用個空塑膠桶來裝這些東西保證沒問題
- 食物：建議帶瓶水以及巧克力，在途中補充體力
當天流程
當天領隊會帶泳渡者去招霧碼頭報到，此時沒有泳渡者領隊會帶往遊艇處，可以自己選擇要不要付 100 元遊艇前往對面的終點德化社，去到那邊主要就是等泳渡者上岸，分享那一刻的榮耀，除了坐船也可以走路，但領隊說有點遠，不太建議，等最後同車的所有泳渡者上來報到後，領隊才會叫司機開車過來德化社的集合點載大家一起回去，如果泳渡者吃完便當不想等，也可以自費坐遊艇回德化社。
游泳的時候每隔 50 公尺 就會有休息平台，體力不支或不舒服的人可以上去休息，沿途也有許多救生員，有狀況的話可以大聲求救，總而言之這是跟自己的比賽，耐力的比賽都是比誰可以撐到最後，沒有人在比一開始誰衝得快的，所放鬆心情盡力就好。
偉大的印記
順利游完全程的話，可以去領取證書以及紀念 t-shirt，希望各位團友都可以順利完成 :)
2012/08/10
7-Zip 64-bit 右鍵選單問題
公司的電腦是 64b-it 的 Windows 7，今天安裝了 7-zip 64-bit 的版本，結果在檔案或是資料夾上面按右鍵一直無法出現選單，查詢的結果發現似乎是 7-Zip 本身的 bug，只要執行以下幾個步驟就可以解決這個問題。
Step 1.
移除已經安裝好的 7-Zip，然後再次執行安裝，全部都用預設值即可，接著前往安裝後的目錄，通常位於 C:\Program Files\7-Zip，找到 7zFM.exe 這個檔案，按右鍵選單選取以系統管理員身分執行。
Step 2.
點選工具，選項，在系統欄位上，點選 7z, zip, rar 作為關聯，若有更多的需求可以另外點選。
Step 3.
切到 7-Zip 這個 tab，把將 7-Zip 整合到快顯功能表中這個勾取消，按確定退出，並且關閉 7-Zip 檔案管理員。
Step 4.
重複 Step 1 的動作打開，用系統管理員身分打開 7-Zip 檔案管理員，這次將將 7-Zip 整合到快顯功能表中打勾，然後按下確定，做完這些步驟，可以按的壓縮選單應該就會出現了。
2012/06/15
SyntaxHighlighter 3.0.83
h6 {
margin: 0;
padding: 12px 0 4px 0;
line-height: 0;
color: orange;
font-size: 12px;
}
blockquote {
background-color: #F8F8F8;
border-left: 6px solid #AAAAAA;
color: #111;
margin: 0 0 9px;
padding: 7px;
}
.post-body iframe {
margin: 8px 0 0 0;
}
code {
display:inline-block;
white-space:no-wrap;
background:#fff;
font-size:.8em;
line-height:1.5em;
color:#555;
border:1px solid #ddd;
-moz-border-radius:0.4em;
-webkit-border-radius:0.4em;
-o-border-radius:0.4em;-ms-border-radius:0.4em;
-khtml-border-radius:0.4em;
border-radius:0.4em;
padding:0 .3em;
margin:-1px 0
}
em {
color: #EE5C42;
}
早上替換 blog 的 template 時沒有注意到 SyntaxHighlighter 會一併被替換，備份一下。
2012/06/09
Linux 解壓縮方式筆記
tar
# 壓縮檔案 tar -zcvf file.tar.gz DIRECTORY/ # 解壓縮檔案 tar -zxvf file.tar.gz # 指定目錄 tar -zxvf file.tar.gz -C DIRECTORY/
zip
# 壓縮檔案 zip -r file.zip DIRECTORY/* # 解壓縮檔案 unzip file.zip # 指定目錄 unzip file.zip -d DIRECTORY/
rar
# 壓縮檔案 rar a file.rar DIRECTORY/* # 解壓縮檔案 unrar x file.rar # 指定目錄 unrar x file.rar DIRECTORY/
2012/05/14
2012/03/21
Gmail 搜尋技巧
我是 Gmail 重度使用者，Gmail 的搜尋 bar 是可以下語法的，整理一下常用的筆記
from:
搜尋寄件者
ex: from:tony
to:
搜尋收件者
ex: to:chan（搜尋寄給 chan 的 Email）
subject:
搜尋標題
ex: subject:晚餐（搜尋標題有晚餐的 Email）
OR
同時成立的搜尋
ex: from:Chan OR from:Phoebe（搜尋從 Chan 或 Phoebe 寄來的 Email）
-
避免
ex: -from:Chan（避免來自 Chan 的 Email）
in:
位於哪個資料夾
ex: in:inbox（搜尋收件夾內的 Email）
has:attachment
搜尋有附加檔案的 Email
ex: from:Chan has:attachment（搜尋來自 Chan 並且有附加檔案的 Email）
filename:
搜尋檔案名稱
ex: in:inbox filename:rar（搜尋收件夾內檔名有 rar 的 Email）
after: before:
時間區間搜尋
ex: after:2011/12/12 before:2012/12/12（搜尋 2011/12/12 至 2012/12/12 的 Email）
is:
符合條件
ex: is:read（已閱讀） is:unread（尚未閱讀） is:chat（是 Google Talk 的內容） is:starred（被標記星號）
上方的搜尋內容都可以組合搜尋
from:chan is:unread after:2012/2/1 filename:txt
2012/01/11
Google Analytics Ajax 變更
目前很多網頁技術為了節省空間以及效能上的考量，會大量使用 Ajax 方式在同一個頁面撈取資料，頁籤尤其是最常使用的例子，Google 流量分析是絕大多數網站用來統計流量的工具，如何做到 Ajax 撈取資料時也可以同時列入 Pageview 呢，方式如下。
我們以 jQuery 的 Tabs 為例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link media="all" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#tabs').tabs({
select: function(ev, ui) {
window.location.hash = ui.tab.hash;
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview', window.location.href]);
}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#content1">content 1</a></li>
<li><a href="content2.html" title="content2">content 2</a></li>
<li><a href="#content3">content 3</a></li>
</ul>
<div id="content1">content 1</div>
<div id="content3">content 3</div>
</div>
</body>
</html>
原理很簡單，當選取了 tabs 之後，再次觸發 GA 的 track 功能，我先將 anchor 還原回去 url，再將 url 變數塞進 trackPageview 的變數裡面，你或許不想將 anchor 放置於超連結頁面，但這也代表你每點選一次就要自己指定網址一次，所以讓他自己去抓取是最方便的，當然，已經加上 anchor 了照理說應該也不用塞網址進變數，但我怕會有 lag 情況，這樣可以買雙保險。
2011/12/20
MySQL 多個欄位整合為同一欄位
今天 case 遇到一個問題，會員的 table 有三個欄位，分別記錄了寶寶 A、寶寶 B、寶寶 C 的生日年分，後台需要所有的生日年分統合當作下拉選單去篩選，如果只有一個欄位的話還好辦，直接 SELECT 並且 GROUP 就做掉了，但今天有三個欄位要組成一個選項叫要點技巧了，解法如下。
tbl_year
y_id 索引
y_y1 年份 1
y_y2 年份 2
y_y3 年份 3
方法一：建立 tempory table
DROP TABLE IF EXISTS temp_year;
CREATE TEMPORARY TABLE temp_year (
t_year INT
) ENGINE = MyISAM ;
INSERT INTO temp_year
SELECT y_y1 FROM tbl_year;
INSERT INTO temp_year
SELECT y_y2 FROM tbl_year;
INSERT INTO temp_year
SELECT y_y3 FROM tbl_year;
SELECT * FROM temp_year GROUP BY t_year ORDER BY t_year DESC;
方法二：使用 union 大法
SELECT y_y1 AS theYear FROM tbl_year UNION SELECT y_y2 FROM tbl_year UNION SELECT y_y3 FROM tbl_year ORDER BY theYear DESC
這兩種方式會得到相同的結果
2011/11/29
PHPExcel
PHPExcel 是我用過最久最強大的 PHP 檔案轉成 Excel 檔案的套件，簡單介紹一下我常用到的方式，PHPExcel 可以儲存成 Office 2007 的格式，但有鑑於流通性的問題，下方的範例將格式存成 2003 的版本。
include_once 'lib/PHPExcel.php';
$excel = new PHPExcel();
$excel->setActiveSheetIndex(0); // 選擇sheet
$excel->getActiveSheet()->setTitle('sample'); // 將sheet命名
$excel->getActiveSheet()->SetCellValue('A1', 'Hello'); // 設定內容
$type = PHPExcel_Cell_DataType::TYPE_STRING;
$excel->getActiveSheet()->getCell('B1')->setValueExplicit('0966666666', $type);
// PHPExcel 可以選擇 Excel 的欄位格式
// 將格式轉成 string 可以避免像手機開頭的 0 自動忽略的問題
$excel->getActiveSheet()->getColumnDimension('A1')->setWidth(20); // 設定寬度
// 如果你無法預知欄位多寡，可以用動態的方式放置資料
for ($i = 2; $i < 5 ; $i++) {
for ($j = 0; $j < 2; $j++) {
$excel->getActiveSheet()->setCellValueByColumnAndRow($j, $i, 'test');
$excel->getActiveSheet()->getCellByColumnAndRow(1, $i)->setValueExplicit('0966666666', $type);
}
}
// 下載
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="sample.xls"');
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($excel, 'Excel5');
$objWriter->save('php://output');
2011/11/24
CKEditor
FCKEditor 是我早期一直用到現在的編輯器，該官網出了新產品 CKEditor 頗久，但一直沒時間摸，最近打算開始使用新玩具，寫下一些筆記來使用。
CKEditor 基本框架
我在 config 裡面定義了自己的 toolbar 叫 chan
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/config.js" type="text/javascript"></script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
jQuery 導入
ckeditor 有整合 jQuery 的插件，可以利用 jQuery 導入。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.6.2.min" type="text/javascript"></script>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script src="ckeditor/config.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#editor').ckeditor();
});
</script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea>
</body>
</html>
config 基本定義
CKEditor 不像 FCKEditor 是修改他預設的 js 檔案，而是自己定義一個檔案並且透過 api 決定你要使用的內容，我定義了我認為比較用的到跟客戶比較不會出錯的按鈕，並且將 enter 的預設模式改為 br，還有加上開啟圖片上傳的功能。
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'chan';
config.toolbar_chan =
[
{name:'document', items:['Source','-','Preview','Print']},
{name:'clipboard', items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
{name:'editing', items:['Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt']},
{name:'basicstyles', items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
'/',
{name:'paragraph', items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','- ','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
{name:'links', items:['Link','Unlink','Anchor']},
{name:'insert', items:['Image','Table','HorizontalRule','SpecialChar','PageBreak']},
'/',
{name:'styles', items:['Format','Font','FontSize']},
{name:'colors', items:['TextColor','BGColor']},
{name:'tools', items:['Maximize']}
];
config.enterMode = CKEDITOR.ENTER_BR;
config.filebrowserImageUploadUrl = 'upload.php';
// 如果你要更換外觀，只要設定 skin 即可
// 官方有 v2、office2003 以及 kama 三種預設的 skin
config.skin = 'v2';
};
toolbar 名稱翻譯，來自阿忠伺服器
Source：原始碼 Save：儲存 NewPage：開新檔案 Preview：預覽 Templates：樣版 Cut：剪下 Copy：複製 Paste：貼上 PasteText：貼為文字格式 PasteFromWord：自 word 貼上 Print：列印 SpellChecker：拼字檢查 Scayt：即時拼寫檢查 Undo：復原(上一步) Redo：重複(下一步) Find：尋找 Replace：取代 SelectAll：全選 RemoveFormat：清除格式 Form：表單 Checkbox：核取方塊 Radio：選項按鈕 TextField：文字方塊 Textarea：文字區域 Select：選單 Button：按鈕 ImageButton：影像按鈕 HiddenField：隱藏欄位 Bold：粗體 Italic：斜體 Underline：底線 Strike：刪除線 Subscript：下標 Superscript：上標 NumberedList：編號清單 BulletedList：項目清單 Outdent：減少縮排 Indent：增加縮排 Blockquote：引用文字 JustifyLeft：靠左對齊 JustifyCenter：置中 JustifyRight：靠右對齊 JustifyBlock：左右對齊 Link：插入/編輯超連結 Unlink：移除超連結 Anchor：插入/編輯錨點 Image：插入影像 Flash：插入Flash Table：插入表格 HorizontalRule：插入水平線 Smiley：插入表情 SpecialChar：插入特殊符號 PageBreak：插入分頁符號 Styles：樣式 Format：格式 Font：字體 FontSize：大小 TextColor：文字顏色 BGColor：背景顏色 Maximize：最大化 ShowBlocks：顯示區塊 About：關於 CKEditor
圖片上傳
CKEditor 的圖片上傳需要自己定義跟撰寫，個人覺得這樣比較好，提供比較大的彈性，下方是 CKEditor 上傳用 PHP 的基本架構。
// Required: anonymous function reference number as explained above. $funcNum = $_GET['CKEditorFuncNum'] ; // Optional: instance name (might be used to load a specific configuration file or anything else). $CKEditor = $_GET['CKEditor'] ; // Optional: might be used to provide localized messages. $langCode = $_GET['langCode'] ; // Check the $_FILES array and save the file. Assign the correct path to a variable ($url). $url = '/path/to/uploaded/file.ext'; // Usually you will only assign something here if the file could not be uploaded. $message = ''; echo "";
我使用了 class.upload.php 當作我的上傳套件，下方是我修改的結果。
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;
// Usually you will only assign something here if the file could not be uploaded.
$message = '';
$url = '';
$newName = date('YmdHis'); // 新檔案名稱
$dir = 'uploads/editor/'; // 預設目錄
$width = 600; // 定義寬度
include_once 'libs/class.upload.php'; // 使用 upload class
$foo = new Upload($_FILES['upload']);
if ($foo->uploaded) {
$foo->file_new_name_body = $newName;
$foo->image_resize = true;
$foo->convert = 'jpg'; // 轉換為 jpg
$foo->jpeg_quality = 100;
$foo->image_x = $width;
$foo->image_ratio_y = true;
$foo->process($dir);
if ($foo->processed) {
$url = $dir.$newName.'.jpg';
} else {
$message = $foo->error;
}
}
echo "";
PHPMailer
PHPMailer 是 PHP 一個歷久彌堅的 mail class，有強大的功能，在這邊介紹他簡單的用法。
include_once 'libs/class.phpmailer.php';
$mail = new PHPMailer;
$mail->SetLanguage('zh', 'libs/lang/'); // 設定語言
$mail->CharSet ='UTF-8'; // 設定預設編碼
$mail->Encoding = 'base64'; // 設定文字編碼
$mail->IsHTML(true); // 使用 HTML 格式
$mail->From = 'sender@gmail.com'; // 寄件者 Email
$mail->FromName = 'name'; // 寄件者名字
$mail->Subject = 'subject'; // 主題
$mail->Body = 'contents'; // 內容
$mail->AddAddress('receiver@gmail.com', 'receiver'); // 收件者 Mail
if ($mail->Send()) {
echo '寄出';
} else {
echo $mail->ErrorInfo;
}
$mail->ClearAddresses(); // 如果你要在迴圈跑寄信，使用這個函式可以清除收件者
// 如果你要自己設定 SMTP，此時要 include class.smtp.php
$mail->IsSMTP();
$mail->SMTPAuth = false;
$mail->Host = 'msa.hinet.net';
$mail->Port = 25;
// 如果是需要驗證的 Server
$mail->SMTPAuth = true;
$mail->Username = 'username';
$mail->Password = 'password';
2011/11/17
CentOS 6 修改網路卡參數
一般來說修改網路卡有兩種方式，一個是用 ifconfig 指令
ifconfig eth0 192.168.1.12 broadcast 163.26.1.255 netmask 255.255.255.0
另一種是直接修改系統的檔案
/etc/sysconfig/network-scripts/ifcfg-eth0 # 檔案路徑，可以使用 vi 或 vim 來編輯
參數
- DEVICE=eth0 這個裝置的名稱；
- BOOTPROTO=static 使用我們給的網路名稱（若為浮動 IP 則為 dhcp ）
- BROADCAST=192.168.1.255 這是節點的網域；
- IPADDR=192.168.1.12 這是這塊網路卡的位址；
- NETMASK=255.255.255.0 子遮罩網路；
- ONBOOT=yes 開機自動開啟網路卡。
- DNS1=168.95.1.1 DNS
完成之後可以使用指令重新啟動網路服務
service network restart /etc/init.d/network restart # 兩個取其一使用即可
如過要啟用或關閉網路卡，可以用 ifup 跟 ifdown 兩個指令
ifup eth0 ifdown eth0
2011/11/16
deck.js 簡介
http://imakewebthings.github.com/deck.js/
deck.js 是最近很受歡迎的 slide 製作方式，使用 HTML 5 的架構來製作投影片，只要載入他的核心 JavaScript 以及布景的 CSS，就可以構成最陽春的 slide 版本，他另外提供了一些用於場景變換的 transition 以及 extension，搭配使用就有很好的轉場效果，簡單介紹一下他的使用方式。
場景變換
目前官方提供了 4 個場景。
neon
none
swiss
web-2.0
只要 include 該同名的 JavaScript 以及 CSS，程式會自己偵測運行。
Transition
目前官方提供了三種特殊變換方式，只要載入同名的 CSS 檔案便可以使用。
- fade - 淡入淡出
- horizontal-slide - 平行切換
- vertical-slide - 垂直切換
Extension
- deck.goto: 按下 g 之後，可以輸入數字前往指定的 slide 頁面
- deck.hash: 將每個有指定 id 的 slide 於網址後方加入 anchor，這樣可以便於提供別人某個指定的網址，以觀看指定的 slide 頁面
- deck.menu: 按下 m 之後，可以將所有的 slide 切換為縮圖選擇模式（大推）
- deck.navigation: 增加可以點選左右切換頁面的按鈕
- deck.status: 呈現目前以及所有頁面的數字編號
相關的使用方式都在這邊：http://imakewebthings.github.com/deck.js/docs/
直接用實際的例子一步一步來完成投影片
這是最基本的 HTML 5 架構，現在要來 include 我需要的格式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>my first deck.js slide</title> </head> <body> </body> </html>
完成了初步的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/deck.core.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.hash.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.navigation.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.menu.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.status.css">
<!-- theme and transition CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/web-2.0.css">
<link rel="stylesheet" type="text/css" href="css/deck/fade.css">
<!-- include js -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/deck/deck.core.js"></script>
<script type="text/javascript" src="js/deck/deck.hash.js"></script>
<script type="text/javascript" src="js/deck/deck.navigation.js"></script>
<script type="text/javascript" src="js/deck/deck.menu.js"></script>
<script type="text/javascript" src="js/deck/deck.status.js"></script>
<script type="text/javascript" src="js/deck/modernizr.custom.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</head>
<body class="deck-container">
<!-- navigation extension -->
<a href="#" class="deck-prev-link" title="Previous">←</a> <a href="#" class="deck-next-link" title="Next">→</a>
<!-- status extension -->
<p class="deck-status"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> </p>
</body>
</html>
我們指定了 .slide 給 deck 辨別，所以所有 class 等於 deck.js 的都會視為投影片，在同一個頁面你想要訊息依次出現的話，只要使用巢狀的結構，將所有內容加上 slide 的 class 屬性 就可以達成，使用一些 HTML 語法會產生不同的預設 layout，如 h1 - h6、pre、cite 等等，也可以搭配自己設計的 CSS 來布置你要的樣式，是不是很有趣呢。
訂閱：
文章 (Atom)