這是建中人社十六屆成發的網站，因為無法順利舉行實體成發，因此設計了網站來呈現大家的專題結果。
在可以舉行實體成發時，網站中的入場券系統也可以加速發票及驗票流程。
以下說明跟學弟分享，願你們能有一個完整的成發
目前網頁分為兩個部分：網站首頁與入場券系統（包含個分場分頁），分別對應線上和實體成發（不過實體成發也是可以使用網站首頁，只是在成發手冊即有除了全文的多數資訊的情況下，資訊量較多的網站首頁會顯得較為多餘）
- 呈現同學照片、姓名與專研題目
- 提供論文全文觀看處
- 連結至不公開的成發影片（開閉幕、報告與評論等）
- 下拉式彈出論文介紹
- 連結線上提問表單
- 比較好看（？
- 來賓輸入姓名即可獲得上下半場的入場券與場次資訊
- 連結到每個分場各自的頁面，可顯示：
- 照片與姓名
- 論文名稱
- 論文全文
註：選擇在網站上放置全文的原因是，不需要等待 Google 雲端載入就可以直接看到 PDF 檔案，快速且方便許多
直接在右上角下載：點選 Code > Download ZIP
Or
建議｜使用 git 指令（需要安裝 git 指令）
$ git clone https://github.com/ckhsc16/ckhsc16.github.io.git以下將會說明如何使用並修改網站首頁
基本上只需要修改 html 檔案（可以先去了解 html 檔案的編寫邏輯，會更好上手）
- 將
Open Graph / Facebook、Twitter、Google Analytics和Google Search Console的部分刪除 - 修改
<title>中的標題 - 修改
<meta name='title' content='...'>、<meta name='description' content='...'>中content=後面的資料，使其分別符合標題以及自訂的敘述
- 找到
<div class='nav-links'>...</div> - 將當中的
<li><a href='A'>B</a></li>的 A 修改為需要連到的網頁、 B 修改為要顯示的文字，若要增加或減少連結，則增減<li>...</li>的數量
- 每一個
<div class='split'>...</div>都包含兩個人的資訊，所以多複製一組就可以多兩個人的空間 - 當中
<div class='container-left'><img src='A' alt='' />...</div>的<img>是同學的照片，將A換成正確的路徑即可出現 - 剩下的就是把字換一換就可以了
-
在開頭結尾處找到
<div class='video169'> <lite-youtube ... videoid='A'></lite-youtube> ... </div>
（class會是video169或video219）
將A換成影片的id（就是YouTube網址中v=後面的所有東西），再根據影片比例調整class（16：9的影片就設定
video169、21：9的影片則設定video219）
https://ckhsc16.github.io/tickets
在姓名的地方輸入A、B、C或D，可以看到網頁呈現的畫面，以及連結到各分場的介紹分頁。
以下將會說明如何使用並修改入場券系統
-
開啟一個 csv 檔案，分別創建「身分別」、「姓名」、「上半場場次」與「下半場場次」四個直行
-
使用
res資料夾中的convert_data.py將 csv 轉為 json 格式及以下編排{ "姓名": ["身份別", "上半場場次", "下半場場次"] } -
將檔案命名為
list.json放在scripts資料夾
依據該場次人數，複製<div class='present'>及其內部的語法，就會多出一個區塊放人物介紹。
全文請放在doc資料夾並自行在頁面中連結
剩下的就自行依據成發需要修改
還可以新增的功能：
- 連結後端資料庫（e.g. Firebase）做 QRCode 即時入場檢查
- 加入臨時到場的校內老師報名處
有許多種平台可以免費架設網站，以下列舉幾個：
- Github Page：現在用的架站平台，我認為滿方便好用的，而且網址也簡潔。缺點大概是需要學習一下 git 的邏輯，我在連結中附上了一個教學文章
- 000Webhost：優點是可以建立資料庫，如果要增加即時入場檢查可以考慮，但缺點是流量限制較多
- Hostinger：跟 000Webhost 一樣可以建立資料庫
後兩者我比較沒有研究，可能要多找一點操作資料。綜括來說，只是架靜態網站的話，Github Page足矣，在桌面版 Github 程式下應該也是滿好操作的