nxt lnk

Nxt lnk

Liens bio personnalisés pour les créatifs qui aiment le codage. Fait ce premier à utiliser pour mes propres weblinks vjy.me/lnk

Une alternative personnalisée parfaite pour LinkTree, Bio et autre plate-forme Shortner. Vérifiez la version en direct ici nxxlnk.xyz

Les demandes de traction sont toujours les bienvenues. Dans le cas où vous souhaitez une inspiration ou de nouvelles fonctionnalités sur ce qu'il faut ajouter, consultez les problèmes pour les demandes de fonctionnalités.

Code de carburants de café ☕️

Table des matières

• Usage
• Démarrage rapide
• Configuration manuelle
• Commencer
• Images
• Mettre à jour la bio
  • Ajouter / mettre à jour
  • Activer / désactiver
  • Bannière en vedette
• Mettre à jour les liens
  • Activer / désactiver
  • Ajouter / mettre à jour
• L'extrémité avant
• Référencement
• Google Analytics
• Domaine personnalisé
• Favicon
• Contributeurs

Usage

Modèle nxt-lnk utilisé pour créer votre lien bio personnalisé et votre auto-hébergement sur Vercel ou Netlify en utilisant votre propre domaine. Besoin de peu de compréhension du code :) ☕

Habituellement, vous n'avez pas à vous soucier beaucoup du codage si vous mettez simplement à jour les informations dans BioData.js et LinkData.js . Pour Deep Dive, en savoir plus Suivant.js et réagir Documentaion officiel.

Pour la personnalisation, les composants stylisés utilisés. Si vous souhaitez personnaliser le style, vous pouvez en savoir plus ici.

Template Auto Prise en charge du mode noir en fonction du Système COFIG.

Démarrage rapide

Configuration manuelle

Exécutez la commande suivante pour créer un nouveau projet avec ce modèle:

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

Commencer

Utilisez n'importe quel éditeur pour travailler sur l'édition. J'utilise vscode

Tout d'abord, exécutez le serveur de développement:

npm run dev
# or
yarn dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.

Des fichiers importants pour modifier ou mettre à jour data/BioData.js Toutes les informations de base ICICIATION data/LinksData.js contiennent tous les Components/WebLinks.js et Components/icons/index.js

Vous pouvez commencer à modifier la page en modifiant data/BioData.js et data/LinksData.js . La page indique automatiquement la mise à jour lorsque vous modifiez le fichier.

Images

Toutes les images stockées dans le dossier public du projet.

Mettre à jour la bio

Exemple 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 Remplacez simplement avatar.png . 200x200px sera bon.

View Avatar Hex / NFT nftAvatar: true Activer la forme hexagonale sur l'image d'avatar. nftAvatar: false le faisait en forme ovale.

Titre par défaut titleImg: true and it Recherchez title.svg . Remplacez SVG par le logo du logo. Assurez-vous d'utiliser le nom title.svg .

Banner en vedette newProductUrl et newProduct utilisés pour obtenir une bannière en vedette. Vous pouvez remplacer l'image newproduct.png par n'importe quelle conception que vous aimez.

newProduct: true Show Banner. La valeur par défaut est true , faites-le faux à se cacher.

Mettre à jour les liens

Exemple 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 ;

Activer / désactiver type: social et changement on:true|false

Titre	sur (par défaut)
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

Définition on: true Show the Social Icon. Les icônes des médias sociaux sont organisées en une seule ligne en haut de la page ci-dessous description. Si vous souhaitez utiliser comme liste, type de chagne pour type: 'other'

Ajouter un nouveau lien sur les réseaux sociaux Créez un nouveau bloc en copiant ceci

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

Mettez à jour toutes les informations et assurez-vous d'ajouter un fichier newiconname.svg dans le dossier public. Ensuite, vous devez ajouter une nouvelle section aux components/WebLinks.js

L'extrémité avant

Toute la personnalisation du frontend réalisée à l'intérieur components/WebLinks.js . Si vous souhaitez mettre à jour et ajouter une nouvelle section, regardez ce fichier et mettez à jour en fonction de vos besoins.

Section de mise à jour

Recherchez les codes de section. Comme si vous souhaitez modifier le type install pour mettre à featured le type: 'featured' dans LinkData.js , puis mettez à jour tout le code lié à install dans WebLinks.js pour 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 */ }

Ajouter une nouvelle section

Ajoutez une nouvelle section avec type spécifique dans Linkdata.js . Copiez ensuite le code LinkSection pour créer une nouvelle section dans le fichier WebLinks.js . Assurez-vous également de créer des données de cette section.

Référencement

Déjà ajouté next-seo . Tout ce que vous avez à faire est update next-seo.config.js . Assurez-vous d'ajouter un lien direct du fichier preview.jpg , comme - https://vjy.me/preview.jpg .

Google Analytics

Dans Vercel, vous pouvez définir ceci en allant à votre projet, puis des paramètres et enfin des variables d'environnements. Pour obtenir GA 4 CODE G-ZXX0000XXX Suivez ces étapes

Domaine personnalisé

Par défaut, Vercel vous donne un sous-domaine avec le nom de votre projet comme - nxtlnk.vercel.app. Mais vous pouvez ajouter son propre domaine.

Vercel / Netlify donnez l'option pour ajouter n'importe quel domaine au projet déployé comme vjy.me/lnk ou nxtlnk.xyz. Tout ce que vous avez à faire est de suivre Vercel Documentaion officiel ou NetLify Documentaion

Favicon

Créez un fichier favicon.ico et placez-le dans le dossier public . J'utilise favicon.io

Contributeurs

Créé par Realvjy. Vous êtes toujours les bienvenus pour partager vos commentaires sur Twitter ou toute plate-forme de médias sociaux.

Si vous voulez contribuer. Créez simplement une demande de traction.