tag:blogger.com,1999:blog-79586110238042534302024-03-21T19:28:16.839+08:00Open Jiang分享,是進化的力量Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.comBlogger75125tag:blogger.com,1999:blog-7958611023804253430.post-85213209376890610632018-02-08T20:31:00.001+08:002018-02-08T20:31:38.554+08:00修改 MariaDB 預設儲存目錄.md<h1 id="修改-mariadb--預設儲存目錄">修改 MariaDB 預設儲存目錄</h1>
<p>三年前寫了關於修改 MySQL 預設存放資料夾的記錄「<a href="https://jeffyon.blogspot.tw/2014/03/ubuntu-mysql.html">在 uBuntu 中移動 MySQL 的資料存放位置</a>」,經過這幾年的改變和 Oracle 買下昇陽後 MySQL 的轉變,目前已經習慣使用 MariaDB(原 MySQL 創辦人)作為 LAMP 中的 <strong>M</strong>。再記錄 MariaDB 中預設儲存目錄如何修改。</p>
<p>OS: UBuntu 16.04.3 Server x64<br>
DB: MariaDB 10.2.12</p>
<p>方法上和先前 MySQL 設定大同小異</p>
<ol>
<li>
<p>停止 MariaDB 服務</p>
<pre class=" language-bash"><code class="prism language-bash">$ <span class="token function">sudo</span> systemctl stop mariadb
</code></pre>
</li>
<li>
<p>建立新的存放目錄位置(如:<code>/db/mariadb</code>)</p>
<pre class=" language-bash"><code class="prism language-bash">$ <span class="token function">sudo</span> madir /db/mariadb
$ <span class="token function">sudo</span> <span class="token function">chown</span> mysql.mysql /db/mariadb
</code></pre>
</li>
<li>
<p>複製目前目錄下的內容至新的存放目錄位置</p>
<pre class=" language-bash"><code class="prism language-bash">$ <span class="token function">sudo</span> <span class="token function">cp</span> -rp /var/lib/mysql/* /db/mariadb
</code></pre>
</li>
<li>
<p>修改 MariaDB 設定檔,Ubuntu 位置為 <code>/etc/mysql/my.cnf</code></p>
<pre class=" language-bash"><code class="prism language-bash">$ <span class="token function">sudo</span> vim /etc/mysql/my.cnf
</code></pre>
<p>將 [mysqld] 下的 datadir 修改為新的位置</p>
<pre><code>[mysqld]
...
datadir = /db/mariadb
...
</code></pre>
</li>
<li>
<p>重新啟動 MariaDB</p>
<pre class=" language-bash"><code class="prism language-bash">$ <span class="token function">sudo</span> systemctl start mariadb
</code></pre>
</li>
</ol>
Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com1tag:blogger.com,1999:blog-7958611023804253430.post-58088876407109349122017-10-15T20:14:00.001+08:002017-10-15T20:16:05.694+08:00如何更改 Docker image 預設安裝資料夾<h1 id="如何更改-docker-image-預設安裝資料夾">如何更改 Docker image 預設安裝資料夾</h1>
<p>一開始規劃 ubuntu partition 的時候,<code>/var</code> 雖然有獨立成一個新的 partition,但因為有特別安排了一個 partition 專門給 MariaDB(MySQL)使用,所以 <code>/var</code> 也就沒有給的特別大。這一陣子開始使用 docker 作為開發環境,docker 的 image 預設是儲存於 <code>/var/lib/docker</code> 路徑下,會佔用 <code>/var</code> 很多空間,希望能將預設的路徑移到別的 partition。</p>
<p>在不同版本的 Linux 下設定方式會有些不同,在 <a href="https://stackoverflow.com/questions/24309526/how-to-change-the-docker-image-installation-directory">Stackoverflow</a> 有許多討論,另外在 <a href="https://sysinfo.io/ubuntu-16-04-move-docker-root/">Travis 這篇文章</a> 中也有直接提供一個 shell script 可以修改 ubuntu 16.04 下的預設路徑。</p>
<p>在 <a href="https://sysinfo.io/ubuntu-16-04-move-docker-root/">Docker doc</a> 中發現官方的設定,相對簡單,在自己嘗試後可以適用,分享我在 ubuntu 16.04 下的設定方式,設定後不用重新開機即可套用。</p>
<pre class="prettyprint"><code class=" hljs mathematica">OS:Ubuntu <span class="hljs-number">16.04</span><span class="hljs-number">.3</span> LTS (Xenial Xerus)
Docker <span class="hljs-keyword">Version</span>:<span class="hljs-number">17.09</span><span class="hljs-number">.0</span>-ce</code></pre>
<h2 id="docker-daemon-設定檔">Docker daemon 設定檔</h2>
<p>Docker 官方建議的方式為在 <code>daemon.json</code> 檔案中設定 daemon flags,<code>daemon.json</code> 在 Linux 中預設位置在 <code>/etc/docker/</code>。在 ubuntu 16.04 中預設這個檔案不存在,可以手動新增這個檔案。</p>
<pre class="prettyprint"><code class=" hljs bash">$ <span class="hljs-built_in">sudo</span> vim /etc/docker/daemon.json</code></pre>
<p>在檔案中加上下面的內容,graph 為執行與存放的路徑位置:</p>
<pre class="prettyprint"><code class=" hljs json">{
"<span class="hljs-attribute">graph</span>": <span class="hljs-value"><span class="hljs-string">"/mnt/docker-data"</span></span>,
"<span class="hljs-attribute">storage-driver</span>": <span class="hljs-value"><span class="hljs-string">"overlay"</span>
</span>}</code></pre>
<h2 id="更新修改內容與重新啟動-docker">更新修改內容與重新啟動 Docker</h2>
<p>更新套用修改內容:</p>
<pre class="prettyprint"><code class=" hljs bash">$ <span class="hljs-built_in">sudo</span> systemctl daemon-reload</code></pre>
<p>重新啟動 Docker:</p>
<pre class="prettyprint"><code class=" hljs bash">$ <span class="hljs-built_in">sudo</span> systemctl restart docker</code></pre>
<p>重新啟動後,在 graph 指定的資料夾下(/mnt/docker-data)就會出現相關的資料夾。</p>
<hr>
<p>資料參考連結: <br>
1.<a href="https://stackoverflow.com/questions/24309526/how-to-change-the-docker-image-installation-directory">https://stackoverflow.com/questions/24309526/how-to-change-the-docker-image-installation-directory</a> <br>
2.<a href="https://sysinfo.io/ubuntu-16-04-move-docker-root/">https://sysinfo.io/ubuntu-16-04-move-docker-root/</a> <br>
3.<a href="https://docs.docker.com/engine/admin/systemd/#start-automatically-at-system-boot">https://docs.docker.com/engine/admin/systemd/#start-automatically-at-system-boot</a></p>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-78832529032358948082017-10-09T15:30:00.003+08:002017-10-09T15:33:27.084+08:00SSH tunnel 方式連結限制區域的伺服器<h1 id="ssh-tunnel-方式連結限制區域的伺服器">SSH tunnel 方式連結限制區域的伺服器</h1>
<p>自從進了前公司,好久沒有時間好好的更新部落格內容了。近期離開待了將近兩年的公司,和好朋友一起創立了新的新創公司,一起在農業上用技術來幫助返鄉的青小農,希望讓用更有溫度的數據來降低青農們的門檻。</p>
<p>新的開始新的期待,希望自己能繼續保持赤子熱忱,把研究過的方法記錄下來分享。</p>
<p>在這個資安即國安的時代(嗯…那是政府的口號),大部分的伺服器都會有許多的安全設定,無論是更新的規則或是防火牆的限制等等。會限制在某個網段甚至是某個 IP 才能進行連線某些服務,對於常常喜歡加入文青到咖啡廳 Out coding 的宅宅,還是要想辦法鑽回去連線伺服器。</p>
<p>如果在限制區域中有一臺能對外開放連線的 SSH 機器,我們便能夠使用 SSH Tunnel 的方式橋接回去,透過通道連結到目標伺服器。說穿了其實這臺對外的機器就是跳板,我們可以利用這個跳板以類似 Port forwarding 的方式,將遠端伺服器的 IP 與 Port 對應至本機的一組位址與 Port。</p>
<h3 id="linux-下的連接方式">Linux 下的連接方式</h3>
<p>大部分的 Unix-Like 系統都有內建 SSH 的 Client 指令,我們只需要在 terminal 下指令就可以達到目的。</p>
<p>指令如下:</p>
<pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$ </span>ssh -<span class="hljs-constant">N</span> -f -<span class="hljs-constant">L</span> <span class="hljs-constant">LOCAL_PORT</span><span class="hljs-symbol">:DEST_HOST</span><span class="hljs-symbol">:DEST_HOST_PORT</span> <span class="hljs-constant">SSH_USER</span><span class="hljs-variable">@SSH_SERVER_IP</span></code></pre>
<blockquote>
<p><strong>SSH 參數說明</strong> <br>
<strong>-N</strong>: 連接後不執行任何的遠端指令 <br>
<strong>-f</strong>: 連線後在背景執行 <br>
<strong>-L</strong> port:host:hostport: 在 Client 與 Server 建立一組 secure tunneling</p>
</blockquote>
<p><code>LOCAL_PORT</code>:本機連接埠 <br>
<code>DEST_HOST</code>:目標連線伺服器位址 <br>
<code>DEST_HOST_PORT</code>:目標連線伺服器埠號 <br>
<code>SSH_USER@SSH_SERVER_IP</code>:做爲跳板的機器連線</p>
<p>Example:</p>
<pre class="prettyprint"><code class=" hljs css">$ <span class="hljs-tag">ssh</span> <span class="hljs-tag">-N</span> <span class="hljs-tag">-f</span> <span class="hljs-tag">-L</span> 33890<span class="hljs-pseudo">:192</span><span class="hljs-class">.168</span><span class="hljs-class">.1</span><span class="hljs-class">.100</span><span class="hljs-pseudo">:5022</span> <span class="hljs-tag">username</span><span class="hljs-at_rule">@<span class="hljs-keyword">168.95.1.1</span></span></code></pre>
<p>上述的例子,會透過 168.95.1.1 這臺跳板機器,將限制區域內 192.168.1.100,Port <br>
為 5022 建立通道至本機的 33890 Port。可以透過 <code>netstat</code> 指令來觀察是否有建立成功。</p>
<pre class="prettyprint"><code class=" hljs vhdl">$ netstat -ntulp | grep <span class="hljs-number">33890</span>
(<span class="hljs-keyword">Not</span> <span class="hljs-keyword">all</span> processes could be identified, non-owned <span class="hljs-keyword">process</span> info
will <span class="hljs-keyword">not</span> be shown, you would have <span class="hljs-keyword">to</span> be root <span class="hljs-keyword">to</span> see it <span class="hljs-keyword">all</span>.)
tcp <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">127.0</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span>:<span class="hljs-number">33890</span> <span class="hljs-number">0.0</span><span class="hljs-number">.0</span><span class="hljs-number">.0</span>:* LISTEN <span class="hljs-number">5223</span>/ssh
tcp6 <span class="hljs-number">0</span> <span class="hljs-number">0</span> ::<span class="hljs-number">1</span>:<span class="hljs-number">33890</span> :::* LISTEN <span class="hljs-number">5223</span>/ssh </code></pre>
<h3 id="關閉通道">關閉通道</h3>
<p>先查詢目前我們開啓的通道是在哪一個 process id (pid) 執行,再透過 <code>kill</code> 指令刪除執行中的 process 即可關閉。</p>
<p>查詢 ssh 服務與在 33890 port 執行的 process,取得 <code><PID></code>。</p>
<pre class="prettyprint"><code class=" hljs perl">$ ps aux | <span class="hljs-keyword">grep</span> ssh | <span class="hljs-keyword">grep</span> <span class="hljs-number">33890</span></code></pre>
<p>以 kill 指令刪除指定編號 <code><PID></code> 的 Process。</p>
<pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$ </span>kill <<span class="hljs-constant">PID</span>></code></pre>
<p>以 <code>netstate</code> 檢查是否還有在執行。</p>
<pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$ </span>netstat -ntulp | grep <span class="hljs-number">33890</span></code></pre>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-78972005245333653772017-06-24T17:33:00.001+08:002017-06-24T20:57:00.824+08:00使用者只能 SFTP 登入自己的家目錄<h1 id="使用者只能-sftp-登入自己的家目錄">使用者只能 SFTP 登入自己的家目錄</h1>
<p>老師的電腦動畫課堂的期末作品,是開放讓學生透過 FTP 上傳自己的作品及網頁至實驗室的伺服器,由於 FTP 是明碼的封包傳輸於最近升級系統後,便考慮改用 SFTP(SSH File Transfer Protocol)來提供上傳的服務。</p>
<p>提供 SFTP 上傳的同時,希望使用者和以前一樣只能使用 SFTP 無法使用 SSH 登入伺服器。SFTP 為 SSH 的檔案傳輸服務,預設建立帳號的時候使用者同時可以使用這兩種服務。透過 SFTP only + Chroot 設定我們能限制使用者僅能 SFTP 並且無法離開自己的家目錄去到處閒晃。</p>
<ol>
<li><p>安裝 OpenSSH <br>
如果安裝的是 Ubuntu Server 應該在安裝過程會安裝 openssh-server 套件,沒有的話可以利用下面的指令安裝。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install openssh-server</code></pre></li>
<li><p>新增一個給 SFTP 使用的群組 sftpaccess</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> groupadd sftpaccess </code></pre></li>
<li><p>修改 OpenSSH 設定檔 <br>
編輯 <code>/etc/ssh/sshd_config</code> 設定檔,在約 77 行的地方找到 <code>Subsystem sftp /usr/lib/openssh/sftp-server</code> 註解此行並修改為 <code>Subsystem sftp internal-sftp</code>。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> vim /etc/ssh/sshd_config
<span class="hljs-comment">#Subsystem sftp /usr/lib/openssh/sftp-server</span>
Subsystem sftp internal-sftp</code></pre>
<p>在檔案的尾端加上下面的片段</p>
<pre class="prettyprint"><code class="language-bash hljs ">Match group sftpaccess
ChrootDirectory /home/%u
X11Forwarding no
AllowTcpForwarding no
ForceCommand internal-sftp</code></pre></li>
<li><p>建立新的使用者並加入 sftpaccess 群組 <br>
在設定檔中,我們設置了 sftpaccess 這個群組套用要做 <code>ChrootDirectory</code> 的設定,所以我們將要限制的使用者,加入這個群組中。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> useradd -G sftpaccess -m <<username>> <span class="hljs-operator">-s</span> /sbin/nologin</code></pre></li>
<li><p>更改使用者家目錄權限 <br>
由於 <code>Chroot</code> 的關係,這個要 <code>ChrootDirectory</code> 的目錄要將擁有者設定為 root,並且目錄的權限需要為 755。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> chown root:root /home/<<username>>
$ <span class="hljs-built_in">sudo</span> chmod <span class="hljs-number">755</span> /home/<<username>></code></pre></li>
<li><p>建立上傳目錄及修改權限 <br>
要讓使用者能上傳網頁到某個目錄,即能透過對應的網址看到內容,需要開啟上傳檔案的目錄,並於稍後的步驟中設定 Apache 的 <code>userdir</code>。Apache 預設的目錄名稱為 <code>public_html</code> 位置在使用者家目錄。 <br>
使用者的家目錄在前一個步驟已經將擁有者設定為 root,使用者在登入後一定無法使用這個目錄,我們必須建立一個上傳目錄(<code>public_html</code>)並且將權限賦予使用者帳號。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> mkdir /home/<<username>>/public_html
$ <span class="hljs-built_in">sudo</span> chown <<username>>:<<username>> /home/<<username>>/public_html
$ <span class="hljs-built_in">sudo</span> chmod <span class="hljs-number">755</span> /home/<<username>>/public_html </code></pre></li>
<li><p>安裝 Apache2</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install apache2</code></pre></li>
<li><p>開啟 userdir module <br>
使用 a2enmod 開啟 userdir,並重新啟動 Apache。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> a2enmod userdir
$ <span class="hljs-built_in">sudo</span> systemctl restart apache2</code></pre></li>
</ol>
<p>經過上述的步驟,使用者便僅能透過 SFTP 的方式將網站資料上傳至伺服器,由瀏覽器直接看到網頁內容了。</p>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-55096631893255917352016-08-14T17:33:00.001+08:002016-08-14T17:34:14.576+08:00雙系統升級 Windows 10 後造成 ubuntu 開機進入 grub rescue<h1 id="雙系統升級-windows-10-後造成-ubuntu-開機進入-grub-rescue">雙系統升級 Windows 10 後造成 ubuntu 開機進入 grub rescue</h1>
<p>7/29 是免費升級 Windows 10 的最後期限,雖然現在幾乎都使用 ubuntu 做為平時工作或一般使用的環境,鮮少使用 Windows 了,但是現在使用雙系統的方式,仍保有原本購買筆電附送的 Windows 8.1 。微軟這免費的升級的活動還是很吸引人,經過將近一年時間的改善,現在的 Windows 10 好像也沒有什麼災情,決定在這個截止日前升級。</p>
<p>升級完 Windows 10 重新開機後,系統就直接進入 <code>grub rescue</code> 模式,估計是原來磁區的位置號碼改變所致。只要找回之前開機的磁區修改正確就好了。</p>
<h3 id="查詢原本的開機磁區">查詢原本的開機磁區</h3>
<p>以 ls 指令查詢磁區情形</p>
<pre class="prettyprint"><code class=" hljs ruby">grub <span class="hljs-keyword">rescue</span>> ls
(hd<span class="hljs-number">0</span>,gpt1) (hd<span class="hljs-number">0</span>,gpt2) (hd<span class="hljs-number">0</span>,gpt3) (hd<span class="hljs-number">0</span>,gpt4) (hd<span class="hljs-number">0</span>,gpt5) (hd<span class="hljs-number">0</span>,gpt6)</code></pre>
<p>逐步以 <code>ls</code> 看能不能查詢目錄情形,找出開機磁區</p>
<pre class="prettyprint"><code class=" hljs r">grub rescue> ls (hd0,gpt1)/
grub rescue> ls (hd0,gpt1)/boot
grub rescue> ls (hd0,gpt2)/
grub rescue> ls (hd0,gpt2)/boot
<span class="hljs-keyword">...</span></code></pre>
<p>以此類推。記錄下查詢到的磁區位置(我的是<code>(hd0,gpt6)</code>),後面會使用上。</p>
<h3 id="離開-rescue-進入-normal-模式">離開 rescue 進入 normal 模式</h3>
<p>在 rescue 提示符號(<code>grub rescue></code>)輸入 <code>set</code> 查詢現在的 prefix 和 root 設定值。</p>
<pre class="prettyprint"><code class="language-bash hljs ">grub rescue> <span class="hljs-keyword">set</span>
prefix=(hd0,gpt5)/boot/grub
root=hd0,gpt5</code></pre>
<p>使用 <code>set</code> 指令將 prefix 和 root 更換成正確的磁區號碼,我的是將 (hd0,gpt5) 更改為 (hd0,gpt6)。</p>
<pre class="prettyprint"><code class="language-bash hljs ">grub rescue> <span class="hljs-keyword">set</span> prefix=(hd0,gpt6)/boot/grub
grub rescue> <span class="hljs-keyword">set</span> root=(hd0,gpt6)</code></pre>
<p>再次檢查 prefix 和 root</p>
<pre class="prettyprint"><code class="language-bash hljs ">grub rescue> <span class="hljs-keyword">set</span>
prefix=(hd0,gpt6)/boot/grub
root=hd0,gpt6</code></pre>
<p>切換至 normal 模式</p>
<pre class="prettyprint"><code class="language-bash hljs ">grub rescue> insmod normal
grub rescue> normal</code></pre>
<p>在進入 Normal 模式後,編輯 <code>/boot/grub/grub.cfg</code> 檔案,將 <code>(hd0,gpt5)</code> 取代為 <code>(hd0,gpt6)</code>。取代後執行:</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> grub-install</code></pre>
<p>結束後重新開機。</p>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-10353063006602284342015-11-22T22:24:00.003+08:002015-11-22T22:26:19.721+08:00StackEdit 自定 CSS 匯出 HTML Template<h2 id="stackedit-自定-css-匯出-html-template">StackEdit 自定 CSS 匯出 HTML Template</h2>
<p><a href="https://stackedit.io/">StackEdit</a> 是一個所見即所得的線上 Markdown 編輯器,在先前的文章已有許多的介紹。身為程式設計在寫筆記的時候更是需要像這樣的工具,讓我們更能聚焦在內容上並且能運用 <code>highlight.js</code> 來標註程式碼。</p>
<hr>
<h3 id="檔案分享的方法">檔案分享的方法</h3>
<h4 id="google-雲端硬碟dropbox">Google 雲端硬碟、Dropbox</h4>
<p>我們更可以將筆記透過 StackEdit 直接發佈至 Google Blogger 上,或是儲存在自己的 Google 雲端硬碟、Dropbox 等等的位置。</p>
<h4 id="giststackedit-viewer">Gist、StackEdit Viewer</h4>
<p>如果需要將資料分享給其他沒有安裝 Markdown Viewer 的人,除了使用上述的方法,我們也可以將檔案發佈至 <a href="https://gist.github.com/">Gist</a> ,或是將我們的 Markdown 檔案放至網路,透過 StackEdit 的 Viewer 將網址引入直接使用瀏覽器觀看。Ex:<a href="https://stackedit.io/viewer#!url=https://raw.github.com/benweet/stackedit/master/README.md">Here</a> 。</p>
<pre class="prettyprint"><code class=" hljs asciidoc"><span class="hljs-link_url">https://stackedit.io/viewer#!url=</span>[<span class="hljs-link_label">放置 Markdown 檔案的 URL 位址</span>]</code></pre>
<h4 id="pdf">PDF</h4>
<p>StackEdit 的 PDF 功能是需要透過雲端的轉換(透過 Pondoc + LaTex 實踐),對於這個部分的功能是贊助者項目,如果覺得 StackEdit 好用,很建議大家贊助讓他們可以更長久的經營。另外一個方式,是利用 StackEdit Viewer + Chrome Browser 來實踐。</p>
<ol>
<li>開啓 Chrome Browser</li>
<li>開啓 StackEdit Viewer:Menu –> StackEdit Viewer</li>
<li>在 Viewer 模式下開啓列印</li>
<li>選擇 「Save as PDF」</li>
</ol>
<h4 id="html">HTML</h4>
<p>另外一種跨平臺支援的方式是使用 HTML,只要是有瀏覽器都可以觀看,而且透過 CSS 可以改變成我們自己想要變化的風格。也是今天主要想和大家分享的方法。</p>
<hr>
<h3 id="使用自定的-css-匯出-html-檔案">使用自定的 CSS 匯出 HTML 檔案</h3>
<p>StackEdit 匯出 HTML 的方式所匯出的檔案是很陽春白白靜靜的檔案,無論字型還是區塊安排都會有一點點的悲劇。還好,它還提供了一個以自定 Template 來匯出 HTML 的方式,讓我們有機會透過自定的 CSS 檔來完整個 HTML 檔的佈局。</p>
<p>自定的方式需要準備兩個主要的內容,<strong>HTML Template</strong> 和 <strong>Markdown CSS</strong>。</p>
<h4 id="html-template">HTML Template</h4>
<p>我的 HTML Template 如下:</p>
<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-doctype"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1.0"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="vbscript"><%= documentTitle %></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"***[user define css file url]***"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai_sublime.min.css"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!--
To use prettify.js uncomment this part and comment the previous script
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
--></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span><span class="vbscript"><%= documentHTML %></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code></pre>
<p>請以上面的 Template 的內容取代 StackEdit <strong>Default template</strong> 的設定。這份 Template 使用 Highlight.js 作為程式碼標註,如果想使用 Google 的 Code-prettify(prettify.js)只要交換註解的部分即可。</p>
<blockquote>
<p><strong>Note:</strong> <br>
1. 將 <code>***[user define css file url]***</code> 的內容取代為自己 CSS 的 URL位址。 <br>
2. 上述 Template 在 highlight.js 的部分是使用 sublime monokai 的顏色主題。</p>
<p><strong>Default template</strong> 的設定:</p>
<ol>
<li>Menu –> Settings</li>
<li><p>Settings 對話視窗 –> Advance</p>
<p><img src="https://lh3.googleusercontent.com/xvLM13O7Toz4w67Jwvmawc2mzcrWA7g_fHP50yUrzHMl=s0" alt="enter image description here" title="Selection_018.png"></p></li>
<li><p>Advance –> Default template</p>
<p><img src="https://lh3.googleusercontent.com/t6sUR3aCXYVRrGtMVyvDa_AP4zXw97EUML71Ki_Y2iQg=s0" alt="enter image description here" title="Selection_019.png"></p></li>
</ol>
</blockquote>
<h4 id="markdown-css">Markdown CSS</h4>
<p>我自定的 CSS 檔內容如下,歡迎複製存檔後傳至自己的網路空間(我是放在 Google 雲端硬碟中),在 Template 中設定好路徑即可。</p>
<pre class="prettyprint"><code class="language-css hljs "><span class="hljs-comment">/*
* Copyright 2015 ninthday.
* Version: 1.2
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Some content is copyrighted by Twitter, Inc., and also released under an
* Apache License; these sections are noted in the source.
*
* The CSS is based on this template:
* http://pacinispace.blogspot.tw/2013/07/write-in-markdown-stackedit-with-custom.html
*[(Copyright 2013 Alex Pacini unless otherwise noted.
* Licensed under the Apache License, Version 2.0 (the "License");]
* http://kevinburke.bitbucket.org/markdowncss/
*[(Copyright 2011 Kevin Burke unless otherwise noted.
* Licensed under the Apache License, Version 2.0 (the "License");]
* Then it was extended to cover the Markdown Extra and applied some light changes.
*/</span>
<span class="hljs-tag">html</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">62.5</span>%</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">body</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> auto</span></span>;
<span class="hljs-comment">/*font-family: Georgia, Palatino, serif;*/</span>
<span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> Arial, <span class="hljs-string">"文泉驛正黑"</span>, <span class="hljs-string">"WenQuanYi Zen Hei"</span>, <span class="hljs-string">"儷黑 Pro"</span>, <span class="hljs-string">"LiHei Pro"</span>, <span class="hljs-string">"微軟正黑體"</span>, <span class="hljs-string">"Microsoft JhengHei"</span>, sans-serif</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#444444</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">1.3</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">960</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">30</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.6</span>rpm</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h1</span>, <span class="hljs-tag">h2</span>, <span class="hljs-tag">h3</span>, <span class="hljs-tag">h4</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#111111</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> <span class="hljs-number">400</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h1</span>, <span class="hljs-tag">h2</span>, <span class="hljs-tag">h3</span>, <span class="hljs-tag">h4</span>, <span class="hljs-tag">h5</span>, <span class="hljs-tag">p</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">24</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h1</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">4.8</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h2</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">3.6</span>rem</span></span>;
<span class="hljs-comment">/* The bottom margin is small. It's designed to be used with gray meta text
* below a post title. */</span>
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">24</span>px <span class="hljs-number">0</span> <span class="hljs-number">6</span>px</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h3</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">2.8</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h4</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">2.4</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">h5</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">2</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">a</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#0099ff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">vertical-align</span>:<span class="hljs-value"> baseline</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">img</span><span class="hljs-attr_selector">[alt=banner]</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> -<span class="hljs-number">10</span>%</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">a</span><span class="hljs-pseudo">:hover</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ff6600</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">a</span><span class="hljs-pseudo">:visited</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> purple</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">ul</span>, <span class="hljs-tag">ol</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1.1</span>em</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">li</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">2.4</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">li</span> <span class="hljs-tag">ul</span>, <span class="hljs-tag">li</span> <span class="hljs-tag">ol</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-number">1.2</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">p</span>, <span class="hljs-tag">ul</span>, <span class="hljs-tag">ol</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.6</span>rem</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">1.5</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">800</span>px</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">pre</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">4</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px <span class="hljs-number">24</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">800</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value"> pre-wrap</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">pre</span> <span class="hljs-tag">code</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">1.7</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">14</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">"Source Code Pro"</span>, Consolas, monospace</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">pre</span> <span class="hljs-tag">code</span>, <span class="hljs-tag">pre</span><span class="hljs-class">.prettyprint</span> <span class="hljs-tag">code</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value">transparent <span class="hljs-important">!important</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">pre</span><span class="hljs-class">.prettyprint</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#23241f</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">code</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">4</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.6</span>rem</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#3f3f3f</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">2</span>px <span class="hljs-number">4</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba(<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">0.09</span>)</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">aside</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> right</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">390</span>px</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">blockquote</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-left</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px solid <span class="hljs-hexcolor">#eee</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">15</span>px <span class="hljs-number">20</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba(<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">0.06</span>)</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-top-right-radius</span>:<span class="hljs-value"> <span class="hljs-number">5</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-bottom-right-radius</span>:<span class="hljs-value"> <span class="hljs-number">5</span>px</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">cite</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">14</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"><span class="hljs-number">20</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#bfbfbf</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">cite</span><span class="hljs-pseudo">:before</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-string">'\2014 \00A0'</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">p</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#666</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">1.1</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">p</span><span class="hljs-pseudo">:last-child</span>,
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">ul</span><span class="hljs-pseudo">:last-child</span>,
<span class="hljs-tag">blockquote</span> <span class="hljs-tag">ol</span><span class="hljs-pseudo">:last-child</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">hr</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"><span class="hljs-number">21</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"><span class="hljs-number">21</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-function">rgba(<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">128</span>,<span class="hljs-number">0.3</span>)</span>
</span></span></span>}
<span class="hljs-tag">dt</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">dt</span>, <span class="hljs-tag">dd</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">5</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.6</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">dd</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-number">40</span>px</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">20</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> transparent</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-collapse</span>:<span class="hljs-value"> collapse</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.6</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-tag">th</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">td</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">20</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> left</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">vertical-align</span>:<span class="hljs-value"> top</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"> <span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#dddddd</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-tag">th</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-tag">thead</span> <span class="hljs-tag">th</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">vertical-align</span>:<span class="hljs-value"> bottom</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-tag">caption</span> + <span class="hljs-tag">thead</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">th</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">caption</span> + <span class="hljs-tag">thead</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">td</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">colgroup</span> + <span class="hljs-tag">thead</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">th</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">colgroup</span> + <span class="hljs-tag">thead</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">td</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">thead</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">th</span>,
<span class="hljs-tag">table</span> <span class="hljs-tag">thead</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">tr</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">td</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">table</span> <span class="hljs-tag">tbody</span> + <span class="hljs-tag">tbody</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"> <span class="hljs-number">2</span>px solid <span class="hljs-hexcolor">#dddddd</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.footnote</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">vertical-align</span>:<span class="hljs-value"> top</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> -<span class="hljs-number">0.5</span>em</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">0.8</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.tooltip</span> <span class="hljs-tag">li</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">1.4</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.toc</span> <span class="hljs-tag">ul</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">list-style-type</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1.1</span>rem</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.sequence-diagram</span>,
<span class="hljs-class">.flow-chart</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"><span class="hljs-number">1.1</span>rem
</span></span></span>}
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-tag">text</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-tag">text</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">15</span>px <span class="hljs-important">!important</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"><span class="hljs-string">"Source Sans Pro"</span>,sans-serif <span class="hljs-important">!important</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-attr_selector">[fill="#ffffff"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-attr_selector">[fill="#ffffff"]</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"><span class="hljs-hexcolor">#f8f8f8</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-attr_selector">[stroke="#000000"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-attr_selector">[stroke="#000000"]</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"><span class="hljs-hexcolor">#3f3f3f</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-tag">text</span><span class="hljs-attr_selector">[stroke="#000000"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-tag">text</span><span class="hljs-attr_selector">[stroke="#000000"]</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-attr_selector">[fill="#000"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-attr_selector">[fill="#000"]</span>,
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-attr_selector">[fill="#000000"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-attr_selector">[fill="#000000"]</span>,
<span class="hljs-class">.sequence-diagram</span> <span class="hljs-attr_selector">[fill="black"]</span>,
<span class="hljs-class">.flow-chart</span> <span class="hljs-attr_selector">[fill="black"]</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"><span class="hljs-hexcolor">#3f3f3f</span></span></span>;
<span class="hljs-rule">}</span></span>
</code></pre>
<blockquote>
<p><strong>Note:</strong> <br>
這個 Markdown CSS 是參考 <a href="http://pacinispace.blogspot.tw/2013/07/write-in-markdown-stackedit-with-custom.html">Pacini’s Space</a> 文章,再做了不少的修改。</p>
<ul>
<li>修改加強了對於中文的設定</li>
<li>整個系統單位使用 rem 的方式取代 px</li>
<li>調整相關 Highligh.js 顯示設定</li>
<li>UML 圖形跑版的調整</li>
<li>補上 dt, dd 設定</li>
<li>Note 區塊的寬度限制</li>
<li>分割線的顏色比重與寬度限制</li>
<li>將 pre code 的設定獨立</li>
</ul>
</blockquote>
<p>StackEdit 的 Hello! 文件,在套用我的 Markdown CSS 後的樣子(<a href="https://googledrive.com/host/0B0buxzQNDJ2Ld1Rpcl80N3dubWM">Live Preview</a>)。原先 Pacini 的<a href="http://output.jsbin.com/iyuxab/1">版本</a>。</p>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-26615873896398900092015-10-16T15:40:00.001+08:002015-10-16T15:48:25.846+08:00uBuntu /boot 空間 100% 滿載問題<h2 id="ubuntu-boot-空間-100-滿載問題">uBuntu /boot 空間 100% 滿載問題</h2>
<p>在先前的文章「<a href="http://jeffyon.blogspot.tw/2013/05/ubuntu-boot.html">uBuntu 更新時 /boot 空間不足</a>」中,有針對如果 boot 空間不足的時候該如何以 <code>apt-get purge</code> 的方式移除舊的 kernel-package。現在可以使用 <code>apt-get autoremove old-kernel-package</code> 的方式移除,如果不指定 kernel-package 的版本,則會移除現在所有的舊版本。</p>
<pre class="prettyprint"><code class="language-bash hljs "><span class="hljs-built_in">sudo</span> apt-get autoremove linux-image-<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">51</span>-generic linux-image-<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">51</span>-generic</code></pre>
<p>這個方式也會一併的移除相依套件,相當的安全又乾淨(愈來愈無腦操作了 =,.=)。先前 purge 方式是在 /boot 還有空間的時候移除舊版,最近碰上的問題則是 /boot 空間已經 100% 滿載,新的 kernel 又只有裝一半(相依套件未完成安裝),導致任何的 <code>apt-get</code> 方式都無法使用,系統提示要以 <code>apt-get -f install</code> 方式強制解決新 kernel 的相依問題,而 /boot 又沒有任何空間,進入 Deadlock 狀況…</p>
<p>對於這種狀況的解法,</p>
<ol>
<li><p>我們先清理出一些 /boot 的空間</p>
<pre class="prettyprint"><code class="language-bash hljs ">
<span class="hljs-comment"># 切換至 /boot 目錄下</span>
$ <span class="hljs-built_in">cd</span> /boot
<span class="hljs-comment"># 確認目前運行的 kernel 版本</span>
$ uname -r
<span class="hljs-comment"># 備份舊的 kernel 版本</span>
$ <span class="hljs-built_in">sudo</span> tar -cvf ~/boot.tar *<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">36</span>-generic *<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">37</span>-generic
<span class="hljs-comment"># 刪除已經備份的內容</span>
$ <span class="hljs-built_in">sudo</span> rm <span class="hljs-operator">-f</span> *<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">36</span>-generic *<span class="hljs-number">3.13</span>.<span class="hljs-number">0</span>-<span class="hljs-number">37</span>-generic</code></pre>
<blockquote>
<p><strong>Note</strong> <br>
完成後面的相依性安裝需要一些空間,請試需要移出足夠的空間。</p>
</blockquote></li>
<li><p>解決套件相依性問題</p>
<pre class="prettyprint"><code class="language-bash hljs "> $ <span class="hljs-built_in">sudo</span> apt-get <span class="hljs-operator">-f</span> install</code></pre></li>
<li><p>使用 autoremove 方法清除舊版本 </p></li>
</ol>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get autoremove</code></pre>
<p>重新開機就會套用新的 kernel 版本。</p>
<p>參考連結:</p>
<ul>
<li><a href="http://askubuntu.com/questions/171209/my-boot-partition-hit-100-and-now-i-cant-upgrade-cant-remove-old-kernels-to">My /boot partition hit 100% and now I can’t upgrade. Can’t remove old kernels to make room</a></li>
</ul>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-13731630230023560642015-10-02T10:32:00.003+08:002015-10-06T11:40:11.610+08:00PHP 命名風格<h2 id="php-的命名風格coding-style">PHP 的命名風格(Coding Style)</h2>
<p>PHP 的學習與使用有蠻常的時間,近期的 PHP 更新使得這個語言融入其他語言的優點,在程式的特性上有些大躍進。近期閱讀 「現代PHP(<a href="http://shop.oreilly.com/product/0636920033868.do">Modren PHP</a>)」 這本書,有種看完會更新整個使用 PHP 思維的感覺。書中有篇章在說明 PHP-FIG 的 PSR 建議標準,相同的使用規範能夠讓程式開發人員的程式互通性更好,合作性更佳,不再是悶着頭寫程式的時代,讓我們更容易的使用別人的輪子造車子。</p>
<p>其中 <a href="http://www.php-fig.org/psr/psr-1/">PSR-1</a> 對於程式碼的風格有一些基礎的規範,回顧之前不同時期寫的程式,會發現自己在不同的學習階段,會依據當時查詢的風格規範而更改,每次都有一點小小的不同,這次決定記錄下來讓自己參考也與其他人交流。</p>
<h3 id="變數命名">變數命名</h3>
<p>PSR-1 建議標準中,有針對類別、常數等建議命名原則,對於變數的名稱在 PSR-1 的內容中有提到沒有特別制定建議項目,之前觀察不同前輩的建議和查詢幾個有名的框架(Zend、Symfony、Laravel),寫下自己對變數名稱的命名。</p>
<ul>
<li>駝峰式命名法(camelCase),小寫字母開頭,後面每個單字的第一個字母大寫。</li>
<li>要使用描述性的命名方式。</li>
<li>迴圈變數通常使用: <code>$i</code>, <code>$j</code>, <code>$k</code>, …等等。</li>
<li>存放 session 的變數前面以 sess 開頭。</li>
<li>存放 cookie 的變數前面以 coke 開頭。</li>
<li>臨時性的變數前面以 tmp 開頭。</li>
<li><code>$query</code> 和 <code>$result</code> 這兩個變數只能用在 SQL 的查詢語法變數與查詢結果變數。</li>
<li>項目名稱(option)全部使用小寫及使用底線 <code>_</code> (underscore)分隔。</li>
</ul>
<pre class="prettyprint"><code class="language-php hljs "><span class="hljs-variable">$defaultOptions</span> = <span class="hljs-keyword">array</span>(
<span class="hljs-string">'some_default'</span> => <span class="hljs-string">'values'</span>,
<span class="hljs-string">'another_default'</span> => <span class="hljs-string">'more values'</span>,
);</code></pre>
<h3 id="常數命名">常數命名</h3>
<ul>
<li>常數名稱完全採用大寫英文字母。【PSR-1】</li>
<li>必要時使用底線 <code>_</code> (underscore)來區分單字。【PSR-1】</li>
<li>如果內容有可能會改變,應改採用變數而非常數。</li>
</ul>
<h3 id="類別命名">類別命名</h3>
<ul>
<li>必須使用<strong>大寫開頭</strong>的駝峰式命名(camelCase),又稱爲 TitleCase。【PSR-1】</li>
<li>extends 和 implements 關鍵字需和類別名稱在同一行。【PSR-2】</li>
</ul>
<h3 id="方法命名">方法命名</h3>
<ul>
<li>必須使用<strong>小寫開頭</strong>的駝峰式命名(camelCase)。【PSR-1】</li>
<li>小寫字母開頭,後面每個單字的第一個字母大寫。【PSR-1】</li>
<li>當參數的數量多長度超過最大值(80字)時,可以換行處理。換行後其他參數要縮排起始大括弧要在新的一行。【Zend <a href="#fn:zen-cs" id="fnref:zen-cs" title="See footnote" class="footnote">1</a>】</li>
</ul>
<pre class="prettyprint"><code class="language-php hljs "><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span><span class="hljs-params">(<span class="hljs-variable">$arg1</span>, <span class="hljs-variable">$arg2</span>, <span class="hljs-variable">$arg3</span>,
<span class="hljs-variable">$arg4</span>, <span class="hljs-variable">$arg5</span>, <span class="hljs-variable">$arg6</span>)</span>
{</span>
<span class="hljs-comment">// all contents of function</span>
<span class="hljs-comment">// must be indented four spaces</span>
}</code></pre>
<h3 id="sql語法">SQL語法</h3>
<ul>
<li>以 <code>$query</code> 變數名稱來存放 SQL 的命令。當發生錯誤時可以容易找出問題的地方。</li>
<li>所有 SQL 的關鍵字必須採用大寫英文字母。</li>
<li>SQL 的寫法要分行,幫助程式碼容易閱讀與了解。</li>
</ul>
<h3 id="檔案命名">檔案命名</h3>
<ul>
<li>檔案名稱完全採用小寫英文字母。</li>
<li>字與字之間使用底線 <code>_</code> 連接(EX:show_table.php)。</li>
<li>一定要使用 <code>.php</code> 作為副檔名。</li>
<li>會被引入的設定內容以 <code>.inc.php</code> 結尾。</li>
<li>檔名長度必須小於 32 個字元(符合舊式系統)。</li>
</ul>
<div class="footnotes"><hr><ol><li id="fn:zen-cs"><a href="http://framework.zend.com/manual/1.12/en/coding-standard.coding-style.html">Zend Coding Style</a> <a href="#fnref:zen-cs" title="Return to article" class="reversefootnote">↩</a></li></ol></div>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-49486617716540489012015-06-16T22:59:00.001+08:002015-06-16T23:04:50.751+08:00Python 的 MySQLdb 套件安裝<p><img src="https://lh3.googleusercontent.com/-lL42d9BlTNg/VYA6xzLI2pI/AAAAAAAAOfs/o2NqNSMpA4g/s0/python_sql.png" alt="Python and MySQL" title="python_sql.png"> <br>
先前 ubuntu 的套件庫沒有包含 Python 的 MySQLdb 套件,必須手動至 <a href="http://sourceforge.net/projects/mysql-python">MySQLdb 官網下載位址</a>下載來解壓縮安裝,如果還不確定是不是已經安裝,可以先進 python import 試試看。如果出現 <code>ImportError: No module named MySQLdb</code> 的訊息就表示還沒有安裝這個模組。</p>
<pre class="prettyprint"><code class="language-bash hljs ">Python <span class="hljs-number">2.7</span>.<span class="hljs-number">6</span> (default, Mar <span class="hljs-number">22</span> <span class="hljs-number">2014</span>, <span class="hljs-number">22</span>:<span class="hljs-number">59</span>:<span class="hljs-number">56</span>)
[GCC <span class="hljs-number">4.8</span>.<span class="hljs-number">2</span>] on linux2
Type <span class="hljs-string">"help"</span>, <span class="hljs-string">"copyright"</span>, <span class="hljs-string">"credits"</span> or <span class="hljs-string">"license"</span> <span class="hljs-keyword">for</span> more information.
>>> import MySQLdb
Traceback (most recent call last):
File <span class="hljs-string">"<stdin>"</span>, line <span class="hljs-number">1</span>, <span class="hljs-keyword">in</span> <module>
ImportError: No module named MySQLdb
>>> <span class="hljs-keyword">exit</span>()</code></pre>
<p>手動安裝的方式:先下載目前的版本,解壓縮後安裝,步驟如後。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> tar -zxvf MySQL-python-<span class="hljs-number">1.2</span>.<span class="hljs-number">4</span>b4.tar.gz
$ <span class="hljs-built_in">cd</span> MySQL-python-<span class="hljs-number">1.2</span>.<span class="hljs-number">4</span>b4
$ python setup.py build
$ python setup.py install</code></pre>
<p>若要使用 pip 安裝,在<a href="http://blog.mattwoodward.com/2012/08/installing-mysql-python-module-on-ubuntu.html">這篇</a>文章中有敘述安裝的步驟和方法,這邊記錄一下步驟。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> easy_install pip
$ <span class="hljs-built_in">sudo</span> pip install pip --upgrade
$ <span class="hljs-built_in">sudo</span> apt-get build-dep python-mysqldb
$ <span class="hljs-built_in">sudo</span> pip install MySQL-python</code></pre>
<p>現在使用的系統是 ubuntu 14.04.2 64bit,發現套件庫裡已經有包含 MySQLdb 了,只要直接用 apt-get 安裝即可。現在套件庫裡的版本是 1.2.3。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install python-mysqldb
$ <span class="hljs-built_in">sudo</span> apt-cache policy python-mysqldb
python-mysqldb:
Installed: (none)
Candidate: <span class="hljs-number">1.2</span>.<span class="hljs-number">3</span>-<span class="hljs-number">2</span>ubuntu1
Version table:
<span class="hljs-number">1.2</span>.<span class="hljs-number">3</span>-<span class="hljs-number">2</span>ubuntu1 <span class="hljs-number">0</span></code></pre>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-85118063136043540122015-06-13T22:15:00.001+08:002015-06-13T22:15:43.364+08:00迎接新生兒 CJScope ZQ-230 + Ubuntu GNOME 14.04.2<h2 id="新生兒-cjscope-zq-230">新生兒 CJScope ZQ-230</h2>
<p>筆記型電腦發展一直很迅速,至這兩年才慢慢的被平板取代掉一部分的市場,如果只是上上網或玩玩小遊戲倒是很夠用了,想做圖或是寫程式的話,還是使用筆記型電腦比較好一些,個人覺得平板暫時還是無法完全取代筆記型電腦。</p>
<p>上一臺筆電為了追求輕薄選擇了 inhon 的 carbon book,全機使用碳纖外殼整體重量才 880 公克,實在是非常適合攜帶的電腦。可是卻有一個對我來說非常大的致命傷,RAM 只有 4GB 大小而且還是與內顯共用,全機一體成形記憶體燒在主機板上,完全沒有能夠加裝的空間,開啓 Chrome 瀏覽器不久就會面臨記憶體吃光光的窘境…</p>
<p>為了更能夠以筆電來工作,尋覓一陣子各廠牌的筆電,總是會有一兩樣規格的不符合需求。記憶體足夠的螢幕解析度太差 沒有 FullHD ,輕薄的筆電又是記憶體不足,什麼都不錯的又太過於厚重。各大廠在產品定位區隔上都掐的剛剛好!老天爺啊~怎麼就是十全十美的筆電呢?!</p>
<p>上天果然是有聽到宅男的呼喚,學弟在某一天突然帶來一臺沒看過的廠牌 <a href="http://www.cjscope.com/cht/index.php">CJScope</a>,上網搜尋了一下這個品牌原來是客製化筆電的品牌(亮點:客製化),當週就立馬到他們的旗艦店去現場試機和討論,當天就拜倒在組裝的魅力下敗了一臺 ZQ-230。雖然沒有談成扣除掉 Windows 作業系統,自己挑了喜歡的硬體組合還是感到很滿足的啊!</p>
<p><img src="https://lh3.googleusercontent.com/EgXc-pHRGUpbEBro8Ivys61Vo4cc3Sp1_OMQTzRlR8s=s0" alt="安裝後的桌面截圖" title="安裝後的畫面"></p>
<h2 id="選擇-ubuntu-gnome-14042-lts">選擇 Ubuntu GNOME 14.04.2 LTS</h2>
<p>由於已經將日常的工作都轉到 Linux 平臺上,所以把 Windows 安裝在一般的硬碟,將 SSD 留做安裝 Linux 的空間以加快執行的速度。工作的桌機安裝的是 Ubuntu 14.04(Unity 桌面系統),家裡的桌機安裝的是 Linux Mint Cinnamon 17.1,HTPC 使用的是 Linux Mint MATE 17.1。一直想嘗試不一樣的桌面系統,所以在不同設備上安裝不一樣的桌面版本來嘗試。Linux 原本的設計就不是為了 Laptop,所以在電力消耗上是容易讓人頭疼,因為這一片文章 <a href="http://mylinuxexplore.blogspot.tw/2014/07/ubuntu-gnome-1404-trusty-tahr-lts.html">Ubuntu GNOME 14.04 “Trusty Tahr” LTS Review: Very very good!</a> 後來決定選擇 Ubuntu GNOME 14.04.2 來試試。</p>
<h3 id="硬碟分割">硬碟分割</h3>
<p>原本蠻擔心固態硬碟會因存取次數而有壽命上的問題,很多國外的文章都有提到現在的固態硬碟是今非昔比了,存取次數算一算都可以用上50年了。在分割的安排上除了存取次數太頻繁的,或是怕資料因為固態硬碟毀掉而蒸發的之外,全都安排放在固態硬碟中。</p>
<p>ZQ-230 可以安裝兩顆硬碟,一個是 M2 SATA 可安裝固態硬碟(SSD),另一個是 SATA3 的一般硬碟(HDD)。在分割區的安排是希望以提速為主,所以將 /boot、/root、/usr、/home(部分以 Link 方式到 HDD)都放在 SSD上,/tmp、swap 都放在HDD上。/var/log、/var/spool 和 /var/tmp 則是放在 ramdisk 上。</p>
<pre class="prettyprint"><code class=" hljs avrasm">/boot <span class="hljs-number">1</span>GB (SSD)
/usr <span class="hljs-number">40</span>GB (SSD)
/ <span class="hljs-number">40</span>GB (SSD)
/home <span class="hljs-number">40</span>GB (SSD)
/tmp <span class="hljs-number">20</span>GB (HDD)
<span class="hljs-keyword">swap</span> <span class="hljs-number">16</span>GB (HDD)</code></pre>
<h3 id="安裝及設定">安裝及設定</h3>
<h4 id="vim">VIM</h4>
<p>系統預設沒有安裝 VIM,有許多修改設定的方式都已經習慣使用 VIM,第一步當然是要先安裝它!</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install vim</code></pre>
<h4 id="git">Git</h4>
<p>身爲一個程式人必備的東西啊~順便裝了我覺得不錯的視覺化界面 gitg。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install git gitg</code></pre>
<h4 id="輸入法-ibus-rime">輸入法 ibus-rime</h4>
<p>神級輸入法引擎 RIME 加上拼音,近來一直都使用 fcitx + rime 作爲輸入,可是 ibus 現在已經是內建的預設輸入法,先前不穩定的年代是使用 python 開發現在已經更換成 C++,速度上進步很多,加上一直有在更新調整,就決定來試用 ibus + rime 的組合 <a href="https://github.com/rime/home/wiki/RimeWithIBus">rime with ibs</a>。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install ibus-rime
$ <span class="hljs-built_in">sudo</span> apt-get install librime-data-luna-pinyin librime-data-terra-pinyin</code></pre>
<h4 id="openjdk-7">OpenJDK -7</h4>
<p>Java 7 之後已經是以 OpenJDK 為主要發展的軸線,有一些工具的執行仍需要有 Java runtime 的環境,所以安裝 OpenJDK 7。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-get install openjdk-<span class="hljs-number">7</span>-jdk</code></pre>
<h4 id="安裝-gtk-theme-和-icon-theme">安裝 gtk theme 和 icon theme</h4>
<p>Numix</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> apt-add-repository ppa:numix/ppa
$ sudp apt-get update
$ <span class="hljs-built_in">sudo</span> apt-get install numix-icon-theme-circle numix-gtk-theme
$ <span class="hljs-built_in">sudo</span> apt-get install numix-icon-theme</code></pre>
<p>Moka Project</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> add-apt-repository ppa:moka/stable
$ <span class="hljs-built_in">sudo</span> apt-get update
$ <span class="hljs-built_in">sudo</span> apt-get install moka-icon-theme faba-icon-theme faba-mono-icons </code></pre>
<h4 id="安裝-sqlite-browser">安裝 Sqlite Browser</h4>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> add-apt-repository ppa:linuxgndu/sqlitebrowser
$ <span class="hljs-built_in">sudo</span> apt-get update
$ <span class="hljs-built_in">sudo</span> apt-get install sqlitebrowser</code></pre>
<h4 id="重新開機後的螢幕背光問題調整">重新開機後的螢幕背光問題調整</h4>
<p>在 ubuntu 14.04 的版本螢幕亮度在登出這次的 Session 後是不會被記憶住的,每次重新開機後,都會變成讓人眼睛會瞎掉的全亮模式,既傷眼睛又耗電。之前每次都是手動的去調整螢幕的亮度,可是每一次都要重新調整實在是有點累人。參考了 WEB UPD8 的文章<a href="#fn:bright" id="fnref:bright" title="See footnote" class="footnote">1</a>做了些修改來改善。</p>
<ol>
<li><p>找出 ACPI 的界面控制是什麼,這個可以透過 Xorg 的 Log 來找。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ grep backlight /var/log/Xorg.<span class="hljs-number">0</span>.log
[ <span class="hljs-number">5.251</span>] (--) intel(<span class="hljs-number">0</span>): Found backlight control interface intel_backlight (<span class="hljs-built_in">type</span> <span class="hljs-string">'raw'</span>) <span class="hljs-keyword">for</span> output eDP1</code></pre>
<p>可能會得到如上面的結果,在我的例子裡可以看到我的是 <strong>intel_backlight</strong> 將這個名稱記住,後面會使用上。</p></li>
<li><p>使用鍵盤上的硬體控制熱鍵(<code>Fn + brightness keys</code>)將螢幕的亮度調整到想要的範圍。</p></li>
<li><p>輸入下面的指令取得現在的亮度數值資訊。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ cat /sys/class/backlight/intel_backlight/brightness
<span class="hljs-number">169</span></code></pre>
<blockquote>
<p><strong>Note:</strong> 這裡 backlight 資料夾中的 <strong>intel_backlight</strong> 是在步驟1中取得的 ACPI 控制界面名稱。記住這裡所得到的數值。</p>
</blockquote></li>
<li><p>以 root 身份在 <code>/etc/init/</code> 下建立 <em>fixbrightness.conf</em> 檔案</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> vim /etc/init/fixbrightness.conf</code></pre>
<p>貼上後面的內容</p>
<pre class="prettyprint"><code class=" hljs coffeescript">description <span class="hljs-string">"Sets brightness after graphics device is loaded"</span>
start <span class="hljs-literal">on</span> graphics-device-added
task
exec /bin/echo BRIGHTNESS_VALUE > /sys/<span class="hljs-class"><span class="hljs-keyword">class</span>/<span class="hljs-title">backlight</span>/<span class="hljs-title">acpi_videoX</span>/<span class="hljs-title">brightness</span></span></code></pre>
<blockquote>
<p><strong>Note:</strong> 這裡的 BRIGHTNESS_VALUE 以在步驟3中取得的數值替換。</p>
</blockquote></li>
<li><p>重新開機,開機後就應該會是設定中的亮度不是全亮狀態了。</p></li>
</ol>
<h3 id="電源管理">電源管理</h3>
<p>ZQ-230 的電池容量很小,安裝完後馬上就發現系統的電量顯示,很有感的明顯的下降。使用時間約只有兩個半小時!!!這和官方標榜的九小時差異太大,即使接了兩顆硬碟比較耗電,但也不至於這麼離譜吧?!換到官方建立的 windows 中測試,也有四個小時左右的續航時間,應該就是校調的問題了。</p>
<p>StackOverflow 上有篇發問<a href="#fn:stackoverflow" id="fnref:stackoverflow" title="See footnote" class="footnote">2</a>討論探討了這個問題,所以文章一開始就提到 Linux 原本不是設計安裝在 Laptop 上使用的作業系統,對於電源的最佳化是需要再用其他套件調整。</p>
<h4 id="安裝-intel-pstate">安裝 intel p_state</h4>
<p>Laptop 的 CPU 若全速執行當然是很耗電的,intel 後來使用動態頻率調整來降低電源的消耗。於是建立了 intel p_state 專案的程式碼來調整。後來在 Ubuntu 的套件中已經安裝 intel p_state 支援,但是預設是沒有被啓動。透過下面的修改,可以啓動對 intel p_state的支援。</p>
<ol>
<li><p>編輯 grub 設定</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> vim /etc/default/grub</code></pre></li>
<li><p>在檔案中找到 <code>GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"</code> 並且把內容修改爲 <code>GRUB_CMDLINE_LINUX_DEFAULT="quiet splash intel_pstate=enable"</code>。</p></li>
<li><p>存檔並更新 grub 設定。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> update-grub</code></pre></li>
<li><p>重新開機套用設定。開機後檢查是否有啓動。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ cat /sys/devices/system/cpu/cpu*/cpufreq/scaling_driver</code></pre></li>
</ol>
<h4 id="安裝tlp">安裝TLP</h4>
<p>TLP 是一個很好的電源管理程式,有啓動 intel p_state 可以讓 TLP 的電源管理變得更好。TLP 安裝後會自動啓動,也可以使用預設的設定就好。安裝方式:</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> add-apt-repository ppa:linrunner/tlp
$ <span class="hljs-built_in">sudo</span> apt-get update
$ <span class="hljs-built_in">sudo</span> apt-get install tlp tlp-rdw</code></pre>
<h4 id="安裝-powertop">安裝 Powertop</h4>
<p>PowerTOP 是個分析、監控電力消秏的節能工具程式,是由 Intel 於 2007 年以 GPLv2 授權釋出的開放原始碼專案。我們可以使用它找出 GNU/Linux 上秏電的套件,並透過停用不必要的功能以達到省電的效果。 <br>
可以參考凍仁的這篇文章,使用 apt-get 安裝即可。</p>
<pre class="prettyprint"><code class="language-bash hljs ">$ <span class="hljs-built_in">sudo</span> aptitude install powertop</code></pre>
<h3 id="軟體安裝">軟體安裝</h3>
<h4 id="ubuntu-software-center">Ubuntu Software Center</h4>
<p>在 Ubuntu Software Center 安裝一些常用的軟體:</p>
<ul>
<li>System Load Indicator</li>
<li>Shutter</li>
<li>Filezilla</li>
<li>Geany</li>
<li>GParted Partition Editor</li>
<li>Meld Diff Viewer</li>
</ul>
<h4 id="手動下載安裝">手動下載安裝</h4>
<ul>
<li>下載安裝 Dropbox</li>
<li>Google chrome</li>
<li>Netbeans</li>
</ul>
<div class="footnotes"><hr><ol><li id="fn:bright"><a href="http://www.webupd8.org/2014/10/fix-brightness-getting-reset-to-very.html">FIX BRIGHTNESS GETTING RESET ON REBOOT IN UBUNTU</a> <a href="#fnref:bright" title="Return to article" class="reversefootnote">↩</a></li><li id="fn:stackoverflow"><a href="http://askubuntu.com/questions/501840/ubuntu-14-04-used-too-much-processor-after-latest-updatest">Ubuntu 14.04 used too much processor after latest updatest</a> <a href="#fnref:stackoverflow" title="Return to article" class="reversefootnote">↩</a></li></ol></div>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-40991655950710832832015-06-03T21:37:00.001+08:002015-06-03T22:53:30.048+08:00StackEdit 發佈至 Blogger 的段落 P 標籤問題<h1 id="stackedit-發佈至-blog-的段落問題">StackEdit 發佈至 Blog 的段落問題</h1>
<p>前一陣子動工修改 Bolgger 的模板,設計修改版面的時候是停留在面後一直沒有特別的去注意段落間距,這幾天回來看最近的文章,突然發現段落們的感情未免也太好了一點,居然都黏在一起…(如下圖)。</p>
<p><img src="https://lh3.googleusercontent.com/1nYxKmiwQn5ROjxtimAUBH4IqwJDtpR8O-dnL7EoRYs=s0" alt="enter image description here" title="Selection_002.png"></p>
<p>原本的文章確實是有段落,清清楚楚的分隔開來的!</p>
<p><img src="https://lh3.googleusercontent.com/UPncvyZaAIb0gj19Ncfg4BvjHv5qUTY90GT7igech7c=s0" alt="有段落" title="Selection_001.png"></p>
<h3 id="段落跑版的原因">段落跑版的原因</h3>
<p>滑鼠右鍵開啓網頁的原始碼觀察,發現原本該是 <code><p>...</p></code> 的部分已經被改成 <code><br /></code> ,不是段落而是換行了。</p>
<p><img src="https://lh3.googleusercontent.com/_felgUJba5TbBVoj8yP65X2e-b8zmOcONjOZj8N-Drc=s0" alt="變成BR標籤了" title="Selection_001.png"></p>
<p>國外有篇發問提到這個問題 <a href="https://webapps.stackexchange.com/questions/5051/how-can-i-make-blogger-insert-p-tags-instead-of-br-when-using-rich-text-edit">How can I make blogger insert p tags instead of <br> when using rich text editor?</a> ,在舊有的編輯器上會使用 <code><div></code> 和 <code><br></code> 來取代 <code><p></code> ,所以原先在 StackEdit 裡匯出有 <code><p></code> 段落的文章也會在經過 Blogger 時被取代成換行符號。</p>
<h3 id="解決方法">解決方法</h3>
<p>請在 Blogger 後臺隨意的開啓一片文章,在右手邊文章設定 -> 選項 -> 換行符號,點選成「按下 Enter 鍵可建立換行符號」項目,此步驟只需要設定一次,設定會自行記住套用至其他的文章。</p>
<p><img src="https://lh3.googleusercontent.com/QYY3Z0yOGtnt49ZweE4KcWUDQAHct3WEUVxyUzThsLE=s0" alt="文章設定" title="Selection_002.png"></p>
<p>完成設定後,請重新再由 StackEdit 發佈一次讓 Blogger 能夠更新內容,更新的方法是由後臺找到該文章的 Post ID,在 StackEdit 發佈的地方加填上要更新文章的 Post ID,幫助辨識是哪一篇文章。重新更新發佈後就可以發現段落已經恢復原樣了!</p>
<p><img src="https://lh3.googleusercontent.com/RD6zSucouztEiDMfDv7oDmMBP5ml30huZnOQ_OCjnYA=s0" alt="段落版型恢復" title="Selection_003.png"></p>Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-68101298329236097902015-05-23T17:56:00.001+08:002015-05-24T09:43:39.813+08:00抓抓爬爬的好幫手 PHP CURL<h1 id="好一個抓爬仔-php-curl">
好一個抓爬仔 PHP cURL</h1>
現在好流行 “自己的 OO 自己 O” 前次的會議中,看到傳播學院的學生實實在在的貫徹了這個理論,“自己的<strong>網頁</strong>自己<strong>爬</strong>”該學生由於不想一頁一頁的存需要的網頁,自己寫了一個小爬蟲來爬這些網頁的資料存成 CSV 檔。只能在心裡說:同學,留口飯給我們吃啦!<br />
<br />
對於爬資料,PHP 裡面除了使用 <code>fopen</code> 的方式抓取網頁,還有一個厲害的抓爬仔函式庫 <a href="http://php.net/manual/en/book.curl.php">cURL (client URL)</a>。這個函式庫支援 libcurl,允許我們使用來與不同類型的 Server 做溝通。在 ubuntu 下預設是沒有安裝這個套件,可透過 apt-get 來安裝。<br />
<br />
<pre class="prettyprint"><code class=" hljs lasso">$ sudo apt<span class="hljs-attribute">-get</span> install php5<span class="hljs-attribute">-curl</span></code></pre>
<h3 id="curl-函式">
cURL 函式</h3>
使用 PHP cURL 的方法很簡單,只要初始化、設定、執行、關閉四個步驟就好,活用和複雜的部分是在<strong>設定</strong>這個步驟裡的參數設定。<br />
<br />
<ol>
<li>初始化 <br /><br />
<code>curl_init()</code> 函式初始化一個 cURL session,會傳回一個 cURL handle 作為後面設定執行等函式使用。初始化的時候可以直接指定 URL ,或保留空白由後面設定中在指定。</li>
<li>設定 <br /><br />
使用 <code>curl_setopt()</code> 函式設定 cURL session handle 的項目內容,這裡有非常非常多的項目參數可以設定,可以參考 <a href="http://php.net/manual/en/function.curl-setopt.php">官方網站 curl_setopt</a> 的項目參數說明本文後面僅列出常用的參數。</li>
<li>執行 <br /><br />
<code>curl_exec()</code> 函式執行一個已經設定好參數的 cURL session。執行成功時會回傳 <strong>TRUE</strong> 失敗時回傳 <strong>FALSE</strong>,如果參數裡包含 <strong>CURLOPT_RETURNTRANSFER</strong> 設定為 TRUE 時,執行成功後會回傳內容。</li>
<li>關閉 <br /><br />
<code>curl_close()</code> 函式會關閉指定的 cURL session,並釋放資源及刪除 cURL handle。</li>
</ol>
一個簡單的範例:<br />
<br />
<pre class="prettyprint"><code class=" hljs php"><span class="hljs-comment">// 建立一個新的 cURL session</span>
<span class="hljs-variable">$ch</span> = curl_init();
<span class="hljs-comment">// 設置 URL 及其他參數</span>
curl_setopt(<span class="hljs-variable">$ch</span>, CURLOPT_URL, <span class="hljs-string">"http://www.example.com/"</span>);
curl_setopt(<span class="hljs-variable">$ch</span>, CURLOPT_HEADER, <span class="hljs-number">0</span>);
<span class="hljs-comment">// 抓取 URL 內容</span>
curl_exec(<span class="hljs-variable">$ch</span>);
<span class="hljs-comment">// 關閉 cURL session 釋放系統資源</span>
curl_close(<span class="hljs-variable">$ch</span>);</code></pre>
<h3 id="curl-傳送常用項目參數">
cURL 傳送常用項目參數</h3>
<table><thead>
<tr>
<th>Option</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>CURLOPT_RETURNTRANSFER</td>
<td>將獲得的資料傳回</td>
</tr>
<tr>
<td>CURLOPT_TIMEOUT</td>
<td>允許 cURL 執行的最長秒數</td>
</tr>
<tr>
<td>CURLOPT_CONNECTTIMEOUT</td>
<td>允許和伺服器連線的最長秒數</td>
</tr>
<tr>
<td>CURLOPT_POST</td>
<td>啟用後會送出一個常規的 POST 請求</td>
</tr>
<tr>
<td>CURLOPT_POSTFIELDS</td>
<td>POST 請求時的參數,可以是陣列或字串</td>
</tr>
<tr>
<td>CURLOPT_USERAGENT</td>
<td>在 HTTP 請求中加入 user-agent 字串,可用來模擬瀏覽器或其他爬蟲</td>
</tr>
<tr>
<td>CURLOPT_COOKIE</td>
<td>設定 HTTP 請求中「Set-Cookie:」部分的內容,以分號 <code>;</code> 作為參數間的分隔</td>
</tr>
<tr>
<td>CURLOPT_COOKIEJAR</td>
<td>cURL <strong>收到</strong>的 HTTP 請求中 Set-Cookie 存放為檔案的檔案位置</td>
</tr>
<tr>
<td>CURLOPT_COOKIEFILE</td>
<td>cURL <strong>發出</strong>的 HTTP 請求的 Cookie 檔案存放位置</td>
</tr>
<tr>
<td>CURLOPT_REFERER</td>
<td>設定 HTTP 請求中「Referer:」部分的值</td>
</tr>
<tr>
<td>CURLOPT_FOLLOWLOCATION</td>
<td>遞迴跟隨 「Location:」,可用來跟隨被重新導向的頁面資料</td>
</tr>
<tr>
<td>CURLOPT_MAXREDIRS</td>
<td>指定最大重新導向的數量,這個選項是與 <code>CURLOPT_FOLLOWLOCATION</code> 一起使用的。</td>
</tr>
<tr>
<td>CURLOPT_VERBOSE</td>
<td>啟用時會報告 cURL 每一件意外的事情</td>
</tr>
<tr>
<td>CURLOPT_STDERR</td>
<td>設置一個錯誤輸出地址,值是一個資源類型</td>
</tr>
</tbody></table>
抓取資料很有趣也很有挑戰性,會隨著我們的目標不同而有不同的抓法及解析方法,有空再繼續補充了!Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-70989731248564360572015-05-20T20:52:00.000+08:002015-05-23T17:58:03.412+08:00使用 Stackedit 發佈至 Blogger<h1 id="使用-stackedit-發佈至-blogger">
使用 StackEdit 發佈至 Blogger</h1>
目前部落格裡新的文章幾乎都是在 <a href="https://stackedit.io/">StackEdit</a> 上使用 Markdown 來完成撰寫,是一個舒適的撰寫體驗,也更能讓自己專注在文章的撰寫,不用去調整版面上的細節。StackEdit 除了可以將文本直接存在 Google Drive 上,圖形直接嵌入引用 Google+ 相簿,讓整個寫作的流程都是在雲端上完成,另外一個我喜歡的優點,是能夠直接將寫好的文章發佈到自己的部落格上。<br />
<h3 id="發佈至-blogger-部落格">
發佈至 Blogger 部落格</h3>
將文章發佈至 Blogger 上的方法非常簡單,在 StackEdit 的左上角開啓左邊的功能列,拉開 Publish 項目並點選 Blogger,如下圖:<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzw_DOPKlh3ReYGEw3CqtfZpQoFsZtKcY9TjKWQAGr4DsOqfyDtKMlgilUfbtZz3p-tcB_ljmrwQSx71Pw7D23iSqq6nM55wictGwprpDr0r4XYPyLENKgTKM10FbqodGvzvMy61RMrXw/s0/" title="StackEdit 功能表的 Publish" /><br />
第一次使用時會導引至 Google 的授權頁,回到彈出的對話視窗,填寫好 Blogger 的 URL 內容。新發佈不用填寫 POST ID,這個是未來若需要更新內容的時候使用的。<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijKcnWOOMwX2S69znidO1N-L4d4_Hrnb7rwQ5JIplllhzwM819ikVCqtAttP7FFKuXyj2wWhr71q7TwfJnTC_ZiLVhlIzhOM-KDiOm5EofabylzyqQfw8ZIZcYFrx3M5SAs6oD18cC3eTh/s0/" title="Publish 對話視窗" /><br />
按下「OK」後就完成發佈的動作,發佈完成後,在 StackEdit 該篇文章的右上角會出現 Blogger 的 Icon。<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnjimsSqAFK05USSK3OUc4l3G2R1jDmiOIUQxqqHD5HTTNxBe798GhodyK5pv59k5ujdOTl3Y-WhGRxg-UcrDRoi7uAu1ZfESO8_HexMhfKKK0KlpEnIimsOlmVE5afB45VOPoRTmcrOK/s0/" title="出現 Blogger 的 Icon" /><br />
<h3 id="部落格的樣本改造">
部落格的樣本改造</h3>
文章發佈至 Blogger 後有的模板會有小小的問題,如果我們使用 Markdown 時沒有寫入圖片的最大寬度,插入的圖片若比較大就會造成圖形突破樣板的驚嚇感。<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZ8oFcRmWkkvactC0MnzeL4FjuBm1iPF4l6Y93rh6vsI4-Aw_yMM0xxQXjfhlOAZ_F3KkQ2TLQkzLl5CA8BpiqiEP1q8GgZsR9MSCVNKrPmtjNgO2YIzHZlz4dAUwycNiA_0TWp9yUT1p/s0/" title="突破天際的圖片" /><br />
這個可以透過自己改造Blogger 模板內容的 CSS,將圖片最大限制在某個數值。簡單一點的方式,是選擇現在 Blogger 中就已經有限制圖片大小的佈景主題。 <br />
<h3 id="程式碼高亮標識">
程式碼高亮標識</h3>
StackEdit 的程式區塊是有支援程式碼高亮標識(Highlight)的功能,預設是使用 <a href="https://highlightjs.org/">Highlight.js</a> 的函式庫,也可以使用 Google prettify。Highlight.js 目前已經支援 118 種的程式語法自動偵測。還有 54 種的 Style 可以選擇。但是發佈至 Blogger 後因模板沒有相關的引入,所以程式碼區塊就和一般的文字一樣,沒有區塊和程式碼標識的區別。<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDRcv32KYDyrq1gZvnFEksP4G3Eb9K4jkfc1bZe-KkvR-Z8eRMAnDT1O0YNAMjAHcmd7c2zz3YPyowFba2HojDowe7n23SucEkuDZMso1VyOaZATqeU0PPrt2NfS6qHfGp7zMbbj7ak-s/s0/" title="Selection_072.png" /><br />
我們可以透過修改 Blogger 的樣板的樣式,引入 Highlight.js 的函式庫與樣式。進入 Blogger 的後臺管理頁面,在左方的選單中選擇 <strong>範本</strong> ,然後右方選 <strong>編輯 HTML</strong>,開啓樣板的 HTML 編輯畫面。<br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vfebEeTqpfHy97QKc_apXpwF8i4nKUe7LpDKFC-CzOUods7Jre8Zhkb127ve0BiNteb9AIftq53o3UYO92Vp0gZ0cVIrWmsEwIejFy1S-lK3MMv5qzai0WI803zcTOCNpNd20wwvGllS/s0/" title="Blogger 後臺" /><br />
我們可以在 <a href="https://highlightjs.org/">Highlight.js</a> 官方下載相關的檔案至自己的伺服器,或是使用官方提供的 CDN,下面例子是使用 cdnjs 的連結引入。將程式碼連結放在 <code><head>...</head></code> 之間。<br />
<pre class="prettyprint"><code class=" hljs r"><head>
<span class="hljs-keyword">...</span>
<link rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css"</span>>
<script src=<span class="hljs-string">"//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"</span>></script>
<script>hljs.initHighlightingOnLoadundefined);</script>
<span class="hljs-keyword">...</span>
</head></code></pre>
如果覺得預設的 Style 顏色配置不是很滿意,我們也可以套用其他的 Style,GitHub 上有許多 Style 可以選擇,請參考 <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles">Style 資料夾</a>。<br />
<blockquote>
記得要將名稱加上 <strong>min</strong> ex: OOO.min.css</blockquote>
套用後在程式碼的區段就會有語法的高亮標識了。<br />
<img alt="加上 Highlight.js 後的程式碼區段高亮標識" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrjTHIiVmhvqNihyphenhyphenuaR9RYyM-yarGanoAWpJHmK63j7O_5QNH4mCeksufFoHCgwpqnGu4_gNbXogLgx-IjYHnYwM6ozDvf3cicTvxdfvlFOLrUKqH2zl65pxTFSm88IU586udaZz4fprm2/s0/" title="加上 Highlight.js 後" />Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com2tag:blogger.com,1999:blog-7958611023804253430.post-35171257536994090032015-05-14T12:10:00.001+08:002015-06-03T21:33:34.430+08:00Markdown寫作部落格<h1 id="使用-markdown-寫部落格">
使用 Markdown 寫部落格</h1>
年紀大了,很多最近在查詢的資訊其實以前都花一番功夫查過,沒有記錄下來都還要再花時間找回。之前大部分的做法有二,一個是直接寫部落格,二來是使用 Evernote。<br />
<h4 id="編輯的時間太長">
編輯的時間太長</h4>
部落格一直以來都是使用 Google 的 <a href="https://www.blogger.com/">blogger</a>,內建的編輯器有點時代久遠,編輯與調整使得,每次都要花很久的時間才能完成一篇文章的撰寫。於是開始工作後,部落格就由週記、月記….間隔一直慢慢的拉大。在未發佈的文章裡放了滿滿的參考連結。<br />
<h4 id="編輯器太過陽春">
編輯器太過陽春</h4>
Evernote 是今年很多人推廣的一個筆記軟體,功能一直的加強擴張。有了 Windows 及 MaxOS 的應用程式,卻沒有 Linux 可以使用的應用程式。身爲 Linux 的使用者,只能使用 Evernote 的網頁版,而網頁版的編輯器功能大概就只是比 Notepad 強一些而已。<br />
<h4 id="筆記也能分享">
筆記也能分享</h4>
既然花了這麼多的時間查詢資料、整理資訊,總是希望這樣的結果是可以與人分享的,知識是需要交流才能夠更進步。放在 Evernote 就比較難與很多人分享與流通。<br />
基於上述的理由,決定探訪最近很多 Hacker 使用的 <a href="http://logdown.com/">Logdown</a>。Logdown 也是一個部落格平臺,最大不一樣的地方是使用 Markdown (Markdown 是一個專門爲了網路寫作而設計,能夠將文字轉換成 HTML 標記的語言。)來編輯,Logdown 結合 Blog 與 Markdown 成了平臺的名稱。<br />
Markdown 是個很酷的東西,幾乎使用鍵盤就可以完成一篇文章,不需要頻繁的使用滑鼠。可是…可是…這麼多年的累積心裡希望的還是不要更動太大(大搬家),如果能一次滿足兩個願望就好了!<br />
找了一些編輯器,看到網路有推薦一套 Markdown 的編輯器 <a href="https://stackedit.io/">StackEdit</a>,是一款和 Google Chrome 整合的 Web Application,可以在 Chrome 的 web store 上找到這個 <a href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg?utm_source=chrome-ntp-icon">StackEdit</a> 應用程式。選擇使用 StackEdit 的原因有幾個:<br />
<ul>
<li><strong>跨平臺使用,有瀏覽器就能編輯</strong> <br />
使用 Chrome 瀏覽器作爲應用程式載體,所以只要是能夠使用 Chrome 瀏覽器的桌面環境都可以使用,除了 Windows、MacOS、Linux(Fedora,Linux Mint,uBuntu…),ChromeOS 也可以使用。</li>
<li><strong>Open Source 軟體</strong> <br />
Open Source 表示自己也有機會將服務架在自己的 Server 上 ,或是修改他的內容。StackEdit 源碼開放在 <a href="https://github.com/benweet/stackedit">GitHub</a> 上。</li>
<li><strong>可以儲存在雲端</strong> <br />
除了使用匯出的方式將文件保留至本機外,更可以連接自己的雲端帳號,目前支援常見的 Dropbox 和 Google Drive,這點實在是太令人喜歡了,可以實現在不同臺電腦上編輯寫作同一個檔案。</li>
<li><strong>整合 Google plus 相簿選取圖片</strong> <br />
在 Blogger 編輯器中的圖片上傳,也是放在 Google plus 的 相簿中。在 StackEdit 中可以直接選用 Google plus 相簿的圖片,不用另外尋找圖床或複製貼上,使用相當的方便! </li>
<li><strong>可以發佈至多種平臺上</strong> <br />
StackEdit 發佈的功能可以發到多種平臺上,常用的部落格都有了(參考下圖)。對於有多個部落格的格主是個方便的文件管理方法。 <br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo3jpBi4WV9s_trOGPZ1IqokexPaWRTBW8ExzHeenA9r9-228hDg-AJNDeocOSbjahympFR33O4LSbHiiu2DD7GlWd7VC2QTu8WShXauiSr5cgw9J2QtRbAMFAR-fGLmbc_OWxkwUqcF-5/s0/Selection_064.png" title="Selection_064.png" /></li>
</ul>
對於 StackEdit 的使用功能上還有許多不瞭解的地方,Markdown 也是,需要時間慢慢的摸索與分享!Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-90491537226041760262015-05-14T11:33:00.001+08:002015-05-14T12:12:00.734+08:00Atom 的中文顯示框框問題<h1 id="atom-editor-中文顯示框框問題">
Atom Editor 中文顯示框框問題</h1>
去年(2014)2月的時候,GitHub 推出一個長相很像 <a href="http://www.sublimetext.com/">Sublime text</a> 編輯器的文字編輯器 <a href="https://atom.io/"><strong>Atom</strong></a>,是一個以網頁為基礎開發的編輯器,目標是希望從小學生到駭客都會使用的好上手編輯器。結合了 sublime text 與 Emac 的優點,經過六年的開發磨了一把好劍,去年 5 月的時候 GitHub 將核心程式與套件管理程式開源<br />
<h3 id="修改-style-檔案">
修改 style 檔案</h3>
開啓家目錄下 .atom 裡的設定 less 檔 <code>~/.atom/styles.less</code>,在將核心程式與套件管理程式開源。<br />
因爲是基於 Chromium 的桌面程式框架和 Coffeescript 所寫,所以能夠跨平臺使用整合使用體驗,也可以使用我們熟悉的 HTML、CSS、Javascript 來修改一些 Atom 的內容。有機會將瀏覽器使用的 WebGL 或是視覺化常用的 Javascript 函式庫 <a href="http://d3js.org/">D3.js</a> 使用在 Atom 上。<br />
因為使用了 Node.js 的架構,所以可以使用 Node.js 裡 npm 管理的套件(六萬多個)。Atom 有許多優點也有一些小缺點,現在還在積極的發展中,版本更新的速度很快相信許多問題能迅速的獲得解決。<br />
<h3 id="atom-中文顯示變框框">
Atom 中文顯示變框框</h3>
Atom 在 Linux 的版本中中文顯示會變成一個個的框框,這多半是因為預設使用了沒有支援中文的字型所造成,可以由 setting 裡的 font-family 設定自己喜歡有支援中文的字型。<br />
Atom 因為是由 GitHub 開發所以有支援 markdown 的語法,剛好最近開始練習使用 markdown 語法,剛好在離線時可以拿來在本機使用。但是開啟 maekdown preview (<code>ctrl+m</code>)的時候,即使在 setting 中有設定 font-family 中文還是會變成框框字,如下圖。 <br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-h5Mgf-z5Hn9lCkqA-WxwDcjWo3lljL4kOT9k7fdlDDoOOdaU5tAPaXJNblhJS8v9VFVcR4S4DzK1vOLwhYyfAp0aB4zFBv5ASgd6HT3xqUwH8s3UX-7-ICZaoD1K58KDOnmEWD5_bz5/s0/" title="untitled Preview - Atom_066.png" /><br />
<h3 id="修改-style-檔案更換字型">
修改 style 檔案更換字型</h3>
如前述,由於 Atom 是用 chromium 的桌面程式框架,所以可以使用 CSS 來定義(大心<i class="icon-heart"></i>)。修改方法是,開啓家目錄下 .atom 裡的設定 less 檔 <code>~/.atom/styles.less</code>,在前面先定義 font-family 字型,套用在 <code>atom-text-editor</code> 和 <code>markdown-preview</code> 裡面。<br />
<pre class="prettyprint"><code class=" hljs css"><span class="hljs-comment">/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*
* If you are unfamiliar with LESS, you can read more about it here:
* http://www.lesscss.org
*/</span>
<span class="hljs-at_rule">@<span class="hljs-keyword">font-family:</span> <span class="hljs-string">'YaHei Consolas Hybrid'</span></span>;
<span class="hljs-class">.tree-view</span> <span class="hljs-rules">{
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">atom-text-editor</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> @font-family</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">atom-text-editor</span> <span class="hljs-class">.cursor</span> <span class="hljs-rules">{
<span class="hljs-rule">}</span></span>
<span class="hljs-comment">/* 自行加上 markdown-preview */</span>
<span class="hljs-class">.markdown-preview</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> @font-family</span></span>;
<span class="hljs-rule">}</span></span></code></pre>
套用後中文字型就可以出現,不再是框框字了。可是在 markdown preview 的標題還是框框字?!如下圖。 <br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJuh0PR9e-zp-_bxnwEIM2zrRgC3T4Jcn0UbwH3mxfCApqiFnuiB1wTscRibH1y7WlhKMKGGKvPDhae0NO8H7EiIRTuocNDd1ZElBs1VTh-7S4NgIKzp86vCtFYa5j9Pv16qh_JD7mKpbu/s0/" title="untitled - Atom_067.png" /><br />
請在打開 <code>~/.atom/styles.less</code> 在 <code>.markdown-preview</code> 加上標題的字型設定。<br />
<pre class="prettyprint"><code class=" hljs lasso"><span class="hljs-comment">/* 前略 */</span>
<span class="hljs-comment">/* 把所有標題(h1~h6)都加上 font-family 的設定 */</span>
<span class="hljs-built_in">.</span>markdown<span class="hljs-attribute">-preview</span>⧸⧸ {
font<span class="hljs-attribute">-family</span>: @font<span class="hljs-attribute">-family</span>;
h1, h2, h3, h4, h5, h6 {
font<span class="hljs-attribute">-family</span>: @font<span class="hljs-attribute">-family</span>;
}
}</code></pre>
修改完成,不再有框框字了! <br />
<img alt="enter image description here" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKX4VP2OOY5RmYznC5HtvCk_nq6joblkCqs83hpHiij2a4Y1FVvf0NMzwFW5o7_Fn35LfzxyGPajYigpJbbbRJfaeYBgJFGln4XzkXk8y6_Hcq-PPz2u-2U2XHybg0KYPrAQOedY7jcbol/s0/" title="untitled - Atom_068.png" />Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-25226122145665268762014-10-11T22:30:00.000+08:002015-05-24T11:42:13.112+08:00找回由 SSH 做 uBuntu 升級時遺失的連線uBuntu 14.04 LTS 釋出已經有一小段時間,決定將遠端機房中上一個 LTS 版的 uBuntu 12.04 升級上來。uBuntu 現在做的很貼心,只要透過一個簡單的指令就能夠升級,由 SSH 連線至遠端主機,在 command line 輸入下面的指令:<br />
<pre class="prettyprint"><code class=" hljs lasso">$ sudo do-release-upgrade</code></pre>執行後是一個互動式的升級過程,逐一的檢查與詢問項目後才進行升級的動作,由於下載更新的時間較長,利用等待的時間出去覓食,回來之後就發生杯具了!互動的過程卡在一個詢問步驟...而且還不能動 XD,沒錯,因爲 SSH connection timeout。更新到一半也不能重新開機,否則問題可能會更大。<br />
<br />
很幸運的,uBuntu update 程序的設計者似乎瞭解使用者這樣的「意外」!將系統版本的 update 放在 screen 裡執行。GUN screen 是一種在 Server 上執行的終端,只要 screen 本身沒有被終止,就可以繼續恢復原來的內容。 所以,我重新以 SSH連上了 Server 並且執行了下面的指令來觀察 Server 上現有的 screen session 有哪些:<br />
<pre class="prettyprint"><code class=" hljs lasso">$ sudo screen -list
There are screens on:
9129.ubuntu-release-upgrade-screen-window (10/07/2014 08:50:08 PM) (Attached)
2 Sockets in /var/run/screen/S-root.</code></pre>可以由列表發現目前仍在執行的 screen session 名稱,如果我們要引用回原來的 session session,只要使用「-d -r [session擁有者]/[pid.tty.host]」的方式:<br />
<pre class="prettyprint"><code class=" hljs lasso">$ sudo screen -d -r root/9129.ubuntu-release-upgrade-screen-window</code></pre>很感動的,我拉回了原先因 timeout 僵住的詢問步驟,而且可以繼續下去,也完成了整個系統版本升級的過程。Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-89756081271538516322014-10-06T12:40:00.002+08:002014-10-06T12:41:53.632+08:00LibreOffice 穿新衣,Firefox 好朋友自由的好處就是可以隨心所欲的客製化,去年曾經發表一篇<a href="http://jeffyon.blogspot.tw/2013/11/libreoffice-flat-icons.html" target="_blank">如何修改 LibreOffice 圖示</a>的文章,現在除了更換 Icon 還可以讓 LibreOffice 穿上 Firefox 的漂亮外衣。<br />
我的環境如下:<br />
<br />
OS: uBuntu 14.04.1<br />
LibreOffice 版本:v.4.2<br />
<br />
LibreOffice 原本素雅的外觀如下圖所示,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Ia5NMtJ7czwqReBG3BjYgEoD6QwnOHjoW-KO0VlmuNMUTcgMbisqHl57j5FEuvHPKeZ2tnMvIMmt4nu9TPi9pBmh0CD5bpcg0mFbOiyb0mX-seTrLNHyZPVOVoQ8aINZpkYs0KydK9N5/s1600/Untitled+1+-+LibreOffice+Writer_018.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Ia5NMtJ7czwqReBG3BjYgEoD6QwnOHjoW-KO0VlmuNMUTcgMbisqHl57j5FEuvHPKeZ2tnMvIMmt4nu9TPi9pBmh0CD5bpcg0mFbOiyb0mX-seTrLNHyZPVOVoQ8aINZpkYs0KydK9N5/s1600/Untitled+1+-+LibreOffice+Writer_018.png" height="264" width="320" /></a></div>
<br />
<br />
<ol>
<li>在 Tools > Options > LibreOffice > Personalization 選擇 Own Theme,點選右方的「Select Theme」開啓對話視窗。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGQ9-dgLWrAaAu2BgZovsEHQGuuZuemlzNNq0sUyUBml5h1yNKn8kAjGHQBpxx_zPIKRht_GKYTOChTwkCCkIivPqDKSq9_Qfi9cKGTRDISM05AJKuKRvnsp2V0di185riM6-VATYuK7n/s1600/Options+-+LibreOffice+-+Personalization_019.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGQ9-dgLWrAaAu2BgZovsEHQGuuZuemlzNNq0sUyUBml5h1yNKn8kAjGHQBpxx_zPIKRht_GKYTOChTwkCCkIivPqDKSq9_Qfi9cKGTRDISM05AJKuKRvnsp2V0di185riM6-VATYuK7n/s1600/Options+-+LibreOffice+-+Personalization_019.png" height="180" width="320" /></a><br /></div>
</li>
<li>在對話視窗中,點選 Visit Firefox Themes 開啓 Firefox 的網站<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCS7dx_mVO2PMegblj7rv_kffFBJJtNENZEBQfSIZ4aTDC4AEBfp1ic8_XFX1h1D-SQ7AI34JBbI3aiGV36-GvqvzIlZWRpGWqGLLO1ut0vChaVZ-y69eTUCC0RdZRHBgdfjEMQNx_Ce0c/s1600/LibreOffice+4.2_020.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCS7dx_mVO2PMegblj7rv_kffFBJJtNENZEBQfSIZ4aTDC4AEBfp1ic8_XFX1h1D-SQ7AI34JBbI3aiGV36-GvqvzIlZWRpGWqGLLO1ut0vChaVZ-y69eTUCC0RdZRHBgdfjEMQNx_Ce0c/s1600/LibreOffice+4.2_020.png" height="319" width="320" /></a><br /></div>
</li>
<li>選擇喜歡的主題,複製網址內容貼到 Theme address 下方的欄位中,在這裡我選用的主題為:<a href="https://addons.mozilla.org/en-US/firefox/addon/retro-color/">https://addons.mozilla.org/en-US/firefox/addon/retro-color/</a> 將這串網址貼到 Theme address 欄位中。</li>
<li>就完成穿上新外衣的動作了!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3XulR3LZE75bhaUT1z2-7FRnDxw-xxU0RQ0ASg4bETL2Xh69xPxNBFQRLcWhA-85-mHej35vVcHtApBuZOn4VE1yLuboWC1qTjAQKnzZivRHMyKZ4W9L0xDBswRwdCPgFuX-QyvK4J1y/s1600/Untitled+1+-+LibreOffice+Writer_021.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3XulR3LZE75bhaUT1z2-7FRnDxw-xxU0RQ0ASg4bETL2Xh69xPxNBFQRLcWhA-85-mHej35vVcHtApBuZOn4VE1yLuboWC1qTjAQKnzZivRHMyKZ4W9L0xDBswRwdCPgFuX-QyvK4J1y/s1600/Untitled+1+-+LibreOffice+Writer_021.png" height="264" width="320" /></a></div>
</li>
</ol>
LibreOffie 4.2 版已經包含至 uBuntu 14.04 官方的套件庫中,如果要將之前文章所提的 Icon theme 更換,只需要使用 apt-get 來安裝就可以了。這個簡單黑白的 Icon theme 現在的名稱為 sifr,安裝方法在 terminal 輸入:<br />
<code>$ sudo apt-get install libreoffice-style-sifr</code><br />
安裝後在 Tools > Options >LibreOffice > View,由右側的「Icon size and style」下拉選單中,選擇「Sifr」按下 OK 確認,就可以換爲這純粹黑白又好看的 Icon Theme。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugakk0QLa8WvymoBSbuu9Fdvla_5DZx34SogD09aR-GjUKyrOMzU8v9L-q_RU89u18-h2BzIpq6mJhXsE1rZcr61L4bq9xlpu2IC9ACaI2ZlxP0c0dYSvhR9jlWcjUWztWt3eXdr2mxms/s1600/Options+-+LibreOffice+-+View_023.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugakk0QLa8WvymoBSbuu9Fdvla_5DZx34SogD09aR-GjUKyrOMzU8v9L-q_RU89u18-h2BzIpq6mJhXsE1rZcr61L4bq9xlpu2IC9ACaI2ZlxP0c0dYSvhR9jlWcjUWztWt3eXdr2mxms/s1600/Options+-+LibreOffice+-+View_023.png" height="180" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1qm-qqCfd19PKQDk0NJ-3BqkUOrPszpm81okrHEcHKQni8guHWEVzB4nydKS3HGfw3UrDzs-PBQZ3u4caXBTtlbYYvNrJo4J0QXYxQRNdYLkBLcGvHZIt6gF6kQr5NNp-qrRYQPuNjzv/s1600/Untitled+1+-+LibreOffice+Writer_024.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1qm-qqCfd19PKQDk0NJ-3BqkUOrPszpm81okrHEcHKQni8guHWEVzB4nydKS3HGfw3UrDzs-PBQZ3u4caXBTtlbYYvNrJo4J0QXYxQRNdYLkBLcGvHZIt6gF6kQr5NNp-qrRYQPuNjzv/s1600/Untitled+1+-+LibreOffice+Writer_024.png" height="264" width="320" /></a></div>
<br />Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-59258677361526477822014-10-03T23:53:00.000+08:002014-10-03T23:55:23.195+08:00備份神級輸入法引擎 RIME 使用者字典注音輸入法一直以來都是我主要使用的中文輸入法,前一陣子心血來潮想多學一個輸入法以備不時之需,如在沒有注音符號的鍵盤上,也能夠順利的輸入(好卑微的心願 XD)。爲了期待能同時加強英文輸入,選擇了漢語拼音輸入法,因爲漢語拼音最接近注音輸入法,轉移上比較可以微痛就好。<br />
<br />
在 uBuntu 的環境中,一開始是用 ibus 裡的拼音,但是 ibus 速度上慢上不少,於是換了一套許多使用者推薦的輸入法框架 <a href="http://zh.wikipedia.org/wiki/FCITX" target="_blank">fictx</a> (Flexible Context-aware Input Tool with eXtension),真是一套穩定又快速的輸入法框架,用一次就愛上了!<br />
<br />
在這個框架下,曾經嘗試了由 Android 移植過來的 Google 拼音(fcitx-googlepinyin)、集結雲端智慧的雲拼音(fcitx-cloudpinyin)、早期昇陽開發的拼音(fcitx-sunpinyin)還有原生的漢語拼音(fcitx-pinyin),可惜的是這幾個輸入法的基礎都是建構在簡體中文的基礎上,當我們要對應至繁體字的時候,有些字就會發生錯誤,如「才」->「纔」,在輸入上帶來相當多的不便。在失望之際,看到<a href="https://www.byvoid.com/blog/recommend-rime" target="_blank">一篇文章</a>介紹跨平臺的神級輸入法引擎 RIME 中州韻輸入法引擎,能準確的輸入正體中文的輸入法引擎,且其輸入法引擎的演算法符合拼音、注音、五筆等等。<br />
<br />
這是一套跨平臺的輸入法引擎,在 Linux 稱爲「中州韻」、Windows 稱爲「小狼毫」、MACOS 上稱爲「鼠鬚管」,這個引擎的好處請參考上述連結文章的介紹,在此不另做介紹,但小弟我一試成主顧了!<br />
<br />
在 uBuntu 14.04 開始 fcitx 已收錄至官方的套件庫,安裝上變的更爲方便了,輸入以下的指令安裝即可完成:<br />
<code>$ sudo apt-get install fcitx fcitx-rime</code><br />
安裝後開啓「Language Support」將 Keyboard input method system 改爲 fcitx,重新開機就可以使用 fcitx 當作輸入法框架,RIME 作爲輸入法引擎,而我使用的是其中的「朙月拼音」。<br />
<br />
在 Linux 中「中州韻」缺少 GUI 的界面來備份使用者的字典檔,每次重新安裝系統我們都無法保留下過去的學習習慣。關於 RIME 的備份方式,在網路上很少看到討論,在一篇對岸論壇中的發文曾間接提及,我們可以透過內建的 rime_dict_manager 工具,來達成備份使用者字典檔的功能。<br />
<code>$ rime_dict_manager<br />
options:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-l|--list<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-s|--sync<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-b|--backup dict_name<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-r|--restore xxx.userdb.txt<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-r|--restore xxx.userdb.kct.snapshot<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-e|--export dict_name export.txt<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-i|--import dict_name import.txt</code><br />
在這裡我想用的是 sync 的方法來同步資料,將同步的資料夾定至 Dropbox 中即可雲端化。方法為需先設定 ~/.config/fcitx/rime 路徑下的 installation.yaml,在最後加入 sync_dir 項目。<br />
<code>$ vim installation.yaml<br />
...略<br />
installation_id: xxxxxxxxx<br />
sync_dir: "~/Dropbox/YOUBACKUP"</code><br />
修改後先停止輸入法,在系統輸入法 panel icon 上右鍵選擇 Exit 離開,再以 rime_dict_manager 操作:<br />
<code>$ rime_dict_manager -s</code><br />
在指定的 Dropbox 資料夾中會出現以 installation id 命名的資料夾,裡面會有 *.userdb.txt 的存文字資料檔,可以定期手動的備份一下或是寫一個簡單的 shell script 執行定時備份同步 :)。<br />
<br />Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-75674160953501686242014-07-21T00:30:00.000+08:002014-10-03T23:54:47.020+08:00Python MySQLdb SQL裡含有特殊字元的處理<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
在文本的處理中,無論是網路上抓取的資料,還是由實際資料轉換而來的文本,已結構化處理的資料我都習慣放至資料庫中儲存和管理。一直以來都很習慣的使用 PHP 語言來做資料的整理和處理,一方面是因爲最熟悉這個語言,一方面是 PHP 也可以很容易的做成網頁來呈現結果。<br />
<br />
而有些近來處理的資料,需要經過中文斷詞(中文分詞)的處理,雖然 PHP 已有人發展出 <a href="http://www.xunsearch.com/scws/" target="_blank">SCWS</a> 中文分詞工具,主要運用在 GBK 和 UTF-8 上,對於繁體中文的斷詞目前則不如其他工具來的好用。也因此我最近選擇了 Python 作爲文本處理的主要語言,使用 JieBa 這套斷詞工具(斷詞的細節在這裡我就不多琢磨)。以往 PHP 操作 MySQL 的方式現在要改成 Python 了,也還好 python 有 MySQLdb Library 來幫助操作。<br />
<br />
在 PHP 中爲了避免 Single quote 或是 double quote 等特殊字元可能造成 SQL injection,多半會使用 <a href="http://php.net/manual/en/function.addslashes.php" target="_blank">addslashes()</a> 或 <a href="http://php.net/manual/en/mysqli.real-escape-string.php" target="_blank">mysqli::real_escape_string()</a> 函數來事先處理。而在 python 的 MySQLdb 中也有雷同的函數 <a href="http://mysql-python.sourceforge.net/MySQLdb.html" target="_blank">MySQLdb.escape_string()</a> 可是使用來跳脫特殊字元,我所處理的文本資料是 utf-8 編碼,在第一次使用就出現了如下的錯誤訊息:<br />
<code>MySQLdb.escape_string(sql)<br />
UnicodeEncodeError: 'ascii' codec can't encode character...</code><br />
讓我傷透了腦筋以爲是 unicode 造成的問題,陸續找了其他像 replace 或 regular expression 的方式來替換,也試過字串以參數代入的方式,但都無法盡善盡美。<br />
最後我又回到了這個錯誤訊息,錯誤訊息總是會有解答的 Hint :)。<br />
原來 MySQLdb.escape_string() 試圖將 query 的內容 encode 成字串,預設使用的 encode 編碼是 ascii,而我們所使用的 query 無法被 encode 成 ascii 而產生錯誤。所以我們<b>必須告訴 MySQLdb 要使用的編碼是 utf-8</b>,方法如下:<br />
<code>MySQLdb.escape_string(sql<b><span style="color: red;">.encode('utf-8')</span></b>)</code><br />
就可以順利的利用 MySQLdb 中的 escape_string() 來處理擾人的特殊字元了!Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-71372474466649630442014-07-04T00:50:00.001+08:002014-07-04T00:50:16.635+08:00安裝 MariaDB 10.1 與解決套件 unmet dependencies 問題自從昇陽(Sun)公司被併購入 Oracle 之後對於很多原本的 Open Source 專案都有莫大的影響,加上 Oracle 公司本身主要的產品是資料庫,因此,許多使用者都開始感到擔心 MySQL 這個許多專案都愛用的資料庫軟體,有朝一日會開始朝向收費一途前進,MySQL 在去年的版本更新時偷偷更換了 GPL 授權一事(<a href="https://blog.mariadb.org/mysql-man-pages-silently-relicensed-away-from-gpl/" target="_blank">MySQL man pages silently relicensed away from GPL</a>),相信不少人的心爲之一振,萌生離去的念頭 。<br />
Oracle 並不是第一次驅使使用者離去,已有 OpenOffice 和 OpenSolaris 的前車之鑑,於是決定開始先熟悉與嘗試由 MySQL 元老 Michael Widenius 發起的 MariaDB。其中 Oracle 帶來的風風雨雨和變動,網路已有不少網友心痛分享在此則不再多做贅述。<br />
MariaDB 由一開始的 MySQL 分支,保持和 MySQL 相同的版本號以維持使用者對於兩個資料庫相容的認知。在 2013 年 4 月 SKySQL 和 MariaDB 的原開發公司 Monty Program Ab <a href="https://mariadb.com/about" target="_blank">合併</a>後,便共同開發下一代的 MariaDB。在今年 2014 年 3 月的時候釋出 MariaDB 10 的新版本號,由 5.5 直接跳至 10,也象徵著一個全新的開始。在 MariaDB 10 中主要新增了 3 個新的特色:(<a href="http://www.ithome.com.tw/news/86622" target="_blank">參考資料</a>)<br />
<br />
<ol>
<li>新增高效複製功能,可以平行複製資料以及更先進的集體提交功能(Group Commit)。</li>
<li>增加原生NoSQL支援。新版增加了Connect 引擎來做外部資料管理。</li>
<li>內建分片(Sharding)功能,提升對分散式架構的支援。</li>
</ol>
<br />
在這次的安裝中,我選擇了 MariaDB 10.1 的版本號在 uBuntu 14.04 Desktop x64 中安裝。10.1 是建立在 MariaDB 10.0 和源自 MySQL 5.6、5.7 的功能以及一些新功能(<a href="https://mariadb.com/kb/en/mariadb/development/changelogs/changelogs-mariadb-101-series/mariadb-1010-changelog/" target="_blank">更新記錄</a>)。安裝方式是使用官方提供的方式,加入 Mirror 的 Repositories 來安裝(<a href="https://downloads.mariadb.org/mariadb/repositories/" target="_blank">Repository Configuration Tool</a>),跟著步驟一個一個點選安裝即可。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgln0IWQeaS_SPVHTO-Z8aF0pKZbdVeDDUaPvQjw8qX8skfVDRhaksLP9IFjwB4g4Uy1gFaMFdNBN2hj1NTpnekXL4rfPNbVyNnJv6KmvDm1BpTHkEFdfWLiO0cDuw9vLSE7rbf_dzqXnLj/s1600/Selection_001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgln0IWQeaS_SPVHTO-Z8aF0pKZbdVeDDUaPvQjw8qX8skfVDRhaksLP9IFjwB4g4Uy1gFaMFdNBN2hj1NTpnekXL4rfPNbVyNnJv6KmvDm1BpTHkEFdfWLiO0cDuw9vLSE7rbf_dzqXnLj/s1600/Selection_001.png" height="208" width="400" /></a></div>
<br />
不曉得之前是否有安裝其他軟體造成衝突,在 sudo apt-get install mariadb-server 後出現了如下的錯誤:<br />
<code>The following packages have unmet dependencies:<br />
mariadb-server : Depends: mariadb-server-10.1 (= 10.1.0+maria-1~trusty) but it is not going to be installed<br />
E: Unable to correct problems, you have held broken packages.</code><br />
嘗試了幾個不同的 mirror 都出現相同錯誤,是套件相依性問題。APT是一個好的套件管理程式,讓我們可以很簡單的來安裝、更新或移除套件,但是當我們有使用 third-party 的相依性時就有可能會發生上述的錯誤,導致無法完成安裝。<br />
我們可以透過下面的方法來解決:<br />
<br />
<ol>
<li>確認是不是所有 repositories 是不是都有被啓用。Alt + F2 輸入 software-properties-gtk 開啓 Software Source 視窗,在「Ubuntu Software」檢查是不是全部都有勾選。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMakwCeiNj41YxiLP3eB1ZoJYGVlnLPp3gaPLUJ938juEc_jghWNIICcO5FMeZR0Wv89YYR7wakzknkZai9X2WAkhvNTbI_sbCkBhGbXHt37cvIL4YBflkigp4-W6nwI5V35PXqdVp-op/s1600/Selection_002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMakwCeiNj41YxiLP3eB1ZoJYGVlnLPp3gaPLUJ938juEc_jghWNIICcO5FMeZR0Wv89YYR7wakzknkZai9X2WAkhvNTbI_sbCkBhGbXHt37cvIL4YBflkigp4-W6nwI5V35PXqdVp-op/s1600/Selection_002.png" height="163" width="320" /></a></div>
</li>
<li>這個 unmet dependencies 的錯誤也有可能是毀損的套件資料庫,或是一些套件沒有被正確的安裝。我們可以用下面的指令修復。首先開啓 Terminal<br /><code># sudo apt-get clean</code>or<br /><code># sudo apt-get autoclean</code></li>
<li>接著執行一個基本修復套件相依的方法<br /><code># sudo apt-get -f install<br />註:-f 爲 fix broken 的意思</code></li>
<li>移除無用的相依性套件<br /><code># sudo apt-get autoremove</code></li>
<li>使用 dpkg 重新 config<br /><code># sudo dpkg --configure -a</code></li>
<li>再次執行<br /><code>sudo apt-get -f install</code></li>
</ol>
<div>
apt-get update 後再重新執行安裝應該就可以成功了。 ^^b</div>
<div>
<code>sudo apt-get install mariadb-server</code></div>
Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-21326960093697018752014-03-10T23:09:00.001+08:002014-03-10T23:09:52.202+08:00在 uBuntu 中移動 MySQL 的資料存放位置在 uBuntu 中,MySQL 的資料預設存放位置在 /var/lib/mysql 資料夾底下,有時候我們會因爲某些需求,將資料預設儲存的位置更改至其他位置。<br />
<div>
在 uBuntu 中更改預設儲存位置的方法,除了修改 /etc/mysql/my.cnf 中的 datadir 路徑,還需要修改 /etc/apparmor.d/usr.sbin.mysqld 這個 AppArmor 設定檔,否則重新啓動 MySQL 的時候會出現失敗的錯誤訊息。</div>
<div>
假設我們要移動的目標資料夾爲 /data/mysql,修改的方法如下:</div>
<div>
<ol>
<li>暫時停止 MySQL 服務<br /><code>$ sudo service mysql stop<br />(or sudo /etc/init.d/mysql stop)</code></li>
<li>修改 my.cnf 設定檔,將 datadir 註解並填上新的路徑<br /><code>$ sudo vim /etc/mysql/my.cnf<br /># datadir = /var/lib/mysql<br />datadir = /data/mysql</code></li>
<li>複製原先的資料到新的資料夾中<br /><code>$ sudo cp -R -p /var/lib/mysql /data/mysql</code></li>
<li>修改 usr.sbin.mysqld 設定檔,將原本路徑爲 /var/lib/mysql 的都改到 /data/mysql<br /><code>$ sudo vim /etc/apparmor.d/usr.sbin.mysqld</code></li>
<li>重新啓動 AppArmor 與 MySQL 服務<br /><code>$ sudo service apparmor restart<br />$ sudo service mysql start</code></li>
</ol>
<div>
能夠順利啓動的話,就沒有什麼問題了!啓動後登入 MySQL 觀察一下。</div>
</div>
Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-34678916295754230552013-11-30T22:07:00.000+08:002013-11-30T22:10:53.110+08:00架設 Gitlab 於 uBuntu 12.04.3 LTS(Non-root path)有一個 GUI 的界面對我們的親和力總是比較高的,即使是習慣 Coding 的人還是會想有一個好的介面來使用 Git,諸如 github 與 bitbucket 此類的 Code hosting,也都設計了想當好的 Web Interface 提供相當好的使用體驗。如果我們想要有好的界面,但是又想自己 Hosting Code 在自己的伺服器呢?目前有許多 Open Source 的專案提供了這類的 Web 應用,我比較喜歡的是 <a href="http://projects.ceondo.com/p/indefero/" target="_blank">Indefero</a>(基於PHP) 和 <a href="http://gitlab.org/" target="_blank">Gitlab</a>(基於Ruby) 這兩套。Indefero 是類似 Google Code 的網站,而 GitLab 則是類似 Github 的界面。<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJVVQz08oPmSbJqlpnA2TifOUHat0o5-SwZYWKawmRTGp8H_p-pplC-VfXu5Lxv5irwWukopMHvGdQqe5lTah7xguOC3BS1WjDFGyn8C9pv2IUDKdlAa65-MImBgknXwGsX6YXzooOBAF/s1600/indefero-496.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJVVQz08oPmSbJqlpnA2TifOUHat0o5-SwZYWKawmRTGp8H_p-pplC-VfXu5Lxv5irwWukopMHvGdQqe5lTah7xguOC3BS1WjDFGyn8C9pv2IUDKdlAa65-MImBgknXwGsX6YXzooOBAF/s320/indefero-496.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Indefero</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6H49kVeqQqvSYsjP3-jW9Vyw8VK4mQZO1uTRv00zoopQPEfFXflX8sDdQnKUIUczOekGSHvC1JLbJ7EienSAkot4O_DlVbMkhLLgpXnFP5W4T9tEVEXHGts5npJ_5MxZYOooJuWEzrWk/s1600/gitlab_project_tree.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6H49kVeqQqvSYsjP3-jW9Vyw8VK4mQZO1uTRv00zoopQPEfFXflX8sDdQnKUIUczOekGSHvC1JLbJ7EienSAkot4O_DlVbMkhLLgpXnFP5W4T9tEVEXHGts5npJ_5MxZYOooJuWEzrWk/s320/gitlab_project_tree.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">GitLab</td></tr>
</tbody></table>
由於個人比較喜歡 GitLab 的界面,所以雖然對 Ruby 不是很熟悉,決定來挑戰一下安裝 GitLab。參考了 <a href="http://blog.longwin.com.tw/2013/11/gitlab-ubuntu-linux-precise-2013/" target="_blank">Tsung's Blog:將 GitLab 架設 於 Ubuntu 12.04 (Precise)</a> 和 <a href="https://github.com/gitlabhq/gitlabhq/blob/master/doc/install/installation.md" target="_blank">官方的安裝說明文件</a>,不同的地方主要是在前述方法會成爲主要的 Root 網站,但我運行的伺服器還有運行其他的 Web 服務,所以要安裝在非主目錄。尋找解決方法和測試,花了將近 8 個小時,爲了方便自己記憶,決定記錄下整個過程。<br />
<br />
<h3>
套件需求</h3>
<br />
<ul>
<li>Python 2.5+</li>
<li>ruby 1.9.3+</li>
<li>git 1.7.10+</li>
<li>redis 2.0+</li>
<li>MySQL(or PostgreSQL)</li>
</ul>
<h3>
</h3>
<h3>
基本環境安裝</h3>
<div>
<ol>
<li>更新套件庫資料<br /><code>$ sudo apt-get update<br />$ sudo apt-get dist-upgrade</code></li>
<li>安裝 VIM 作爲編輯工具,並設定爲預設編輯器(若已安裝請略過)<br /><code>$ sudo apt-get install -y vim<br />$ sudo update-alternatives --set editor /usr/bin/vim.basic</code></li>
<li>安裝必要的套件<br /><code>$ sudo apt-get install -y build-essential zlib1g-dev libyaml-dev libssl-dev libgdbm-dev libreadline-dev libncurses5-dev libffi-dev curl openssh-server redis-server checkinstall libxml2-dev libxslt-dev libcurl4-openssl-dev libicu-dev logrotate</code></li>
<li>確定 Python 的版本,必須是 2.5+<br /><code>$ python --version</code></li>
<li>確認能夠使用 python2 使用 Python,如果不行請自行建立連結<br /><code>$ python2 --version<br /><br /># 如果出現 command not found 錯誤請建立連結<br />$ sudo ln -s /usr/bin/python /usr/bin/python2</code></li>
<li>安裝 python-docutils<br /><code>$ sudo apt-get install -y python-docutils</code></li>
</ol>
<h3>
</h3>
<h3>
確認 Git 安裝的版本必須要在 1.7.10 以上</h3>
</div>
<div>
<ol>
<li>檢查目前 12.04 官方套件庫的版本資訊<br /><code>$ apt-cache showpkg git-core<br />Package: git-core<br />Versions: <br />1:1.7.9.5-1<br /># 目前的版本爲 1.7.9.5 所以必須手動安裝 Git</code></li>
<li>安裝 Git 相依性套件<br /><code>$ sudo apt-get install -y libexpat1-dev gettext libz-dev</code></li>
<li>手動安裝 Git<br /><code>$ cd /tmp<br />$ curl --progress https://git-core.googlecode.com/files/git-1.8.4.1.tar.gz | tar xz<br />$ cd git-1.8.4.1/<br />$ make prefix=/usr/local all<br /><br /># 指定安裝至 /usr/local/bin(預設會裝至 ~/bin/)<br />$ sudo make prefix=/usr/local install</code></li>
</ol>
</div>
<h3>
</h3>
<h3>
安裝 Ruby</h3>
<div>
<ol>
<li>安裝 Ruby 2.0+ (若有安裝 Ruby 1.8 請先移除)<br /><code>$ mkdir /tmp/ruby && cd /tmp/ruby<br />$ curl --progress ftp://ftp.ruby-lang.org/pub/ruby/2.0/ruby-2.0.0-p353.tar.gz | tar xz<br />$ cd ruby-2.0.0-p353<br />$ ./configure --disable-install-rdoc<br />$ make<br />$ sudo make install</code></li>
<li>安裝 Bundler Gem<br /><code>$ sudo gem install bundler --no-ri --no-rdoc</code></li>
</ol>
<h3>
</h3>
<h3>
新增 GitLab 系統帳號</h3>
</div>
<div>
<ol>
<li>不允許登入<br /><code>$ sudo adduser --disabled-login --gecos 'GitLab' git</code></li>
</ol>
<h3>
</h3>
<h3>
安裝 GitLab shell</h3>
</div>
<div>
<ol>
<li>切換至 git 帳號家目錄<br /><code>$ cd /home/git</code></li>
<li>複製 GitLab shell<br /><code>$ sudo -u git -H git clone https://github.com/gitlabhq/gitlab-shell.git<br />$ cd gitlab-shell</code></li>
<li>切換至正確的版本(使用 git tag 找最新版)<br /><code>$ sudo -u git -H git checkout v1.7.6</code></li>
<li>編輯 config 檔<br /><code>$ sudo -u git -H cp config.yml.example config.yml<br /><br /># 修改 gitlab_url, 改成自己的 domain name, http://your-domain-name/<br />$ sudo -u git -H editor config.yml</code></li>
<li>執行安裝<br /><code>$ sudo -u git -H ./bin/install</code></li>
</ol>
<h3>
</h3>
<h3>
安裝資料庫</h3>
<ol>
<li>資料庫安裝可以參考檔案 <a href="https://github.com/gitlabhq/gitlabhq/blob/master/doc/install/databases.md" target="_blank">databases.md</a></li>
<li>我是使用 MySQL,安裝的方式不再贅述,以 root 身份登入<br /><code>$ mysql -u root -p</code></li>
<li>建立 GitLab 使用的 MySQL 帳號<br /><code>mysql> CREATE USER 'gitlab'@'localhost' IDENTIFIED BY '$password';</code></li>
<li>建立 GitLab production 資料庫和設定權限<br /><code>mysql> CREATE DATABASE IF NOT EXISTS `gitlabhq_production` DEFAULT CHARACTER SET `utf8` COLLATE `utf8_unicode_ci`;<br />mysql> GRANT SELECT, LOCK TABLES, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER ON `gitlabhq_production`.* TO 'gitlab'@'localhost';</code></li>
<li>使用 gitlab 帳號, 測試 MySQL 連線狀況<br /><code>$ sudo -u git -H mysql -u gitlab -p -D gitlabhq_production<br /># 如果看到 mysql> 表示成功了</code></li>
</ol>
<h3>
安裝與設定 GitLab</h3>
</div>
<div>
<ol>
<li>切換至 git 家目錄,複製檔案<br /><code>$ cd /home/git<br /><br /># 由 Github 複製 GitLab 檔案<br />$ sudo -u git -H git clone https://github.com/gitlabhq/gitlabhq.git gitlab<br />$ cd /home/git/gitlab</code></li>
<li>Checkout 穩定版本,git branch -a 或 git branch -r 找 stable 版本<br /><code>$ sudo -u git -H git checkout 6-3-stable</code></li>
<li>設定 GitLab<br /><code>$ cd /home/git/gitlab<br /><br /># 複製 GitLab Config 範本<br />$ sudo -u git -H cp config/gitlab.yml.example config/gitlab.yml<br /><br /># 修改設定,將所有 localhost 更換成我們的 domain name<br /># 因爲前述步驟中,我們 Git 是由 Source 自行安裝,將 bin_path 修改爲 /usr/local/bin/git<br />$ sudo -u git -H editor config/gitlab.yml<br /><br /># 確認 GitLab 可以寫入 log/ 和 tmp/ 資料夾<br />$ sudo chown -R git log/<br />$ sudo chown -R git tmp/<br />$ sudo chmod -R u+rwX log/<br />$ sudo chmod -R u+rwX tmp/<br /><br /># 建立新資料夾給 satellites<br />$ sudo -u git -H mkdir /home/git/gitlab-satellites<br /><br /># 建立資料夾給 sockets/pids<br />$ sudo -u git -H mkdir tmp/pids/<br />$ sudo -u git -H mkdir tmp/sockets/<br />$ sudo chmod -R u+rwX tmp/pids/<br />$ sudo chmod -R u+rwX tmp/sockets/<br /><br /># 建立 public/uploads 資料夾<br />$ sudo -u git -H mkdir public/uploads<br />$ sudo chmod -R u+rwX public/uploads<br /><br /># 複製 unicorn 範例及設定,如果2G RAM, worker_processes 可以改成 3<br />$ sudo -u git -H cp config/unicorn.rb.example config/unicorn.rb<br />$ sudo -u git -H editor config/unicorn.rb<br /><br /># 複製 Rack attack 範例及設定<br />$ sudo -u git -H cp config/initializers/rack_attack.rb.example config/initializers/rack_attack.rb<br />$ sudo -u git -H git config --global user.name "GitLab"<br />$ sudo -u git -H git config --global user.email "gitlab@localhost"<br />$ sudo -u git -H git config --global core.autocrlf input<br /># 到此設定完成可以再檢查確認 gitlab.yml, unicorn.rb 是否存在, 檢查 gitlab.yml 設定是否正確</code></li>
</ol>
<div>
<br /></div>
<h3>
GitLab Database 設定</h3>
</div>
<div>
<ol>
<li>我是使用 MySQL 所以複製 database.yml.mysql,使用Postgresql 請複製 database.yml.postgresql<br /><code>$ sudo -u git cp config/database.yml.mysql config/database.yml</code></li>
<li>修改 database.yml 中 production(第一個部分)中的設定,將 'secure password' 修改爲 資料庫 gitlab 帳號的密碼<br /><code>$ sudo -u git -H editor config/database.yml</code></li>
<li>修改 database.yml 權限,只有 git 帳號可以讀取<br /><code>$ sudo -u git -H chmod o-rwx config/database.yml</code></li>
</ol>
<div>
<br /></div>
<h3>
安裝 Gems</h3>
</div>
<div>
<ol>
<li>切換至 gitlab 目錄<br /><code>$ cd /home/git/gitlab</code></li>
<li>MySQL 的使用者,選項請使用 "without ... postgres",PostgresSQL 的使用者請使用 "without ... mysql"<br /><code>$ sudo -u git -H bundle install --deployment --without development test postgres aws</code></li>
</ol>
<div>
<br /></div>
</div>
<h3>
初始化資料庫</h3>
<div>
<ol>
<li>輸入 "yes" 來建立需要的資料庫內容<br /><code>$ sudo -u git -H bundle exec rake gitlab:setup RAILS_ENV=production</code></li>
<li>完成後將取得 GitLab 系統預設帳號、密碼<br /><code>Administrator account created:<br /> login.........admin@local.host<br /> password......5iveL!fe</code></li>
</ol>
<div>
<br /></div>
</div>
<h3>
設定開機啓動與 Logrotate</h3>
<div>
<ol>
<li>複製 init Script,加上執行權限<br /><code>$ sudo cp lib/support/init.d/gitlab /etc/init.d/gitlab<br />$ sudo chmod +x /etc/init.d/gitlab</code></li>
<li>設定開機啓動 GitLab<br /><code>$ sudo update-rc.d gitlab defaults 21</code></li>
<li>設定 Logrotate<br /><code>$ sudo cp lib/support/logrotate/gitlab /etc/logrotate.d/gitlab</code></li>
</ol>
<div>
<br /></div>
</div>
<h3>
檢查GitLab 應用程式狀態和啓動</h3>
<div>
<ol>
<li>檢查 GitLab 環境設定狀態<br /><code>$ sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production</code></li>
<li>啓動 GitLab<br /><code>$ sudo service gitlab start<br /># 或是<br />$ sudo /etc/init.d/gitlab restart</code></li>
<li>再檢查應用程式的狀態,如果都出現綠色就是沒有問題,否則再仔細檢查前述的步驟<br /><code>$ sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production</code></li>
</ol>
<div>
<br /></div>
</div>
<h3>
設定 Apache2 環境</h3>
<div>
這個部分是我和大家比較不一樣的地方,是設定 Sub directory,像是:http://www.example.com/gitlab/ 。如果你的伺服器比較單純,沒有進行其他的網站服務,可以使用 Tsung's Blog 上的方法,下載 gitlab.conf 即可。</div>
<div>
<ol>
<li>有三個檔案需要修改:application.rb、gitlab.yml、unicorn.rb,將下面資料前面的註解移除。<br /><code># 移除 config.relative_url_root = "/gitlab" 前方註解<br />$ sudo -u git -H editor config/application.rb<br /><br /># 移除 relative_url_root: /gitlab 前方註解<br />$ sudo -u git -H editor config/gitlab.yml<br /><br /># 移除 ENV['RAILS_RELATIVE_URL_ROOT'] 前方註解<br />$ sudo -u git -H editor config/unicorn.rb</code></li>
<li>設定網站的 Alias 至 apache2 中<br /><code>$ sudo vim /etc/apache2/sites-available/default<br />Alias /gitlab "/home/git/gitlab/public"<br /><Directory /home/git/gitlab/public><br /> Options -MultiViews<br /> SetEnv RAILS_RELATIVE_URL_ROOT "/gitlab"<br /></directory></code></li>
<li>啓用下面幾項模組<br /><code>$ sudo a2enmod rewrite proxy proxy_http</code></li>
<li>修改 Proxy 設定,檔案中加入下面幾行<br /><code>$ sudo vim /etc/apache2/mod-available/proxy.conf<br />ProxyRequests On<br />ProxyPreserveHost on<br /><proxy><br /> AddDefaultCharset off<br /> Order deny,allow<br /> Allow from all <br /> AllowOverride All<br /></proxy></code></li>
<li>修改 apache2.conf 設定<br /><code>$ sudo vim /etc/apache2/apache2.conf<br /># 檔案最後加上下列兩行<br />ProxyPass /gitlab/ http://127.0.0.1:8080/gitlab/<br />ProxyPassReverse /gitlab/ http://127.0.0.1:8080/gitlab/</code></li>
<li>重新啓動 Apache 和 GitLab<br /><code>$ sudo service apache2 restart<br />$ sudo service gitlab restart</code></li>
</ol>
</div>
<h3>
修改 unicorn listen 設定(選擇性)</h3>
<div>
因爲我的 8080 Port 運行著 Tomcat,所以必須修改 unicorn 的 listen port 避免他們打架 XD</div>
<div>
<ol>
<li>切換到 gitlab 目錄<br /><code>$ cd /home/git/gitlab</code></li>
<li>修改 config/unicorn.rb 資料,找到 listen 的地方修改 8080 更換成想要的 Port 號碼<br /><code>$ sudo -u git -H editor config/unicorn.rb<br />listen "127.0.0.1:9242"</code></li>
<li>前段第五點 apache2.conf 設定,改爲下列<br /><code>$ sudo vim /etc/apache2/apache2.conf<br />ProxyPass /gitlab/ http://127.0.0.1:9242/gitlab/<br />ProxyPassReverse /gitlab/ http://127.0.0.1:9242/gitlab/</code></li>
<li>重新啓動 Apache 和 GitLab</li>
</ol>
<div>
到這裏 GitLab 就架設完成了~ !連到 http://your-domain-name/gitlab/ 享受甜美的果實吧!(第一次啓動會花比較久的時間,請耐心等候)</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTc9_-LFxVuHkp49psmHLVp2uGawG2X7vzRA3Fs0QnD2xMZHJJ8aqyMz2K9buaYbVVBtSO0TskDtC24lQz-T0Lf-4YImAuaJ9CASRJMeRtDR7Cd5S8Efcogy0YPF_goOuU1sag9AiQv5an/s1600/Selection_001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="305" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTc9_-LFxVuHkp49psmHLVp2uGawG2X7vzRA3Fs0QnD2xMZHJJ8aqyMz2K9buaYbVVBtSO0TskDtC24lQz-T0Lf-4YImAuaJ9CASRJMeRtDR7Cd5S8Efcogy0YPF_goOuU1sag9AiQv5an/s320/Selection_001.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-9258893881367789442013-11-13T16:02:00.001+08:002013-11-13T16:02:04.542+08:00更換 LibreOffice 圖示爲 Flat Icons在 uBuntu/Mint/Fedora Linux 安裝好之後,就會自帶一套開源的跨平臺辦公室軟體 LibreOffice,以前各家 Linux 發行版都是預設 OpenOffice,在 2009 年 Oracle 合併 Sun 之後,因爲 Oracle 的態度和作爲,使得原先開發 OpenOffice 的人員另外成立 <a href="https://www.libreoffice.org/" target="_blank">The Document Foundation</a> ,並在 Oracle 不同意捐出 OpeneOffice 名稱後,另外以 LibreOffice 名稱單獨發行。<br />
<br />
LibreOffice 預設的 Icon 爲 Tango ,是屬於多彩且立體的風格(如下圖一),習慣線上使用 Google Doc 單色簡單的平面風格,也想替 LibreOffice Toolbar 換上 簡約的圖示風格。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwmU6yAp9D42obR4Wx3Qpwc93HwiVRO-DO6QPY6R1gXTkobi3X1w68fh1OqI3hT9-ox5qC8-7LjOcSEOuUu4FXVIH0nycg8KoThtdikpQqu4vO4fz3xE7xuy0U3VwhVAdMmky13cWGTDA/s1600/origin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwmU6yAp9D42obR4Wx3Qpwc93HwiVRO-DO6QPY6R1gXTkobi3X1w68fh1OqI3hT9-ox5qC8-7LjOcSEOuUu4FXVIH0nycg8KoThtdikpQqu4vO4fz3xE7xuy0U3VwhVAdMmky13cWGTDA/s400/origin.png" title="圖一、LibreOffice 預設的圖示" width="400" /></a></div>
<br />
LibreOffice 看來似乎有一個新的圖示集合(<a href="https://wiki.documentfoundation.org/Design/Whiteboards/Flat_icon_set" target="_blank">Flat Icon Set</a>)符合我想要的條件,是基於 Gnome 的 <a href="https://wiki.gnome.org/GnomeOS/UX/Guidelines/SymbolicIcons" target="_blank">Symbolic icons</a> 發展而來的。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://raw.github.com/libodesign/flat-icons/master/si_small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="92" src="https://raw.github.com/libodesign/flat-icons/master/si_small.png" width="400" /></a></div>
<br />
在 uBuntu 中的安裝方式是先安裝 LibreOffice Crystal icons 後,再下載 Flat icons 取代 Crystal 圖示。如下面步驟:<br />
<br />
<ol>
<li>安裝 LibreOffice Crystal icons<br />$ sudo apt-get install libreoffice-style-crystal</li>
<li>將圖示集下載至 /tmp 資料夾下<br />$ cd /tmp && wget https://github.com/hotice/myfiles/raw/master/images_flat.zip</li>
<li>複製並取代 Crystal 圖示集合<br />$ sudo cp images_flat.zip /usr/share/libreoffice/share/config/images_crystal.zip</li>
<li>LibreOffice 中設定使用已交換的 Flat Icon Set,工具列 Tools -> Options -> LibreOffice ->> View -> Icon size and style,將選項裏的內容選至 Crystal 即可。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vWHHWEQouiadFVt-2-Bk0ihh2FncU1Ga3_1Z6GCkt-yuVW0oK-uYLegZJZ9KS0_FFmMrw9DHrcwopN_kN-DEgICABLrKONpnZ9UKUe6-kEIMgPzg4OOpg4dcoaR2HC_2zd-80rpkwlJz/s1600/Selection_004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2vWHHWEQouiadFVt-2-Bk0ihh2FncU1Ga3_1Z6GCkt-yuVW0oK-uYLegZJZ9KS0_FFmMrw9DHrcwopN_kN-DEgICABLrKONpnZ9UKUe6-kEIMgPzg4OOpg4dcoaR2HC_2zd-80rpkwlJz/s400/Selection_004.png" width="400" /></a></div>
</li>
</ol>
更換後的結果非常滿意 :)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfruAiV8FMUwHiuLJH2SBiKb52PsE5g-RHoPIPm_sUVLd4PoUGzoCqCrYon08fI3vGO-4BLICl1kBvYyYlJvNJb4L7XX3Wd_uFMrOTMwLLPKBZDwMW1dOu5xTjkHFzJm8aUADkgWOfALq/s1600/flat_icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfruAiV8FMUwHiuLJH2SBiKb52PsE5g-RHoPIPm_sUVLd4PoUGzoCqCrYon08fI3vGO-4BLICl1kBvYyYlJvNJb4L7XX3Wd_uFMrOTMwLLPKBZDwMW1dOu5xTjkHFzJm8aUADkgWOfALq/s400/flat_icon.png" width="400" /></a></div>
參考資料:<a href="http://www.webupd8.org/2013/06/try-new-libreoffice-flat-icon-set.html" target="_blank">TRY THE NEW LIBREOFFICE FLAT ICON SET</a><br />
<br />Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-24774679589611120322013-11-07T16:13:00.000+08:002013-11-07T16:13:24.880+08:00釋放 Linux 中的記憶體空間Linux kernel 在版本 2.6.16 之後增加了 Drop Caches (<a href="http://linux-mm.org/Drop_Caches">Drop Caches</a>)的機制,在這之後的 kernel 版本能夠簡單地清出多餘的記憶體空間。只要利用簡單的指令以數字讀寫 /proc/sys/vm/drop_cache,或使用 sysctl 指令就可以達成釋放的目的。<br />
<br />
即時查看目前使用記憶體的情形:<br />
<code># watch -n 1 free -m</code><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGO_HP0jQOiOwZI2dy3D8Ddq6-sj1ctL8votI3ALZG3mOKAIW34G_FeGpu6oWVAVUa-GEGcigTcvL_9syEy7NseuUvPCX8Abe7bGITi_h6D4TZxv5uZ2XNN27hvtIXc7hmH2gX5qC1lBN/s1600/Selection_001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGO_HP0jQOiOwZI2dy3D8Ddq6-sj1ctL8votI3ALZG3mOKAIW34G_FeGpu6oWVAVUa-GEGcigTcvL_9syEy7NseuUvPCX8Abe7bGITi_h6D4TZxv5uZ2XNN27hvtIXc7hmH2gX5qC1lBN/s400/Selection_001.png" width="400" /></a></div>
<br />
<br />
不同的數值代表的意義:<br />
<br />
<ul>
<li>1:釋放 pagecache,捨棄一般沒使用的 cache</li>
<li>2:釋放 dentries 和 inodes 所佔用的 cache memory</li>
<li>3:等同於1+2的效果,釋放 pagecache、dentries 和 inodes</li>
</ul>
<div>
<br />
可以使用下面方式指令來釋放記憶體:</div>
<h4>
Command 1</h4>
<div>
<code># sysctl -w vm.drop_caches=3</code></div>
<div>
<br /></div>
<h4>
Command 2</h4>
<div>
<code># <span style="color: red;">sync</span> && echo 3 | sudo tee /proc/sys/vm/drop_caches</code></div>
<div>
註:釋放前必須要先執行 sync 見資料寫入硬碟,避免錯誤發生</div>
Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0tag:blogger.com,1999:blog-7958611023804253430.post-1147580499716535482013-07-24T00:11:00.002+08:002013-07-24T00:11:49.882+08:00Linux 中將現有的專案加到 GitHub按時備份自己的文件或 code 是一個好習慣,以前尚未進入資訊科學這個領域時,最常使用的備份方式大概就是 Copy & Paste + Rename (Ex: Test .txt -> Test_20130723.txt)。這個方法很簡單也很快速,但是,有些小小的問題,如 1. 時間久了檔案佔用會很大的空間,2. 不知道每一個複製的版本究竟修改了什麼,3. 協同合作的時候檔案覆蓋即一去不復返。<br />
上述的問題讓我開始找尋其他的方案來管理程式碼,並且可以與其他人協同合作。幾年前,在 synology 的 NAS 上安裝 SVN Server,開始使用 subversion 做版本管控。SVN 的 Client-Server 架構,在個人使用上倒也還蠻順利,沒出過什麼亂子,直到發生沒有網路就沒有辦法版本更新的事情,才開始注意到分散式版本管控的好處。另外,在 OpenSource 的場合中也常常聽到討論使用 GitHub 作爲 Git Server 的專案,決定來接觸接觸。Git 有下面幾項優點:<br />
<br />
<ol>
<li>便宜的 Branch:Git 對 branch 是對整個資料夾做快照(snapshot)的方式,追蹤的是檔案的內容,即使在不同的 branch 內也只會有一個實體,所以既省空間又比較有效率。</li>
<li>聰明的 commit:Git 是與 snapshot 作比對不是單純的使用 diff 來比較 commit 的檔案。</li>
<li>分散式管理:Git 本地端有自己的 repository,即使沒有連線的狀態下仍然可以 commit,有網路時再 push 到 server 上就好。</li>
<li>Repository 毀壞的風險低:分散式的架構在每一份 Client 都會有一份 repository,即使 Server 上的 repository 毀損還是可以由其他的 Client 端恢復。</li>
</ol>
<br />
在這篇文章中,不討論如何在自己的 Server 上架設 Git Server,會着重在 Linux 中如何把現有的專案加入 GitHub 上。有機會再和大家分享自己架設 Git Server 的經驗 :)<br />
<br />
<ol>
<li>如果還沒安裝 git,在 uBuntu / Mint 中請輸入<br /><code>$ sudo apt-get install git-core</code>在 fedora 中請輸入<br /><code>$ sudo yum install git</code></li>
<li>設定本機的 Git 環境。設定後會產生 ~/.gitconfig<br /><code>$ git config --global user.name "ninthday"<br />$ git config --global user.email "your_email@example.com"</code></li>
<li>登入 <a href="https://github.com/" target="_blank">GitHub</a> 帳號,在右上角點選新增一個 repository(Create a new repo)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGIa8VX9mN2Epin0h0oQJUMQ-8GWYt39Y8MVDKFFYDOcQK92RhX6N4qqPEFiNsDWiz9EFa7cOK3NKhglG66ERMUmdU5pv7ut8oDe81Wwf67tedx6Eg593mEzjEdRtqdbT_mujdgjVGptG/s1600/Tooltip_082.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGIa8VX9mN2Epin0h0oQJUMQ-8GWYt39Y8MVDKFFYDOcQK92RhX6N4qqPEFiNsDWiz9EFa7cOK3NKhglG66ERMUmdU5pv7ut8oDe81Wwf67tedx6Eg593mEzjEdRtqdbT_mujdgjVGptG/s400/Tooltip_082.png" width="400" /></a></div>
</li>
<li>填寫資料建立一個完成新增<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnJWLgS0yfaTJyor5eiJVl-jpjekLjx5OTZvys06ESm-3Y0aCfNBm0t1ctRSmLIs20znSwjiSuBuSo26qffjUsdicpnM2_TX9Nkk6Y2FQuWZAmrWZsHpeZCfSN5G37QlfQ4jiguveiIrm/s1600/Selection_083.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnJWLgS0yfaTJyor5eiJVl-jpjekLjx5OTZvys06ESm-3Y0aCfNBm0t1ctRSmLIs20znSwjiSuBuSo26qffjUsdicpnM2_TX9Nkk6Y2FQuWZAmrWZsHpeZCfSN5G37QlfQ4jiguveiIrm/s400/Selection_083.png" width="400" /></a></div>
</li>
<li>由於採用 SSH 方式的安全性較高,這裏以 SSH 作爲例子。首先,產生一個 key 給 GitHub 使用<br /><code>$ ssh-keygen -t rsa -f [filename] (ex: ninthday)</code></li>
<li>將 key 放到 GitHub 裏面,Account settings -> SSH keys -> Add SSH key<br /><code>$ cat ~/.ssh/ninthday.pub</code>把 cat 得到的內容填到 key 中<br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVh8ry4gpJNjqspi7iRxJu_4RnZ_bGa8m2JbDOrSiGIFqkBMI1a-a_rPmJLt0CT-z62wdTMERdyWl0kaUWRBAqpLxSCvIGMYebfiT8qZ0AxfJQIGmkcq5iZv-iM176PEWfq0yD4_ZWQZFD/s1600/Tooltip_084.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVh8ry4gpJNjqspi7iRxJu_4RnZ_bGa8m2JbDOrSiGIFqkBMI1a-a_rPmJLt0CT-z62wdTMERdyWl0kaUWRBAqpLxSCvIGMYebfiT8qZ0AxfJQIGmkcq5iZv-iM176PEWfq0yD4_ZWQZFD/s400/Tooltip_084.png" width="400" /></a></div>
</li>
<li>設定專門給 GitHub 使用的 key 和 config<br /><code>$ vim ~/.ssh/config<br />Host github<br />HostName github.com<br />User git<br />Port 22<br />identityfile ~/.ssh/ninthday</code></li>
<li>測試連線<br /><code>$ ssh github<br />The authenticity of host 'github.com (204.232.175.90)' can't be established.<br />RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.<br />Are you sure you want to continue connecting (yes/no)? yes<br />Warning: Permanently added 'github.com,204.232.175.90' (RSA) to the list of known hosts.<br />PTY allocation request failed on channel 0<br />Hi ninthday! You've successfully authenticated, but GitHub does not provide shell access.<br />Connection to github.com closed.</code></li>
<li>取得 GitHub API Token,「Account settings -> Applications -> Personal API Access Tokens -> Create new token 」,複製 token string</li>
<li>本機設定 GitHub token<br /><code>$ git config --global github.user username<br />$ git config --global github.token [token string]</code></li>
<li>切換到已存在的工作資料夾,輸入初始化指令<br /><code>$ cd my_test<br />$ git init<br />Initialized empty Git repository in /[path]/my_test/.git/</code></li>
<li>將檔案加到 repository 的準備狀態<br /><code>$ git add *</code></li>
<li>檢查一下目前的追蹤狀態<br /><code>$ git status</code></li>
<li>送交檔案 commit 並加上說明<br /><code>$ git commit -m "my first commit"</code></li>
<li>在 GitHub my_test repository page 右側複製 URL。在我的例子中是使用 SSH 連接方式。<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-igT-fPJlNAEVeilGXd2EYhqVaEIhDDqyHvf5Vf_vLO_-r5hv-9dPZXurEcQ6xDiE1jF0bIdEyuKpbUtax5J3tM5l6f87sCdLgNH4mAXU_ubh3D-B6Ji2taqN9Z-LGDn1m8jwv01z2Hri/s1600/Selection_085.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-igT-fPJlNAEVeilGXd2EYhqVaEIhDDqyHvf5Vf_vLO_-r5hv-9dPZXurEcQ6xDiE1jF0bIdEyuKpbUtax5J3tM5l6f87sCdLgNH4mAXU_ubh3D-B6Ji2taqN9Z-LGDn1m8jwv01z2Hri/s400/Selection_085.png" width="137" /></a></div>
</li>
<li>將 GitHub repository 加入 remote origin<br /><code>$ git remote add origin github:ninthday/my_test.git<br />因爲在步驟8中已經設定過連線,所以在這裏把 GitHub 提供的 SSH URL 中的 git@github.com 更換成 github(<span style="color: blue;">git@github.com</span>:ninthday/my_test.git -> <span style="color: red;">github</span>:ninthday/my_test.git)</code></li>
<li>由 GitHub 上拉下來本機<br /><code>$ git pull origin master</code></li>
<li>最後將本地端推到 GitHub 上<br /><code>$ git push origin master<br />大致會出現類似下面的訊息<br />Counting objects: 25, done.<br />Delta compression using up to 4 threads.<br />Compressing objects: 100% (24/24), done.<br />Writing objects: 100% (24/24), 2.21 MiB | 658 KiB/s, done.<br />Total 24 (delta 4), reused 0 (delta 0)<br />To github:ninthday/myComputing.git<br /> 7696115..b24a89b master -> master</code></li>
</ol>
如果不是使用 SSH 的方式,也可以<a href="https://help.github.com/articles/set-up-git">參考 GitHub 官方的說明</a>。Ninthdayhttp://www.blogger.com/profile/11417578957162912729noreply@blogger.com0