iGEM网页编辑入门文档

🗓️ 2022-02-20 ✏️ Elliot 📁 Note 🏷️ iGEM | Web

Abstract

本文档主要涉及iGEM wiki的创建、编辑方法以及一些2021 XJTU-China wiki用到的插件/库的使用，希望能为后来的iGEMers提供帮助。本文主要于2021年6月~2021年8月编写，正在边学习html/css/JavaScript边赶iGEM项目，因此可能有些疏漏，尽请谅解。

2024/01/17
这两年iGEM的wiki好像改版了，这篇文档可能已经过时，请读者多加确认。

Last edited by My_Elliot, Feb. 2022

1. 前言

iGEM的网页编辑基于MediaWiki运行，是一款开放的团队编辑系统，可供所有队伍成员在登录状态下对网页的源代码进行编辑，若非本队队员只可查看源代码。这种共享编辑的网站与维基（wiki）百科（encyclopedia）、百度百科等的运行方式类似，在网页编辑上具有开放、高效等优点，而这些特点正在现代在线办公软件中一点一点地被体现（如腾讯、金山文档，google drive等）。本文档将基于编者对iGEM网页编辑系统的了解，就如何在iGEM中创建、编辑网页，以及一些常见问题进行解释。由于编者也是初次学习，对于本文档内术语使用不当以及解释错误的地方还望谅解。更多帮助信息请查阅iGEM网页编辑文档以及MediaWiki帮助页面。

2. 网页新建

2.1 网址

对于每一支iGEM团队，iGEM官方都会为他们分配一个网址，如对于2021年西安交大参赛团队XJTU-China来说，队伍网址是：https://2021.igem.org/Team:XJTU-China。而XJTU-China的所有网页都将在此网址以及此网址的下级维持，如项目描述页（Project Description）将会在https://2021.igem.org/Team:XJTU-China/Description中打开。
注意！为了方便评委检索网页，对于展示奖牌评定关键内容的网页，其网址必需使用固定的命名方式命名，命名详见iGEM奖牌评定标准。

2.2 创建新网页

在iGEM中创建网页只需要一步，即在队伍网址的下级添加网页名称，若该网址不存在，系统将打开提示界面，队员点击”edit this page”，即可打开网页编辑器开始编辑。

打开代码编辑框后，将代码编入/复制入框内，点击Save Page或Show Preview即可保存页面或预览。保存页面后，再次输入相应网址，即可打开已编辑的界面了。

注意！

在新建网页时，若新建的网址不是在自己队伍网址的下级（如: https://2021.igem.org/Description），系统也将显示空白提示界面，但是没有edit this page选项
若网址正确，也没有edit this page选项，请检查是否登录了正确的年份、队伍的账号

3. 网页编辑

3.1 Wiki Tools

前面讨论过，网页编辑器可以由空白页提示界面的edit this page打开。那么，对于已有的界面怎么进入编辑器呢？

登录账号
打开欲编辑的网址，如: https://2021.igem.org/Team:XJTU-China
点击页面左上角的Wiki Tools，选择Edit，即可编辑该网页了

3.2 编辑器语言

MediaWiki使用mardown语言进行编译，请参考iGEM帮助文档。但是，你也可以在编辑器中键入HTML, CSS以及JavaScript语言以编辑你的网页，其使用方法与其它网页/文本编辑软件（如Dreamweaver、VS Code）基本相同，但是你的所有html内容应该包含在<html></html>标签内，因而你不必像在文档顶部注释<!doctype html>。

当你想在同一张网页内同时使用html与MediaWiki的mardown时，请确保MediaWiki的mardown在html标签的外部，即：

''''' MediaWiki markdown '''''

<html>
<p> <b> <i> Example text </i> </b> </p>
</html>

''''' MediaWiki markdown '''''

3.3 模板

3.3.1 简介

MediaWiki中的模板是一个非常宽泛的概念，它既可以是一个网页，也可以是一个样式表（.css）或者是js脚本文件（.js），但不论如何，它在体系中最终是以一个网页的形式出现，即模板的本质是一个网页，只不过它可以嵌入到其它的网页中。如XJTU-China以模板的形式导入了bootstrap.css样式表文件，你可以检索https://2021.igem.org/Template:XJTU-China/bootstrap查看该模板所成的网页。

注意！由于.css文件只有样式代码，因此该网页无法显示任何实质的内容，但你可以通过WikiTool的View Source按钮来查看源代码。

3.3.2 创建模板

