Difference between revisions of "User:Midokuni/Notepad/GuideMaking"

From Granblue Fantasy Wiki
Jump to navigation Jump to search
(Added sortable and header-fixed classes to tables)
Line 97: Line 97:
| class  
| class  
| Here you define the "class" you want the table to have. <br>You can have multiple classes separated by spaces<br>There are various wiki-defined classes (such as "wikitable") that help format the table itself.
| Here you define the "class" you want the table to have. <br>You can have multiple classes separated by spaces<br>There are various wiki-defined classes (such as "wikitable") that help format the table itself.
| wikitable<br>mw-collapsable<br>mw-collapsed<br>sortable<br>header-fixed
| wikitable<br>mw-collapsible<br>mw-collapsed<br>sortable<br>header-fixed
| style
| style

Revision as of 13:12, 15 February 2020

Intended to be a resource for guide makers looking to working with the wiki

Basic Features

Headers and Sections

You can add headers to separate the page into multiple sections. Well defined sections would make it easier for both the editors and readers.

  • Editors can edit a specific section instead of the whole page.
  • Readers can jump to different sections using the links in the table of contents
    • The table of contents automatically appear in a page that has at least 2 levels of headers.
    • Editors can also make links to make readers jump to other sections. More about this in the Linking Pages Section

Headers are written as follows:

== Name for Level 2 Header ==
=== Name for Level 3 Header ===
==== Name for Level 4 Header ====
=== Another Level 3 ===

As an example, Basic Features and Headers and Sections headers above are written as:

== Basic Features ==
=== Headers and Sections ===

Note however that Level 1 also exists but is used for the page name itself so it would be better to avoid using it.


You make a list by adding * or # and a space at the start of the line. Similar to headers, you can add levels to the bullets by starting the line with a combination of *s or #s.

* Item 1
* Item 2
** Subitem 1 of Item 2
# Number 1
#* Subitem 1 of Number 1
# Number 2
## Number 2.1
##* Subitem 1 of Number 2.1
##* Subitem 2 of Number 2.1

The above will create:

  • Item 1
  • Item 2
    • Subitem 1 of Item 2
  1. Number 1
    • Subitem 1 of Number 1
  2. Number 2
    1. Number 2.1
      • Subitem 1 of Number 2.1
      • Subitem 2 of Number 2.1


Comments are text that are only visible when editing the page, they will not be parsed into the page and are useful for providing information about a certain part for the editor. Comments are written as:

 <!-- Comment anything here -->

The Tables Section will show an example on one way to use comments


The basic syntax for a wiki table is:

 |- <!-- Row 1 -->
 ! Header 1
 ! Header 2
 |- <!-- Row 2 -->
 | Cell 1
 | Cell 2

Using the above will then make the table:

Header 1 Header 2
Cell 1 Cell 2

The number of rows and columns are determined automatically based on the number of cells given. You can also add more properties to the table (or rows / cells) and is done similar to class="wikitable" in the sample table above. But first here are some notable properties:

Name Description Example
Table Properties
class Here you define the "class" you want the table to have.
You can have multiple classes separated by spaces
There are various wiki-defined classes (such as "wikitable") that help format the table itself.
style If you want a custom style for the table, you can write it in css here
This table has the style "text-align:center;"
Cell Properties
colspan This will determine how many cells worth in width the current cell is.
This accepts a whole number as value
Both Table Properties and Cell Properties have a colspan of 3
(They occupy the width of 3 cells combined.)
rowspan rowspan is the same as colspan excepting their "directions."
If colspan is horizontal, rowspan is the vertical counterpart.

