IGEM网页小白的wiki之旅
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>标签里。
