Help:Including additional CSS and JS

The global JavaScript method importArticles() provides a common interface for including articles that contain scripts or styles on a wikia.

The functionality is similar to the existing methods importScriptPage and importStylesheetPage. However, importArticles() can import articles from external wikias, 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 wikia with a large number of additional files load a lot faster.

Usage

The importArticles() 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: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 importArticles(). However, all of the articles within a module must be of the same type.

File:Bulb.png

Caching

Links generated by importArticles() (and the advanced techniques described below) are cached for a maximum of 10 minutes. So whenever you make a change you can assume that after 10 minutes all the users coming to your wikia will be served the updated version of js and css files if importArticles() is used.

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:

(Prefix:<WikiName>:)<Article>

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 wikia name, except in the case of a local wikia.

Local articles

Articles on the local wikia can be located by title in the same way that you would link to them normally. They do not require a prefix or wikia 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:

MediaWiki:Common.js
l:MediaWiki:Common.js
local:MediaWiki:Common.js

External articles

Articles from external wikias 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 wikia name to determine which wikia you will be importing them from and how you will identify that wikia. Wikia supports looking up wikias by their database name, which is typically the English name for the wikia, 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 {{#NewWindowLink:http://dev.wikia.com/index.php?title=Highlight/code.css%7CHighlight/code.css}} from the {{#NewWindowLink:http://dev.wikia.com%7CDev Wiki}}, any of the following would work:

w:dev:Highlight/code.css
remote:dev:Highlight/code.css
external:dev:Highlight/code.css
u:dev:Highlight/code.css
url:dev:Highlight/code.css
u:dev.wikia.com:Highlight/code.css
url:dev.wikia.com:Highlight/code.css

This syntax will also work for wikis in other languages. For example, if you wanted to import the article {{#NewWindowLink:http://it.onepiece.wikia.com/index.php?title=MediaWiki:Common.js%7CMediaWiki:Common.js}} from the Italian version of {{#NewWindowLink:http://it.onepiece.wikia.com%7COne Piece Wiki}}:

u:it.onepiece:MediaWiki:Common.js
url:it.onepiece:MediaWiki:Common.js
url:it.onepiece.wikia.com:MediaWiki:Common.js

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

Advanced usage

Behind the scenes, the importArticles() 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
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:

Parameter	Parameter Description
`mode`	Tells ResourceLoader that we will be loading articles. Should be set to "articles."
`articles`	The list of articles. If multiple articles are provided, they should be separated by a pipe "\|" character.
`only`	The type of articles to import. Should be set to either "scripts" or "styles."
`debug`	This parameter is not necessary by default but can be set to "true" to disable minification to allow for easier debugging of problems within the imported articles.

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

/load.php?mode=articles&articles=One.css|Two.css&only=styles

Which can be used in conjuction with @import, like so:

@import url("/load.php?mode=articles&articles=One.css|Two.css&only=styles");

Examples

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

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
});

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

importArticles({
    type: "style",
    articles: [
        "MediaWiki:Common.css",
        "external:starwars:MediaWiki:External_include.css"
    ]
});

Importing multiple modules in a single method call:

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
}, {
    type: "style",
    article: "MediaWiki:Common.css"
});

Alternate Syntax Examples

The importArticles() method also supports simplified, alternate syntaxes for common use cases. For convenience, the method importArticle() is also defined.

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

importArticle({
    type: "style",
    article: "MediaWiki:Common.css"
});

Further help and feedback

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article