Различия

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

--- wiki:devel:plugin_development_link [2025/01/09 23:33] – vladpolskiy
+++ wiki:devel:plugin_development_link [2025/02/21 06:53] (текущий) – [Примеры использования] vladpolskiy
@@ Строка 56: / Строка 56: @@
 =====Файл script.js=====
 JavaScript файл с рабочим кодом нашего  плагина (подключения кнопки и вывод описания нашей ссылки в тело редактируемой страницы.
+Поскольку пользовательские и плагинные скрипты загружаться при всех запросах, а панель инструментов инициализируется только при редактировании, нам нужно сначала убедиться, что массив панелей инструментов существует. Проверим это, window.toolbar определен ли он. Если определен, вы можете добавить свою кнопку в конец массива.
+<code js script.js>
+/* JavaScript function to create mylink toolbar in Dokuwiki */
+/* see http://www.dokuwiki.org/plugin:mylink for more info */
+/* Путь к папке с иконками для кнопок панели */
+mylink_icobase = "../../plugins/mylink/images/";
+if(window.toolbar != undefined) {
+  toolbar[toolbar.length] = {
+    "type":"picker",
+    "title":"My links",
+    "icon":mylink_icobase+"toolbar_icon.png",
+    "list":[{
+      "type":"format",
+      "title":"Link to the original article",
+      "icon":mylink_icobase+"blog.png",
+      "open":"[[",
+	  "sample":"http://example.com|Link to the original article",
+      "close":"]]"
+    }, {
+      "type":"format",
+      "title":"See also",
+      "icon":mylink_icobase+"magnifier-medium-left.png",
+      "open":"See also: [[",
+	  "sample":"http://example.com|",
+	  "close":"]]"
+    }
+	]
+  };
+}
+</code>
+<details>
+<summary>«Подробности и пояснения»</summary>
+<code css script.js>
+/* JavaScript function to create mylink toolbar in Dokuwiki */
+/* see http://www.dokuwiki.org/plugin:mylink for more info */
+/* Путь к папке с иконками для кнопок панели */
+mylink_icobase = "../../plugins/mylink/images/";
+if(window.toolbar != undefined) {       // Проверка наличия массива панели инструментов
+  toolbar[toolbar.length] = {           // Кнопка верхнего уровня панели инструментов
+    "type":"picker",                    // тип действия кнопки: picker⇒ меню выбора
+    "title":"My links",                 // название кнопки, отображаемое при наведении курсора
+    "icon":mylink_icobase+"toolbar_icon.png",  //значок, используемый для кнопки
+    "list":[{ //список выпадающего меню кнопок
+      "type":"format", // 1я кнопка в выпадающем окне. тип действия кнопки: format⇒ вики-разметка
+      "title":"Link to the original article", // название кнопки, отображаемое при наведении курсора
+      "icon":mylink_icobase+"blog.png",  //путь к иконке, используемой для кнопки
+      "open":"[[",
+	  "sample":"http://example.com|Link to the original article",
+      "close":"]]"
+    }, {
+      "type":"format", // 2я кнопка в выпадающем окне. тип действия кнопки: format⇒ вики-разметка
+      "title":"See also",   // название кнопки, отображаемое при наведении курсора
+      "icon":mylink_icobase+"magnifier-medium-left.png", //путь к иконке, используемой для кнопки
+      "open":"See also: [[",   //открывающий тег вики-разметки для вставки
+	  "sample":"http://example.com|",
+	  "close":"]]"         //закрывающий тег вики-разметки для вставки
+    }
+	]
+  };
+}
+</code>
+</details>
+<code css>
+в данном случае наш код
+          "open":"See also: [[",   //открывающий тег вики-разметки для вставки
+	  "sample":"http://example.com|",
+	  "close":"]]"             //закрывающий тег вики-разметки для вставки
+представляют собою разрезанный код для вывода:
+See also: [[   http://example.com|    ]]
+</code>
+После редактирования и сохранения с нашим кодом файла script.js, переходим в редактор страниц и видим нашу новую кнопку на панели инструментовЖ
+{{:wiki:devel:devev_plugin_mylink_10.jpg?|}}
+При нажатии на кнопку проверяем открытие выпадающего списка кнопок и работу кода по выводу нашего текста:
+{{:wiki:devel:devev_plugin_mylink_11.jpg?|}}
+Проверяем вторую кнопку:
+{{:wiki:devel:devev_plugin_mylink_12.jpg?|}}
+Мы видим код, который мы разрезали на части в файле script.js
+<code>
+See also: [[http://example.com|]]
+</code>
+Пример вывода на странице нашего кода:
+{{:wiki:devel:devev_plugin_mylink_13.jpg?|}}
+Ниже вы видите, как это отображается на этой странице, что говорит о том, что наш код работаетю
+[[http://example.com|Link to the original article]]\\
+See also: [[http://example.com|]]\\
+Регистрация в программе нашего плагина прошла автоматически,т.к. мы создавали наш проект в папке lib/plugins. При этом мы можем заорхивировать наш проект и установить через менеджер плагинов.\\
+Просмотрим информацию о плагине в менеджере плагинов:
+{{:wiki:devel:devev_plugin_mylink_9.jpg?|}}
+Если мы удалим наш проект из lib/plugins и заархивируем нашу папку в формате .zip, то сможем произвести установку плагина через менеджер управления дополнениями:
+{{:wiki:devel:devev_plugin_mylink_8.jpg?|}}
+=====Перевод плагина на разные языки=====
+Заходим в папку нашего проекта и создадим внутри папку lang
+{{:wiki:devel:devev_plugin_mylink_25.jpg?|}}
+Внутри создадим папки с необходимыми нам языковыми пакетами (в нашем примере это папки: en - англиский и ru - русский)).
+{{:wiki:devel:devev_plugin_mylink_26.jpg?|}}
+В каждой из папок создадим файл перевода lang.php
+{{:wiki:devel:devev_plugin_mylink_27.jpg?|}}
+Примерное содержание файлов lang.php для русского и английского переводов:
+<code html lang.php>
+<?php
+/**
+ * English language file
+ */
+$lang['js']['mylink_picker']  = 'My links';
+$lang['js']['tb_see_also']      = 'See also';
+$lang['js']['tb_link_to_the_original']       = 'Link to the original article';
+</code>
+<code php lang.php>
+<?php
+/**
+ * Russian language file
+ */
+$lang['js']['mylink_picker']  = 'Мои ссылки';
+$lang['js']['tb_see_also']      = 'См. также';
+$lang['js']['tb_link_to_the_original']       = 'Ссылка на оригинальную статью';
+</code>
+{{tablelayout?rowsHeaderSource=Auto}}
+^ Атрибут                                      ^ Значение                           ^
+| $lang['js']['mylink_picker']  = 'My links';  | **mylink_picker** - имя вехней кнопки, **My links** - название (при наведении мыши) на английском и  **Мои ссылки** - название на русском языке. |
+|$lang['js']['tb_see_also']      = 'See also'; |тоже самое для 1й кнопки в раскравающемся списке|
+|$lang['js']['tb_link_to_the_original']       = 'Link to the original article'; |тоже самое для 2й кнопки в раскравающемся списке|
+Вносим правки в наш файл script.js
 <code js script.js>
 /* JavaScript function to create mylink toolbar in Dokuwiki */
@@ Строка 65: / Строка 198: @@
   toolbar[toolbar.length] = {
     "type":"picker",
-    "title":"My links",
+    "title":LANG['plugins']['mylink']['mylink_picker'],
     "icon":mylink_icobase+"toolbar_icon.png",
     "list":[{
       "type":"format",
-      "title":"Link to the original article",
+      "title":LANG['plugins']['mylink']['tb_link_to_the_original'],
       "icon":mylink_icobase+"blog.png",
-      "open":"[[",
+      "open":"[[http://example.com|",
-	  "sample":"http://example.com|Link to the original article",
+	  "sample":LANG['plugins']['mylink']['tb_link_to_the_original'],
       "close":"]]"
-    }, {
+    }, 	{
       "type":"format",
-      "title":"See also",
+      "title":LANG['plugins']['mylink']['tb_see_also'],
       "icon":mylink_icobase+"magnifier-medium-left.png",
-      "open":"See also: [[",
+      "open":LANG['plugins']['mylink']['tb_see_also'],
-	  "sample":"http://example.com|",
+	  "sample":":[[http://example.com|",
 	  "close":"]]"
-    }
+    },
 	]
   };
 }
 </code>
+Переведем Dokuwiki в английский язык и проверим работу нашего плагина при английской локализации:
+{{:wiki:devel:devev_plugin_mylink_12.jpg?|}}
+И то же самое при установленном русском языке в настройках Dokuwiki
+{{:wiki:devel:devev_plugin_mylink_14.jpg?|}}
+Работа кода кнопки См. также и вывод в редакторе текста на русском языке
+{{:wiki:devel:devev_plugin_mylink_16.jpg?|}}
+Пример вывода на страницу
+{{:wiki:devel:devev_plugin_mylink_17.jpg?|}}
+Примеры работы нашего плагина и вывода наших ссылок на этой странице при английской и русской локализациях:
+  * [[http://example.com|Link to the original article]]
+  * See also: [[http://example.com|]]
+  * [[http://example.com|Ссылка на оригинальную статью]]
+  * См. также:[[http://example.com|]]
+=====Примеры использования=====
+Как мы уже знает, переменные
+    * open - открывающий тег вики-разметки для вставки
+    * sample- код php
+    * close - закрывающий тег вики-разметки для вставки
+Соответственно и вставлять мы можем любые шаблоны, например:
+{{:wiki:devel:plugin_link_exsample_1.png?|}}
+[[http://example.com|Ссылка на оригинальную статью]]
+<code php index.php>Вставить код PHP</code>
+<code css style.css>Вставить код CSS</code>
+<code js script.js>Вставить код JS</code>
+=====Дополнения и Файлы=====
-[[http://example.com|Link to the original article]]\\
+  * {{ :wiki:devel:mylink.zip |Архив проекта mylink}}
-See also: [[http://example.com|]]
+  * {{ :wiki:devel:mylink1.zip |Архив проекта mylink (en/ru)}}
+  * {{ :wiki:devel:mylink-master.zip |mylink-master.zip}}