前言
因為客戶的需求，很難在市面上找到一個非常符合客戶要的版面，所以就需要自訂Template。
Joomla 是我第一次接觸，所以開啟了我的撞牆期~
事前準備
-
需要具備 HTML、CSS、JS 撰寫能力。
-
初步認識Joomla，了解他的資料夾結構。
至少要知道 Template 放在哪裡
前台、後台的資料夾區別，不然會改錯地方
-
Google 如何開發 Joomla Template
官方文件
有時候官方文件寫得不是很清楚，我就會到處去找自己看得懂的文章，文字太多、英文太難，我都會看不下去
參考文章
看完這一篇我大致懂該怎麼做，再來就是實做了。
初步了解
開發 Template 最重要的兩個檔案 templateDetails.xml、 index.php。
路徑在 C:\xampp\htdocs\專案名稱\templates\protostar\
protostar 是 Joomla 預設的 Template。
templateDetails.xml，用來"設定"你有幾個區塊，長這樣
<positions>
<position>banner</position>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>footer</position>
</positions>
index.php，用來"放置"你的區塊，長這樣
<jdoc:include type="modules" name="banner"/>
<jdoc:include type="modules" name="footer"/>
執行步驟
1. 在本機進行前端刻版，使用 HTML + CSS + JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<title>DOC</title>
</head>
<body>
<div class="nav text-center">This is Navigation</div>
<div class="container">
<div class="row">
<div class="col-md-6 content-left text-center">This is Content left</div>
<div class="col-md-6 content-right text-center">This is Content Right</div>
</div>
</div>
</body>
</html>
2. 將自訂的 index.css、bootstrap.min.css
放到 C:\xampp\htdocs\專案名稱\templates\protostar\css 底下
3. 打開 index.php，加入自訂的index.css路徑
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/index.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/bootstrap.min.css');
4. 將第一步驟的 html body 內容，覆蓋 index.php 的 body 內容
5. 到 Joomal 前台看畫面，就會長得跟你設計的頁面一樣。
開始挖洞
設計的頁面總共有三個區塊。
1. 打開 templateDetails.xml，position 自訂三個區塊。
<positions>
<position>nav</position>
<position>content-left</position>
<position>content-right</position>
</positions>
2. 打開 index.php，設定要顯示的區塊，舉例要放置 Navigation 區塊
將 <div class="nav text-center">This is Navigation</div> 替換成
<jdoc:include type="modules" name="nav"/>
3. 這時候到前台會發現 Navigation 不見了。
等一下就會讓它出現!!!
4. 到 Joomla 後台 → 模組 → 新增 → 自訂HTML
切換編輯器，填入 <div class="nav text-center">This is Navigation</div>
指定位置，選擇剛剛設定的 nav
5. 到前台就可以看見 Navigation 又出來了。
另外兩個區塊，就是重複做挖洞的動作!!
如果要在區塊加入新元素，我是習慣先在本機端設計好，再全部貼到 自訂HTML 裡面
因為 Joomla 的預設編輯器不是那麼好用~
