Willow: the mass documenting

2026-06-20T11:55:13Z

the mass documenting

New page

'''The per-class Skill Tree templates (<code>Template:Arcanist/Skill Tree</code>, <code>Assassin/Skill Tree</code>, <code>Huntress/Skill Tree</code>, <code>Knight/Skill Tree</code>, <code>Necromancer/Skill Tree</code>, <code>Samurai/Skill Tree</code>) are data templates that hold one class's full skill-tree layout as hover nodes, and are transcluded into the [[Skill Tree]] page.'''
__TOC__

== Overview ==
There is one of these templates per class. Each one stores that class's entire skill tree as a block of wikitext: a <code><nowiki>== <Class> Skill Trees ==</nowiki></code> heading, a <code><nowiki><tabber></nowiki></code> with two named tabs (the class's two ability/weapon paths), and inside each tab the 18 skill nodes laid out as rows of [[Template:ImageTooltip]] calls. They take '''no parameters''' — all content is hard-coded inside each template. The [[Skill Tree]] page transcludes all six (<code><nowiki>{{Knight/Skill_Tree}}</nowiki></code>, etc.) inside its own outer tabber, and separately lists the animated showcase via [[Template:DynamicGifDisplay]]. Editors maintain these templates whenever a class's skill nodes change.

The two tabs per class are:
{| class="wikitable"
! Class !! Tab 1 !! Tab 2
|-
| Knight || Shield || Emblem
|-
| Samurai || Kunai || Star
|-
| Huntress || Trap || Bomb
|-
| Assassin || Poison || Cloak
|-
| Necromancer || Skull || Scripture
|-
| Arcanist || Jewel || Orb
|}

== Parameters ==
These templates take no template parameters — they are pure data. The "parameters" an editor actually fills are the fields of each [[Template:ImageTooltip]] node inside them:
{| class="wikitable"
! Parameter !! Required? !! What it does !! Example
|-
| <code>img</code> || Required || The node's icon, as <code>base;hover</code> (two file names separated by a semicolon): the first image shows normally, the second shows on hover. Live trees use the placeholder pair below for every node until art is ready. || <code>img=SpinningQuestion.gif;HoverSpinningQuestion.gif</code>
|-
| <code>title</code> || Required || The skill's name, shown as the tooltip heading. Escape an apostrophe as <code>'</code>. || <code>title=Unyielding Bastion</code>
|-
| <code>content</code> || Required || The skill description shown in the tooltip. Usually wrapped in <code><nowiki>...</nowiki></code> with key numbers highlighted via <code><nowiki>...</nowiki></code> and line breaks via <code><nowiki> </nowiki></code>. || <code><nowiki>content=Gain +2 defense for 3s (Max 20)</nowiki></code>
|}

== How to use ==
'''Structure of one template.''' Reading top to bottom in the source, a tab is a vertical flex column built '''from the top row of the tree down to the single root node at the bottom''', in this node count per row: 3 nodes, 2, 3, 2, 2, then 1. That is 6 + 2 + 3 + 2 + 2 + 1... — in practice each tab contains 18 nodes total (the in-game tree has 3 paths × 6 rows = 18 nodes), grouped into flex rows. Each row is a <code><nowiki><div style="display:flex; gap:...;"></nowiki></code> holding that row's <code>{{ImageTooltip}}</code> nodes; rows of three use <code>gap:20px</code> and rows of two use <code>gap:40px</code> so columns line up. The single bottom node is placed bare (not inside a flex div). The whole column sits in <code><nowiki><div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;"></nowiki></code>.

Skeleton of a single node (this is the unit you copy):
* <code>img</code> = <code>base;hover</code> images.
* <code>title</code> = the skill name.
* <code>content</code> = the description; use <code><nowiki></nowiki></code> to colour/emphasise numbers and <code><nowiki> </nowiki></code> for new lines (e.g. tier-point damage tables: "0–8TP: 13 Damage", "9TP: 16 Damage", ...).

