worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили:
wiki:plugin:myicon

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
wiki:plugin:myicon [2025/01/12 14:54] – [Примеры/Использование] vladpolskiywiki:plugin:myicon [2025/01/12 15:41] (текущий) – vladpolskiy
Строка 5: Строка 5:
 Этот плагин был разработан VladPolskiy. Этот плагин был разработан VladPolskiy.
   * **Релиз:** 2025-01-12.    * **Релиз:** 2025-01-12. 
-  * **Репозиторий:**https://book51.ru/lib/exe/fetch.php?media=wiki:plugin:myicon.zip+  * **Репозиторий:**https://book51.ru/lib/exe/fetch.php?media=wiki:plugin:myicon
   * **Совместимость с «Докувики»:** 2024-02-06 "Kaos"   * **Совместимость с «Докувики»:** 2024-02-06 "Kaos"
   * {{ :wiki:plugin:myicon.zip |myicon.zip}}   * {{ :wiki:plugin:myicon.zip |myicon.zip}}
Строка 48: Строка 48:
  
  
-Простое использование: +Простой синтаксис использования: 
- +<code php> 
-  {{icon>home}}+{{:icons:16:auction-hammer--plus.png?|auction-hammer--plus.png.}} 
 +где: 
 +":icons" - начальная папка хранения иконок в менеджере ./data 
 +":16" - папка размера иконок 16х16 
 +":auction-hammer--plus.png?" - имя и расширение изображения иконки 
 +"auction-hammer--plus.png." - всплывающий текст при навидении курсора на иконку 
 +</code>
  
  
 +====Синтаксис====
 Некоторые более сложные варианты использования: Некоторые более сложные варианты использования:
 <code> <code>
