User:U.ayaao.p/Sandbox/New main page info

This page is a work in progress.

You may or may not know that I'm currently proposing a new layout for the VTuber Wiki's main page. I'm assuming you've already read this forum post, loaded the CSS, and seen the new design for yourself. Now, you (the admins) are probably wondering, "how do I actually make everything there work?"

I'm going to explain just that.

How to install it site-wide
It is recommended to use the test wiki main page as a reference. The reason is, it's much simpler than having to separate the portions of this sandbox page where all sections are all over the place and raw. 
 * 1) Export the pages from the test wiki by using the Special:Export feature.
 * 2) *Fill out the "Add pages from category" section with "Main page templates".
 * 3) *Tick all the checkboxes and click "Add" to generate the necessary pages.
 * 4) *Click "Export" to download an XML file that contains all the required pages.
 * 5) *Green check.png Congratulations - you have completed the first step!
 * 6) To import the templates into your wiki, use the Special:Import page and select the XML file.
 * 7) *For the "Interwiki prefix", use "ayato-test".
 * 8) *Tick the checkbox labeled "Assign edits to local users where the named user exists locally".
 * 9) *You can leave other options as they are (afaik) and click "Upload file".
 * 10) *Green check.png Great! You have completed the second step.
 * 11) Finally, you need to use the imported templates in your wiki's main page. It's recommended to use the following structure, feel free to modify it as needed:

Browse this wiki

 



          


 * Once you've decided on the structure, install the CSS to your wiki by copying the contents of this page: w:c:ayato-test:MediaWiki:VTuberWikiMainPage.css to your wiki's MediaWiki:MainPage.css.
 * If there is any existing content, you can safely replace it now.

That's it! You have completed all the steps to import the new main page.

Changes from the old main page
Now that you have installed the new main page site-wide, you may notice there are several things different from the previous main page. I'm gonna explain what changed and why.

Overall syntax
Because the new code was written (almost) completely from scratch, there are bound to be differences in how some sections used to look in code. For example, the VTubers list.

VTubers list
While it is true that, according to my proposal, the English wiki won't have the VTubers list as it currently is, I think it would be interesting to compare how it would look if it did. So let's do just that. The current VTubers list code: Game Club Project Enogu Barara & Karen 22/7 (Nanabun no Nijuuni) Hacka Doll And the new one's code:  Game Club Project  Enogu  Barara & Karen  22/7 (Nanabun no Nijuuni)  Hacka Doll You may have noticed that the code has become more complex compared to its previous version, as it no longer solely relies on wikitext bracket links ( bracket links ). I believe this new approach is more logical and in line with traditional website coding practices. The previous code structure was uncommon for websites, while the new code implements cards in a more traditional manner. Whether this is appropriate for a MediaWiki powered site, I cannot say for certain. I simply followed the familiar style I'm used to.

And by the way, here's what each of them outputs. Current code: Virtual Groups Game Club Project Enogu Barara & Karen 22/7 (Nanabun no Nijuuni) Hacka Doll

New code: <h3 class="vyw-block__title">Virtual Groups <div class="vyw-card__img"> <div class="vyw-card__text">Game Club Project <div class="vyw-card__img"> <div class="vyw-card__text">Enogu <div class="vyw-card__img"> <div class="vyw-card__text">Barara & Karen <div class="vyw-card__img"> <div class="vyw-card__text">22/7 (Nanabun no Nijuuni) <div class="vyw-card__img"> <div class="vyw-card__text">Hacka Doll