nxt lnk

Nxt lnk

Enlaces biológicos personalizados para creativos que aman la codificación. Hice esto primero para usar para mis propios WEBLINKS VJY.ME/LNK

Una alternativa personalizada perfecta para Linktree, Bio y otra plataforma Shortner. Consulte la versión en vivo aquí nxtlnk.xyz

Las solicitudes de extracción siempre son bienvenidas. En caso de que desee inspiración o nuevas funciones sobre qué agregar, consulte los problemas para las solicitudes de funciones.

Codificación de combustibles de café ☕️

Tabla de contenido

• Uso
• Comienzo rápido
• Configuración manual
• Empezando
• Imágenes
• Actualizar bio
  • Agregar/Actualizar
  • Habilitar/deshabilitar
  • Banner destacado
• Actualizar enlaces
  • Habilitar/deshabilitar
  • Agregar/Actualizar
• Interfaz
• SEO
• Análisis de Google
• Dominio personalizado
• Favicón
• Colaboradores

Uso

La plantilla de nxt-lnk utilizada para crear su enlace bio personalizado y su auto-anfitrión en Vercely o Netlify usando su propio dominio. Necesito poca comprensión del código :) ☕

Por lo general, no necesita preocuparse mucho por la codificación si solo está actualizando información en BioData.js y LinkData.js . Para dar una inmersión profunda más siguiente. JS y reaccionar documentos oficiales.

Para la personalización utilizada componentes de estilo. Si desea personalizar el estilo, puede aprender más aquí.

Plantilla Auto Soporte Dark-Mode dependiendo del cofig del sistema.

Comienzo rápido

Configuración manual

Ejecute el siguiente comando para crear un nuevo proyecto con esta plantilla:

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

Empezando

Use cualquier editor para trabajar en la edición. Yo uso VScode

Primero, ejecute el servidor de desarrollo:

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 con su navegador para ver el resultado.

Archivos importantes para editar o actualizar información data/BioData.js Toda la actualización de información básica aquí data/LinksData.js Contiene todos los Components/WebLinks.js UI y Components/icons/index.js contienen todos los SVG icon compo

Puede comenzar a editar la página modificando data/BioData.js y data/LinksData.js . La página se actualiza automáticamente mientras edita el archivo.

Imágenes

Todas las imágenes almacenadas dentro de la carpeta public del proyecto.

Actualizar bio

Ejemplo de 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 simplemente reemplace avatar.png . 200x200px será bueno.

Vista de avatar hex/nft nftAvatar: true habilitar la forma hexadecimal en la imagen de avatar. nftAvatar: false lo hizo en forma ovalada.

Título por defecto titleImg: true y busca title.svg . Reemplace SVG con logotipo del logotipo. Asegúrese de usar el nombre de title.svg .

Banner destacado newProductUrl y newProduct utilizados para obtener Banner destacado. Puede reemplazar la imagen newproduct.png con cualquier diseño que desee.

newProduct: true Show Banner. El valor predeterminado es true Haga que sea falso para ocultar.

Actualizar enlaces

Ejemplo de 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 ;

Habilitar/deshabilitar las redes sociales Find type: social y Cambiar on:true|false

Título	en (predeterminado)
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

Configuración on: true muestra el ícono social. Los íconos de las redes sociales se organizan en una sola fila en la parte superior de la página a continuación. Si desea usar como lista, escriba Chagne para type: 'other'

Agregue el nuevo enlace de redes sociales Crear un nuevo bloque copiando esto

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

Actualice toda la información y asegúrese de agregar un archivo newiconname.svg en la carpeta pública. Luego debe agregar una nueva sección a Frontend components/WebLinks.js

Interfaz

Toda la personalización frontend realizada dentro de components/WebLinks.js . Si desea actualizar y agregar una nueva sección, solo busque este archivo y actualice de acuerdo con sus necesidades.

Sección de actualización

Busque códigos de sección. Como si desea cambiar el tipo install para featured el type: 'featured' en LinkData.js , actualice todos los códigos relacionados con install en WebLinks.js a 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 */ }

Agregar nueva sección

Agregue una nueva sección con type específico en Linkdata.js . Luego copie el código LinkSection para crear una nueva sección en el archivo WebLinks.js . Asegúrese de crear datos GET de esa sección también.

SEO

Ya se agregó next-seo . Todo lo que tiene que hacer es update next-seo.config.js . Asegúrese de agregar un enlace directo del archivo preview.jpg , como - https://vjy.me/preview.jpg .

Análisis de Google

En Vercel, puede establecer esto yendo a su proyecto, luego configuración y finalmente las variables de los entornos. Para obtener el código GA 4 G-ZXX0000XXX siga estos pasos

Dominio personalizado

Por defecto, Vercel le brinda un subdominio con el nombre de su proyecto como - nxtlnk.vercel.app. Pero puede agregar su propio dominio.

Vercel/Netlify le brinda la opción de agregar cualquier dominio al proyecto implementado como vjy.me/lnk o nxtlnk.xyz. Todo lo que tiene que hacer es seguir el documento oficial de Vercely o Netlify DocumentAion

Favicón

Cree un archivo favicon.ico y coloque dentro de la carpeta public . Yo uso favicon.io

Colaboradores

Creado por RealVjy. Siempre puede compartir sus comentarios en Twitter o en cualquier plataforma de redes sociales.

Si quieres contribuir. Simplemente cree una solicitud de extracción.