Jekyll 到 Semantic UI 三天完成公司 Blog

最近的 Task 就是完成公司的 blog 架設。
其實 blog 的部署方式非常多，現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。

不過這次選擇使用  Jekyll ，Jekyll 可以讓你用 Markdown 的方式寫完文章，再幫你產生靜態的 HTML 頁面（最主要是因為公司也用 Markdown 寫內部技術文章），並且有很多現成的變數可以用，不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...，其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P，還蠻值得接觸看看的)


Jekyll 官網

使用 Jekyll ，需要 Ruby 的環境，以 Mac 來說，比較 friendly，之前曾經陪我朋友一起在 windows 安裝 Jekyll，發現困難重重，除了 ruby 之外，也需要裝一些 Python 的套件。

通常不會只需要 Jekyll ，你還會想要有現成的 Theme （畫面樣式）， 可以考慮這套 jekyllbootstrap ，http://jekyllbootstrap.com/usage/jekyll-quick-start.html （不過他畫面改版了我不太會用....）。

用 Jekyll 的好處是沒有任何 Database 的事情需要處理，基本上都是靜態頁面，而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github，使用 github.io 專頁，部署自己的 Blog 。


像公司之前使用 jekyllbootstrap.com 的 Theme，用起來的 UI 大概是像這樣：
不過因為是內部文件，不方便公開內容。

以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說，我有改過一些 css 樣式，部署起來像這樣：

不過，因為樣式很難脫離現在在線上找得到的 Theme ，我自己還蠻想要一些不太一樣的感覺，因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。



Semantic UI
http://semantic-ui.com/

Semantic UI，我第一次用，有種相見恨晚的感覺，也許是之前太常用 bootstrap，突然換個口味，感覺不錯，如果你要問我他像什麼，其實就是另外一種前端 html/css Framework 的選擇，如果你的 team 或公司沒有特別找 UI 設計 blog 樣式，這些 framework 就很常被 developer 拿來使用。

接下來的工程就是整合 UI 到 jekyll build 出來的 theme ， 大部份是搬移 css / js ，然後整頓一下畫面的 UI，麻煩的是整合，好看的 css 樣式就算不用這些 Framework 也能上網輕鬆找到現成的 html/css，只是整合很耗時間。


將 Theme 都設計好之後，Jekyll Build 出來的網站架構有些 Config 可以設定，把預設的 theme 切到自己做的 Theme 就大功告成了。在不影響架構之下的情況，這種做法有個好處就是既能保留最原始的 Theme，也能有一份自己開發的 Theme，當公司今天不想使用這個 Theme 的時候，也能透過切換 Theme ，變回原本的樣子。




這個是做完之後的成果，UniSharp Blog

我做好的 Theme 很容易辨識就是 Semantic（xdd）的 UI。左側的選單可以收合，這是 Semantic UI 本來就有的效果。

接著是文章內文的 layout，嵌入一些 social link/share 的功能，已經是 blog 的基本配備了。

文章還要有留言的功能，如果要使用 DISQUS 的話，只要去申請 account，取得 blog 的代碼，嵌入到自己的 blog 就可以了。

接著再調整一下再其他 device 上的樣子：
就差不多完成了80% (剩下的20%等 bug 出現就知道是什麼了xdd)

Hosting

當 blog 整個 layout 都整頓好之後，公司給了我一個 ubuntu 的空間去設定網站，是一個乾淨無暇的 linux 空間，也給我機會練練架設 apache 之類的服務，還蠻有趣的，等我弄好再把網址貼上來。

Joomla! 3.X.X 一些基本的權限管理

這是今天在公司做的微分享，
晚一點我會把一些文字敘述補在下面。

只是一些簡單的基本介紹而已，我還沒有研究到很深啦。



補充第15頁的部分，
如何客制Admin的Menu?

關於這個部分，建議大家參考這邊文章，Customizing the Admin Menu
雖然文章是 2. 多的版本，不過在 3. 多也是通用，
需要注意的是，default_enable.php 的路徑在 3. 多版本已經換了，
以我的joomla是3.1.5版本來說路徑是在：
/YOUR_SITE_DIR/administrator/modules/mod_menu/tmpl/default_enabled.php

我的範例主要是在實作，有些 menu 只給特定的群組看。

另外如何知道使用者群組的id是多少？
使用者群組（user group）的記錄是寫在 前綴字_usergroups 這張資料表。

