С тех пор как моя местная библиотека предоставила доступ к курсам Treehouse бесплатно, я ухватилась за это и не отпускаю. Мне нравится структура курсов, а значок, который вы получаете по окончании курсов, — это осязаемое доказательство того, что мне интересно учиться.
Недостатком системы значков Treehouse является то, что нет четкого способа отобразить достижения на веб-сайте, отличном от WordPress. После некоторого времени поисков способа их отображения я наткнулся на Treehouse Widget Райли Хиллиард. Мне понравился сотовый эффект значков и то, как он разбил код, чтобы вы могли настроить его по своему усмотрению (ура, комментарии!).
Недостатком этого виджета является невозможность вставить его на свой сайт. Я следовал инструкциям с Табелем, но они не сработали, а я не фанат виджета Табел.
Потребовалось несколько дней и несколько изменений в коде, но я, наконец, разобрался. С некоторыми изменениями, чтобы сделать его лучше для мобильных устройств, вы можете быстро получить свой собственный виджет значка Treehouse.
Разветвите исходный виджет Treehouse на CodePen.
ПРИМЕЧАНИЕ. Я пытался скопировать и вставить в новый Pen, но это не сработало.
Прочитайте код на панелях HTML, CSS и JS. Вам нужно заменить имя пользователя на то, которое связано с вашей учетной записью Treehouse.
Экспортируйте проект CodePen или скопируйте и вставьте прямо из проекта. Если вы решите сделать это, вам нужно будет создать новый файл .js.
Перенесите файл .js в папку JS вашего проекта.
В HTML создайте новый элемент div .container для хранения кода нового виджета. Вставьте код виджета в этот div.
Для моего кода я назвал div .row, потому что я работал в Bootstrap и мне все равно нужно было добавить .row.
Скопируйте и вставьте код CSS в основной файл CSS.
Добавьте ссылку на JS-скрипт в конец HTML-кода прямо перед закрытием тега ‹body›.
На этом этапе JS-файл должен быть связан.
Я попытался добавить JS-скрипт в ‹head› и перед всеми остальными JS-скриптами. Это не сработало. Поскольку мои знания JavaScript все еще ограничены, я помещаю этот шаг здесь на случай, если с этим столкнется другой новичок.
Все, что осталось, — это изменить CSS, чтобы убедиться, что код отображается с интервалом для мобильных устройств. При изменении CSS я обнаружил, что мобильный размер не такой однородный, как у настольной версии.
Я немного изменился и обнаружил, что мне это все еще не нравится. Я вставил исходный код обратно и решил, что он выглядит шатко из-за количества значков, которые у меня есть. Я попробую еще раз, когда у меня будет больше.
Я хочу поблагодарить Райли Хиллиард за создание виджета Treehouse в первую очередь.
