zoukankan      html  css  js  c++  java
  • IGEM网页小白的wiki之旅

      IGEM(国际基因工程机器大赛)wiki的DDL已经过去一个多周了,今天终于克服了懒惰前来总结一下经验和教训,希望能给以后做wiki的同学们一点点帮助,如果有不对的地方也欢迎大家指正!

      先来介绍一下什么是wiki,按照百度百科的说法,wiki是一种在网络上开放且可供多人协同创作的超文本系统,支持面向社群的协作式写作。用人话来说就是,有这么一个网站,大家可以一起用html,css等语言编辑它的网页。参加IGEM的同学们完成自己的项目后需要以多张网页的形式在网上进行展示,以便交(na)流(jiang)。我是从零开始学习的超文本语言,感觉还是挺容易上手的。

      先放一张我们的成果吧~

      这是主页

       这是description页面

       大概就是这个亚子。

       其实wiki组在比赛中后期任务才比较集中,前期我们主要是学(hua)习(shui)和准(mo)备(yu)的过程。网页整体的搭建、内容上传基本是在最后二十天完成的,所以提前了解关于wiki制作的经验,能够让最后几天从容顺利一些。

      好了,废话少说。

    先给目录,接下来介绍什么:

    1. 知识储备
    2. 编写要求
    3. 模板使用
    4. 细节调试
    5. Parts编写
    6. 其他经验总结

    本文介绍了前三条,后三条另一篇文章再补~

     一、知识储备 

      如果你也是前端小白的话,可以先学习一下相关的知识,推荐的几个网站:

      菜鸟教程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>标签里。

     

  • 相关阅读:
    为什么前后端分离了,你比从前更痛苦?
    HTML命名规范
    常用一屏自适应布局(一)
    CSS-网站导航栏标题之间的分隔符
    React-setState源码的理解
    如何在React-Native上使用Typescript
    immutable-js基础
    stylus 移动端边框1像素问题解决方案
    react native ts环境搭建
    react结合ts与mobx环境搭建步骤详解
  • 原文地址:https://www.cnblogs.com/jasmine-/p/11768218.html
Copyright © 2011-2022 走看看