這份文件是寫給維護 OCF 網站的人，希望讓大家不用特別花時間學習網站開發技術，就能順利完成新增專案、修改頁面內容等日常工作。
大家知道網站分成前端、後端，前端就是看得到的網頁，後端則是看不到的伺服器、資料庫。我們 OCF 官網因為寄生在 github 上面，使用內建工具的關係，只需要做前端就可以了。
只要按照規定的方式，製作網頁版面跟網頁資料，github 的內建工具 jekyll 就會幫我們自動合成前端的網頁。網頁版面的檔案格式是 .html，網頁資料的檔案格式是 .yml，這就是維護 OCF 官網時需要編輯的兩種檔案。
編輯完成後，可以先到 編輯紀錄 檢查剛才改的內容是不是有成功合成到網頁，確認有綠色勾勾以後，就可以直接到上線網址 ocf.tw 看結果。
- 決定專案 id （英數，英文全小寫）
- 建立專案資料的資料夾
- 位置：
_data/p/（專案 id）/
- 位置：
- 建立專案的 yml 檔案
- 名稱：
project.yml - 位置：
_data/p/（專案 id）/
- 名稱：
- 編輯專案的 yml 檔案
- 建立專案網頁的資料夾
- 名稱：專案 id
- 位置：
p/
- 建立專案網頁的 html 檔案
- 名稱：
index.html - 位置：
p/（專案 id）/
- 名稱：
- 編輯專案網頁的 html 檔案
- 建立專案英文網頁的資料夾
- 名稱：專案 id
- 位置：
en/p/
- 建立專案英文網頁的 html 檔案
- 名稱：
index.html - 位置：
en/p/（專案 id）/
- 名稱：
- 編輯專案英文網頁的 html 檔案
四、把專案加到 專案與成果 頁的列表
::: warning TODO：未來專案列表會自動抓取資料，不需再額外設定 :::
子專案的 yml 資料格式和 html 頁面版型，都和專案沒有分別，只是檔案位置不在 p/ 而是在 p/（專案 id）/ ，也就是專案資料夾的下一層。
- 確認所屬專案 id
- 決定子專案 id （英數，英文全小寫）
- 建立子專案資料的資料夾
- 位置：
_data/p/（專案 id）/（子專案 id）/
- 位置：
- 建立子專案的 yml 檔案
- 名稱：
project.yml - 位置：
_data/p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯子專案的 yml 檔案
- 建立子專案網頁的資料夾
- 名稱：子專案 id
- 位置：
p/（專案 id）/
- 建立子專案網頁的 html 檔案
- 名稱：
index.html - 位置：
p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯子專案網頁的 html 檔案
- 建立子專案英文網頁的資料夾
- 名稱：子專案 id
- 位置：
en/p/
- 建立子專案英文網頁的 html 檔案
- 名稱：
index.html - 位置：
en/p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯子專案英文網頁的 html 檔案
- 確認所屬專案 id、子專案 id（如果有子專案的話）
- 決定活動 id （英數，英文全小寫）
- 建立活動的 yml 檔案
- 名稱：
events.ymlp.s. 因為一個 yml 檔案內有多筆活動資料，所以檔名是複數，有 s 喔 - 位置：
_data/p/（專案 id）/或_data/p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯活動的 yml 檔案
- 建立活動網頁的 html 檔案
- 名稱：
（活動 id）.html - 位置：
p/（專案 id）/或p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯活動網頁的 html 檔案
- 建立活動英文網頁的 html 檔案
- 名稱：
（活動 id）.html - 位置：
en/p/（專案 id）/或en/p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯活動英文網頁的 html 檔案
- 建立專案成果的 yml 檔案
- 名稱：
（年份）.yml - 位置：
_data/p/（專案 id）/
- 名稱：
- 編輯專案成果的 yml 檔案
- 建立專案網頁的 html 檔案
- 名稱：
（年份）.html - 位置：
p/（專案 id）/
- 名稱：
- 編輯專案網頁的 html 檔案
需要在專案底下架一個網頁、但又沒有要套用任何特定版型的時候，可以使用自由頁面，自由頁面僅提供 header 跟 footer，中間的內容和排版不受任何限制。
- 決定自由頁面 id
- 建立自由頁面的 html 檔案
- 名稱：
（自由頁面 id）.html - 位置：
p/（專案 id）/或p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯自由頁面的 html 檔案
- 建立英文版自由頁面的 html 檔案
- 名稱：
（自由頁面 id）.html - 位置：
en/p/（專案 id）/或en/p/（專案 id）/（子專案 id）/
- 名稱：
- 編輯英文版自由頁面的 html 檔案
分隔線：以下同 2016 版 README
一、建立工作人員資料
- 確認人員 id （建議沿用公務上的 slack id / telegram id / twitter id 等）
- 建立工作人員的 yml 檔案
- 名稱：
（人員 id）.yml - 位置：
_data/people/individuals/
- 名稱：
- 編輯工作人員的 yml 檔案
二、把工作人員加到 工作夥伴 頁的列表
- 把
（人員 id）加到/_data/people/relations/(list_id).yml的清單中，如 /_data/people/relations/staff.yml
::: warning TODO: 將來會改成直接在 yml 裡面開一個欄位，設定該 staff 是否顯示在列表 :::
一、建立合作單位資料
- 確認組織 id（建議沿用該單位官網的網域名稱）
- 建立合作單位的 yml 檔案
- 名稱：
（組織 id）.yml - 位置：
_data/people/orgs/
- 名稱：
- 編輯合作單位的 yml 檔案
二、把合作單位加到 工作夥伴 頁的列表（optional，視業務需要）
- 把
（組織 id）加到/_data/people/relations/(list_id).yml的清單中，如 /_data/people/relations/partners.yml
::: warning TODO: 將來會改成直接在 yml 裡面開一個欄位，設定該 org 是否顯示在列表 :::
- 編輯當年度的電子報
.yml檔案，如 2016 年度的檔案為 /_data/news/2016.yml
- 編輯當年度的成果報告
.yml檔案，如 2016 年度的檔案為 /_data/reports/2016.yml
::: warning TODO: 目前只支援舊版（2016）專案資料，將來會支援新版（2020）專案資料 :::
- 編輯全站設定檔 /_data/settings.yml ，修改
menu欄位內容
- 編輯 people 頁設定檔 /_data/people/settings.yml ，修改
card、logo、label欄位內容
- 編輯 project 頁設定檔 /_data/project/settings.yml ，修改
filter欄位內容
- 編輯 about 網頁檔 /about/index.html ，修改檔頭的
toc欄位內容
- 編輯 mediakit 網頁檔 /mediakit/index.html ，修改檔頭的
toc欄位內容
::: warning TODO: 目前為舊版（2016）網站架構，將來視情況看要不要替新版網站架構做文件 :::
$ gem install jekyll
$ gem install jekyll-redirect-from
$ jekyll serve