Wikicode: Difference between revisions

166 bytes removed ,  08:21, 15 November 2021
m
Basic cleanup
m (I just want to figure out how to link things, not spellcheck more things.. Spellchecks "for" being said as "fore")
m (Basic cleanup)
 
Line 3: Line 3:


This article doesn't cover wikicode in depth, for additional information refer to:
This article doesn't cover wikicode in depth, for additional information refer to:
 
*[https://en.wikipedia.org/wiki/Help:Wiki_markup http://en.wikipedia.org/wiki/Help:Wiki_markup]
*http://en.wikipedia.org/wiki/Help:Wiki_markup
*[https://www.mediawiki.org/wiki/Help:Formatting http://www.mediawiki.org/wiki/Help:Formatting]
*http://www.mediawiki.org/wiki/Help:Formatting
 
When in doubt, check the sourcecode of an article or ask on [{{Constant/Discordurl}} #wiki-public]
When in doubt, check the sourcecode of an article or ask on [{{Constant/Discordurl}} #wiki-public]
=Commands=
=Commands=
==Basic commands==
==Basic commands==
Line 66: Line 63:
or just use<br>manual breaks</pre>
or just use<br>manual breaks</pre>
|Leave empty lines
|Leave empty lines
or just use<br>manual breaks
or just use<br>manual breaks
|-
|-
Line 83: Line 79:
!Link (External)
!Link (External)
|<pre><nowiki>http://en.wikipedia.org/wiki/Help:Wiki_markup</nowiki></pre>
|<pre><nowiki>http://en.wikipedia.org/wiki/Help:Wiki_markup</nowiki></pre>
|http://en.wikipedia.org/wiki/Help:Wiki_markup
|[https://en.wikipedia.org/wiki/Help:Wiki_markup http://en.wikipedia.org/wiki/Help:Wiki_markup]
|-
|-
!Link (External, custom text)
!Link (External, custom text)
|<pre><nowiki>[http://en.wikipedia.org/wiki/Help:Wiki_markup click me]</nowiki></pre>
|<pre><nowiki>[http://en.wikipedia.org/wiki/Help:Wiki_markup click me]</nowiki></pre>
|[http://en.wikipedia.org/wiki/Help:Wiki_markup click me]
|[https://en.wikipedia.org/wiki/Help:Wiki_markup click me]
|-
|-
!List (Unordered)
!List (Unordered)
Line 115: Line 111:
#Roll
#Roll
|}
|}
==Linking and Anchors==
==Linking and Anchors==
Linking of articles was already covered in the basics. To link article-sections you need to use anchors. From a technical point of view an anchor is any tag with an <code>id</code>-attribute. From a usage point of view an anchor is anything that can be linked with a #. This is done automatically for the TOC (Tables of contents).
Linking of articles was already covered in the basics. To link article-sections, you need to use anchors. From a technical point of view, an anchor is any tag with an <code>id</code>-attribute. From a usage point of view, an anchor is anything that can be linked with a #. This is done automatically for the TOC (Tables of contents).


<code><nowiki>[[#Commands|this]]</nowiki></code> '''[[#Commands|this]]''' will take you to the appropriate section on the same page. This can be done for other articles as well like [[General_items#Paper]].
<code><nowiki>[[#Commands|this]]</nowiki></code> '''[[#Commands|this]]''' will take you to the appropriate section on the same page. This can be done for other articles as well like [[General_items#Paper]].
Line 124: Line 119:


'''Beware''': If there are multiple anchors/headers with the same title, the first one on the page will win when linked.
'''Beware''': If there are multiple anchors/headers with the same title, the first one on the page will win when linked.
==Images==
==Images==
First of all, you need to upload your image. This can be done under [[Special:Upload|Upload file]] in the menu. Don't forget to add a comment. Once uploaded you can use images like <code><nowiki>[[File:Example.png]]</nowiki></code>.
First of all, you need to upload your image. This can be done under [[Special:Upload|Upload file]] in the menu. Don't forget to add a comment. Once uploaded, you can use images like <code><nowiki>[[File:Example.png]]</nowiki></code>.
Images can be placed by placing <nowiki>[[File:Example.png]]</nowiki>.
Images can be placed by placing <nowiki>[[File:Example.png]]</nowiki>.
<pre>[[File:Generic_engineer.png]]</pre>
<pre>[[File:Generic_engineer.png]]</pre>
[[File:Generic_engineer.png]]
[[File:Generic_engineer.png]]


When you simply call up an image, it will be in it's full sized format. Resizing the image is not simple anymore. Adding |thumb after the file name forces it to be a thumbnail size. If the image is already smaller than the thumbnail size, then the image will not be re-sized. Also, the image will be placed in a frame (which you can add without making the image a thumbnail by adding <code>|frame</code> instead) and default to the right side of the page. The location of the image can also be changed by adding <code>|left</code> or <code>|center</code>.
When you simply call up an image, it will be in its full sized format. Resizing the image is not simple anymore. Adding |thumb after the file name forces it to be a thumbnail size. If the image is already smaller than the thumbnail size, then the image will not be re-sized. Also, the image will be placed in a frame (which you can add without making the image a thumbnail by adding <code>|frame</code> instead) and default to the right side of the page. The location of the image can also be changed by adding <code>|left</code> or <code>|center</code>.
 
<pre>[[File:Generic_engineer.png|thumb|left]]</pre>
<pre>[[File:Generic_engineer.png|thumb|left]]</pre>
[[File:Generic_engineer.png|thumb|left]]
[[File:Generic_engineer.png|thumb|left]]
As we can see the text will be flowing around the image.
As we can see the text will be flowing around the image.
{{Clear}}
{{Clear}}
Sometimes the thumb is too big or too small. So instead, you can replace <code>|thumb</code> with <code>|30px</code>, where the 30 can be any sized number (assuming you don't want it larger than an average screen). The <code>px</code> stands for pixels, and does not need to be changed. For some reason the wiki seems to have issues shrinking images, so I have no clue how to properly thumbnail other than uploading a separate smaller version of the image.
Sometimes the thumb is too big or too small. So instead, you can replace <code>|thumb</code> with <code>|30px</code>, where the 30 can be any sized number (assuming you don't want it larger than an average screen). The <code>px</code> stands for pixels, and does not need to be changed. For some reason the wiki seems to have issues shrinking images, so I have no clue how to properly thumbnail other than uploading a separate smaller version of the image.


When any image is placed on a page, clicking the picture will take you to another page. The default setting takes you to the images page, where you can view the upload history of that specific image. By adding a <code>|link=www.example.com</code> or <code>|link=Engineering</code>, you can make the image link to another internal or external page. Also, adding text such as <code>|text goes here</code> adds a small pop-up dialog that shows the defined text.
When any image is placed on a page, clicking the picture will take you to another page. The default setting takes you to the images page, where you can view the upload history of that specific image. By adding a <code>|link=www.example.com</code> or <code>|link=Engineering</code>, you can make the image link to another internal or external page. Also, adding text such as <code>|text goes here</code> adds a small pop-up dialog that shows the defined text.
<pre>[[File:locker.png|link=Storage_items#Lockers|This is a locker]]</pre>
<pre>[[File:locker.png|link=Storage_items#Lockers|This is a locker]]</pre>
[[File:locker.png|link=Storage_items#Lockers|This is a locker]]
[[File:locker.png|link=Storage_items#Lockers|This is a locker]]
==Tables==
==Tables==
Tables are a little tricky to cover in depth without taking up a ton of space. So for more detailed information, check out Wikipedia's table page <s>[http://en.wikipedia.org/wiki/Table_%28furniture%29 here].</s> [http://en.wikipedia.org/wiki/Help:Table Here].
Tables are a little tricky to cover in depth without taking up a ton of space. So for more detailed information, check out Wikipedia's table page <s>[https://en.wikipedia.org/wiki/Table_%28furniture%29 here].</s> [https://en.wikipedia.org/wiki/Help:Table Here].
<br>
<br>
Tables are similar to templates, mostly just because they are a type of coding that define stuff. Most templates end up using a table of some sort to make it look pretty anyways. An extremely simple table works like so:
Tables are similar to templates, mostly just because they are a type of coding that define stuff. Most templates end up using a table of some sort to make it look pretty anyways. An extremely simple table works like so:
{{Spoiler
{{Spoiler
|content=<pre>{| class="wikitable"  
|content=<pre>{| class="wikitable"  
Line 160: Line 147:
|}</pre>
|}</pre>
}}
}}
{| class="wikitable"  
{| class="wikitable"
|-
|-
!One||Two
!One||Two
Line 166: Line 153:
|Three||Four
|Three||Four
|}
|}
Each part of the code defines where it belongs and what it does. The '''{|''' and '''|}''' are the opening and closing brackets of our table, they indicate the start and the end. The '''class="wikitable"''' defines the style of the table borders. Instead, you could replace the class with '''border=''' and define the size and style of the border. The '''|-''' indicates the end of a row, and adding a new line after it will make an extra row beneath it. The '''!''' defines the row to be a title of sorts, which also defaults the text to be centered in the box. In the case of the '''class="wikitable"''', it makes the row a different color. The '''||''' marks the end of the box, and any data past it will be in the next box over.
Each part of the code defines where it belongs and what it does. The '''{|''' and '''|}''' are the opening and closing brackets of our table, they indicate the start and the end. The '''class="wikitable"''' defines the style of the table borders. Instead, you could replace the class with '''border=''' and define the size and style of the border. The '''|-''' indicates the end of a row, and adding a new line after it will make an extra row beneath it. The '''!''' defines the row to be a title of sorts, which also defaults the text to be centered in the box. In the case of the '''class="wikitable"''', it makes the row a different color. The '''||''' marks the end of the box, and any data past it will be in the next box over.
To add more to a table, simple add a column with '''||''', or add a new row by making a new line and adding '''|-''' then another line and '''|'''.
To add more to a table, simple add a column with '''||''', or add a new row by making a new line and adding '''|-''' then another line and '''|'''.
===Bigger table===
===Bigger table===
{{Spoiler
{{Spoiler
Line 182: Line 167:
|}</pre>
|}</pre>
}}
}}
{| class="wikitable"  
{| class="wikitable"
|-
|-
!One||Two||Five
!One||Two||Five
Line 190: Line 175:
|One||More||Time
|One||More||Time
|}
|}
===Colored table===
===Colored table===
{{Spoiler
{{Spoiler
Line 215: Line 199:
| style="background: blue; color: white" |Three||3||6||9
| style="background: blue; color: white" |Three||3||6||9
|}
|}
===Sortable table===
===Sortable table===
{{Spoiler
{{Spoiler
Line 262: Line 245:
|-
|-
|}
|}
==Hiding/collapsing content==
==Hiding/collapsing content==
Sometimes there are huge walls of texts and big images that would stop the reading flow, or we want to hide some spoilers. This can be done by applying the <code>mw-collapsible</code>-class. If the item should start collapsed add the "mw-collapsed" as well.
Sometimes there are huge walls of texts and big images that would stop the reading flow, or we want to hide some spoilers. This can be done by applying the <code>mw-collapsible</code>-class. If the item should start collapsed add the "mw-collapsed" as well.
===Table-example===
===Table-example===
<pre>{| class="mw-collapsible mw-collapsed wikitable"
<pre>{| class="mw-collapsible mw-collapsed wikitable"
Line 281: Line 262:
|at first||load time
|at first||load time
|}
|}
===Textbox example===
===Textbox example===
<pre><div class="toccolours mw-collapsible" style="width:400px">
<pre><div class="toccolours mw-collapsible" style="width:400px">
Line 289: Line 269:
This text is collapsible.
This text is collapsible.
</div>
</div>
===Using the Spoiler-Template===
===Using the Spoiler-Template===
<pre>{{Spoiler
<pre>{{Spoiler
Line 299: Line 278:
|content=...Dark Side
|content=...Dark Side
}}
}}
==Redirects==
==Redirects==
To create a redirect for a page, just like [[Drinks]] redirects to [[Guide to Drinks]], insert this command in the first line:
To create a redirect for a page, just like [[Drinks]] redirects to [[Guide to Drinks]], insert this command in the first line:
<pre>#REDIRECT [[page_to_redirect_to]]</pre>
<pre>#REDIRECT [[page_to_redirect_to]]</pre>
You don't need to remove the rest of the article for this to work. Be careful about redirect-targets, because the user won't slide through multiple cascaded redirects.
You don't need to remove the rest of the article for this to work. Be careful about redirect-targets, because the user won't slide through multiple cascaded redirects.
==Templates==
==Templates==
Templates are exactly what they sound like; They are a predefined format for easy use. Similar to the [[Template:Anchor|anchor]] template listed [[#Linking and Anchors|earlier]], templates are their own separate pages that are designed to only require variable data to be inserted. Most, if not all templates should have a detailed description of how to use it on its page.
Templates are exactly what they sound like; They are a predefined format for easy use. Similar to the [[Template:Anchor|anchor]] template listed [[#Linking and Anchors|earlier]], templates are their own separate pages that are designed to only require variable data to be inserted. Most, if not all templates should have a detailed description of how to use it on its page.
<!-- The currently used templates can be found [[Special:MostLinkedTemplates|here]], and the currently unused templates can be found [[Special:UnusedTemplates|here]]. Note, just because a template is unused, doesn't mean it is useless. If you can find a use for one, use it!-->


To use any template, you need to reference the name of it's page within double brackets <code><nowiki>{{}}</nowiki></code>, then define the variables. A good example of a useful template is the <nowiki>{{Item}}</nowiki> template. The [[Template:Item|<nowiki>{{Item}}</nowiki> template]] actually uses multiple templates within itself, but I won't go into much detail about that. When you want to use the [[Template:Item|<nowiki>{{Item}}</nowiki> template]], paste the code from the page like so:
To use any template, you need to reference the name of it's page within double brackets <code><nowiki>{{}}</nowiki></code>, then define the variables. A good example of a useful template is the <nowiki>{{Item}}</nowiki> template. The [[Template:Item|<nowiki>{{Item}}</nowiki> template]] actually uses multiple templates within itself, but I won't go into much detail about that. When you want to use the [[Template:Item|<nowiki>{{Item}}</nowiki> template]], paste the code from the page like so:
{{Spoiler
{{Spoiler
|title=Compact version
|title=Compact version
Line 331: Line 306:
|image=Redtoolbox.png
|image=Redtoolbox.png
}}
}}
Basically, all this template did was define the '''Name''', '''Background Color 1''' (bgcolor1), '''Background Color 2'''(bgcolor2), and the '''Image'''. The name is simply text defined by the user, and the backgrounds are colors that you pick. You can also replace the #FFEE88 with the actual name of the color like orange, red, blue, and so on. The image variable calls out the picture file on the wiki (so first you have to upload it). Capitalization and the file extension are important for this! Otherwise the code will think you want a different file. Normally when you try to use a image or similar file with wikicode, you need to define it as a file first. Depending on how the template is built, it can put the "File:" in for you, so all you have to type is the name of the file itself.
Basically, all this template did was define the '''Name''', '''Background Color 1''' (bgcolor1), '''Background Color 2'''(bgcolor2), and the '''Image'''. The name is simply text defined by the user, and the backgrounds are colors that you pick. You can also replace the #FFEE88 with the actual name of the color like orange, red, blue, and so on. The image variable calls out the picture file on the wiki (so first you have to upload it). Capitalization and the file extension are important for this! Otherwise the code will think you want a different file. Normally when you try to use a image or similar file with wikicode, you need to define it as a file first. Depending on how the template is built, it can put the "File:" in for you, so all you have to type is the name of the file itself.


Line 337: Line 311:
namend / positional arguments
namend / positional arguments
Recursion?
Recursion?
=Yogstation specific=
=Yogstation specific=
There are a few templates and neat things to make your life easier. Because this guide will never be able to cover all templates in full detail, use these steps to learn more yourself:
There are a few templates and neat things to make your life easier. Because this guide will never be able to cover all templates in full detail, use these steps to learn more yourself:
#Find a template you like. This can be done while looking at the sourcecode or browsing [[:Category:Templates]]
#Find a template you like. This can be done while looking at the sourcecode or browsing [[:Category:Templates]]
#Visit the page of the template by typing <code>Template:</code> in front of it like [[Template:Vendingmachine]]
#Visit the page of the template by typing <code>Template:</code> in front of it like [[Template:Vendingmachine]]
#If the creator did his job well, you should see a short article about what the template is used for, which parameters it uses and some examples. If this is not enough, read the sourcecode and look for code that is not inside <code><nowiki><noinclude></nowiki></code>-tags
#If the creator did his job well, you should see a short article about what the template is used for, which parameters it uses and some examples. If this is not enough, read the sourcecode and look for code that is not inside <code><nowiki><noinclude></nowiki></code>-tags
Hopefully, you understand how important proper documentation is for everyone. Try to remember this when making templates yourself.
Hopefully, you understand how important proper documentation is for everyone. Try to remember this when making templates yourself.
==List of templates==
==List of templates==
===General===
===General===
A list of the most important templates.
A list of the most important templates.
{| class="wikitable"  
{| class="wikitable"
!Template
!Template
!Notes
!Notes
Line 387: Line 357:
|
|
|}
|}
===Article-specific===
===Article-specific===
{| class="wikitable"  
{| class="wikitable"
!Template
!Template
!Notes
!Notes
Line 420: Line 389:
|
|
|}
|}
===Special===
===Special===
[[Template:RecursiveChem/General]] is not ''a'' template, it is legion for it is many. It is the template behind recursive hover-recipes found in articles like [[Guide to Drinks]] and [[Guide to Chemistry]]. Make sure to use it, for it really makes reading the wiki more enjoyable. Exmaples:
[[Template:RecursiveChem/General]] is not ''a'' template, it is legion for it is many. It is the template behind recursive hover-recipes found in articles like [[Guide to Drinks]] and [[Guide to Chemistry]]. Make sure to use it, for it really makes reading the wiki more enjoyable. Exmaples:
*[[Template:RecursiveChem/Butter]]
*[[Template:RecursiveChem/Butter]]
*[[Template:RecursiveChem/Methamphetamine]]
*[[Template:RecursiveChem/Methamphetamine]]
*[[Template:RecursiveChem/Pentetic_Acid]]
*[[Template:RecursiveChem/Pentetic_Acid]]
See here for a '''[https://wiki.yogstation.net/index.php?title=Special%3APrefixIndex&prefix=RecursiveChem%2F&namespace=10 full list]'''
See here for a '''[https://wiki.yogstation.net/index.php?title=Special%3APrefixIndex&prefix=RecursiveChem%2F&namespace=10 full list]'''
==Creating templates==
==Creating templates==
Go ahead and use this template:
Go ahead and use this template:
Line 457: Line 422:
[[Category:Templates]]
[[Category:Templates]]
</noinclude></nowiki></pre>
</noinclude></nowiki></pre>
*Code
*Code
**Your actual templatecode is in the <code>includeonly</code>- and your comments in the <code>noinclude</code>-tags. This way we don't insert our documentation every time we use the template.
**Your actual templatecode is in the <code>includeonly</code>- and your comments in the <code>noinclude</code>-tags. This way we don't insert our documentation every time we use the template.
Line 470: Line 434:
**'''Parameter-Usage:''' List of all named and positional parameters. If there is no default value, an example value in the description can help the reader.
**'''Parameter-Usage:''' List of all named and positional parameters. If there is no default value, an example value in the description can help the reader.
**'''Examples:''' A selected set of examples to cover the most important use cases. Adding examples for missing / empty parameters can help identifying errors as well as giving the reader an impression of the default behaviour.
**'''Examples:''' A selected set of examples to cover the most important use cases. Adding examples for missing / empty parameters can help identifying errors as well as giving the reader an impression of the default behaviour.
 
[[Category:Guides]]
[[Category:Guides]]  
[[Category:Game Resources]]
[[Category:Game Resources]]
{{Contribution guides}}
{{Contribution guides}}
39

edits