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>标签里。