我撈sql的是這樣撈的：

mysql> use 你的site的資料庫名稱;
mysql> show tables;
mysql> select * from 你的table前綴字_usergroups;


撈出來的結果如下：

mysql> select * from tbrxm_usergroups;
+----+-----------+-----+-----+------------------------------+
| id | parent_id | lft | rgt | title                        |
+----+-----------+-----+-----+------------------------------+
|  1 |         0 |   1 |  24 | Public                       |
|  2 |         1 |   8 |  19 | Registered                   |
|  3 |         2 |   9 |  16 | Author                       |
|  4 |         3 |  10 |  13 | Editor                       |
|  5 |         4 |  11 |  12 | Publisher                    |
|  6 |         1 |   4 |   7 | Manager                      |
|  7 |         6 |   5 |   6 | Administrator                |
|  8 |         1 |  20 |  21 | Super Users                  |
| 10 |         3 |  14 |  15 | Shop Suppliers (Example)     |
| 12 |         2 |  17 |  18 | Customer Group (Example)     |
| 13 |         1 |   2 |   3 | Guest                        |
| 14 |         1 |  22 |  23 | 你只能編輯joomlatesting      |
+----+-----------+-----+-----+------------------------------+

因此假設當我要判斷該 user 是不是 administrator 時，就要先取得group，而且得知該group的id :

$groups = $user->get('groups');
$isAdministrator = in_array(7, $groups);

7這個數字就是對應到資料表上的id為7。

Joomla! 3.X.X 之怎麼辦語系裝不起來...

假如你在 joomla 3 的版本要安裝語系有遇到這樣的 Warning：

     JFolder::create: Could not create directory Path: ...  

     Aborting language installation: Failed to create directory ...  

     Package Install: There was an error installing an extension: ....

我不敢肯定我的解法是唯一的解法，只是給大家一個參考，如果你跟我一樣在安裝其他語言時有出現 warning ，請先檢查 joomla 目錄底下所有資料夾的權限是可以寫入的，建議你先到後台的：
System -> System Information 

[yii] 判斷表單送出是否有錯誤

判斷表單送出是否有 Error 才顯示某個 widget 或是才顯示什麼，
參考官方文件之 hasErrors()
http://www.yiiframework.com/doc/api/1.1/CModel#hasErrors-detail

 if($model->hasErrors()) {  
   //echo '你沒有填哦';  
   //echo '你沒有填哦';  
  }  

*雖然這篇文章很簡短，但主要是記錄一些身在使用 yii 開發 web 的前端人員需要多留意的事。

[yii] 如何在 widget 使用 renderPartial

文章的標題是『如何在widget使用renderPartial』。
其實事情是這樣的，我要把一些 html code 包裝到 widget，這樣子下 widget 只要一兩行，頂多帶幾個參數就可以解決寫好幾行 code，並且把一些會重複用到的 html 模組做成 widget 也是前端的樂趣之一。

本來在view file這樣寫：

 $this->renderPartial('_search',array(  
   'model'=>$model,  
 ));  

這樣寫本來就沒有什麼問題。


不過如果要一個 html 結構寫成 widget 的話，
在 widget 就不能這樣用了，
因為直接使用的話會出現：

 ＿＿你的＿＿Widget and its behaviors do not have a method or closure 
named "renderPartial".  

因此在widget的時候請使用：

 $this->controller->renderPartial('_search',array(  
     'model'=>$model,  
   ));  

參考：
http://www.yiiframework.com/forum/index.php/topic/27311-how-to-renderpartial-in-widget/

[yii] 如何客製或 extend 自己的 CButtonColumn 樣式

[yii] 如何客製自己的 CButtonColumn 樣式

[yii] How to customize CButtonColumn

這個文章的內容主要是要講怎麼換掉用 CGridView 產生的 CbuttonColumn 樣式，下圖就是用 CbuttonColumn 預設產生出來的三個 icon：

在 yii 另外使用 Gii 產生出來的 CRUD 的 view files，基本上會包含 admin.php, index.php, create.php, update.php, view.php 還有一些用下底線開頭的 _form.php, _search.php, _view.php 檔案，簡單瞭解了一下其產生列表的方式，會在需要產生列表的檔案去使用這個 widget：

 $this->widget('zii.widgets.CGridView', array(....) );  

其中，在後面所帶的array裡，會看到 ：

 array(  
       'class'=>'CButtonColumn',  
     ),  