'''How they feed the Skill Tree page.''' The [[Skill Tree]] page does not contain any nodes itself. It has an outer <code><nowiki><tabber></nowiki></code> (one tab per class) and each class tab just transcludes the matching data template — for example the Knight tab is only <code><nowiki>{{Knight/Skill_Tree}}</nowiki></code>. (Note the page uses the underscore form <code>Knight/Skill_Tree</code> = the title <code>Template:Knight/Skill Tree</code>.) Below the trees, the page calls <code><nowiki>{{DynamicGifDisplay}}</nowiki></code> with a long <code>list=</code> of <code>Skill Name:Gif-FileName.gif;</code> pairs — that is the animated "Skill Tree Showcase". The GIF list is maintained separately on the [[Skill Tree]] page itself, '''not''' inside these data templates, so when you add a new skill you typically add the node here ''and'' add its GIF entry to the DynamicGifDisplay list on the Skill Tree page.

'''To edit an existing skill:''' open the class template, find the node by its <code>title=</code>, and edit the <code>content=</code> (or <code>title</code>/<code>img</code>). Save.

'''To add a skill:''' decide which tab (path) and which row it belongs to, then paste a new <code>{{ImageTooltip}}</code> block into that row's flex <code><nowiki><div></nowiki></code>, keeping it among the correct siblings so the layout stays aligned. Match the row's existing <code>gap</code> spacing. Then add the matching <code>Title:Gif-Title.gif;</code> entry to the DynamicGifDisplay <code>list=</code> on the [[Skill Tree]] page (use <code>blank</code> in place of a file name if no GIF exists yet, as seen for "Surprise Attack!").

== Copy this ==
A blank single node to paste into the right flex row:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=
|content=

}}
</syntaxhighlight>

A blank tab skeleton (one path; repeat the column for the second tab, separated by <code><nowiki>|-|</nowiki></code>):
<syntaxhighlight lang="wikitext" style="overflow:auto;">
== <Class> Skill Trees ==
<tabber>
<Tab1Name>=
<div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;">
 

<div style="display:flex; gap:20px;">
{{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=}}
{{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=}}
{{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=}}
</div>


{{ImageTooltip|img=SpinningQuestion.gif;HoverSpinningQuestion.gif|title=|content=}}
</div>
|-|
<Tab2Name>=
<div style="display:flex; flex-direction:column; align-items:center; row-gap:15px;">
 

</div>
</tabber>
</syntaxhighlight>

== Example ==
Live result (the Knight tree's root node from <code>Template:Knight/Skill Tree</code>, hover it for the tooltip):

{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Unyielding Bastion
|content=
When your shield deals damage or when you take damage, gain +2 defense for 3s (Max 20)
}}

Wikitext (one node, exactly as it appears in the data template):

<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{ImageTooltip
|img=SpinningQuestion.gif;HoverSpinningQuestion.gif
|title=Unyielding Bastion
|content=
When your shield deals damage or when you take damage, gain +2 defense for 3s (Max 20)
}}
</syntaxhighlight>

And how the whole tree reaches the page:

<syntaxhighlight lang="wikitext" style="overflow:auto;">
Knight=
{{Knight/Skill_Tree}}
|-|
Samurai=
{{Samurai/Skill_Tree}}
</syntaxhighlight>

== Tips & notes ==
* These templates take no parameters; all six are pure data and are meant to be transcluded by [[Skill Tree]].
* Title with the title <code>Template:Knight/Skill Tree</code> is referenced as <code><nowiki>{{Knight/Skill_Tree}}</nowiki></code> ( <code>/</code> in the title, <code>_</code> for the space) — keep that exact form on the Skill Tree page.
* All nodes currently share the placeholder icon pair <code>SpinningQuestion.gif;HoverSpinningQuestion.gif</code>; swap in real art per node when available (format stays <code>base;hover</code>).
* Inside <code>content</code>, wrap emphasised numbers in <code><nowiki></nowiki></code> and use <code><nowiki> </nowiki></code> for tier-point breakpoints; escape apostrophes in <code>title</code> as <code>'</code>.
* Keep each row's node count and <code>gap</code> consistent (3-node rows = <code>gap:20px</code>, 2-node rows = <code>gap:40px</code>) so columns stay aligned; the lone root node is placed outside any flex row.
* The animated showcase GIF list lives on the [[Skill Tree]] page in [[Template:DynamicGifDisplay]], not in these templates — update both when adding a skill. Use <code>blank</code> as the file when a GIF isn't ready.
* Related: [[Template:ImageTooltip]] (the node), [[Template:DynamicGifDisplay]] (the showcase), [[Skill Tree]] (the host page).

Template:Arcanist/Skill Tree/doc - Revision history

Willow: the mass documenting