предисловие
Вчера я потратил некоторое время, чтобы украсить мою домашнюю страницу GitHub и домашнюю страницу личного веб-сайта. В этой статье я расскажу вам о своем процессе реализации. Заинтересованные разработчики могут прочитать эту статью.
онлайн опыт
Во-первых, я покажу вам эффект, которого я наконец добился, и адрес онлайн-опыта:Домашняя страница персонального сайта,домашняя страница гитхаба.
Схема эффекта выглядит следующим образом:
Процесс реализации
Далее давайте взглянем на конкретный процесс реализации (для удобства демонстрация подчиненного процесса использует мою трубу)
Создать репозиторий
Сначала войдите в свойGitHubучетная запись:
-
После входа в систему создайте один и тот же склад под своим именем пользователя, как показано ниже.
-
Заполните вводную информацию о складе, установите общедоступное разрешение и добавьте файл README.md.
-
последний клик
Create repositoryкнопку для завершения создания склада.
Улучшение интерфейса
После того, как мы создали репозиторий, переходим на нашу личную домашнюю страницу, а именно: github.com/ваше имя пользователя.
Страница, которую мы видим, выглядит следующим образом: часть, обведенная красным, — это склад, который мы только что создали.README.mdСодержимое в файле.
При создании репозитория он по умолчанию добавляется в файл README.md: Привет 👋.
Поэтому нам нужно только изменить содержимое файла README.md в только что созданном репозитории, и содержимое нашей домашней страницы будет соответствующим образом обновлено.
-
Синтаксис html поддерживается в файле md, поэтому мы можем оформить страницу в соответствии с нашими собственными идеями.
-
Учитывая, что есть много читателей и программистов, вдохновение для дизайна небогато.В сообществе есть склад с открытым исходным кодом, который организовал несколько красивых дизайнов домашней страницы md.Вы можете обратиться к этому содержимому.
CVЗаходите сюда, модификация своя, адрес склада:awesome-github-profile-readme. -
Карточка дисплея проекта используется в дизайне моей домашней страницы. Она также предоставляется складом с открытым исходным кодом. Адрес склада:github-readme-stats.
-
Дизайн моей домашней страницы также включает эффект сжатия контента, вот HTML5.
<details><summary><summary/></details>Этикетка. -
Поклонники сообщества показывают модуль, эффект, которого я хочу добиться здесь, требует написания некоторых стилей css, но GitHub не поддерживает это, поэтому здесь размещена только одна картинка.
Извлеките улучшенный интерфейс
После того, как я закончил украшать свою домашнюю страницу GitHub, я также хочу переместить эти эффекты на домашнюю страницу моего личного веб-сайта. Сначала я подумал, что было бы хорошо найти инструмент для преобразования разметки в html, поэтому я попробовал несколько онлайн-конверсий, но результаты были не идеальными.
Я посмотрел на приукрашенную всю домашнюю страницу GitHub, и чем больше я смотрел на нее, тем удобнее становилось.Когда у меня появилась идея, я сразу снял всю домашнюю страницу и изменил ее, чтобы получить то, что мне было нужно идеально🤓.
Итак, как насчет этого сайта на гриле вниз, я думаю, что каждый должен иметь свой собственный набор методов, здесь я сказал, что мой подход:
- Щелкните правой кнопкой мыши ---> Просмотр исходного кода веб-страницы
- Скопируйте исходный код в редактор
- Загрузите все внешние ссылки в коде и поместите их в папку проекта.
- Замените внешнюю ссылку введением папки проекта
- Поскольку скопированные вещи представляют собой файлы html, стили CSS могут быть записаны, и список фанатов может отображаться идеально.
Наконец, давайте взглянем на интерфейс домашней страницы моего личного сайта (ПК и мобильный):
кодовый адрес
напиши в конце
- Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
- Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