這些預設產生的 Button 就是在這個 Array 產生的，接下來可以看一下官網提供的一些設定api，基本上，這些 Button 的 class, 內容文字, 連結, 底圖都能換。

---

設定很多，我以我會用到的一些需求為例：

template 屬性：
可以定義icon的出現順序，但若比方說你只寫 'template'=>{view} 那麼只會出現檢視的那顆icon。

 array(  
                'class'=>'CButtonColumn',  
                'template'=>'{view}{delete}{update}',  
           ),  

deleteButtonOptions 屬性 : 

設定 delete icon 的基本屬性 ， 以我的例子為例，我想使用 glyphicons 的 icon ， 就必須把 delete button class 改成我要的 glyphicon glyphicon-trash。

 array(  
           'class'=>'CButtonColumn',  
           'deleteButtonOptions'=>array('class'=>'glyphicon glyphicon-trash',
                                        'style'=>'background:red'),  
           'deleteButtonImageUrl'=>'' ,  
           'deleteButtonLabel'=>'', //移除文字  
           ),  

deleteButtonImageUrl : 

如果你有自己準備 deleteButton 的 icon ，可以使用這個設定把原本的圖檔路徑蓋掉，因為我是使用改 class name 去顯示 icon ，因此必須把原本塞在裡面的垃圾桶 icon url 清空，若你有自己準備 icon 就可以使用這個屬性。

deleteButtonLabel : 

如果你把 deleteButtonImageUrl 給清空了，也沒有把這個 deleteButtonLabel 清空，就會出現 Delete 文字 ，會像這樣 :

其他 view button 跟  update button 的設定跟上方式一樣的，只是屬性名字換一下而已：

 'updateButtonOptions'=>array('class'=>'....'),  
 'updateButtonImageUrl'=>'' ,  
 'updateButtonLabel'=>'',   
 'viewButtonOptions'=>array('class'=>'....'),  
 'viewButtonImageUrl'=>'' ,  
 'viewButtonLabel'=>'',   

因為我使用的是 bootstrap 的 css ，icon也是使用 glyphicons ，最後我換完的結果就是：

這些設定真是神奇，不過麻煩的是如果你有很多頁都需要使用自己定義的 CButtonColumn 是有點麻煩，所以只好為自己的 Project 另外寫 CbuttonColumn 的 Extend。

可以參考：How to extend CButtonColumn

---

寫自己的 Extend CButtonColumn ：

我自己試寫了一個 YourCustomCButtonColumn，

這種寫 extend 的做法我還蠻喜歡的，

這樣就不用每次為了換一個 icon 改好幾個 CGridView 的設定，

不寫extend，就是複製貼上一堆 array 設定，

寫extend，只要把原本使用的 CButtonColumn 改成使用自己寫的，

好或不好可行評估。

這是我寫的 extend

路徑可能是 protected/widget/YourCustomCButtonColumn.php 

 <?php  
 Yii::import('zii.widgets.grid.CButtonColumn');  
 class YourCustomCButtonColumn extends CButtonColumn  
 {   
   public $deleteButtonOptions=array('class'=>'你的新class');  
   public $deleteButtonImageUrl = '你的新icon img url';  
   public $deleteButtonLabel = '';   
   //deleteButtonLabel 若不清掉文字則不需要設定成''  
   //以下以此類推  
   public $updateButtonOptions = array('class'=>'...');  
   //...  
   public $viewButtonOptions = array('class'=>'...');  
   //..  
   //public $.....  
 }  

然後別忘了

在始祖的 CGridView.php 是import原本的 CButtonColumn:

Yii::import('zii.widgets.grid.CButtonColumn');

要把它改成 import 你自己寫的那一個：

Yii::import('zii.widgets.grid.CButtonColumn');

Yii::import('path.to.YourCustomCButtonColumn');

再來是 view file 的部分

要將原本使用的 CButtonColumn 改成：

 <?php $this->widget('zii.widgets.grid.CGridView', array(  
      'id'=>'...',  
      'dataProvider'=>$model->search(),  
      'filter'=>$model,  
      'columns'=>array(  
           .....  
           array(  
                //'class'=>'CButtonColumn', 這個不要用了,改用自己寫的（下一行）  
                'class'=>'YourCustomCButtonColumn',  
           ),  
      ),  
 )); ?>  

Hope help you...