Jump to content

سيت أدوات الويكي الصغير\سيت المبتدئين\تخصيص الصفحة الرئيسية

Add links
From Meta, a Wikimedia project coordination wiki
This page is a translated version of the page Small wiki toolkits/Starter kit/Main page customization and the translation is 5% complete.
Other languages:

إذا انته واحد من مجتمع ويكي صغير, أحياناً تريد تخصص الصفحة الرئيسية (حتى تسويها أحسن على الشاشات الصغيرة), لو تغير إعدادات التكوين.

هاي الصفحة تشرح شوية أساسيات, حتى تكدر تسوي هاي التغييرات بنفسك. انته راح تحتاج تقرا شوية, يمكن تتعلم شي جديد, وتروح تختبر نفسك.

On most wikis, editing the "Main Page" requires permissions beyond what most editors have. Often this will be either administrator rights, interface administrator rights, or some permission group created specifically for the purpose. The exact configuration varies from wiki to wiki and you will have to check there to find out. To see the permissions set on your wiki, use the "Page information" link in the sidebar on the Main Page and look in the "Page protection" section.

Add responsive boxes to the main page

What you can learn on this page

Change the width of your browser window. Make it smaller and wider. See how arrangement of the boxes in the next line changes:

Box 1
Box 2
Box 3
Box 4
Box 5

This page explains how you can have this on your wiki.

Understand the background

Somehow, boxes are popular in web layout nowadays. If you put some boxes next to each other, then you also want these boxes to be readable on small screens. This is called responsive web design.

To put boxes next to each other, some people (ab)used tables in the past. Tables exist in wiki markup, but tables are a bad idea. Tables look bad on small screens (see this example image) and can create accessibility problems.

Unfortunately, the MediaWiki software does not provide responsive boxes as wiki markup. (Some boxes might exist as templates on some wikis, though.) And using MediaWiki:Common.css to store the layout ("CSS") for one single page is also a bad idea.

[1]

Hence on this page, we will:

  • use HTML markup and wiki markup for the actual content,
  • save this content as a template in a new wiki page called Template:Main_page,
  • use CSS to define the layout part (boxes) in a new wiki page called Template:Main_page/styles.css,
  • use TemplateStyles to apply the layout to the content in the template via the line <templatestyles src="Main_page/styles.css"/>, and
  • on the main page, load and embed the template via the line {{Main_page}}.

Example

Create the main page template

First of all, create a new page called Template:Main_page on your wiki.

Add content to the main page template

In this step, we define the content by editing the new page called Template:Main_page.

In the box below, there is a skeleton with five boxes. Copy and paste the lines in that box into that page, and then adjust. It uses the HTML division element ("div"). You can of course change the number of boxes: To remove a box, remove everything between an opening <div> and its corresponding closing </div>. Make sure that these two elements match, otherwise weird stuff can happen.

The class parameters below define the CSS layout for these HTML elements. We will define the layout in the next step. The very first line <templatestyles src="Main_page/styles.css"/> loads the CSS layout. 

<templatestyles src="Main_page/styles.css"/>
<div id="wikifrontpage_container" class="wikifrontpage_row">
<div class="wikifrontpage_box">
===Box 1===
* Item1 in the first box
* Item2 text in the first box
</div>
<div class="wikifrontpage_box">
===Box 2===
Some text in the second box
</div>
<div class="wikifrontpage_box">
===Box 3===
Some text in the third box
</div>
<div class="wikifrontpage_box">
===Box 4===
Some text in the fourth box
</div>
<div class="wikifrontpage_box">
===Box 5===
Some text in the fifth box
</div>
</div>

Define the CSS

Create the wiki page Template:Main_page/styles.css on your wiki.

The next lines define the layout of a box, and at which width a box moves from one line to the next line. You do not have to understand all the CSS below. 

.wikifrontpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.wikifrontpage_box {
	flex: 1;
	margin: 5px;
	min-width: 240px;
	border: 1px solid #CCC;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

The important parts in the CSS above are all lines with the word flex (which defines a flexible layout) and the line min-width: 240px; (which defines the width when to move a box from the same line to the next line).

Copy and paste these CSS definitions into the page Template:Main_page/styles.css and save the page.

Test

Add the template to your main page

Once you are content with the changes, embed the template in the main page itself: Edit your main page and add the line {{Main_page}} to it. As written above, this will usually require extended permissions.

That's all! Congratulations!

Problems

Other CSS options for smaller screens

Another option is to define CSS rules which are only used up to some window width. See CSS media queries if you are interested in experimenting with that.

Hide/change the text of the Main Page heading

The heading on the main page can be configured by edits to MediaWiki:Mainpage-title-loggedin for logged in users and MediaWiki:Mainpage-title for logged out users. For mobile logged in users, the message MediaWiki:wikimedia-mobile-mainpage-title-loggedin is used.

  • Set to - to use the default text.
  • Blank the page to hide the heading on the home page (if you do this, you need to have your own 1st level heading on the page to satisfy WCAG 2.1 2.4.1).
  • Change the text to something radically different from the page title, e.g. "Welcome to our project!"

The logged-in user message takes a single parameter - $1 - this represents the viewer's username which allows editors to customize the heading for the current user. e.g. Welcome to Wikipedia $1! would display the heading for user:Jdlrobson as Welcome to Wikipedia Jdlrobson!

Note: In the Vector (2022) skin (see Desktop improvements) hiding the header on the main page will disable the sticky header feature. We recommend revealing the heading on projects if possible.

Show language button at top of page in the Vector (2022) skin

The (see Vector (2022) skin) places the language button at the bottom of the main page because most projects hide the heading.

This can be restored to the top of the page via a feature flag. You can test this using the following query string parameter:

https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal?vectorlanguageinmainpageheader=1&useskin=vector-2022

Use horizontal navigation bars which wrap items on smaller screen widths

See for example the wiki markup on mw:Documentation or Template:Grants Strategy Relaunch. Basically this would be the HTML and CSS (but the CSS should be moved into TemplateStyles instead of being inline, see above!): 

<div style="display: table-cell; vertical-align: top; display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between;">
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 1]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px;border-bottom: 12px solid #2e00c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 2]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 3 which is a bit longer so it might wrap]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e00c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 4]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 5]]
 </div>
</div>

Footnotes

  1. ↑ Using common.css for these extra classes will add to the page load cost for every page on your wiki even when they are not used in the content.
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Small_wiki_toolkits/Starter_kit/Main_page_customization/acm&oldid=25276816"