nxt lnk

NXT LNK

Tautan bio khusus untuk kreatif yang suka pengkodean. Membuat ini dulu digunakan untuk weblinks saya sendiri vjy.me/lnk

Alternatif khusus yang sempurna untuk LinkTree, Bio dan platform pemendekan lainnya. Periksa versi langsung di sini nxtlnk.xyz

Permintaan tarik selalu diterima. Jika Anda menginginkan inspirasi atau fitur baru tentang apa yang harus ditambahkan, lihat masalah untuk permintaan fitur.

Kode Bahan Bakar Kopi ☕️

Daftar isi

• Penggunaan
• Awal yang cepat
• Pengaturan manual
• Memulai
• Gambar
• Perbarui Bio
  • Tambah/Perbarui
  • Aktifkan/Nonaktifkan
  • Spanduk unggulan
• Perbarui tautan
  • Aktifkan/Nonaktifkan
  • Tambah/Perbarui
• Frontend
• Seo
• Google Analytics
• Domain khusus
• Favicon
• Kontributor

Penggunaan

Template nxt-lnk yang digunakan untuk membuat tautan bio khusus Anda dan tuan rumah diri di Vercel atau Netlify menggunakan domain Anda sendiri. Butuh sedikit pemahaman tentang kode :) ☕

Biasanya, Anda tidak perlu banyak khawatir tentang pengkodean jika Anda hanya memperbarui informasi di BioData.js dan LinkData.js . Untuk menyelam dalam lebih tahu lebih banyak.js dan bereaksi dokumentasi resmi.

Untuk kustomisasi komponen gaya yang digunakan. Jika Anda ingin menyesuaikan gaya, Anda dapat mempelajari lebih lanjut di sini.

Template Dukungan Otomatis Mode gelap tergantung pada kofig sistem.

Awal yang cepat

Pengaturan manual

Jalankan perintah berikut untuk membuat proyek baru dengan templat ini:

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

Memulai

Gunakan editor apa pun untuk mengerjakan pengeditan. Saya menggunakan vscode

Pertama, jalankan server pengembangan:

npm run dev
# or
yarn dev

Buka http: // localhost: 3000 dengan browser Anda untuk melihat hasilnya.

File Penting Untuk Mengedit atau Perbarui Info data/BioData.js Semua Info Dasar Perbarui Di Sini data/LinksData.js berisi semua Components/WebLinks.js UI dan Components/icons/index.js berisi semua SVG Icon Compo

Anda dapat mulai mengedit halaman dengan memodifikasi data/BioData.js dan data/LinksData.js . Page-updates halaman saat Anda mengedit file.

Gambar

Semua gambar yang disimpan di dalam folder public proyek.

Perbarui Bio

Contoh dari 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 baru saja mengganti avatar.png . 200x200px akan bagus.

Hex/NFT Avatar View nftAvatar: true Aktifkan bentuk hex pada gambar avatar. nftAvatar: false membuatnya dalam bentuk oval.

Judul dengan Default titleImg: true dan mencari title.svg . Ganti SVG dengan logo logo. Pastikan untuk menggunakan nama title.svg .

Banner Fitur newProductUrl dan newProduct yang digunakan untuk mendapatkan spanduk unggulan. Anda dapat mengganti gambar newproduct.png dengan desain apa pun yang Anda suka.

newProduct: true Show Banner. Default true membuat salah untuk disembunyikan.

Perbarui tautan

Contoh dari 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 ;

Aktifkan/Nonaktifkan type: social dan Perubahan on:true|false

Judul	ON (default)
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

Pengaturan on: true Show The Social Icon. Ikon media sosial diatur dalam satu baris di bagian atas halaman di bawah deskripsi. Jika Anda ingin menggunakan sebagai daftar, ketik chagne untuk type: 'other'

Tambahkan tautan media sosial baru Buat blok baru dengan menyalin ini

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

Perbarui semua info dan pastikan untuk menambahkan file newiconname.svg di folder publik. Maka Anda harus menambahkan bagian baru ke components/WebLinks.js

Frontend

Semua kustomisasi frontend dilakukan di dalam components/WebLinks.js . Jika Anda ingin memperbarui dan menambahkan bagian baru, lihat file ini dan perbarui sesuai kebutuhan Anda.

Perbarui bagian

Cari kode bagian. Seperti jika Anda ingin mengubah jenis install ke pembaruan featured type: 'featured' di LinkData.js kemudian perbarui semua install kode terkait di WebLinks.js untuk 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 */ }

Tambahkan bagian baru

Tambahkan bagian baru dengan type spesifik di Linkdata.js . Kemudian salin kode LinkSection untuk membuat bagian baru di file WebLinks.js . Pastikan untuk membuat data dari bagian itu juga.

Seo

Sudah menambahkan next-seo . Yang harus Anda lakukan adalah update next-seo.config.js . Pastikan untuk menambahkan tautan langsung file preview.jpg , seperti - https://vjy.me/preview.jpg .

Google Analytics

Di Vercel, Anda dapat mengatur ini dengan pergi ke proyek Anda, lalu pengaturan dan akhirnya variabel lingkungan. Untuk mendapatkan kode GA 4 G-ZXX0000XXX Ikuti langkah-langkah ini

Domain khusus

Secara default Vercel memberi Anda subdomain dengan nama proyek Anda seperti - nxtlnk.vercel.app. Tetapi Anda dapat menambahkan domain sendiri.

Vercel/Netlify memberi Anda opsi untuk menambahkan domain apa pun ke proyek yang digunakan seperti vjy.me/lnk atau nxtlnk.xyz. Yang harus Anda lakukan adalah mengikuti Vercel Documentaion atau Netlify Documentaion resmi

Favicon

Buat file favicon.ico dan tempatkan di dalam folder public . Saya menggunakan favicon.io

Kontributor

Dibuat oleh realvjy. Anda selalu dipersilakan untuk membagikan umpan balik Anda di Twitter atau platform media sosial apa pun.

Jika Anda ingin berkontribusi. Cukup buat permintaan tarik.