Manual talk:How to make a MediaWiki skin

Jump to navigation Jump to search

About this board

Nasirkhan (talkcontribs)

I was following the skinlabs starter skin and found the following line in the ContentHeading.mustache file. can you please tell me what it does and how it works?

<a href="#lang" class="mw-interlanguage-selector mw-ui-button content__language-btn">{{msg-otherlanguages}}</a>


I added a interwiki language and added the language in the article. But that showed up below the main content via Languages.mustache. I also want to about the variants

Jdlrobson (talkcontribs)
Jdlrobson (talkcontribs)
Reply to "In other languages"
Nasirkhan (talkcontribs)

How can i show the language links to a skin?


I also need to know the options to customize that as well. For example I may want to show the language list as a drop down menu.

Jdlrobson (talkcontribs)

Assuming you are using SkinMustache, the template data is described in Manual:SkinMustache.php#Menus. Let me know if anything can be expanded there.

If you are asking how to configure your local wiki to display languages, that's documented in Manual:Interwiki and out of scope for this page.

Nasirkhan (talkcontribs)
Reply to "Language links"
Nasirkhan (talkcontribs)

Can I write PHP code in the skins? if so what is the recommended way to do so?

Jdlrobson (talkcontribs)
Reply to "PHP Code"
Nasirkhan (talkcontribs)

I need to add <meta name = "viewport" content = "width=device-width"> meta. Can you please tell me how can i configure my skin to add this meta on each page ?

Jdlrobson (talkcontribs)
Nasirkhan (talkcontribs)

"responsive": true makes a skin responsive, but does not add the meta tag, I am interested to know that.


even though it makes a skin responsive, but I need to add the viewport meta into the skin. I followed this approach earlier and found that Google Search Console marked the site with "Mobile Usability issue: Viewport not set". As a result thousand of my pages are marked with this issue.

For this reason, I mentioned the meta tag not asked to know how to make a skin responsive! Please help me to find the solution to this.

Jdlrobson (talkcontribs)

> "responsive": true makes a skin responsive, but does not add the meta tag, I am interested to know that.

Out of interest what do you think this option is doing?

> I followed this approach earlier and found that Google Search Console marked the site with "Mobile Usability issue: Viewport not set".

If this is not working for you, I suspect you are running an outdated version of MediaWiki. What version of MediaWiki are you running on your pages with the Google search console?

> For this reason, I mentioned the meta tag not asked to know how to make a skin responsive! Please help me to find the solution to this.

My answer is correct, I've left some pointers to code on the main branch.

Skin's have a method called isResponsive. This reads directly from the skin option you define in skin.json:

https://github.com/wikimedia/mediawiki/blob/master/includes/skins/Skin.php#L204

This skin option adds a viewport meta tag to the HTML. It doesn't do anything else at time of writing:

https://github.com/wikimedia/mediawiki/blob/master/includes/skins/Skin.php#L216

Nasirkhan (talkcontribs)

Thank you for the clarification. It is my bad that I did not cleared the cache of the page source and found that there is no meta available. Though I cleared the page cache and before checking the page source. This happened in a MediaWiki 1.37. I am sorry for this misunderstanding.


Getting the notice from the Google search console happened on a MediaWiki 1.35 wiki.


"responsive": true works. I think the SkinLabs generated skins and Example skin should have this as the default, I may add a pull request there soon.

Nasirkhan (talkcontribs)

What is the recommended way to use a webfont?


I may like to use a font and include that in the skin package. is there any doc available which answers to this question?

I also need to know the steps to use a Google Font or some other font hosted to some other domain.


I asked this same question to the support desk but did not got any reply there: Topic:Wb1rvgucmqffnsws

Jdlrobson (talkcontribs)

I don't really understand the problem here.

There is nothing stopping you from adding an import statement to your LESS file either to a local font file or a foreign domain. What am I not understanding?

e.g.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body { font-family: 'Open Sans', sans-serif; } 
Nasirkhan (talkcontribs)

Thanks for your reply.

If you read my question again, you will find that I wanted to know the recommended solution, not a solution to use a webfont. As mediawiki is using resource loaded for css and js, i just wanted to know if there is any recommendation set for webfonts.


from now on I will use less to import the fonts, thanks.

Jdlrobson (talkcontribs)

Got it. No. There is no recommendation that I am aware of specific to MediaWiki here. Although be wary of importing from external websites and make sure that's clear on the skin README if you do.

