【总结】IGEM wiki

IGEM即International Genetically Engineered Machine Competition。我有幸在去年参加了学校参赛队的网页（wiki）编写，自己确实没有经验，刚开始甚至还不知道网页编写的方式，不熟悉Wiki的基本要求，又有在本地写的部分网页上传并不能在平台上正常显示的问题；之后由于自己的实习与比赛时间上的冲突，部分工作内容不能及时和其他成员及时交流反馈。希望以后团队的Wiki编写过程能少踩一些坑，所以我粗略写一写一些东西。

Wiki编写前

*

01

网页编写要求须知

*

由于网页运行在IGEM官方服务平台上，编写的网页需要符合相关要求，在编写网页之前要对其有所了解，在实践之后要对照分析是否存在不符合要求的问题。

基本要求（必看）：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。

*

02

往届队伍Wiki页面参考*

根据往年队伍的wiki，把握哪些页面是重点，一般需要那些元素模块，在网站上，网页代码的模式是什么样的。同时需要调研其他获奖网页内容，借鉴优雅的部分。

2017年所有的wiki列表，可以作为搜索参考的wiki

http://igem.org/Team_Wikis?year=2017

一些风格和体验感不错的wiki：

http://2017.igem.org/Team:Vilnius-Lithuania

http://2017.igem.org/Team:TUDelft

*

03

用户注册

*

注册并审核通过之后才能修改相关页面，在注册之后等待队伍的队长通过验证即可。

前端网页编写

*

01

框架使用

*

建议使用框架，因为只是写前端，在网络框架基础上编写上手比较快，bootstrap之类的都行，这样在排版和编程的时候，自己方便调整，其他上传的同学也能直接根据框架的文档(一般是基于模块来讲)更好避开从HTML和CSS一步步学习的繁琐信息。

*

02

本地测试

*

使用框架在本地测试好后再上传，可以考虑使用谷歌浏览器的F12功能，查看元素大小，位置，直接调整元素样式(可以减少反复上传预览的动作，特别是网络不佳的时候更需要)，注意代码中不能有文件外链，css与js文件根据要求上传和引用。

为了使得本地的显示效果和网站上的一样，需要上传好需要的css与js内容，并成功加载到网页上。

*

03

模板使用

*

建议使用模板http://2018.igem.org/Template:Team_name/PageName，使用时为{}，将导航栏，footer(可以没有)，正文基本样式，单独拎出来。

新建一个网页：直接在队伍名后添加URL名称，将会出现没有内容但可以编辑的提示，点击edit就可以书写代码。注意URL里不要用特殊字符如单引号，也可以新建模板。

除此之外，根据不同的模块如，图片，段落，轮播图，视频，表格等等单独写出来，建议使用空格隔开(防止代码结构混乱和其他复制时候出现标签不闭合的问题)，并使用alt进行注释，方便其他上传同学根据需求选择。

(最终的目标是能满足word文档内容可以简易地迁移到网页上)。

*

04

平台的限制

*

原IGEM的模板有一些style样式很烦人，为了能自己设定的样式生效，样式值的末尾添加!important 如：font-weight: 300 !important;，这样才能屏蔽原属性。

在测试中发现代码量在一个页面过多时会出现代码截断(即最后的代码部分被强制删除)，单个界面内容太多时，考虑将其分成两个页面。

不要覆盖禁用iGEM登录栏，不要使用flash，iframe，所有页面要全在igem平台上，不能有其他服务器的外链。

*

05

其他技巧

*

了解官方给的哪些链接是必须的，特别是judging form里列出来的，优先使用官方给的url名。

元素的样式属性使用相对数值如100%或函数来实现，避免使用绝对值，这样可以适应不同的屏幕大小。屏幕高度可以用CSS函数动态获取，如 height: calc(100vh)。

不要等到最后几天工作和/或完成wiki，在最后一周完成的编辑应该是非常小的编辑（拼写错误，更新图像等），wiki冻结之后页面就不能更改了，心里要有个时间安排

history里有以前的网页版本信息，如果发现改错了可以考虑undo去恢复原内容。

文件或图片上传时间是波士顿时间，比北京时间晚12小时左右，在upload log查询的时候要注意。

复制代码的时候，一定要保证标签闭合

网页图片相关

*

01

图片比例统一

*

图片与网页内容分开上传，不用集中到Wiki编写的人这上传，但是图片设计者需要和Wiki代码编写者沟通好图片格式和大小，有些模块中，需要图片有一样的比例大小，如team中的人像图片，一般是4:3的比例；比例可以调整，但需要统一。

*

02

图片格式

*

图片建议使用svg格式，其可以自动调整大小，如官方的图标，每个图片大小不能过大，否则会有加载页面过慢甚至加载不出来的情况，一般需要进行初步压缩。

*

03

模板使用

*

根据官方的规则编写图片上传路径，确保路径不要有特殊字符如 ' 单引号：T--OFFICIAL_team_name--PageName。

图片要是本队伍的，不能使用有版权的图片，更不能使用其他队伍Wiki上的。

*

04

其他技巧

*

可以在里面放一些gif动图，更加形象展示内容信息。

图片居中放置时注意图片的宽度，一般div需要加入align=＂center＂，需要旋转图像：style = "transform: rotate(180deg);" 生成翻转180之后的图像。

一些复杂的排版和内容网页不便于代码实现，可以考虑图片绘制后，以插入图片的方式代替。

交流与合作

*

01

确定风格

*

Wiki 的风格设定是交流内容中第一位的，确定完网页风格和基本色调后，再去选择参考的内容，风格一般与主题相适应。

*

02

增加交流

*

各组的文字内容最好要建立在定的网页风格基础上去排版。各组需要的一些特殊的模块，最好提前的、集中的向Wiki编写者提出。

*

03

调整内容

*

现场交流如何调整Wiki网页中的某些东西，效果更好。最后一两天不建议再改风格，优先上传图片，再上传内容，最后调整不对的排版。

建议使用公共在线编辑器（如https://shimo.im/），老师可以实时修改内容，相互在文档上的交流会很快

*

04

分项验证

*

多人检查存在的显示与用户体验的问题：

1.是否符合网页编写要求

2.是否有外链，是否使用了任何受版权保护的材料，包括图像

3.是否上传完毕

4.是否排版不当

5.是否有多余内容

附其他资料

*

01

wiki经验

*

其他人的一些wiki经验（链接可能失效了）：

https://www.quora.com/How-do-I-make-a-team-Wiki-page-for-iGEM

*

02

网页结构

*

(1)主页Home：简短的项目摘要，要求——前几句就让人有读下去的兴趣，之后需要简介背景、队伍、项目目的、核心突破，两段以内。

(2)队伍介绍Team：具体的队伍介绍，要求——队伍历史、参谋（教授、研究生）、核心（本科生）（照片）、贡献清单。

(3)项目介绍Project：具体的项目介绍，要求——摘要(Overall)、具体内容（模块分级叙述，细到每个关键实验）、项目结果。

(4)Modeling：具体的建模史

(5)项目进展史Notebook：列出重要突破的日期

(6)项目安全Safety：呈示项目的安全性，针对此项目有据回答iGEM官方关于安全的三个问题。

(7)工作来源Attributions：澄明哪些工作是核心们干的，哪些工作是其他人帮助的，声明帮助者。