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