Вы когда-нибудь хотели, чтобы все ваши профили и ссылки были хорошо организованы, легко находились и настраивались?

Что ж, теперь это возможно!

Представляем ссылки

Представьте все ваши ссылки стильно с помощью легкодоступного и очень настраиваемого веб-приложения! ✨

Вдохновение

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

Получение ссылок

Чтобы получить ссылки, выполните следующие действия:

git clone https://github.com/2kabhishek/links
cd links

Настройка собственных ссылок

Вы можете легко настроить ссылки для отображения собственных профилей.

• Форк репозитория
• Клонируйте его
• Откройте script.js и измените переменную username на ваше имя пользователя в интернете.
• Отредактируйте JSON-массив links в script.js, добавьте/удалите элементы ссылок по мере необходимости.
• Откройте index.html и обновите тег title, чтобы он стал вашим именем пользователя.
• Вы также можете обновить фавикон, обновите тег link в index.html.
• Внесите изменения
• Перейдите в настройки репозитория на GitHub и включите GitHub Pages.

Сайт должен быть размещен на https://<your-username>.github.io/links.

Схема JSON

Каждая ссылка имеет следующие свойства:

• name: Название ссылки
• description: Краткое описание ссылки
• url: URL, который будет открываться при нажатии на ссылку
• icon: Иконка ссылки, используемый шрифт awesome classes
• color: Цвет иконки ссылки, используется шестнадцатеричный код.

Переопределение логики URL

Если ваше имя пользователя отличается на разных сайтах, или вы хотите добавить пользовательский URL в качестве ссылки, просто добавьте весь URL в поле url.
Присутствие http в строке URL отменит логику построения URL и представит вашу ссылку как есть.

Порядок ссылок

Порядок отображения ссылок будет соответствовать порядку в массиве links в scrip.js.

Темы

Поставляется со светлой и темной темой, меняется в зависимости от настроек системы.

Фирменные иконки

Этот проект использует Font Awesome Brand для добавления иконок, если иконка, которую вы ищете, недоступна, попробуйте использовать полную версию Font Awesome.

Случаи использования

Хотя первоначальная цель ссылок — создание веб-приложения для ваших профилей, они также могут быть использованы в некоторых других сценариях.

• Замена портфолио: Добавив лишь немного информации о себе в index.htnl, вы можете превратить ссылки в полноценное портфолио.
• Замена Link.tree: В сочетании с базовым отслеживанием и метриками, ссылки могут быть легко использованы в качестве альтернативы link.tree.
• Пользовательская домашняя страница: Вы можете создать собственную домашнюю страницу с вашими любимыми ссылками, просто добавьте полный URL страницы в links в script.js и установите ссылку на ваш живой сайт в качестве домашней страницы браузера.
• Совместное использование ресурсов: Ссылки с переопределенными URL можно легко использовать для обмена ресурсами после выступлений и презентаций.

Просмотр ссылок

Откройте index.html в вашем любимом браузере или посетите 2kabhishek.github.io/links.

Как он был создан

Ссылки были созданы с использованием HTML CSS & JavaScript.
Он был построен на neovim и ноде live-server.
Использует шрифт awesome для иконок.

Чему я научился

• Узнал новые примеры использования JSON-массивов.

Что дальше

Расскажите мне!

Нажмите кнопку ⭐, если вы нашли это полезным.

ссылки

Представьте ваши ссылки в стиле 🔗🔮
скриншот ссылки

Вы когда-нибудь хотели, чтобы все ваши профили и ссылки были красиво организованы, легко находились и настраивались?

Что ж, теперь это возможно!

Представляем ссылки

Вдохновение

Мне нужно было место для отображения всех моих профилей, в качестве вдохновения я использовал репозиторий моего проекта.

Получение ссылок

Чтобы получить ссылки, выполните следующие действия:

git clone https://github.com/2kabhishek/links
cd links

Настройка собственных ссылок

Вы можете легко настроить ссылки для отображения собственных профилей.

• Форк репозитория
• Клонируйте его
• Откройте script.js и измените переменную username на ваше имя пользователя в интернете.
• Отредактируйте JSON-массив links в script.js, добавьте/удалите элементы ссылок по мере необходимости.
• Откройте index.html и обновите тег title, чтобы он стал вашим именем пользователя.
• Вы также можете обновить фавикон, обновить…

Для демонстрации всех ваших проектов на GitHub см:

I Made a Web App to Showcase all your GitHub Projects 😍✨.

Abhishek Keshri ・ Jul 30 ・ 2 min read

#javascript #webdev #showdev #github