-{{icon>home?24&circle&padding=10px&background=#DDD&color=#CCC}} +/*Пример обычной вставки в тексте*/ 
-{{fa>home|My Home}} +{{:icons:16:address-book-open.png?|address-book-open.png.}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {{:icons:16:balloon-left.png?|balloon-left.png.}} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{{:icons:16:tick.png?|tick.png.}} Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-{{fugue>user?24}} +
-{{silk>anchor}} +
-{{flag>no}} +
-[[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]] +
-[[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]  +
 </code> </code>
-{{icon>home?24&circle&padding=10px&background=#DDD&color=#CCC}} +==Пример обычной вставки в тексте== 
-{{fa>home|My Home}} +{{:icons:16:address-book-open.png?|address-book-open.png.}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {{:icons:16:balloon-left.png?|balloon-left.png.}} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{{:icons:16:tick.png?|tick.png.}} Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-{{fugue>user?24}} +
-{{silk>anchor}} +
-{{flag>no}} +
-[[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]] +
-[[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]  +
  
-===== Синтаксис ===== +<code> 
- +/*Пример измененной всплывающей подсказки при наведении курсора*/ 
-=== Базовый синтаксис === +{{:icons:16:address-book-open.png?|Прочитайте статью внимательно}}
-<code>{{icon>icon-name&flags|title}}</code> +
- +
-=== Синтаксис ссылки DokuWiki === +
-<code>[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]</code> +
- +
-=== Синтаксис внешней ссылки === +
-<code>[[protocol://host/path|{{icon>icon-name&flags|title}}]]</code> +
- +
-=== Доступные пакеты иконок === +
- +
-^ Пакет ^^^ +
-| ''icon''      | стандартный набор иконок (см. defaultPack) | +
-| ''fa''        | Font-Awesome | font icon | +
-| ''ra''        | RPG-Awesome | font icon | +
-| ''glyphicon'' | Glyphicons | font icon | +
-| ''typcn''     | Typicons | font icon | +
-| ''mdi''       | Material Design Icons | font icon | +
-| ''fl''        | Font-Linux | font icon | +
-| ''fugue''     | Fugue | | +
-| ''oxygen''    | KDE Oxygen | | +
-| ''breeze''    | KDE Plasma Breeze | | +
- +
- +
-=== Всплывающий помощник === +
-{{ http://lotar.altervista.org/wiki/_media/wiki/plugin/icons-popup.png?200}} Icons plugin provide a popup helper to easy add the icons in your page. To open the popup click to DokuWiki icon in the toolbar in edit page. +
- +
-The popup support this icon packs: +
- +
-  * Font-Awesome +
-  * RPG-Awesome +
-  * Typicons +
-  * Material Design Icons +
-  * Glyphicons +
- +
-=====Конфигурация и настройки===== +
-^ Вариант конфигурации ^ Значение по умолчанию ^ Описание ^ +
-^ ''defaultSize''       | ''16''        | Значение по умолчанию, если размер не указан | +
-^ ''defaultPack''       | ''fa''        | Пакет иконок по умолчанию, если не указано иное | +
-^ ''loadFontAwesome''   | ''On''        | Font Awesome : разрешить/запретить загрузку CSS (отключите, если у вас шаблон на основе Bootstrap3)  | +
-^ ''loadTypicons''      | ''Off''        | Typicons : включить значок шрифта | +
-^ ''loadFontlinux''     | ''Off''        | Font-Linux : включить значок шрифта | +
-^ ''loadMaterialDesignIcons'' | ''On''        | Иконки материалов : включить значок шрифта | +
-^ ''loadRpgAwesome''    | ''On''        | Font-Linux : включить значок шрифта | +
-^ ''fugueURL''          | (CDN URL)     | Fugue CDN или локальный URL | +
-^ ''oxygenURL''         | (CDN URL)     | KDE Oxygen CDN или локальный URL | +
-^ ''breezeURL''         | (CDN URL)     | KDE Plasma Breeze CDN или локальный URL | +
-^ ''silkURL''           | (CDN URL)     | Silk CDN или локальный URL  | +
-^ ''flagURL''           | (CDN URL)     | //Флаг// CDN или локальный URL | +
- +
-**ПРИМЕЧАНИЕ для пакета значков флагов**: по умолчанию используются флаги из [[:plugin:translation|плагина перевода]] присутствующего в вашей установке DokuWiki.. +
- +
-===== Флаги ===== +
- +
-^ Флаг           ^ Значение        ^ Описание ^ +
-| ''size''       | (см. defaultSizeвариант) | Размер значка (в пикселях) | +
-| ''pack''       | (см. defaultPackвариант) | Набор иконок (fa, glyphicon, fugue, oxygen) | +
-| ''circle''     | -             | Создайте круг вокруг значка. | +
-| ''border''     | -             | Добавьте рамку вокруг значка | +
-| ''borderColor''| -             | Установить цветную границу | +
-| ''padding''    | -             | Применить отступ к иконке (в пикселях) | +
-| ''background'' | -             | Применить фон к значку (в шестнадцатеричном формате или в виде названия цвета) | +
-| ''color''      | -             | Применить цвет к значку (в шестнадцатеричном формате или в виде названия цвета) | +
-| ''class''      | -             | Добавляет дополнительные CSS- классы к значку (полезно для Font Awesome или Glyphicon) | +
-| ''align''      | ''left|center|right'' | Выровнять значок ( по левому краю , по правому краю или по центру) | +
-| ''left''       | -             | Выровнять значок по //левому// краю | +
-| ''right''      | -             | Выровнять значок по //правому// краю | +
-| ''center''     | -             | Выровнять значок по //центру// | +
- +
-==== Флаги Font Awesome ==== +
- +
-^ Флаг           ^ Значение        ^ Описание ^ +
-| ''lg''          | - | Увеличение размера иконки на 33% | +
-| ''2x|3x|4x|5x'' | - | Увеличить размер значка | +
-| ''border''      | - | Добавить границу к значку | +
-| ''spin''        | - | Добавить анимацию вращения | +
-| ''pulse''       | - | Добавить анимацию пульса | +
-| ''rotate''      | ''90|180|270'' | Повернуть значок | +
-| ''flip''        | ''horizontal|vertical'' | Перевернуть значок | +
-| ''pull-left''   | - | Потяните значок влево | +
-| ''pull-right''  | - | Потяните значок вправо | +
- +
-===== Демо ===== +
- +
-Демонстрация и примеры доступны по адресу [[http://www.lotar.altervista.org/dokuwiki/wiki/plugin/icons]]. +
- +
-===== Часто задаваемые вопросы ===== +
-===Как установить Font Awesome и Glyphicon в портативную версию Dokuwiki?=== +
-Первый шаг, скачайте пакет Font Awesome и создайте в вашей установке DokuWiki каталог (например, ''assets/font-awesome'') и поместите все файлы. Следующий шаг в **Configuration Manager**, установите ''loadFontAwesome'' и введите ''url'' вашего локального пакета font awesome в ''fontAwesomeURL'' (например, ''/dokuwiki/assets/font-awesome/css/font-awesome.min.css''). +
-===Не работает ли плагин-помощник?=== +
-Это происходит потому, что скрипт, который использует jQuery в ''/lib/plugins/icons/exe/popup.php'', вызывает jQuery до загрузки jQuery. +
-Весь jQuery встроен с тегом defer, поэтому и возникает эта ошибка. +
- +
-**безопасное решение**: +
- +
-  - сделайте резервную копию popup.php +
-  - скопируйте скрипт, который находится внутри **popup.php** (скрипт для справки находится внизу этого комментария) +
-  - создайте файл **popup_script.js** в том же каталоге и вставьте в него этот скопированный скрипт +
-  - удалите этот скрипт из **popup.php**. +
-  - на место удаленного скрипта вставте скрипт следующего вида **<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>** +
-  - и сохраните. +
-примечание: браузер игнорирует, ''defer'' если ''<script>'' не имеет ''src'' директивы. Вот о чем эта суета. +
-Скрипт для вставки в **popup.php**: +
-<code php> +
-<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>+
 </code> </code>
-перезагрузите страницу, вызовите всплывающее меню, теперь все работает. +==Пример измененной всплывающей подсказки при наведении курсора==  
- +{{:icons:16:address-book-open.png?|Прочитайте статью внимательно}} 
-Скрипт для справки: +{{:wiki:plugin:plugin_myicon_11.jpg?|}} 
-<code php popup_script.js> +<code> 
-jQuery(document).ready(function() { +/*Пример измененния размера иконки*/ 
- +{{:icons:16:address-book-open.png?12|address-book-open.png.}} 
-      var is_bootstrap = (typeof jQuery.fn.modal !== "undefined"); +{{:icons:16:address-book-open.png?24|address-book-open.png.}}
- +
-      var $icon_pack    = jQuery('#icon_pack'), +
-          $icon_name    = jQuery('#icon_name'), +
-          $icon_size    = jQuery('#icon_size'), +
-          $icon_align   = jQuery('#icon_align'), +
-          $output       = jQuery('#output'), +
-          $preview      = jQuery('#preview'); +
- +
-      if (! is_bootstrap) { +
-        jQuery('.tab-pane').hide(); +
-      } +
- +
-      jQuery('button[data-icon-size]').on('click', function() { +
- +
-        jQuery('button[data-icon-size]').removeClass('active'); +
-        jQuery(this).addClass('active'); +
- +
-        $icon_size.val(jQuery(this).data('icon-size')); +
-        jQuery(document).trigger('popup:build'); +
- +
-      }); +
- +
-      jQuery('button[data-icon-align]').on('click', function() { +
- +
-        jQuery('button[data-icon-align]').removeClass('active'); +
-        jQuery(this).addClass('active'); +
- +
-        $icon_align.val(jQuery(this).data('icon-align')); +
-        jQuery(document).trigger('popup:build'); +
- +
-      }); +
- +
-      jQuery('ul.nav a').on('click', function() { +
- +
-        if (! is_bootstrap) { +
-          jQuery('.tab-pane').hide(); +
-          jQuery('ul.nav li.active').removeClass('active'); +
-          jQuery(jQuery(this).attr('href')).show(); +
-          jQuery(this).parent().addClass('active'); +
-        } +
- +
-        $icon_pack.val(jQuery(this).data('pack')); +
-        jQuery('.preview-box').removeClass('hide'); +
- +
-        jQuery(document).trigger('popup:reset'); +
- +
-      }); +
- +
-      jQuery('.btn-icon').on('click', function() { +
-        $icon_name.val(jQuery(this).data('icon-name')); +
-        jQuery(document).trigger('popup:build'); +
-      }); +
- +
-      jQuery(document).on('popup:build', function() { +
- +
-        var icon_pack  = $icon_pack.val(), +
-            icon_size  = $icon_size.val(), +
-            icon_align = $icon_align.val(), +
-            icon_name  = $icon_name.val(); +
- +
-        if (! icon_name) { +
-          return false; +
-        } +
- +
-        var syntax = [ '{{' ]; +
- +
-        syntax.push(icon_pack); +
-        syntax.push('>' + icon_name); +
- +
-        var icon_size_pixel = 0; +
- +
-        switch (icon_size) { +
-          case 'small': +
-            icon_size_pixel = 24; +
-            break; +
-          case 'medium': +
-            icon_size_pixel = 32; +
-            break; +
-          case 'large': +
-            icon_size_pixel = 48; +
-            break; +
-        } +
- +
-        if (icon_size_pixel) { +
-          syntax.push('?' + icon_size_pixel); +
-        } +
- +
-        if (icon_align) { +
-          syntax.push('&align=' + icon_align); +
-        } +
- +
-        syntax.push('}}'); +
- +
-        $output.val(syntax.join('')); +
-        $preview.text(syntax.join('')); +
- +
-      }); +
- +
-      jQuery('#btn-reset').on('click', function() { +
-        jQuery(document).trigger('popup:reset'); +
-      }); +
- +
-      jQuery(document).on('popup:reset', function() { +
-        jQuery('form').each(function(){ +
-          jQuery(this)[0].reset(); +
-        }); +
-        $output.val(''); +
-        $preview.text(''); +
-      }); +
- +
-      jQuery('#btn-preview, #btn-insert').on('click', function() { +
- +
-        if (jQuery(this).attr('id') === 'btn-insert') { +
-          opener.insertAtCarret('wiki__text', $output.val()); +
-          opener.focus(); +
-        } +
- +
-      }); +
- +
-    });+
 </code> </code>
 +==Пример измененния размера иконки== 
 +{{:icons:16:address-book-open.png?24|address-book-open.png.}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do {{:icons:16:address-book-open.png?12|address-book-open.png.}} eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 +<code>
 +/*Пример добавления иконки ко внутренней ссылки*/
 +Посмотрите {{:icons:16:address-book-open.png?|просмотреть плагин блог}}[[wiki:plugin:blog|перейти на странице плагина]]
 +</code>
 +==Пример добавления иконки ко внутренней ссылки== 
 +Посмотрите {{:icons:16:address-book-open.png?|просмотреть плагин блог}}[[wiki:plugin:blog|перейти на странице плагина]]
 +<code>
 +/*Пример иконки - внешней ссылки*/
 +[[http://example.com|{{:icons:16:address-book-open.png?|http://example.com}}]]
 +</code>
 +==Пример иконки - внешней ссылки==
 +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do [[http://example.com|{{:icons:16:address-book-open.png?|http://example.com}}]] eiusmod tempor incididunt ut labore et dolore magna aliqua.
 +{{:wiki:plugin:plugin_myicon_12.jpg?|}}
  
-[[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/26#issuecomment-1475016611|Ссылка на решение проблеммы на форуме wiki]] 
  
-===Альтернативный способ=== 
-  * {{ :wiki:plugin:popup.zip |загрузить измененный popup.php и файл popup_script.js}} 
-  * распакуйте в папку ''/lib/plugins/icons/exe/'' с заменой файлов. 
-===Настройка и поддержка Fontawesome 6.71=== 
-[[https://github.com/jasonwch|jasonwch]] модифицировал этот плагин для поддержки последнего набора иконок Fontawesome 6.71. 
  
-P.S. Этот ZIP-архив содержит ТОЛЬКО измененные/добавленные файлы. ОБЯЗАТЕЛЬНО установите оригинальный плагин, а затем замените/добавьте эти файлы. +=====Конфигурация и настройки=====
-{{ :wiki:plugin:dw_icons_fa6.zip |dw_icons_fa6.zip}}+
  
-Что изменено в модифицированной версии: 
  
-  * заменен набор иконок на Fontawesome 6.71. Поскольку 6.71 отделил иконки брендов, для таких иконок есть дополнительная вкладка/префикс 
-  *  
-  * (должно быть) совместимым с уже добавленными значками FA из предыдущей версии, поэтому старые страницы не нужно обновлять вручную 
-  *  
-  * добавить дополнительную вкладку руководства во всплывающем окне для более удобного использования тегов 
-  *  
-  * В сочетании с исправлением js defer, оригинальный скрипт расширения должен отключить defer JS со страницы конфигурации для работы. Из [[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/26|issue#26]], "inbsp" предоставил исправление для разделения JS, чтобы исправить эту ошибку. Однако, когда всплывающее окно появляется, вам все равно нужно переключить страницу один раз, чтобы отобразить значки. 
  
-Техническое примечание: 
- 
-  - Я использовал Node.js для извлечения нового имени значка в виде списка для замены оригинального list-font-awesome.php ( https://github.com/mackilroy007/font-awesome-v6 ) 
- 
-  - добавлены строки комментариев в измененных файлах, чтобы вам было легче проверить, какая строка была изменена. 
-[[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/32|Ссылка на оригинальный текст]] 
-{{ :wiki:plugin:icons_plugens_new.rar |}} 
 =====Обновление===== =====Обновление=====
-Для обновления удалите исходную папку lib/plugins/icons и установите новую версию, как указано выше.+Для обновления удалите исходную папку lib/plugins/myicons и установите новую версию, как указано выше.
 =====Файл для загрузки===== =====Файл для загрузки=====
-  * {{ :wiki:plugin:giterlizzi-dokuwiki-plugin-icons-9809e06.zip |Плагин иконок icons}} +  * {{ :wiki:plugin:myicon.zip |Плагин иконок myicon}} 
-FortAwesome/Шрифт-Awesome Выпуск 6.7.2 +
-  * {{ :wiki:plugin:fontawesome-free-6.7.2-desktop.zip |Fontawesome-free-6.7.2-desktop.zip}} +
-  * {{ :wiki:plugin:fontawesome-free-6.7.2-web.zip |Fontawesome-free-6.7.2-web.zip}} +
-  * {{ :wiki:plugin:font-awesome-6.7.2.zip |Исходный код (zip)}} +
-  * {{ :wiki:plugin:font-awesome-6.7.2.tar.gz |Исходный код (tar.gz)}} +
-  * https://github.com/FortAwesome/Font-Awesome/releases/tag/6.7.2+
 =====Лицензия===== =====Лицензия=====
-  * **Author:** [[giuseppe.diterlizzi@gmail.com|Giuseppe Di Terlizzi]]+  * **Author:** [[PolskiyVN@gmail.com|VladPolskiy]]
   * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]]   * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]]
  
  
  
wiki/plugin/myicon.1736682847.txt.gz · Последнее изменение: 2025/01/12 14:54 — vladpolskiy