所有IGEM网站都建立在MediaWiki基础上,它使得团队成员可以一起轻松创建和编辑页面。
# HTML与MediaWiki标记
MediaWiki有其自己的标记用于设置页面样式,创建链接等等。但是,使用HTML可以提高创造性和灵活性,IGEM文章允许使用任何HTML标签,只需要将其放在<html>
页面文本标记中。
可以在同一个页面中混合使用Wiki标记和HTML。只需要确保所有HTML标签在<html></html>
标记内,而所有Wiki标记在<html></html>
标记外。
注意:在MediaWiki页面中使用HTML将导致最终页面(由MediaWiki完全呈现)不符合严格的HTML格式规范。这基本上是不可避免的,并且可以通过使用HTML在Wiki设计中获得更大的灵活性来接受折衷。大多数现代的Web浏览器都会以“怪癖”模式解释页面,这种模式试图使用不严格兼容的HTML来“做正确的事”。
# 使用包含CSS和JavaScript的模板
如果要在几个不同的页面上使用相同的样式或脚本,将它们放在一个位置然后在各个页面上“包括”它们将很有用。一种实现方法是使用MediaWiki的Template函数。
通过这种方式包含任何HTML内容,而不仅仅是CSS和Javascript。这对于为Wiki上的页面创建诸如公共页眉,菜单栏和页脚之类的内容很有用。
编辑页面,将在该页面上的“Save/Preview”按钮下方列出使用的模板。您还可以查看哪些页面使用您的模板。转到模板,然后在顶部菜单中查找“ Wiki Tools”→“What Links Here”。如果要更改或删除模板,此功能很有用——您可以检查是否有重要页面正在使用它。
创建一个名称以“ Template:TeamName”开头的页面。在<html>
标签内,放入要包含的材料。这是两个示例:
/* 2020.igem.org/Template:TeamName/CSS */
/* 将文本设为红色和粗体 */
.red_text {
color: #f42434;
font-weight:bold;
}
2
3
4
5
6
// 2020.igem.org/Template:TeamName/JS
$(document).ready(function() {
$("#alert").addClass("red_text");
});
2
3
4
使用MediaWiki的语法在标签之外的另一页上包含模板<html>
<!-- 2020.igem.org/Team:TeamName/Project -->
{{TeamName/CSS}}
<html>
<h2> Our Project </h2>
<p> Beginning of the page about our project.</p>
</html>
{{TeamName/JS}}
2
3
4
5
6
7
如果使用包含JavaScript的模板,则不能使用
&&
操作符,当使用{{
...}}
语法时,任何&
都会被编码为&
,对于简短的脚本,可以使用嵌套if
语句,而不是&&
。
# 使用<link>
和<script>
标签包含CSS和JavaScript
首先,在团队空间中创建一个页面。在此示例中,我们将使用:“Template:TeamName/CSS”作为样式,“Template:TeamName/JS”作为代码。
/* 2020.igem.org/Template:TeamName/CSS */
/* 将文本设为红色和粗体 */
.red_text {
color: #f42434;
font-weight:bold;
}
2
3
4
5
6
// 2020.igem.org/Template:TeamName/JS
$(document).ready(function() {
$("#alert").addClass("red_text");
});
2
3
4
IGEM 网站示例:2020.igem.org/Sitemap,其中:页面样式为HQ:Sitemap.css,JS脚本为HQ:Sitemap.js
确保输入的CSS和JS代码,周围没有html标记。
<html>
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:TeamName/CSS&action=raw&ctype=text/css" />
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:TeamName/JS&action=raw&ctype=text/javascript"></script>
</html>
2
3
4
严格来说,这是对
<link>
标签的不正确使用。但是,如前所述,在MediaWiki上使用HTML将已经导致不完全兼容的页面,这些页面在大多数浏览器中仍然可以正确呈现。担心这确实不值得。
# 使用“内联”的CSS和JavaScript
在HTML中的<style></style>
和<script></script>
中使用CSS和JavaScript。通常CSS放在页面开头(在主要内容之前),而JavaScript代码放在开头或者结尾。
例如:
<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>
2
3
4
5
6
7
8
9
10
11
12
13
14
注意:如果使用内联JavaScript,则不能使用
&&
运算符,页面加载时,任何&
都将被编码为&
。
对于简短的脚本,可以使用嵌套if
语句而不是&&
来解决此问题。但是,应该使用<script></script>
标签包括所有的重要脚本。