前面提到，iGEM为每一个队伍（Team）都分配了一个网址，如https://2021.igem.org/Team:XJTU-China，对于XJTU-China来说，所有的网页都应该在此网页或其子页面中保存。而模板（Template）的网址格式与队伍类似，XJTU-China的模板代码应该保存在https://2021.igem.org/Template:XJTU-China或者其子页面中，如上一节的bootstrap，其网址为https://2021.igem.org/Template:XJTU-China/bootstrap。

而创建模板的方式与创建网页的方式类似，只不过队员们应该在Template:XJTU-China（而不是Team:XJTU-China或Team:XJTU-China/Template:XJTU-China）之后新建网页。打开网址后将出现同样的空白提示界面以及edit this page选项，点击后即可打开代码编辑器；当然，你也可以从已有网页上的wiki tools-edit按钮打开代码编辑器。

3.3.3 编辑模板

由于模板的本质是一个网页，因此在编辑模板代码时，要通过编辑网页的格式按照HTML语言的要求进行编辑，最基本地，需要标签<html>。如：

<html>
    <head>
        <title>Team:XJTU-China</title>
        <meta charset="utf-8">
        <meta name="keywords" content="iGEM,Xi'an Jiaotong University,XJTU-China,Tryptophan, Trp,Biosynthesis,E.coli">
        <meta name="description" content="Welcome to 2021 XJTU-China">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    </head>
    
    <body>
        <div class="container"> </div>
    </body>
</html>

注意！模板网页中的内容，如<head>, <body>标签中的内容将会在被嵌入的网页中显示，这也是模板的一大特点，你可以批量化地通过嵌入模板在网页中插入一个组件/页面。比如header与footer。

如果你不希望插入任何组件，而只是想引入.css/.js/.json等文件，你可以使用以下格式：

<html>
<style>
        <!--复制你的样式表内容-->
</style>
    
<script>
        <!--复制你的JavaScript内容-->
</script>
</html>

也就是说，你只需要按照html引用内部样式表或者内部JS的方法在模板文件中引入.css/.js/.json文件的内容即可。当模板嵌入另一个网页时，你所引用的样式或JS将会在新网页中被使用。这种引入方法，需要在代码前后加<html></html>标签，但是嵌入网页时要在<html></html>标签之外。在“4. CSS/JavaScript引入”中还将具体介绍三种引入CSS/JavaScript文件的方法。

3.3.4 引用模板

对于XJTU-China队伍来说，模板的存放位置是https://2021.igem.org/Template:XJTU-China/… , 在别的网页代码中嵌入时，引用格式为

{{XJTU-China/..}}

当然{{XJTU-China}}本身也是一个模板文件，我们也可以将模板内容编辑到该页面上。举个例子，若我们想在https://2021.igem.org/Team:XJTU-China中引入导航栏的模板：https://2021.igem.org/Template:XJTU-China/nav，可以在<html>标签外插入{{XJTU-China/nav}}，如下：

{{XJTU-China/nav}}
<html>
    <head>
        <tittle>Team:XJTU-China</tittle>
    </head>
    <body>
        <!--你的内容-->
    </body>
</html>

上述代码相当于VS Code或Dreamweaver中:

<html>
    <head>
        <tittle>Team:XJTU-China</tittle>
    </head>
    <body>
        <!--导航栏的代码-->
    </body>
</html>

同样的方法也适用与.css/.js文件的引用。

3.4 CSS/Javascript引入

iGEM的网站提供了三种引入CSS/JavaScript的方法，接下来将就此展开部分内容

3.4.1 通过模板引入

此法在前文中有所涉及，即利用MediaWiki的模板功能来进行引入。.css与.js文件的引入方式类似，现以.css文件引入为例：

首先，以“Template:Team Name/..”为格式创建一个网页，打开代码编辑器，输入所需要的代码，如：https://2021.igem.org/Template:XJTU-China/css:

<style>
.header_area {
padding: 40px 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
transition: background 0.4s, all 0.3s linear;
}

</style>

保存后，通过{{Team Name/File Name}}的格式，在需要引入文件的网页中加入引入该代码，如

{{XJTU-China/css}}
<html>
    <head>
        <tittle>Team:XJTU-China</tittle>
    </head>
    <body>
        <!--你的内容-->
    </body>
</html>
{{XJTU-China/js}}<!--这是另外一个模板，包含.js文件内容-->

注意！由于html与MediaWiki使用的编辑语言并不同，因此以花括号{{...}}的方式引用的样式表或js一定要在<html>标签的外部。若想引用.js文件，只需在编写模板时将<style>换成<script>即可。

