nxt lnk Скачать - nxt lnk Скачать исходный код

nxt lnk

AI Исходный код

1.0.0

Скачать

Nxt lnk

Пользовательские биологические ссылки для креативщиков, которые любят кодирование. Сделал это первым, чтобы использовать для моих собственных Weblinks vjy.me/lnk

Идеальная пользовательская альтернатива для Linktree, Bio и другой платформы Shortner. Проверьте живую версию здесь nxtlnk.xyz

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

Кофейное топливо кодирование ☕

Оглавление

Использование
Быстрый старт
Ручная установка
Начиная
Изображения
Обновление био
- Добавить/обновить
- Включить/отключить
- Показанный баннер
Обновить ссылки
- Включить/отключить
- Добавить/обновить
Внешний интерфейс
Сео
Google Analytics
Пользовательский домен
Фавикон
Участники

Использование

Шаблон nxt-lnk используемый для создания вашей пользовательской биологической ссылки и самостоятельного управления на Vercel или NetLify с использованием собственного домена. Нужно мало понимания кода :) ☕

Обычно вам не нужно много беспокоиться о кодировании, если вы просто обновляете информацию в BioData.js и LinkData.js . Чтобы глубоко погрузиться, узнать больше о следующем.js и отреагировать официальный документ.

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

Шаблон автоматически поддерживает темный режим в зависимости от системы системы.

Быстрый старт

Ручная установка

Запустите следующую команду, чтобы создать новый проект с этим шаблоном:

yarn create next-app your-app-name -e https://github.com/realvjy/nxt-lnk
# or
npx create-next-app your-app-name -e https://github.com/realvjy/nxt-lnk

Начиная

Используйте любой редактор для работы над редактированием. Я использую VSCODE

Во -первых, запустите сервер разработки:

npm run dev
# or
yarn dev

Откройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат.

Важные файлы для редактирования или обновления информации data/BioData.js Все базовые информационные обновления здесь data/LinksData.js содержат все Components/WebLinks.js UI и Components/icons/index.js содержит все значки SVG

Вы можете начать редактировать страницу путем изменения data/BioData.js и data/LinksData.js . Страница автоматически обновится при редактировании файла.

Изображения

Все изображения, хранящиеся в public папке проекта.

Обновление био

Пример от BioData.js :

 const bioData = [
    {
        name : 'vijay verma' ,
        username : '@realvjy' ,
        url : 'https://vjy.me' ,
        titleImg : true ,
        avatar : '/avatar.png' ,
        nftAvatar : true ,
        description : 'A short description/bio about you goes here' ,
        subdesc : 'This is secondary description. If you do not need, you can remove it' ,
        newProductUrl : 'https://vjy.me/lnk' ,
        newProduct : true ,
    } ,
] ;

export default bioData ;

Avatar просто замените avatar.png . 200x200px будет хорошим.

HEX/NFT AVATAR VIEW nftAvatar: true Включите шестнадцатеричную форму на Avatar Image. nftAvatar: false сделал это в овальной форме.

Название по умолчанию titleImg: true , и он ищет title.svg . Замените SVG на логотип логотипа . Обязательно используйте название title.svg .

Показанный Banner newProductUrl и newProduct используемый для получения баннера. Вы можете заменить изображение newproduct.png на любой дизайн, который вам нравится.

newProduct: true Show Banner. По умолчанию true , сделайте ложным, чтобы скрыть.

Обновить ссылки

Пример из LinksData.js :

 const webLinks = [
    // All social profile
    {
        title : 'Twitter' ,
        url : 'https://twitter.com/realvjy' ,
        type : 'social' ,
        icon : '/twitter.svg' ,
        on : true
    } ,
    ...
    ...
    
    {
        title : 'Instagram' ,
        url : 'https://instagram.com/realvjy' ,
        type : 'social' ,
        icon : '/insta.svg' ,
        on : true
    }
] ;
export default webLinks ;

Включить/отключить социальные сети Найти type: social и изменения on:true|false

Заголовок	на (по умолчанию)
`Twitter`	`true`
`Instagram`	`true`
`Dribbble`	`false`
`Medium`	`false`
`Github`	`true`
`Youtube`	`false`
`Behance`	`true`
`Figma`	`true`
`Linkedin`	`false`
`Mastodon`	`false`
`Hive Social`	`false`
`Post.news`	`false`

Настройка on: true Покажите социальную икону. Значки в социальных сетях расположены в одной строке в верхней части страницы ниже описания. Если вы хотите использовать в качестве списка, тип type: 'other'

Добавить новую ссылку на социальные сети Создайте новый блок, копировав это

    {
        title : 'Social Name' ,
        url : 'https://link.com/whateverurl' ,
        type : 'social' ,
        icon : '/newiconname.svg' ,
        on : true
    }

Обновите всю информацию и обязательно добавьте файл newiconname.svg в публичную папку. Тогда вы должны добавить новый раздел в components/WebLinks.js

Внешний интерфейс

Вся настройка фронта, выполненная внутри components/WebLinks.js . Если вы хотите обновить и добавить новый раздел, просто посмотрите этот файл и обновите в соответствии с вашими потребностями.

Раздел обновления

Ищите коды разделов. Например, если вы хотите изменить тип install , чтобы featured обновление type: 'featured' в LinkData.js , затем обновите весь код, связанный с install в WebLinks.js , чтобы featured

 // Collect all links filter by type - social, project, nft and other etc=
// get data for install section
const install = allLinks . filter ( ( el ) => {
  return el . type === "install" && el . on
} ) ;

...
...

{ /* Featured Section */ }
< LinkSection >
  < h3 > { install [ 0 ] . type } </ h3 >
  {
    install . map ( ( i ) => {
      return (
        < Link href = { i . url } passHref key = { i . title } >
          < LinkBox >
            < LinkTitle > < img src = { i . icon } style = { { filter : 'var(--img)' } } /> { i . title } </ LinkTitle > < NewUp />
          </ LinkBox >
        </ Link >
      )
    } )
  }
</ LinkSection >
{ /* End Featured Section */ }

Добавить новый раздел

Добавьте новый раздел с конкретным type в Linkdata.js . Затем скопируйте код LinkSection для создания нового раздела в файле WebLinks.js . Обязательно создайте данные этого раздела.

Сео

Уже добавлено next-seo . Все, что вам нужно сделать, это update next-seo.config.js . Обязательно добавьте прямую ссылку файла preview.jpg , например - https://vjy.me/preview.jpg .

Google Analytics

В Vercel вы можете установить это, перейдя в свой проект, затем настройки и, наконец, переменные среды. Чтобы получить GA 4 Code G-ZXX0000XXX

Пользовательский домен

По умолчанию Vercel дайте вам поддомен с именем проекта, как - nxtlnk.vercel.app. Но вы можете добавить собственный домен.

Vercel/NetLify Дайте вам возможность добавить любой домен в развернутый проект, такой как vjy.me/lnk или nxtlnk.xyz. Все, что вам нужно сделать, это следить за официальным документом Vercel или NetLify DocumentAion