IGEM(國際基因工程機器大賽)wiki的DDL已經過去一個多周了，今天終於克服了懶惰前來總結一下經驗和教訓，希望能給以后做wiki的同學們一點點幫助，如果有不對的地方也歡迎大家指正！
先來介紹一下什么是wiki，按照百度百科的說法，wiki是一種在網絡上開放且可供多人協同創作的超文本系統，支持面向社群的協作式寫作。用人話來說就是，有這么一個網站，大家可以一起用html,css等語言編輯它的網頁。參加IGEM的同學們完成自己的項目后需要以多張網頁的形式在網上進行展示，以便交(na)流（jiang）。我是從零開始學習的超文本語言，感覺還是挺容易上手的。
先放一張我們的成果吧~
這是主頁
這是description頁面
大概就是這個亞子。
其實wiki組在比賽中后期任務才比較集中，前期我們主要是學(hua)習(shui)和准(mo)備(yu)的過程。網頁整體的搭建、內容上傳基本是在最后二十天完成的，所以提前了解關於wiki制作的經驗，能夠讓最后幾天從容順利一些。
好了，廢話少說。
先給目錄，接下來介紹什么：
- 知識儲備
- 編寫要求
- 模板使用
- 細節調試
- Parts編寫
- 其他經驗總結
本文介紹了前三條，后三條另一篇文章再補~
一、知識儲備
如果你也是前端小白的話，可以先學習一下相關的知識，推薦的幾個網站：
菜鳥教程https://www.runoob.com/
w3school https://www.w3school.com.cn/
html,css,是最基礎的，還有javascript,jQuery，對於界面的美化很有幫助，建議邊學邊做，逐步完善自己的網頁。
二、編寫要求
igem官方平台上網頁編寫的相關要求，在動手前一定要看一看。當年的judging form出來以后也要仔細看，核對獎牌條件。（參考了https://cloud.tencent.com/developer/news/383760）
基本要求（必看）：http://2018.igem.org/Competition/Deliverables/Wiki
基本操作幫助（必看）：http://2017.igem.org/Resources/Wiki_Editing_Help
如何使用csshtml和js（必看）：http://2015.igem.org/Wiki_Requirements/Using_HTML,_CSS,_and_Javascript
官方模板說明：http://2018.igem.org/Resources/Template_Documentation
模板使用說明：http://www.mediawiki.org/wiki/Help:Templates。
我們在IGEM上面注冊、加入自己的團隊，隊長確認之后就可以編寫自己學校的網頁了。
雖然有一些說法是先在本地運行正確后，再上傳，但是我的經驗是應該盡早嘗試IGEM的操作，如果擔心改得很難看可以先保留原來的代碼再做改動。因為本地運行無誤不代表在IGEM平台就是同樣的效果，里面有一些自帶的css樣式，很可能與你的代碼有沖突，這些問題后面會詳細介紹。總之，盡早熟悉igem的平台，包括編輯代碼、上傳文件、新建網頁、上傳template等。
三、模板使用
模仿和借鑒是很重要的，在編寫之前，要看一看往年隊伍的wiki，尤其是獲得best wiki的隊伍，看一看他們的網頁怎樣布局的，有什么亮點，還存在什么不足可以改進等等。了解網頁的整體結構，比如主頁放什么內容，子網頁該怎么布局，清楚這些有利於和美工組、實驗組同學交流，告訴他們我們需要怎樣的素材，以及對這些素材的要求。
網頁編寫強烈建議使用模板，這樣可以節省很大的精力，事半功倍。用什么模板呢？首推往年其他隊伍的模板，網絡上的其他模板也可以，但要注意不要侵權。
模板使用方法：
1.新建網頁。直接在自己隊伍wiki的URL后添加自己的命名，將會出現沒有內容但可以編輯的提示，點擊edit就可以書寫代碼。注意URL里不要用特殊字符如單引號。比如，你的隊伍主頁的url是https://2019.igem.org/Team:team_name，那么可以新建一個網頁https://2019.igem.org/wiki/index.php?title=Template:team_name/css/style-basic（直接打開這個網址進行編輯），編輯好后根據需要引用該網頁就好了。
引用方法：
（1）大括號引用。 比如新建樣式表網頁的url是https://2019.igem.org/wiki/index.php?title=Template:team_name/css/style-basic&action=edit，那么就要在需要引用這個文件（比如樣式表）的代碼里用大括號引用該文件 {{team_name/css/style-basic}}
（2）使用link標簽。
2.寫在代碼的相應標簽里。如果你要用他人的css樣式表，把它復制粘貼在<style>標簽里就行了，如果是javascript,放在<script>標簽里。
注意事項：
1.建議將導航欄，footer(可以沒有)，正文基本樣式，用新建模板的方法單獨上傳，因為幾乎每個網頁都要用到這些，這樣可以縮短代碼。
2.不要用外鏈到其他網站的代碼，因為其他網站的鏈接有可能會失效。
3.當修改模板網頁的代碼后，可能不會立刻看到效果，這時需要先保存模板代碼，再重新edit並save所有用到這個模板的網頁，再打開時就能看到變化了。
4.帶有&&的js文件，要用link標簽引用，否則無法識別，就需要改為if。
5.新建網頁的css樣式寫在<style>標簽里，js寫在<script>標簽里，這些都要在<html>標簽里。