Примите кошку для VSCode и веб-сайта

внешний интерфейс JavaScript
Примите кошку для VSCode и веб-сайта

Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】.

предисловие

Техническое эссе месяца, Код"сосущие кошки", я давно об этом думал, но особо хорошей идеи не придумал, либо идея слишком большая и технического уровня не хватает для реализации. Так что я начал просматривать идеи больших парней, надеясь найти какое-то направление.

позавчеракрасивая старая обезьянаиспользоватьlive2dразработалchromeПлагин Lumao также добавил функцию чата Meow. Давно смотрю блог здоровяка.Во-первых, мне понравилось творчество здоровяка, а во-вторых, техника здоровяка, она слишком сильная.

Вечером перед сном я подумал, просто иметь кота в браузере недостаточно, если я могу дать свой сайт иVscodeРедакция добавила котов, так что коты везде, а счастье удваивается.

Он пошел дальше и проверить внешний вид на Восточный Запад, наконец, успешно достигнутый вVscodeИ добавляйте котиков на сайт, и делитесь ими здесь со всеми.Давайте радоваться котикам, и счастье удвоится.

Во-первых, давайте посмотрим на эффект:

vscodecat.gif

Добавить кошку в VSCode

оvscode-live2dПлагин:
Сначала я обнаружил, что его упаковывал крупный парень.vscode-live2dплагин, который можно реализоватьКотЭффект, но после моего теста, он был неудачным, и удаление после установки будет немного сложным.Рекомендуется тщательно попробовать.

vscode-live2dдостигается за счет модификацииVscodeизJavaScriptдокумент. Итак, я следовал этой мысли, следовал лозе и, наконец, нашел решение.

Найдите каталог установки vscode

vsinstall.png

Найдите файл workbench.html по следующему пути.

дорожка

resources\app\out\vs\code\electron-browser\workbench

workbench.png

Сохраните файл workbench.html

Если однажды вам надоест коты, вы можете скопировать их обратно и восстановить оригинал.Vscode.

Отредактируйте файл workbench.html.

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;"
    />
  </head>
  <style type="text/css">
    #live2dcanvas {
      border: 0 !important;
    }
  </style>
  <body aria-label="">
    <div id="live2d-widget">
      <canvas
        id="live2dcanvas"
        width="100"
        height="200"
        style="
          position: fixed;
          width: 100px;
          height: 200;
          opacity: 0.8;
          right: 0px;
          bottom: -20px;
          z-index: 99999;
          pointer-events: none;
          border: 0;
        "
      ></canvas>
    </div>
  </body>

  <!-- Init Bootstrap Helpers -->
  <script src="../../../../bootstrap.js"></script>
  <script src="../../../../vs/loader.js"></script>
  <script src="../../../../bootstrap-window.js"></script>

  <!-- Startup via workbench.js -->
  <script src="workbench.js"></script>
  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"
  ></script>
  <script type="text/javascript">
    L2Dwidget.init({
      model: {
        jsonPath:
          "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
      },
      display: {
        superSample: 2,
        width: 100,
        height: 200,
        position: "right",
        hOffset: 0,
        vOffset: 0,
      },
    });
  </script>
</html>

Замените исходный код непосредственно приведенным выше кодом.

Перезапустите VScode

перезагружатьVscode, черный кот появится в правом нижнем углу экрана.В свободное время вы можете дразнить черного котаhijiki.

замена кота

live2dДве кошки предоставляются бесплатно.Люди нерешительны.Если в один прекрасный день черная кошка устанет от дразнилок и захочет белую кошку,что делать?

Это просто, просто заменитеjsonPathСредней части пути достаточно, код черного котаhijiki, код Бай Мяо Миtororo, введите путь вhijikiзаменить все наtororo

https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.json

Смотри, здесь нет Бай Мяо Ми?

whitecat.gif

Скажи всем по секрету,live2dЭто не просто мяу, здесь много милых маленьких изменений и красивых младших братьев, соответствующий код модели можно посмотреть по ссылке:библиотека шаблонов live2d

лекарство сожаления

