nxt lnk
1.0.0
Links de biografia personalizados para criativos que amam codificação. Fez isso primeiro a usar para meus próprios weblinks vjy.me/lnk
Uma alternativa personalizada perfeita para Linktree, Bio e outra plataforma curta. Verifique a versão ao vivo aqui nxtlnk.xyz
Solicitações de tração são sempre bem -vindas. Caso você queira inspiração ou novos recursos sobre o que adicionar, consulte os problemas para solicitações de recursos.
Codificação de combustíveis de café ☕️
Índice
Modelo nxt-lnk usado para criar seu link biológico personalizado e auto-hospedeiro no vercel ou netlify usando seu próprio domínio. Precisa de pouca compreensão do código :) ☕
Geralmente, você não precisa se preocupar muito com a codificação se estiver apenas atualizando informações em BioData.js e LinkData.js . Deep Dive Know More Next.js e reaja a documentação oficial.
Para personalização usada componentes com estilo. Se você deseja personalizar o estilo, pode aprender mais aqui.
Modelo Suporte automático no modo escuro, dependendo da cofig do sistema.
Execute o seguinte comando para criar um novo projeto com este modelo:
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-lnkUse qualquer editor para trabalhar na edição. Eu uso o vscode
Primeiro, execute o servidor de desenvolvimento:
npm run dev
# or
yarn devAbra http: // localhost: 3000 com seu navegador para ver o resultado.
Arquivos importantes para editar ou atualizar informações data/BioData.js Todas as informações básicas Atualizar aqui data/LinksData.js contêm todos os Components/WebLinks.js ui e Components/icons/index.js da folha de estilo
Você pode começar a editar a página modificando data/BioData.js e data/LinksData.js . A página de atualização automática ao editar o arquivo.
Todas as imagens armazenadas dentro da pasta public do projeto.
Exemplo de 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 apenas substitua avatar.png . 200x200px será bom.
Visualização de avatar hexadecimal/NFT nftAvatar: true na imagem de avatar. nftAvatar: false fez isso em forma oval.
Título por padrão titleImg: true e procure title.svg . Substitua SVG pelo logotipo do logotipo. Certifique -se de usar o nome title.svg .
Banner newProductUrl e newProduct usados para obter Banner em destaque. Você pode substituir a imagem newproduct.png por qualquer design que desejar.
newProduct: true Show Banner. O padrão é true , torne -se falso esconder.
Exemplo de 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 ; Ativar/desativar a mídia social Encontre type: social e mude on:true|false
| Título | on (padrão) |
|---|---|
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 mostre o ícone social. Os ícones de mídia social são organizados em uma única linha na parte superior da página abaixo da descrição. Se você deseja usar como lista, tipo chagne para type: 'other'
Adicionar novo link de mídia social Crie um novo bloco copiando isso
{
title : 'Social Name' ,
url : 'https://link.com/whateverurl' ,
type : 'social' ,
icon : '/newiconname.svg' ,
on : true
} Atualize todas as informações e certifique -se de adicionar um arquivo newiconname.svg na pasta pública. Então você deve adicionar uma nova seção aos components/WebLinks.js
Toda a personalização do front -end feita dentro components/WebLinks.js . Se você deseja atualizar e adicionar uma nova seção, procure este arquivo e atualize de acordo com sua necessidade.
Seção de atualização
Procure códigos de seção. Como se você quiser alterar o tipo install para featured o type: 'featured' em LinkData.js , atualize todo o código install relacionado em WebLinks.js para 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 */ }Adicione uma nova seção
Adicione uma nova seção com type específico em Linkdata.js . Em seguida, copie o código LinkSection para criar uma nova seção no arquivo WebLinks.js . Certifique -se de criar dados obtidos dessa seção também.
Já adicionou next-seo . Tudo o que você precisa fazer é update next-seo.config.js . Certifique -se de adicionar link direto do arquivo preview.jpg , como - https://vjy.me/preview.jpg .
No Vercel, você pode definir isso indo para o seu projeto, depois configurando e finalmente ambientes variáveis. Para obter o código GA 4 G-ZXX0000XXX Siga estas etapas
Por padrão, o vercel oferece um subdomínio com o nome do seu projeto como - nxtlnk.vercel.app. Mas você pode adicionar o próprio domínio.
Vercel/netlify oferece opção para adicionar qualquer domínio ao projeto implantado como vjy.me/lnk ou nxtlnk.xyz. Tudo o que você precisa fazer é seguir a documentação oficial de vercel ou netlify
Crie um arquivo favicon.ico e coloque na pasta public . Eu uso favicon.io
Criado por realvjy. Você é sempre convidado a compartilhar seus comentários no Twitter ou em qualquer plataforma de mídia social.
Se você deseja contribuir. Basta criar uma solicitação de tração.
