IGEM WIKI 制作文档

IGEM WIKI

一、页面以及样式代码的上传

1.1 网页的上传

输入一个曾经没有编辑过的URL
格式为https://2020.igem.org/Team:Team_Name/NewPage

会进入到一个新界面提示，点击编辑页面

之后会进入到编辑网页的界面（推荐在自己的编辑器里编辑vscode、webstorm），save page可以保存界面， show
preview可以预览但不保存

下面是基本的网页结构（和正常的网页结构有所不同）

1.2 上传JS/CSS文档

在浏览器中输入一个没有编辑过的Template的URL

格式:

CSS：https://2020.igem.org/Template:Team_Name/CSS/newCSS

JS: https://2020.igem.org/Template:Team_Name/JS/newJS

点击编辑页面

之后我们编辑页面是在

CSS：（直接粘贴CSS文件中的代码即可不用带<style>标签）

JS（直接粘贴JS文件中的代码即可不用带<script>标签）

引入头文件方法

JS:
<script src="https://2020.igem.org/wiki/index.php?title=Template:[Team_Name]/JS/[JS_file]&action=raw&ctype=text/javascript"></script>
CSS:
 <link href="https://2020.igem.org/wiki/index.php?title=Template:[Team_Name]/CSS/[CSS_File]&action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
其中team_name 和 JS_FIle/CSS_File 替换为相应的队名 和 JS/CSS URL后缀
例如
<script src="https://2020.igem.org/wiki/index.php?title=Template:BUCT/JS/newJS&action=raw&ctype=text/javascript"></script>
<link href="https://2020.igem.org/wiki/index.php?title=Template:BUCT/CSS/newCSS&action=raw&ctype=text/css" type="text/css" rel="stylesheet" />

1.2 上传模板

模板是IGEM WIKI提供的一种代码复用方法（比如导航栏和页脚复用）
上传方法：
打开一个新的URL，格式:https://2020.igem.org/Template:BUCT/newTamplate

在html标签中编写网页


保存：

在页面中的引入方法：
把模板的这个部分复制下来(我这里错把模板放在CSS下了，不过不影响，CSS、JS、MODEL只是为了区分页面的种类)

格式{ {Template:[Team_Name]/MODEL/[newTemplate]}}

要在html标签之前引入

然后我们就可看到，在引入的界面会出现新的元素：

二、网页调试：

2.1 IGEM wiki网页的样式冲突：

igem本身会有一个主页框架，打开网页的源代码就可以看到

本身IGEM会给一些标签定义默认样式，这可能与我们的样式冲突
这就需要我们自定义一些样式：（我将去冲突的样式代码放在导航栏的模板里，因为每个页面都有导航栏，就不必单独去写了）

#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu {
    display:none; }
#content {
    padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
body, html {
   background-color:white; width: 100%; height: 100%;}
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
    margin-bottom: 0px; }
#bodyContent a[href ^="https://"], .link-https {
    padding-right:0px;}
#top_menu_inside #bars_item {
   
    position: absolute;
    top: -30px !important;
    left: -100px !important;
    z-index: 100000 !important;
    cursor: pointer;
}
#top_menu_inside #bars_item {
   
    position: absolute;
    top: -30px !important;
    left: -100px !important;
    z-index: 100000 !important;
    cursor: pointer;
}

#sideMenu,
#top_title {
   
    display: none;
}

#content {
   
    padding: 0px;
    width: 100%;
}

body {
   
    background-color: white;
    margin: 0px;
}

#bodyContent h1 {
   
    font-weight: 300 !important;
}

#bodyContent h1,
#bodyContent h2,
#bodyContent h3,
#bodyContent h4,
#bodyContent h5 {
   
    margin-bottom: 0px;
    border-bottom: none;
}

#bodyContent {
   
    padding-right: 0px;
}

#globalWrapper {
   
    font-size: 100%;
    padding: 0px;
    margin: -10px -20px -20px -20px;
}

.navbar-collapse {
   
    padding-left: 0px;
}

#banner {
   
    margin-top: 50px;
}

#sideMenu {
   
    margin-top: 10px;
}

.navbar-nav .dropdown-menu,
.navbar .dropdown-menu {
   
    margin-top: 0;
}

.judges-will-not-evaluate {
   
    width: 96.6%;
    margin: 5px 15px;
    display: block;
    border: 4px solid #3399ff;
    font-weight: bold;
}

.content_wrapper {
   
    width: 100%;
    height: 100vh;
}

2.2IGEM wiki网页的构成

我们只需要关心 id=bodyContent ，以及 id=mw-content-text的DIV标签，我们在edit中编写的代码，是放在 id=mw-content-text的DIV标签中

在真正的页面中，模板会被替换成相应的代码，同时我们编写的html标签会被去掉

2.3 IGEM wiki网页的调试

推荐本地调试
可以将一个空网页的代码复制到本地，将代码放在 id=mw-content-text的DIV标签中，替换自己的头文件为本地静态文件（连接IGEM WIKI速度很慢）