nxt lnk

NXT LNK

Benutzerdefinierte Bio -Links für Kreative, die es lieben, Codierung zu kodieren. Machte dies zuerst für meine eigenen Weblinks vjy.me/lnk

Eine perfekte kundenspezifische Alternative für LinkTree, Bio und andere Shortner -Plattform. Überprüfen Sie die Live -Version hier nxtlnk.xyz

Pull -Anfragen sind immer willkommen. Wenn Sie Inspiration oder neue Funktionen zum Hinzufügen erwarten, lesen Sie die Probleme für Feature -Anfragen.

Kaffeefuhren codieren ☕️

Inhaltsverzeichnis

• Verwendung
• Schneller Start
• Handbuch Setup
• Erste Schritte
• Bilder
• Biografie aktualisieren
  • Hinzufügen/Update
  • Aktivieren/Deaktivieren
  • Banner vorgestellt
• Links aktualisieren
  • Aktivieren/Deaktivieren
  • Hinzufügen/Update
• Frontend
• SEO
• Google Analytics
• Benutzerdefinierte Domain
• Favicon
• Mitwirkende

Verwendung

nxt-lnk -Vorlage zum Erstellen Ihres benutzerdefinierten Bio-Links und zum SelbstHost auf Vercel oder Netlify mithilfe Ihrer eigenen Domäne. Brauche wenig Verständnis von Code :) ☕

Normalerweise müssen Sie sich nicht viel über die Codierung sorgen, wenn Sie nur Informationen in BioData.js und LinkData.js aktualisieren. Tauchen Sie tiefe Tauchen mehr als nächstes kennen.

Für die anpassungs verwendete gestaltete Komponenten. Wenn Sie das Styling anpassen möchten, können Sie hier mehr erfahren.

Vorlage automatisch Dark-Mode unterstützen je nach System-Cofig.

Schneller Start

Handbuch Setup

Führen Sie den folgenden Befehl aus, um ein neues Projekt mit dieser Vorlage zu erstellen:

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

Erste Schritte

Verwenden Sie jeden Editor, um an der Bearbeitung zu arbeiten. Ich benutze VSCODE

Führen Sie zunächst den Entwicklungsserver aus:

npm run dev
# or
yarn dev

Öffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.

Wichtige Dateien zum Bearbeiten oder Aktualisieren von Info data/BioData.js Alle grundlegenden Informationen hier data/LinksData.js enthalten alle Components/WebLinks.js UI- und Stylesheet Components/icons/index.js enthalten alle SVG -Icon Compo.

Sie können mit der Bearbeitung der Seite beginnen, indem Sie data/BioData.js und data/LinksData.js ändern. Die Seite Auto-Updates, während Sie die Datei bearbeiten.

Bilder

Alle Bilder, die im public Ordner des Projekts gespeichert sind.

Biografie aktualisieren

Beispiel aus 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 ersetzen Sie einfach avatar.png . 200x200px wird gut sein.

Hex/NFT Avatar View nftAvatar: true INABLE HEX -Form auf Avatar -Bild. nftAvatar: false hat es in ovaler Form gemacht.

Title titleImg: true und IT SO SO SAUCHEN SIE title.svg . Ersetzen Sie SVG durch das Logo -Logo . Stellen Sie sicher, dass Sie den Namen title.svg verwenden.

Ausgestattetes Banner newProductUrl und newProduct verwendet, um das Banner zu erhalten. Sie können das Bild newproduct.png durch jedes von Ihnen gefallene Design ersetzen.

newProduct: true Show Banner. Standard ist true macht es falsch, sich zu verbergen.

Links aktualisieren

Beispiel von 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 ;

Aktivieren/deaktivieren Social Media Finden Sie type: social und Veränderung on:true|false

Titel	auf (Standard)
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

Setzen Sie sich on: true Show the Social Icon. Die Social -Media -Symbole sind in einer einzigen Zeile oben auf der folgenden Seite angeordnet. Wenn Sie als Liste verwenden möchten, tippen Chagne zum type: 'other'

Fügen Sie einen neuen Social -Media -Link hinzu, erstellen Sie einen neuen Block, indem Sie dies kopieren

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

Aktualisieren Sie alle Informationen und addieren Sie sicher, dass Sie in öffentlichem Ordner eine Datei newiconname.svg hinzufügen. Dann müssen Sie einen neuen Abschnitt zu Frontend components/WebLinks.js hinzufügen

Frontend

Alle Frontend -Anpassungen in components/WebLinks.js . Wenn Sie einen neuen Abschnitt aktualisieren und hinzufügen möchten, suchen Sie diese Datei einfach nach und aktualisieren Sie nach Ihren Bedürfnissen.

Aktualisieren Sie den Abschnitt Aktualisieren

Suchen Sie nach Abschnittscodes. Zum Beispiel, wenn Sie install ändern möchten, um den type: 'featured' featured LinkData.js , dann aktualisieren Sie alle install Code in WebLinks.js auf 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 */ }

Neuen Abschnitt hinzufügen

Fügen Sie einen neuen Abschnitt mit spezifischem type in Linkdata.js hinzu. Kopieren Sie dann LinkSection -Code, um einen neuen Abschnitt in der Datei WebLinks.js zu erstellen. Stellen Sie sicher, dass Sie auch Daten dieses Abschnitts erstellen.

SEO

Bereits next-seo hinzugefügt. Alles, was Sie tun müssen, ist update next-seo.config.js Datei. Stellen Sie sicher, dass Sie einen direkten Link von preview.jpg -Datei hinzufügen, wie - https://vjy.me/preview.jpg .

Google Analytics

In Vercel können Sie dies festlegen, indem Sie zu Ihrem Projekt, dann zu Einstellungen und schließlich Umgebungsvariablen gehen. Um GA 4 Code G-ZXX0000XXX zu erhalten, befolgen Sie diese Schritte

Benutzerdefinierte Domain

Standardmäßig geben Sie Vercel ein Subdomain mit Ihrem Projektnamen wie - nxtlnk.vercel.app. Sie können jedoch eigene Domain hinzufügen.

Vercel/Netlify geben Sie die Möglichkeit, dem bereitgestellten Projekt wie vjy.me/lnk oder nxtlnk.xyz eine Domäne hinzuzufügen. Alles, was Sie tun müssen, ist die offizielle Vercel Documentaion oder Netlify Documentaion zu befolgen

Favicon

Erstellen Sie eine favicon.ico -Datei und legen Sie in public Ordner ein. Ich benutze Favicon.io

Mitwirkende

Erstellt von Realvjy. Sie können Ihr Feedback immer auf Twitter oder einer beliebigen Social -Media -Plattform teilen.

Wenn Sie einen Beitrag leisten möchten. Erstellen Sie einfach eine Pull -Anfrage.