Help:Including additional CSS and JS/technical

The global JavaScript method  provides a common interface for including articles that contain scripts or styles on a community.

The functionality is similar to the existing methods  and. However,  can import articles from external communities, 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 community 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:Common.js").
 * style - An article containing CSS (for example "MediaWiki:Common.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
Simple syntax is used to locate the articles you're trying to import. It 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 community name, except in the case of a local community.

Local articles
Articles on the local community can be located by title in the same way that you would link to them normally. They do not require a prefix or community name. For example, if you wanted to import the article MediaWiki:Common.js, the following would work inside an  statement:

External articles
Articles from external communities 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 community name to determine which community you will be importing them from and how you will identify that community. Fandom supports looking up communities by their URL. URL lookups are performed for the u prefix. For example, if you wanted to import the article Highlight.css from the Dev Wiki, the following would work inside an  statement:

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:

Advanced usage
Behind the scenes, the  method performs three necessary tasks:
 * 1) Generating a properly formatted URL for use with ResourceLoader,
 * 2) Performing sanity checks on the modules provided to assure they are properly formatted
 * 3) 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 can 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 conjunction with, like so:

If the CSS is hosted on another community or websites outside of Fandom such as Dropbox, the url should have the http:// or https:// like this asset file for example:

It will use the CSS file from the source website to import to whatever CSS page it's been put on. If the style sheet file is edited outside of Fandom and an import syntax with the raw file is in use, an immediate change will occur. CSS pages that have been edited with the import used will have the waiting state before taking effect. They should have the codes that customize the Fandom interface in-order to take effect if the imported CSS comes from another internet source not hosted on Fandom.

For JavaScript, using external third party sites may open up a security risk and should only be imported from a site inside Fandom.

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

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

Importing multiple modules in a single method call:

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

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

Further help and feedback
de:Hilfe:Einbinden von zusätzlichem CSS und JS/technisch es:Ayuda:Incluyendo JavaScript y CSS adicional/técnico fi:Ohje:Ylimääräisen JavaScriptin ja CSS:n lisääminen/tekninen fr:Aide:Inclure du CSS et JS supplémentaire/technique it:Aiuto:Includere CSS e JS aggiuntivi/avanzato ja:ヘルプ:追加のJavaScriptとCSSをインクルードする/技術情報 ko:도움말:자바 스크립트 및 CSS 불러오기/importArticles pl:Pomoc:Importowanie CSS i JS/techniczne pt:Ajuda:Como incluir JavaScript e CSS adicionais/Técnico ru:Справка:Включение дополнительных JS и CSS/Техническая часть tr:Yardım:Ek CSS ve JS dahil/teknik uk:Довідка:Включення додаткових JS і CSS/Технічна частина vi:Trợ giúp:Bao gồm JavaScript và CSS bổ sung/kỹ thuật zh:Help:導入更多JavaScript與CSS/技術