You can also put class and style properties in cells. There are also other properties but these 4 should be fine for now. Putting them into use, the above table is generated by:

  {|class="wikitable" style="text-align:center;"
  ! Name
  ! Description
  ! Example
  ! colspan="3" | Table Properties
  | class 
  | wikitable<br>mw-collapsable<br>mw-collapsed
  | style
  | text-align:center;
  ! colspan="3" | Cell Properties
  | colspan 
  | 3
  | rowspan
  | 2

Special Symbol(s)

These are simple templates that provide the character for a special symbol. They use the following syntax:


Simple right? a "list" of special symbols I am aware of are here:

NAME Result Example
star 4★ Agni

Linking Pages

There are 2 ways to link pages and which way to you depends on whether you are trying to link an external page or not:

 [[Page/Within the wiki|Name Me]]
 [https://www.external-page.com External]

Name Me and External are what you will display the links as, both of them are spontaneously thought of but this is how they will look like:

Name Me

Note however that spaces in wiki page links are automatically converted into underscores so it is required to put a pipe to separate the page and the name

As mentioned earlier, it is possible to jump to sections by using hyperlinks. It is done by adding #Section at the end of the first argument. For example, to jump to this page's Tables section, it will be written as

 [[User:Midokuni/Notepad/GuideMaking#Tables|Jump to Tables]]

If you are attempting to jump to a section within the same page, you can ommit the page name and simply put #Tables

 [[#Tables|Jump to Tables]]

Both of them will then be:

Jump to Tables
Jump to Tables

Using Images

You can insert images uploaded in the wiki by linking them if they are under the File namespace. You can scale the size up or down by adding |SIZE px after the file name. You can upload images in Special:Upload. For example:

[[File:Excalibur square.jpg]]
[[File:Excalibur square.jpg|50px]]

Using the above samples would result in:

Excalibur square.jpg Excalibur square.jpg

Tip: If you don't know the file names, you can visit the specific wiki page and check the Assets tab.

Code Blocks

Code blocks are made by having the line start with a space. They are what I used to show the samples above and as it will be difficult to show an sample code for this, just click edit section to see how this (or the other samples) was made.


Name Tags Description Notes
Linebreak <br /> Adds an empty line Adding an empty line in between the editor lines can achieve similar results
Reference <ref>reference</ref>
<ref name="id_name">reference</ref>
<ref name="id_name" />
To be used when you want to reference someone for their work Can add a "name" attribute to be able to reuse the same reference later on.
Nowiki <nowiki></nowiki> Makes it such that the content inside the tags are treated as raw text.
Tabber <tabber>
|-|tab name= content
This will create tabs for the readers to click and switch the contents. The |-|tab name= is the line that will define the tabs and will continue until the next one or the closing tabber tag


How to Use

#Special Symbol(s) are also templates. The way you use them is with the same braces and you can add parameters delimited by the pipe (|) to the templates and go as follows:

 |param1=Param 1 Value
 |param2=value of param 2
 |param4=4th parameter
 |par3=The third

The NAMEs of the templates are given below and you can find the various (optional) parameters in their respective pages.

Wiki Templates

Template Description Sample Usage Sample Result Note
Itm Display a game entity {{Itm|Vikala}} Npc s 3040252000 01.jpg Vikala Using Itm in-text would help readers easily recognize characters or summons being described.
Itm will likely be one of the most used templates you will end up using.
{{Itm|Agni|large|notitle}} Summon m 2040094000.jpg
tt Add a tooltip {{tt|Displayed Text|Tooltip Text}} Displayed TextTooltip Text
status Display a status effect {{status|Paralyzed|t=180s}} Status Paralysis.pngParalyzedCan't attack
Duration: 180 seconds
Like Itm, it helps in better giving the reader an idea of what is being described.
{{status|Bonus Fire DMG|t=4t|a=30%}} Status Bonus Damage.png30% Bonus Fire DMGDeals bonus fire DMG for one-foe one-ally attacks
Strength: 30%Duration: 4 turns
CharacterSkill Display a specific skill of a character {{CharacterSkill|Fraux|3}} Ability Indominus.png IndominusFire damage to a foe (Damage cap: ~510,000).
Gain Status AttackUpStack.png10% ATK Up (Stackable / Max: 60%)ATK is boosted (Stackable / Can't be removed)
Strength: 10% (Max: 60%)Multiplier: Unique StackableDuration: IndefiniteStacking: Single Target
Status DefenseUpStack.png10% DEF Up (Stackable / Max: 60%)DEF is boosted (Stackable / Can't be removed)
Strength: 10% (Max: 60%)Duration: IndefiniteStacking: Single Target
Restore all allies' HP based on damage dealt (Healing cap: 2000) and remove 1 debuff.
{{CharacterSkill|Threo|2|alt=true}} [[File: | 25px|link=Threo]] Berserk ForgeGain Status Counter.pngCounters on Dodge (3 times)Dodge and counter one-ally attacks
Strength: 200%Duration: 3 turnsCounter attacks grant 5% charge bar per hit.
At level 85:
Counter buff upgraded to Status Counter DodgeDMG.pngCounters on Dodge/DMG (3 times)Counters upon dodging one-ally attacks or taking DMG
Strength: 200%Duration: 3 turnsCounter attacks grant 5% charge bar per hit.
Also gain Status TripleUp.pngGuaranteed TAGuaranteed Triple Attack regardless of Triple Attack Lowered debuffs
and Status AggroUpArrow.pngHostility UpMore likely to be attacked (Can't be removed)
Strength: 100% chance to be targeted by foesDuration: 1 turn
CharacterOugi Display a specific charge attack of a character {{CharacterOugi|Tien}} Skill charge attack.png Dance of DeathMassive Fire damage to a foe.
Inflict Status Blind.pngBlindedAttacks have a slight chance to miss
Duration: 180 seconds
CharacterSupportSkill Display a specific support skill or support emp of a character {{CharacterSupportSkill|Fraux|3}} Icon Arcarum Main Support Skill.png Strength UprightWhen Switching to Main Ally: Fraux gains Status Solid Fortitude.pngSolid FortitudeDamage skills activate twice (Can't be removed)
Duration: Indefinite
(Can't be reactivated.)
{{CharacterSupportSkill|Vikala|emp}} Icon Extended Mastery Support Skill.png Extended Mastery Support SkillWhen the field effect Status Utopia.pngUtopiaFoes' ATK is boosted / All allies' hype is boosted before attacking
Field effect
Local status effect
is active: Bonus Elemental DMG effect.
ClassSkill Display a specific MC-exclusive skill {{ClassSkill|Phalanx III}} Ability Phalanx.png Phalanx IIIAll parties gain Status Dmg Cut 70.png70% DMG CutTaking 70% less DMG
Duration: 1 turn Damage Cut reducing damage taken for all elements.
Warning! Does not work for Plain Damage!
and Status Veil.png40% Debuff Res. UpDebuff resistance is boosted
Strength: 40%Duration: 1 turn

User Templates

User templates are templates made by users under their userspaces and are not (yet) in the Template namespace. This is why the Name of these templates aren't simple words.

Author Template Description
Midokuni User:Midokuni/sandbox/Template:WeaponGrid Displays 1 Mainhand Weapon and a 3x3 weapon grid
Midokuni User:Midokuni/sandbox/Template:PartyLayout Displays a party setup of 1 MC, 3 main allies and 2 sub allies, main/sub summon/weapon and subskills.
Blue Sphere User:Blue_Sphere/Template:SummonGrid Displays the main summon, support summon, and 2x2 sub summon grid.


Widgets are simply Templates with less restrictions as they are used as raw code and thus can use scripts to perform tasks templates can't do. They are called by using:



A way for the readers to filter the content displayed. Normally used with tables but is applicable to most things. Examples of pages using PageFilter are Bonus Damage and my Self Sacrifice Character Collection.

How to use

  1. Insert in the page the filter interface
    <div id="page-filter-container"></div>{{clear}}
  2. Call the PageFilterJS widget at the end of the page
  3. Add data attributes / properties to the elements to be filtered
    • For tables: They are done similar to how class and style properties are done
    • For others: You will need to add a div tag (or any tag) with the data attributes

Generating the data attributes for characters can be done automatically with the use of a helper function


For example:

 <div id="page-filter-container"></div>{{clear}}
 |- {{#invoke:PageFilter|renderFilterData|Fraux}} <!-- add data attributes via the helper function -->
 | {{Itm|Fraux}}
 | {{CharacterSkill|Fraux|1}}
 |- data-filter-race="human" data-filter-rarity="ssr" data-filter-element="dark" <!-- add data attributes manually -->
 | {{Itm|Vikala}}
 | {{CharacterSkill|Vikala|1}}
 <div {{#invoke:PageFilter|renderFilterData|Fraux}}>{{Itm|Fraux|large|notitle}}<br></div>
 <div data-filter-race="human" data-filter-rarity="ssr" data-filter-element="dark">{{Itm|Vikala|large|notitle}}<br></div>

will result to the following:

Npc s 3040161000 01.jpg Fraux Ability Strange Attractor.png Strange AttractorFire damage to a foe (Damage cap: ~510,000).
Extend debuff durations by 1 turn.
Npc s 3040252000 01.jpg Vikala Ability Ring the Dormouse.png Ring the Dormouse5-hit, 100% Dark damage to a foe (Damage cap: ~110,000 per hit~550,000 total).
Sic Status Dorrie.pngDorrieTrap springs when the foe uses a special attack (Plain DMG to all foes / Caught effect) (Can't be removed)
Base Accuracy: Guaranteed to land if the foe does not have 100% debuff resistanceDuration: IndefiniteLocal status effect
on a foe.
(When the foe uses a special attack: The trap is sprung. 999,999 Plain damage to all foes and inflict Status Paralyzed 2.pngCaughtCan't attack
Base Accuracy: 120%Duration: 2.5 turnsLocal status effectApplied during the attack phase.
On the next turn, it'll have 2 turns remaining.
Npc m 3040161000 01.jpg

Npc m 3040252000 01.jpg

The current filters available are:

  • Element
  • Race
  • Rarity
  • Weapon


Uses a combination of Templates (Template:NVD3Chart and Template:NVD3Series) and the widget NVD3JS to create interactive charts. A documentation of how to use can be found in the NVD3Chart Page. Additional examples can also be found in my Fire Grids Comparison page.