Category links

3
Summary by Jdlrobson

At time of writing there is no way to customize the categories HTML list but this would be a good addition. Feel free to create a feature request on Phabricator. Creating a Phabricator ticket is no guarantee the feature will be implemented, but I will happily review a patch to add this, if you are able to provide one.

Nasirkhan (talkcontribs)

How to show and format category links. I found {{{html-categories}}} in the skin but could not found much about it. It is always returns as formatted html or can i get category links and names as array?

Nasirkhan (talkcontribs)

It would be really helpful if you can show me some reference/ related data, hooks or something similar to implement that. I will try from my end about the customization and then submit a patch.

Jdlrobson (talkcontribs)

The HTML string from categories is passed to the Mustache template using Skin::getCategories

https://gerrit.wikimedia.org/g/mediawiki/core/+/87500874e2b55e3da0735d71b0a0123882e149b5/includes/skins/SkinMustache.php#187

We could add an additional key `data-categories` that provides the data without the surplus HTML markup by refactoring Skin::getCategoryLinks to call a function called Skin::getCategoryLinksData https://gerrit.wikimedia.org/g/mediawiki/core/+/87500874e2b55e3da0735d71b0a0123882e149b5/includes/skins/Skin.php#682 and then calling the new getCategoryLinksData inside the SkinMustache::getTemplateData function. Does that make sense?

Reply to "Category links"
Nasirkhan (talkcontribs)

{{{html-site-notice}}} shows the site notice, is there any way to get the data? can i check if there is any site notice?

Jdlrobson (talkcontribs)

There is no way to get at the underlying data. This is because of the way CentralNotice and other extensions work.

You are free to wrap the HTML in any HTML elements that you choose.

What is your use case here?

Nasirkhan (talkcontribs)

I will show the site notice within some HTML elements and I do not want to show that wrapper element if there is not notice to show. This is the primary need.


If I had the access to the data then I may try to format that in my way. But as you confirmed that it is not available, then that is ok too.

Jdlrobson (talkcontribs)

Mustache supports an if guard so you can conditionally render an element based on that. The string will be empty it there is no site notice to display.

Reply to "Sitenotice"

Clarify how to control the footer links

3
Jdlrobson (talkcontribs)

In Topic:Wbcuv2jihh1hkjrs it was asked "how to control the footer links?"

Let's understand what's being asked here and update the documentation. Does the developer want to add / remove links on the skin level, or need a tutorial for displaying footer links, or other?

Nasirkhan (talkcontribs)

In short docs needs similar as Manual:Skinning Part 2#Footer.


There should be instructions on,

  1. how to add new links to the footer area,
  2. how to show texts form a file from the project root/ skin root (it could be a version number or some other text from a file)
  3. what if I would like to show the license as text and not to show the icon
  4. how to show "Powered by MediaWiki" as a line to text and not to show the logo
  5. how to show the items in the list
  6. and all the things mentioned in Manual:Skinning Part 2#Footer.
Jdlrobson (talkcontribs)

I've added Manual:SkinMustache.php#DataFooter to document the data relating to the footer that is passed down.

With SkinMustache, skins are expected to render content without opinion other than should I display this or not.

Most of this is being defined by configuration/extension hook.

For icons for example rendering text rather than a logo is discouraged as this is enabled by Manual:$wgFooterIcons. If you want to render text, you'll need to provide your own link and label using the technique in Manual:How_to_make_a_MediaWiki_skin#i18n.

Your template can render whatever HTML it chooses too, your skin.mustache file is yours to edit - so if you need to add new links or random license information that is not configurable just add it in the HTML, or even better still add it as part of an extension or LocalSettings.php using the associated hook: Manual:Hooks/SkinAddFooterLinks

Reply to "Clarify how to control the footer links"
Summary by Jdlrobson

Accessibility is a broad topic. For skin development, there is no specific advice that I can give you, that I wouldn't give you for any other web page you were working on, other than if the data is provided by SkinMustache you should probably render it, as there's likely a good reason it's there.

Please see Accessibility guide for developers for some other best practices.

Nasirkhan (talkcontribs)

what accessibility features are available from the core? is there any recommendation to make the skin compatible ?

Nasirkhan (talkcontribs)

How to show page stat? along with the view count, is there any other stat is available from core?

Jdlrobson (talkcontribs)
Reply to "Stat"