nxt lnk下載-NXT nxt lnk源代碼下載

nxt lnk

Ai源碼

1.0.0

下載

NXT LNK

自定義的生物鏈接，適用於喜歡編碼的創意者。首先將其用於我自己的Weblinks vjy.me/lnk

LinkTree，Bio和其他Shortner平台的理想定制替代方案。在此處查看LIVE版本NXTLNK.xyz

始終歡迎拉動請求。如果您想要添加內容的靈感或新功能，請查看功能請求的問題。

咖啡燃料編碼☕️

用法
快速開始
手動設置
入門
圖像
更新生物
- 添加/更新
- 啟用/禁用
- 特色橫幅
更新鏈接
- 啟用/禁用
- 添加/更新
前端
SEO
Google Analytics（分析）
自定義域
Favicon
貢獻者

用法

nxt-lnk模板用於在Vercel上創建自定義生物鏈接或使用您自己的域名Netlify。需要對代碼的了解很少:)☕

通常，如果您只是在BioData.js和LinkData.js中更新信息，則無需擔心編碼。深入潛水，了解更多信息。

用於定制的樣式組件。如果您想自定義樣式，則可以在此處了解更多信息。

模板自動支持暗模式，具體取決於系統COFIG。

快速開始

手動設置

運行以下命令以使用此模板創建一個新項目：

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和stylesheet Components/icons/index.js包含所有SVG ICON ICON COMPO

您可以通過修改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.png 。 200x200px會很好。

十六進制/NFT AVATAR視圖nftAvatar: true Enable Hex形狀。 nftAvatar: false以橢圓形的形狀使其變成。

默認情況下標題titleImg: true and true title.svg 。用徽標替換SVG。確保使用title.svg名稱。

特色橫幅newProductUrl和用於獲取特色橫幅的newProduct 。您可以用您喜歡的任何設計替換image 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顯示社交偶像。社交媒體圖標在描述下面的頁面頂部的一行中排列。如果您想用作列表，則chagne鍵入以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 LinkData.js中的type: 'featured' ，然後在WebLinks.js featured install所有相關的代碼

 // 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 */ }