Слияние кода завершено, страница обновится автоматически
Добавьте Live2D виджет на веб-страницу. Поддерживает PJAX и работает без перезагрузки страницы.
Предупреждение: Этот проект не поддерживает устаревшие браузеры, такие как IE OnClickListener.
Вы можете увидеть эффект на блоге Ми в нижнем левом углу страницы. (Примечание: следующие персонажи используются только для демонстрации, и этот репозиторий не содержит никаких моделей.)
Вы также можете использовать этот проект для вторичной разработки в пределах разрешенного использования. Вот несколько примеров:
<head>:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
Если иконки не отображаются корректно, убедитесь, что на странице уже загружен любой из поддерживаемых версий Font Awesome.## Использование Usage
Добавьте следующий код в <head> или <body> для отображения виджета:
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
Если сайт использует PJAX, убедитесь, что скрипт для инициализации виджета находится вне области обновления PJAX. Конкретно, если вы новичок или вам нужна только базовая функциональность, вам нужно добавить эту строку кода вместе с предыдущей строкой, которая загружает Font Awesome, в раздел <head> вашего HTML-файла.
Для страниц, созданных с использованием различных шаблонных движков (например, Nunjucks, Jinja или PHP), вам также потребуется внести соответствующие изменения, методы подобны, хотя это может быть немного сложнее. Например, для Hexo вам потребуется правильно настроить пути в соответствующих EJS или NJK-шаблонах темы, чтобы они могли быть загружены. Однако! Мы настоятельно рекомендуем самостоятельно настроить, иначе многие функции будут неполными и могут возникнуть проблемы!
Если вы хотите самостоятельно настроить, то обратитесь к следующим подробным инструкциям.
<script src="https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"></script>
Замените username на ваше имя пользователя GitHub. Чтобы содержимое CDN обновлялось корректно, необходимо создать новый git tag и отправить его в репозиторий GitHub. В противном случае @latest будет указывать на предыдущую версию файла. Кроме того, CDN имеет кэширование, поэтому изменения могут потребовать некоторое время для применения. Дополнительная документация:
Вы также можете загрузить эти файлы на сервер, а не использовать CDN.
ssh, то клонируйте весь репозиторий на сервер. Выполните:
cd /путь/к/вашему/webroot
# Клонируем репозиторий
git clone https://github.com/stevenjoezhang/live2d-widget.git
ssh (например, стандартный виртуальный хост), выберите Download ZIP, затем загрузите его через ftp и распакуйте в папку сайта.git clone в папке исходных файлов блога (например, source). При повторном развертывании блога, файлы будут автоматически загружены в соответствующие пути. Чтобы избежать неправильной модификации файлов плагинами Hexo, возможно, потребуется настроить skip_render. Таким образом, весь проект будет доступен через ваш IP-адрес сервера или доменное имя из интернета. Попробуйте открыть файлы autoload.js и live2d.min.js через браузер и убедитесь, что их содержимое полное и корректное.Если всё в порядке, следующим шагом будет изменение некоторых настроек (необходимо сделать это через текстовый редактор на сервере; вы также можете выполнить это локально, а затем загрузить на сервер).Измените константу live2d_path в файле autoload.js на URL директории live2d-widget. Например, если вы можете получить доступ к файлу live2d.min.js по адресу
https://example.com/path/to/live2d-widget/live2d.min.js
то установите значение live2d_path следующим образом:
https://example.com/path/to/live2d-widget/
Заключительный слеш / обязательно должен быть добавлен. Подробнее можно посмотреть в комментариях внутри файла autoload.js.После завершения настроек добавьте следующий код в HTML-разметку страницы, где вы хотите добавить персонажа:
<script src="https://example.com/path/to/live2d-widget/autoload.js"></script>
Таким образом, вы сможете загрузить необходимые скрипты.## Задний конец API
Метод initWidget принимает параметры с именами apiPath и cdnPath, один из которых должен быть установлен. Параметр apiPath представляет URL заднего конца API, который можно настроить самостоятельно и добавить модели (необходимо внести множество изменений, что не будет рассматриваться здесь). Параметр cdnPath представляет путь к ресурсам, загружаемым с помощью CDN-сервиса, такого как jsDelivr, что делает его более стабильным.
waifu-tips.js содержит логику кнопок и диалоговых окон;waifu-tips.json определяет условия триггера (селекторы CSS) и текст, отображаемый при триггере (текст);waifu.css — это стили для персонажа.Исходные файлы предназначены для использования с темой Hexo NexT, но для применения к вашему собственному веб-сайту могут потребоваться изменения или добавление нового контента.
**Предупреждение: Автор не несет ответственности за содержимое файлов waifu-tips.js и waifu-tips.json, включая, но не ограничиваясь этим, поэтому убедитесь, что они подходят для вашего использования.**Если у вас есть вопросы, вы можете создать Issue. Если у вас есть предложения по улучшению, вы можете создать Pull Request.
Благодарим BrowserStack за возможность тестирования этого проекта в реальных браузерах.
Спасибо BrowserStack за предоставление инфраструктуры, которая позволяет нам тестировать в реальных браузерах!
Благодарим jsDelivr за предоставление CDN-сервиса.
Спасибо jsDelivr за предоставление публичного CDN-сервиса.
Код был адаптирован из этой статьи:
https://www.fghrsh.net/post/123.html
При нажатии на кнопку-оригами из рук персонажа появляется сюрприз, который был взят из WebsiteAsteroids.
Дополнительную информацию можно найти здесь:
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
https://github.com/xiazeyu/live2d-widget.js
https://github.com/summerscar/live2dDemo
По поводу моделей заднего конца API:
https://github.com/fghrsh/live2d_api
https://github.com/xiazeyu/live2d-widget-models
https://github.com/xiaoski/live2d_models_collection
Кроме того, есть версия для рабочего стола: https://github.com/amorist/platelet https://github.com/akiroz/Live2D-Widget https://github.com/zenghongtu/PPet https://github.com/LikeNeko/L2dPetForMac
Размещено под лицензией GNU General Public License v3 http://www.gnu.org/licenses/gpl-3.0.htmlВсе модели Live2D, изображения и данные о движении, содержащиеся в этом репозитории, принадлежат их авторам. Используются только для исследований и обучения, коммерческое использование запрещено.Официальный сайт Live2D: https://www.live2d.com/en/ https://live2d.github.io
Live2D Cubism Core предоставляется под лицензией Live2D Proprietary Software License. https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html Live2D Cubism Components предоставляются под лицензией Live2D Open Software License. http://www.live2d.com/eula/live2d-open-software-license-agreement_en.html
Условия и положения не допускают модификацию, но затуманивание в
live2d.min.jsне будет считаться незаконной модификацией.
https://community.live2d.com/discussion/140/webgl-developer-licence-and-javascript-question
31 октября 2018 года исходный API, предоставленный fghrsh, был отключен. Пожалуйста, обновитесь до нового адреса. См. статью: https://www.fghrsh.net/post/170.html
С 1 января 2020 года этот проект больше не зависит от jQuery.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )