Help:Including additional CSS and JS

The global JavaScript method  provides a common interface for including articles that contain scripts or styles on a wiki. The functionality is similar to the existing methods  and. However,  can import articles from external wikis, bundle several articles into one, minify them and serve them as a single request. This reduces both file size and web traffic, effectively making a wiki with a large number of additional files load a lot faster.

Usage
The  method relies on module definitions to load articles. Modules are essentially a JavaScript object with key/value properties. The following properties are required in every module:
 * type - This property denotes the type of articles this module will contain. The supported types are:
 * script - An article containing JavaScript (for example "MediaWiki:Wikia.js").
 * style - An article containing CSS (for example "MediaWiki:Wikia.css").
 * articles - The articles you wish to import. See the locating articles section below for more information on what to put here.

Any number of modules can be passed into. However, all of the articles within a module must be of the same type.

Locating Articles
In order for us to locate the articles you're trying to import, we have provided a simple syntax for locating articles. This syntax is very similar to, and compatible with Interwiki links:

Anything in parentheses above is optional, and anything in brackets above denotes user input. The colon character is used to separate the string into different segments for parsing. Prefixes tell us how you want to look up the article and are generally followed by a wiki name, except in the case of a local wiki.

Local Articles
Articles on the local wiki can be located by title in the same way that you would link to them normally. They do not require a prefix or wiki name, though, for convenience, there is a local prefix (or "l" for short). For example, if you wanted to import the article MediaWiki:Common.js, any of the following would work:

External Articles
Articles from external wikis can also be located the same way that you would link to them normally. However, unlike local articles, external articles require the use of a prefix and wiki name to determine which wiki you will be importing them from and how you will identify that wiki. Currently we support looking up wikis by their database name, which is typically the English name for the wiki, and by its URL. Database lookups are performed for the external prefix (or "remote" or "w" for short) and URL lookups are performed for the url prefix (or "u" for short). For example, if you wanted to import the article Highlight/code.css from the Dev wiki, any of the following would work:

This syntax will also work for wikis in other languages. For example, if you wanted to import the article MediaWiki:Common.js from the Italian version of One Piece Wiki:

It's generally easier to locate resources on external wikis by URL than by database name, since the two don't always match.

Advanced Usage
Behind the scenes, the  method performs three necessary tasks: generating a properly formatted URL for use with ResourceLoader, performing sanity checks on the modules provided to assure they are properly formatted and finally providing the user feedback in the case of an error. However, use of the method is not strictly required to gain the benefits of combining and minifying multiple articles into one request. If you'd like, you can generate the URL manually and load the assets using other means, such as @import statements in CSS or jQuery.getScript in JavaScript.

While there are many parameters you include in the URL, the following are probably the most useful:

In the end, you should end up with a URL that looks something like this:

Which can be used in conjuction with  like so:

Examples
Importing multiple script articles, one from the local wiki and one from an external wiki:

Importing multiple style articles, one from the local wiki and one from an external wiki:

Importing multiple modules in a single method call:

Alternate Syntax Examples
The  method also supports simplified, alternate syntaxes for common use cases. For convenience, the method  is also defined.

Including a single file from the local wiki using a module definition:

de:Hilfe:Einbinden mehrerer JavaScript oder CSS Dateien es:Ayuda:Incluyendo JavaScript y CSS adicional fr:Aide:Inclure JavaScript et CSS supplémentaire it:Aiuto:Includere JavaScript e CSS addizionali nl:Help:Bijkomende JavaScript en CSS laden