3.4.2 通过`<link>`, `<script>`引入（通过模板内部引入）

上例中的样式表与js文件必需在html外部引入，若想在html内部引用的话，需要用html标签<link>或<script>，以html的方式引入相应文档，引用格式为：

<html>

<link rel="stylesheet" type="text/css" href="https://2021.igem.org/wiki/index.php?title=Template:TeamName/CSS&action=raw&ctype=text/css" />

<script type="text/javascript" src="https://2021.igem.org/wiki/index.php?title=Template:TeamName/JS&action=raw&ctype=text/javascript"></script>

</html>

其中只有”Template:TeamName/CSS”与”Template:TeamName/JS”需要根据具体文件名更改，链接其余部分应与例子相同。从命名方法可以看出，此时的样式表或JS同样是以模板的形式出现的，但是注意！此时在编辑模板文件时，不要在代码中加入<style>或<script>标签，即：

<!--不用<style> 和 </style>包围css内容-->
     .header_area {
padding: 40px 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
transition: background 0.4s, all 0.3s linear;
}

3.4.3 采用内部样式表

还有一种在html内部使用css与js的方法，那就是采用内部样式表，其用法与html相同，如：

<html>
<style type="text/css">
/*Make text red and bold*/
.red_text {
color: #f42434;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#alert").addClass("red_text");
});
</script>
</html>

3.4.4 总结

在三种方法中，有一种使用了内部样式表，两种用到了模板文件，而这两种方法一个是在html内部使用<link>或<script>标签引入，另一个是在<html>外部用{{...}}句法进行引用。这几种方法各有所优缺点，在具体使用时会造成不便。

#	通过模板外部引入	通过`<link>/<script>`引入	内部样式表
优点	语法简单，简洁明了；代码复用方便；	语法类似html，可读性较强；代码复用方便	在代码中可以直接阅读，内部样式表不会产生额外请求
缺点	当引入JS时，不能使用and操作符(&)，否则浏览器将自动识别为&amp，导致程序运行出错，对于CSS没有此要求	需要保证引用的服务器链接对应的内容不变，对后期维护要求较高；语句较长，书写不简洁;对于`<html>/</html>`外的内容不起作用/有bug（好像？）	语句长，书写不简洁；不可模块化处理
虽然有多种方法，但是在引用CSS与JavaScript时我多采用`<link>/<script>`方式进行引用，而内部样式表仅用于某些独立的网页中。同时，使用`<link>/<script>`进行书写也方便线下编译器的调试。当然，对于`{{...}}`语句的&问题，可以采用嵌套的if语句解决，但是由于操作不便，少有修改。

3.5 其他文件的上传和使用

3.5.1 文件上传

iGEM wiki中的文件一律保存在内部服务器中，以防外部服务器在wiki冻结后对wiki内容进行修改。因此，对于其它文件的引用与使用之前，都需要向iGEM的服务器中上传相应的文件。iGEM支持上传的文件格式有：

png, gif, jpg, jpeg, pdf, ppt, txt, zip, mp3, mp4, webm, mov, swf, xls, xlsx, docx, pptx, csv, m, ogg, gb, tif, tiff, fcs, otf, eot, ttf, woff, svg.

除此之外的文件格式都需要转码才能上传，否则iGEM将阻止用户的上传操作。2021年文件上传网站为：https://2021.igem.org/Special:Upload 注意！上传时要严格遵守文件命名格式，否则将无法正确显示缩略图或引用，命名格式如下:

T–OFFICIAL team name–File_name

如XJTU-China上传的名为bg.jpg的图片，上传时文件应命为：

T–XJTU-China–bg.jpg

3.5.2 文件引用

对于已在iGEM上传网站中上传的文件，上传成功后将打开一张网页，以显示文件以及相关信息，如对于文件T–XJTU-China-bg.jpg，打开的网址为https://2021.igem.org/File:T--XJTU-China--bg.jpg。但是，在引用该文件时，使用的URL应该是https://2021.igem.org/wiki/images/f/fd/T--XJTU-China--bg.jpg，这是由于上传成功界面并非文件储存地址，而上传成功界面只是将文件从储存地址中引用了而已。至于如何获取后者，只需要在上传成功页面右键点击文件–>复制文件链接即可。

再次注意！由于iGEM要求用户只能使用服务器内部文件，因此在代码中所有引用的文件的路径都应该来源于上述操作。

