User:Void/Mobile Main Page

From Miraheze Meta, Miraheze's central coordination wiki

This guide is a how to for making a Mobile friendly Main Page with section headers.

The Main Page is subject to a special condition where section headers are collapsed on mobile and cannot be expanded to view the content under them. However, when section headers are wrapped with HTML division tags (<div></div>), they still display their full content on mobile. Pulling this off though can be a little messy and may make it difficult or even impossible to edit individual sections.

Quick and Dirty[edit source]

The easiest way to do it is by simply wrapping each section header with the div tags. However, the section header must not be on the same line as any new tags. For example, the code:

<div>== Section header ==</div>

Will display:

== Section header ==

The proper way to do it looks like this:

<div>
== Section header ==
</div>

Alternately, one may wish to simply place <div> at the top of their Main Page, and </div> at the bottom of the page. Be aware that the use of div tags anywhere else in the main page can cause this to fail.

Transclusion[edit source]

Readers may note that using the method above will result in a lot of stray div tags throughout the page. In order to keep the page clean of div tags, there are two methods we can take using transclusion.

Using a template for section headers[edit source]

Using this method will prevent you from being able to edit individual sections on the Main Page. On the other hand, it makes it easier to customize the display of section headers on the main page, as only the template needs to be edited in order to change the display of all section headers.

First, we need to create the page Template:Section with the content:

<div>
== {{{1}}} ==
</div>

Then we simply need to replace every case of == Section header == with {{section|Section header}}.

Using a separate page for content[edit source]

This method is very similar to redirecting the Main Page to another location. However, instead of redirecting the page, we simply translcude the contents of the other page to our main page.

Lets say our Main Page has the contents

== Hello ==
Welcome to our wiki!
Enjoy your stay! :)

We can create a page titled "Main Page/contents" and move the contents of our main page to there. (One can either use the move tool or just copy and paste). Then we can replace whatever is on the Main Page with:

<div>{{:Main Page/contents}}</div>

This results in the contents of the Main Page being visible to everyone, and as an upside, you can still edit individual sections.