nxt lnk 다운로드 -NXT nxt lnk 소스 코드 다운로드

nxt lnk

AI 소스 코드

1.0.0

다운로드

NXT LNK

코딩을 좋아하는 크리에이티브를위한 맞춤형 바이오 링크. 내 자신의 weblinks vjy.me/lnk에 먼저 사용했습니다.

LinkTree, Bio 및 기타 짧은 플랫폼을위한 완벽한 맞춤형 대안. 여기에서 라이브 버전을 확인하십시오 nxtlnk.xyz

풀 요청은 항상 환영합니다. 추가 할 내용에 대한 영감이나 새로운 기능을 원하는 경우 기능 요청에 대한 문제를 확인하십시오.

커피 연료 코딩 ing️

용법
빠른 시작
수동 설정
시작하기
이미지
바이오 업데이트
- 추가/업데이트
- 활성화/비활성화
- 추천 배너
업데이트 링크
- 활성화/비활성화
- 추가/업데이트
프론트 엔드
서
Google 웹 로그 분석
맞춤 도메인
파비콘
기고자

용법

nxt-lnk 템플릿은 자신의 도메인을 사용하여 Vercel 또는 Netlify에서 사용자 정의 바이오 링크 및 셀프 호스트를 작성하는 데 사용됩니다. 코드에 대한 이해가 거의 필요하지 않습니다 :) of

일반적으로 BioData.js 및 LinkData.js 에서 정보를 업데이트하는 경우 코딩에 대해 걱정할 필요가 없습니다. DIVE DIVE에 더 많은 다음 NEXT.JS를 알고 공식 문서를 반응합니다.

사용한 스타일 구성 요소를 사용합니다. 스타일을 사용자 정의하려면 여기에서 자세히 알아볼 수 있습니다.

템플릿 자동 지원 System 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 및 스타일 시트 Components/icons/index.js 가 포함되어 있습니다.

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가 좋을 것입니다.

16 진수/nft 아바타 뷰 nftAvatar: true hex 모양을 활성화합니다. nftAvatar: false 타원형으로 만들었습니다.

기본적으로 titleimg titleImg: true 및 title.svg 찾습니다. SVG를 로고 로고 로 바꾸십시오. title.svg 이름을 사용하십시오.

특집 배너를 얻는 데 사용되는 배너 newProductUrl 및 newProduct 특징입니다. 이미지 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

제목	on (기본값)
`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 to type: 'other'

새로운 소셜 미디어 링크 추가 이것을 복사하여 새 블록을 만듭니다.

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

모든 정보를 업데이트하고 공개 폴더에 newiconname.svg 파일을 추가하십시오. 그런 다음 Frontend components/WebLinks.js 에 새 섹션을 추가해야합니다.

프론트 엔드

components/WebLinks.js 내부에서 수행 된 모든 프론트 엔드 사용자 정의. 업데이트하고 새 섹션을 추가하려면이 파일을보고 필요에 따라 업데이트하십시오.

업데이트 섹션

섹션 코드를 찾으십시오. install 유형을 featured 으로 변경하려면 유형을 업데이트하십시오. LinkData.js 에서 type: 'featured' 는 WebLinks.js 에서 모든 install 관련 코드를 업데이트합니다 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 */ }