3.6 文件与网页的删除（斜粗体字语自Abigail Sison from iGEM Headquarter）

对已上传的文件，iGEM暂时未推出删除功能，但是你可以使用上传一个新版本的文件，并使用同一个文件名来在网页中进行引用，以此对文件进行修改。（*事实上iGEM的upload界面上有deletion log，但似乎只能由iGEM Headquarter staff 完成）

对于已创建的网页，你只需要清空所有代码，网页将自动恢复到默认界面。（**但我对这个方法的有效性表示怀疑，这样只能清空页面，可并不像打开空白页那样提示空白并显示edit this page选项）

总之，iGEM没有对各支队伍文件与网页数目进行限定，不小心创建的网页清空代码即可，不需要过多处理，文件则只能同名替换，不能删除。

4. Lottie动画

4.1 什么是lottie？

说起来你可能不信，lottie是由以旅行房屋租赁社区出名的——爱彼迎(Airbnb, AirBed and Breakfast)公司所推出的一款轻量而高质的移动应用动画效果框架。通俗点说，就是你可以在Android、iOS、web等平台通过lottie框架来播放一些精美设计的动画而不损失其画质。Lottie的一经推出就惹得了全球代码工作者的喜爱，因为lottie动画的制作主要是在Adobe After Effect上进行的，而通过Bodymovin插件，AE文件可以导出为以文本格式存档的.json文件，在大大降低动画文件体积的同时也加快了网页/程序响应的速度。再有，由于lottie动画在网页或程序中可以以svg格式进行渲染，这让动画的分辨率得到了保证。如今，lottie已经被运用到了许多国内外知名的软件程序当中，包括多邻国(Duolingo)，Spotify，Grab，谷歌，Netflix，Tik Tok等。因此，XJTU-China在2021年的iGEM比赛中大部分的动画文件都将以lottie框架进行渲染播放。

4.2 如何使用lottie框架？（可参考Github:aribnb/lottie-web）

Lottie支持Android、iOS、React Native以及Windows等平台，这里由于篇幅原因只介绍如何把lottie运用到iGEM网页中的方法，其余平台的开发方式可参阅考爱彼迎Github仓库或LottieFiles GitHub仓库介绍。

4.2.1 通过Bodymovin导出AE动画

Lottie强大之处体现在它可以通过After Effect软件进行动画设计并通过Bodymovin插件导出成.json文件，从而插入网页中使用。因此，如果需要自己设计lottie动画，首先需要下载并安装AE，同时安装Bodymovin插件。插件安装方法有：

从aescripts aeplugins或adobe store中下载（官推，付费）
从aescripts aeplugins中下载并安装ZXPinstaller，然后从Github的aribnb/lottie-web中循路径‘build/extension/’找到.zxp文件，下载后用ZXPinstaller安装到AE中（官推，且免费0.0）
… …

安装好后，打开AE软件，菜单栏选择“窗口>拓展>Bodymovin”即可调出插件。

注意！安装完成后，需要AE为Bodymovin开放权限插件才能正常使用：

Windows用户：点击”编辑>首选项>常规>脚本和表达式>勾选‘允许脚本写入文件和访问网络’ “
Mac用户：点击“Adobe After Effect>首选项>脚本和表达式>勾选‘允许脚本写入文件和访问网络’”

对于自己设计动画的用户，在将项目文件设计完毕并保存好后，将窗口切换到Bodymovin界面，点击左上角按钮刷新获得当前项目菜单的文件，选择一个合成之后，点击右侧的图标，选择一个输出文件夹，最后点击，即可将当前的动画文件输出为.json格式文件供后续使用了。注意！由于lottie对AE的某些特效兼容并非特别完整，因此即使成功输出了动画，也有格式/码率等错误的可能，这时只能通过其它方式/框架进行输出渲染，或者修改动画文件。

4.2.2. 从外部向AE导入lottie动画

事实上由于lottie的普及，在网络上已经形成了一些lottie动画的交流社区，使得设计师们可以不用从头设计所有的动画，而是基于别人的作品进行创作。而这些社区中最注著名的莫过于LottieFiles了。LottieFiles中储存着由全球各地天赋异禀的设计师们上传的各种lottie动画，并且以.json格式储存在LottieFiles的服务器中，除了付费项目外，也不乏许多优秀的免费的开源动画供所有LottieFiles社区的成员下载并且运用在自己的项目之中。

