Template:MainPage: Difference between revisions
geometrydash.wiki.gg>Jamasto mNo edit summary |
geometrydash.wiki.gg>Jamasto mNo edit summary |
||
| Line 1: | Line 1: | ||
<includeonly>{{#invoke:Main page|main}}</includeonly><noinclude>This template is used to create an IMP Main Page. It uses [[Module:Main page]] to arrange a series of [[Template:Main page box]]es in a [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout CSS grid]. | <includeonly>{{#invoke:Main page|main}}</includeonly><noinclude> | ||
;Description | |||
:This template is used to create an IMP Main Page. It uses [[Module:Main page]] to arrange a series of [[Template:Main page box]]es in a [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout CSS grid]. | |||
:The layout is made using keywords arranged in a grid. This grid has 3 columns on desktop-width screens, 2 columns on tablet, and 1 on mobile. Each can have as many rows as you want. Each keyword represents the same section and can span multiple rows and/or columns, but ''must'' form a contiguous rectangle of any dimension (1x1, 1x2, 2x2, 2x3, etc.). | |||
For example, the following input to desktop | For example, the following input to desktop would produce a grid resembling the table following. | ||
<pre style=" | <pre style="width:fit-content;"> | ||
welcome welcome welcome | welcome welcome welcome | ||
about links links | about links links | ||
about contribute contribute | about contribute contribute | ||
</pre> | </pre> | ||
{| class="wikitable" | {| class="wikitable" | ||
| style="background-color: | | style="background-color:#0F03;" |welcome | ||
| style="background-color: | | style="background-color:#0F03;" |welcome | ||
| style="background-color: | | style="background-color:#0F03;" |welcome | ||
|- | |- | ||
| style="background-color: | | style="background-color:#F0F3;" |about | ||
| style="background-color: | | style="background-color:#00F3;" |external | ||
| style="background-color: | | style="background-color:#00F3;" |external | ||
|- | |- | ||
| style="background-color: | | style="background-color:#F0F3;" |about | ||
| style="background-color: | | style="background-color:#FF03;" |contribute | ||
| style="background-color: | | style="background-color:#FF03;" |contribute | ||
|} | |} | ||
Where <code>welcome</code> is the contents of [[{{ | :Where <code>welcome</code> is the contents of [[{{SITENAME}}/welcome]], <code>about</code> is the contents of [[{{SITENAME}}/about]], and so on. See [[Template:Main page box]] for more information about creating your own boxes. | ||
If you enter a keyword that does not have a corresponding box already, you'll be prompted to create one when saving or previewing the page. | If you enter a keyword that does not have a corresponding box already, you'll be prompted to create one when saving or previewing the page. | ||
| Line 39: | Line 39: | ||
==Dependencies== | ==Dependencies== | ||
For this template to work properly, you need the following: | For this template to work properly, you need the following: | ||
* [[Module:Main page]] | *[[Module:Main page]] | ||
* All templates in [[:Category:Main page templates]]. | *All templates in [[:Category:Main page templates]]. | ||
* All CSS within the "Main page layout" section found in [[MediaWiki:Common.css]]. | *All CSS within the "Main page layout" section found in [[MediaWiki:Common.css]]. | ||
The <code>[[MediaWiki:Gadgets/mpEditLinks|mpEditLinks]]</code> gadget is also highly recommended. Its code can be found at [[MediaWiki:Gadgets/mpEditLinks/main.css]] and [[MediaWiki:Gadgets/mpEditLinks/main.js]]. | The <code>[[MediaWiki:Gadgets/mpEditLinks|mpEditLinks]]</code> gadget is also highly recommended. Its code can be found at [[MediaWiki:Gadgets/mpEditLinks/main.css]] and [[MediaWiki:Gadgets/mpEditLinks/main.js]]. | ||
| Line 71: | Line 71: | ||
} | } | ||
</templatedata> | </templatedata> | ||
[[Category: | [[Category:Container templates]]</noinclude> | ||
</noinclude> | |||
Revision as of 06:38, 11 February 2026
- Description
- This template is used to create an IMP Main Page. It uses Module:Main page to arrange a series of Template:Main page boxes in a CSS grid.
- The layout is made using keywords arranged in a grid. This grid has 3 columns on desktop-width screens, 2 columns on tablet, and 1 on mobile. Each can have as many rows as you want. Each keyword represents the same section and can span multiple rows and/or columns, but must form a contiguous rectangle of any dimension (1x1, 1x2, 2x2, 2x3, etc.).
For example, the following input to desktop would produce a grid resembling the table following.
welcome welcome welcome about links links about contribute contribute
| welcome | welcome | welcome |
| about | external | external |
| about | contribute | contribute |
- Where
welcomeis the contents of Geometry Dash Expanded Wiki/welcome,aboutis the contents of Geometry Dash Expanded Wiki/about, and so on. See Template:Main page box for more information about creating your own boxes.
If you enter a keyword that does not have a corresponding box already, you'll be prompted to create one when saving or previewing the page.
If you leave a keyword out of a certain layout, it will not be displayed on that layout. A warning will be given at the top of the edit preview in case this was an accident, but can be safely ignored if intentional.
For additional hints and information, see the comments that came on your main page or ask a wiki.gg staff member for help.
Technical explanation
For the CSS savvy, this section explains how it works a bit under the hood.
The input to desktop, tablet, and mobile create CSS variables which are then used as the value of grid-template-areas in media queries for screen widths >=1350px, >=990px, and <990px. The boxes are given an id based on their subpage name, which is then used by the module to find the template, as well as by the box templates to assign them a CSS id of mp-box-<keyword>. Since these keywords are used directly in the grid layout, they must follow the rules of <custom-ident> naming.
Dependencies
For this template to work properly, you need the following:
- Module:Main page
- All templates in Category:Main page templates.
- All CSS within the "Main page layout" section found in MediaWiki:Common.css.
The mpEditLinks gadget is also highly recommended. Its code can be found at MediaWiki:Gadgets/mpEditLinks/main.css and MediaWiki:Gadgets/mpEditLinks/main.js.
TemplateData
<templatedata> { "params": { "desktop": { "label": "Desktop", "description": "The layout for wide screens", "required": true, "type": "string" }, "tablet": { "label": "Tablet", "description": "The layout for mid-width screens", "required": true, "type": "string" }, "mobile": { "label": "Mobile", "description": "The layout for narrow screens", "required": true, "type": "string" } }, "description": "Creates an IMP Main Page.", "format": "block" } </templatedata>