nxt lnkダウンロード-NXT nxt lnkソースコードのダウンロード

nxt lnk

AI ソースコード

1.0.0

ダウンロード

nxt lnk

コーディングが大好きなクリエイティブ向けのカスタムバイオリンク。これを最初に私自身のウェブリンクに使用しましたvjy.me/lnk

Linktree、Bio、その他のショートナープラットフォームに最適なカスタム代替品です。ここでライブバージョンを確認しますnxtlnk.xyz

プルリクエストはいつでも大歓迎です。インスピレーションや新しい機能を追加する場合は、機能リクエストの問題を確認してください。

コーヒー燃料コーディング☕️

使用法
クイックスタート
手動セットアップ
はじめる
画像
バイオを更新します
- 追加/更新します
- 有効/無効にします
- フィーチャーバナー
リンクを更新します
- 有効/無効にします
- 追加/更新します
フロントエンド
SEO
Googleアナリティクス
カスタムドメイン
ファビコン
貢献者

使用法

nxt-lnkテンプレートは、独自のドメインを使用してVercelまたはNetlifyにカスタムバイオリンクを作成し、自己ホストを作成します。コードをほとんど理解していない:)☕

通常、 BioData.jsとLinkData.jsで情報を更新するだけで、コーディングについてあまり心配する必要はありません。 Deep Dive To next.jsを知り、公式の文書を反応します。

カスタマイズ用に使用されたスタイルのコンポーネント。スタイリングをカスタマイズしたい場合は、こちらをご覧ください。

Template Auto Support 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およびStyleSheet 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は良いでしょう。

hex/nft avatarビューnftAvatar: true enable hex shapeを有効にします。 nftAvatar: falseは楕円形にしました。

デフォルトのタイトル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

タイトル	オン（デフォルト）
`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 */ }