Если однажды я скажу, если (Он горит, LPL, давай!), надоели коты, надоели красотки и красотки, хочется уюта и чистотыVscode, очень просто, просто скопируйте копиюworkbench.htmlисправление, перезапускVscode, вы можете успешно изменить его.

Устранение предупреждений Vscode

Поскольку вышеприведенный метод реализации напрямую измененVscodeизJavaScriptфайл, перезапуститьVscodeможет быть позжеcodeпредупреждение об ошибке файла, исправим ситуацию:

  1. открыть командную строку, установитьFix VSCode Checksums, Введите команду:
code --install-extension lehni.vscode-fix-checksums
  1. ОткрытьVscode,горячая клавишаCtrl + Shift + Pвведите команду:
Fix Checksums:Apply

Конфигурация L2Dвиджета

Если вас не устраивает размер или положение кошки, или если вы хотите поговорить с кошкой, вы можете отрегулировать ее.L2Dwidget.init,L2Dwidget.initЕсть богатые конфигурации, чтобы вы могли комфортно играть в кошек. Ниже я кратко опишу четыре свойства:

  • model: уточнитьmodel.jsonРасположение, если вы не любите кошек, вы также можетебиблиотека шаблонов live2dНайдите код своей любимой модели в разделе, вы также можете загрузить его локально, изменитьmodelпараметры пути иdisplayпоказать параметры
  • display: контрольlive2dГде модель отображается на странице
  • mobile: управлять отображением на мобильном терминале
  • react: управляет прозрачностью экрана

Для более подробной настройки вы можете запроситьОфициальная документация L2Dwidget

Добавить кота на сайт

Добавить кота на обычный сайт

напрямуюworkbench.htmlСодержимое внутри может быть перемещено на веб-страницу. Следующее является движущейся частью:

<div id="live2d-widget">
  <canvas
    id="live2dcanvas"
    width="100"
    height="200"
    style="
      position: fixed;
      width: 100px;
      height: 200;
      opacity: 0.8;
      right: 0px;
      bottom: -20px;
      z-index: 99999;
      pointer-events: none;
      border: 0;
    "
  ></canvas>
</div>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"
></script>
<script type="text/javascript">
  L2Dwidget.init({
    model: {
      jsonPath:
        "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json", // 黑喵咪
    },
    display: {
      superSample: 2,
      width: 100,
      height: 200,
      position: "right",
      hOffset: 0,
      vOffset: 0,
    },
  });
</script>

Добавить кота в проект vue

  1. Скачать материал

Ссылка на материал:библиотека материалов live2d

  1. Будуlive2dфайл вpublicПод содержанием

live2dнет нуждыwebpackскомпилировать, чтобы его можно было поместить непосредственно вpublicВниз

  1. index.htmlпредставлятьL2Dwidget.js 
<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>
  1. app.vueДобавьте следующий код (вmountedдобавлено)
export default {
  mounted() {
    setTimeout(() => {
      const config = {
        pluginRootPath: 'live2dw/',
        pluginJsPath: 'lib/',
        pluginModelPath: 'live2d-widget-model-hijiki/assets/',
        tagMode: false,
        debug: false,
        model: {
          jsonPath:
              '../live2dw/live2d-widget-model-hijiki/assets/hijiki.model.json',
        },
        display: { position: 'right', width: 100, height: 200 },
        mobile: { show: true },
        log: false,
        dev: {
            border: false, //canvas周围是否显示边界
        },
      };
      window.L2Dwidget.init(config);
    });
  },
};

vuecat.gif

Блог Hexo добавляет кошек

Ссылка на детали:Добавить злодея Live2d в блог hexo

Суммировать

После долгой упорной работы мне наконец удалось достичь цели.Хотя это может быть немного грубо, А Бао все же очень доволен. Всякий раз, когда вам надоест писать код, вы можете пойти и подразнить Мяо Ми. Это очень весело.

Замечательные статьи в прошлом

послесловие

Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.

Кроме того, если есть какие-либо проблемы с этой статьей или если вы не понимаете часть статьи, вы можете ответить мне в области комментариев, давайте обсудим, изучим и добьемся успеха вместе!

Если вы чувствуете, что область комментариев не понимает, вы также можете добавить мой WeChat или qq для подробного общения, имя - пакет поля боя.

Категории