FANDOM


CategoryIcon добавляет иконки к ссылкам на страницах категорий, где имя изображения — ссылка. Добавленные изображения по умолчанию имеют класс «cicon-image».

Установка

Смотрите также: «Включение дополнительных JS и CSS», «Шпаргалка по CSS и JS»
dev:CategoryIcon/code.js
  • Для персонального использования нужно вставить код, расположенный ниже, на страницу global.js (для глобального использования) или common.js (для использования на одной вики).
importArticles({
    type: 'script',
    articles: [
        'u:dev:CategoryIcon/code.js',
    ]
});
importArticles — лучший способ установки скриптов на ФЭНДОМЕ
Функция importArticles используется для объединения нескольких HTTP-запросов в один, позволяя множеству скриптов загружаться и выполнять свою работу быстрее. Если Вы устанавливаете несколько различных скриптов, возможно, в коде есть несколько ненужных импортов. Нажмите "Развернуть", чтобы посмотреть, как эффективно установить скрипты одним импортом, увеличив скорость их работы и очистив лишний код. Ещё один метод - использование страницы MediaWiki:ImportJS.
Если в вашем файле JavaScript есть множество строк с импортом importScript, importScriptPage или importArticles, то их можно соединить! Так Ваш код будет быстрее загружать скрипты с одного импорта, и его вид будет аккуратнее. Рассмотрите образцы ниже. Возможно, в данный момент Ваш код похож на образец слева. Справа же показано, как Вы можете его изменить.
Несколько импортов — грязно и медленно Один импорт — чисто и эффективно
importScriptPage('AjaxRC/code.js','dev');
 
importScript('MediaWiki:localScript.js');
 
importArticle({
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
});
 
importScriptPage('page1.js', 'wikiname');
 
importScriptPage('page2.js', 'wikiname');
importArticles({
    type: 'script',
    articles: [
        'u:dev:AjaxRC/code.js',
        'MediaWiki:localScript.js',
        'u:dev:FloatingToc/code.js',
        'u:wikiname:page1.js',
        'u:wikiname:page2.js'
    ]
});
Примечание: Обратите особое внимание на расстановку запятых и синтаксис в данном примере. Зачастую пользователи, мало знакомые с программированием (и не только!), случайно совершают ошибку, неправильно поставив запятую при написании кода, забывая написать символ или нечаянно удалив его. Это приводит к синтаксической ошибке, которая ломает код. Аккуратно импортируйте скрипты, следуя инструкции выше.
Однако, существует ещё множество требований к использованию importArticles! Для подробной информации смотрите справку "Включение дополнительных JS и CSS".

Настройка

Параметры иконок можно регулировать изменением с помощью CSS:

.cicon-image {
    width: 45px;
}
Опции скрипта
доступны через window.fng.cicon:
опция - значение по умолчанию - возможные значения
описание
debug - false - true/false
выводить отладочную информацию в консоль
restrict - true - true/false
скрипт будет работать только в пространстве категория:
ext - .png - строка
расширение файла
cls - cicon-image - строка
класс добавляемых иконок
scale - /scale-to-width-down/50 - строка
добавить запрос на изменение размера изображения (экономит трафик); последняя часть (50) - размер в пикселях; используйте scale="", чтобы размер не изменялся
iprepend - "" - строка
добавить текст в начало имени картинки; результат: строка+имя+расширение
iappend - "" - строка
добавить текст в конец имени картинки; результат: имя+строка+расширение
tprepend - "" - строка
добавить текст (span с классом "cicon-prepend") перед иконкой; результат: строка<img ...>
tappend - "" - строка
добавить текст (span с классом "cicon-append") после иконки; результат: <img ...>строка

Пример

//создать объект опций
window.fng = $.extend(window.fng, {cicon:{}});
//задать расширение .svg
window.fng.cicon.ext = '.svg';
//добавить 'Map ' к именам картинок ('Map Earth' и тп)
window.fng.cicon.iprepend = 'Map ';
//запросить изменение размера до 50px
window.fng.cicon.scale = '/scale-to-width-down/50';

С этими настройками скрипт будет искать изображения с именами "Map ссылка.svg", где "ссылка" - это текст ссылки, а затем добавлять их к ссылкам.

Примечания

  • Двойные перенаправления не обрабатываются.
  • Скрипт не задаёт стили. Используйте указанные выше классы для изменения параметров изображений и текста.
  • Опции должны быть где-то в common/wikia.js. Сам скрипт лучше импортировать через ImportJS.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.