对于这些开源动画，创作者们一般都会放开编辑以及使用的权限，但同时也会保留所有权(即在使用时需要注明Attributions)，因此注意！在使用这些动画时请务必确认版权事项，以避免不必要的纠纷。同时iGEM也严禁使用未授权的一切产品，因此最好可以在网页发布之前与创作者邮件说明并确认。对于动画具体的许可证，可以参考动画页脚部分的说明。

至于如何向AE中导入外部lottie动画，Bodymovin提供了在线和本地两种方式，而两种方式导入的方法都及其简单且基本相同，步骤如下：

打开AE并切换到Bodymovin插件，点击上方的按钮，随后界面将切换到导入界面。
在导入界面中，选择可以导入本地的.json文件(其实.txt文件应该也可以)；或者，你也可以键入网址以下载动画文件。对于LottieFiles用户来说，你可以在社区内每个动画的页面中找到标题，将其内容复制到Bodymovin中即可下载当前动画了。

导入了动画文件之后，你将在左侧的项目菜单栏中看到导入的lottie动画，如果你懂得如何使用AE，那么只需要发挥你平常的功力，即可轻轻松松地修改编辑当前的动画了。最后再通过Bodymovin进行输出得到需要的.json文件。

4.2.3 将lottie动画插入代码中

前面提到，lottie动画是以文本(.json)的形式引入到代码、借助lottie的框架渲染而出的矢量动画，这样的动画在相对较小的体积下也可以保持极高的分辨率，保证了代码的简洁以及网页的流畅。对于html网页的编写来说，只需要简单的几步就可以将lottie动画插入到网页中了，这里主要用到了HTML以及JavaScript的支持。

首先，需要将向代码文件中引入lottie包，这是为了向代码中加入能读取并渲染lottie动画文件的lottie框架。获取lottie包的方式有:

使用npm或bower软件，在命令提示符或powershell中输入

# 使用npm 
npm install lottie-web 
# 使用bower
bower install bodymovin

从cdnjs下载，可选择lottie.min.js
直接从Bodymovin中获取：打开Bodymovin插件，点击上方的”Get the Player”，下载player或者gzipped版的player皆可。

得到lottie包(一个.js文件)后，保存到代码文件夹相应位置，在html内正常使用<script></script>进行引用即可将lottie包引入代码内部。

1	<script src="js/lottie.js" type="text/javascript"></script>

然后，使用JavaScript读取动画文件。你可以使用lottie.loadAnimation()方法来读取并设置动画基本参数，它的返回值是一个动画实例。

var animation = lottie.loadAnimation({
container: element,// 容纳动画的DOM对象。
renderer: 'svg',//渲染方式，有'svg'/'canvas'/'html'三种，默认svg即可
loop: true,//循环播放，可true/false/number
autoplay: true,//自动播放，可true/false
path: 'data.json'// 动画文件路径，在iGEM的系统中尤其要注意此参数，这在接下来会讲到
animationData: 'data'//如果不写path，也可以通过直接输入动画文本来读取动画；此条参数与path二选一。
});

如此，便建立了一个基本的lottie动画实例animation。参考lottie-web库，了解实例的主要方法与方法头。

4.2.4 iGEM wiki中使用lottie

iGEM 网页时基于MediaWiki运行的。虽然iGEM对导入.css与.js文件提供了三个方法，但是由于lottie使用的是.json文件作为储存动画信息的载体，因此iGEM网页使用lottie就遇到了一个极大的问题，即：如何将lottie动画导入到网页中？

一个可能的方法是修改链接地址。我们知道使用<link>/<script>引用时，链接格式为:

https://2021.igem.org/wiki/index.php?title=Template:TeamName/FileName&action=raw&ctype=Text_Format

可以看到如果我们将.json文件当做特殊的.js文件，在Text_Format上使用text/js或者text/json也许可以引入.json文件。但是失败了。

另一个可能的方法是通过文件上传系统，将.json文件类似于图片与字体等进行引用。可是iGEM的文件上传不支持.json文件。

而如今使用的方法，也是通过文件上传系统，不过上传文件的格式为.txt。即，将.json文件内容保存为.txt字符串，在代码中引用.txt文件，即可导入lottie动画文件了。这也许是因为.json的本质也是一个文本文档。
如：

animData[i] = {
                container: viewBtn[i], // the dom element that will contain the animation
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: 'https://2021.igem.org/wiki/images/1/14/T--XJTU-China--viewBtn.txt' // the path to the animation json

5. bootstrap框架

Unfinished…

详见官方帮助文档：https://v5.bootcss.com/

Content