تنزيل nxt lnk - تنزيل رمز المصدر nxt lnk

nxt lnk

كود الذكاء الاصطناعي

1.0.0

تنزيل

NXT LNK

روابط بيو مخصصة للإبداع الذين يحبون الترميز. جعل هذا أول من استخدامه في WebLinks الخاص بي vjy.me/lnk

بديل مخصص مثالي لـ LinkTree و Bio وغيرها من منصة قصيرة. تحقق من الإصدار المباشر هنا nxtlnk.xyz

طلبات السحب دائما موضع ترحيب. في حال كنت ترغب في الإلهام أو الميزات الجديدة حول ما يجب إضافته ، تحقق من مشكلات طلبات الميزات.

ترميز وقود القهوة ☕

جدول المحتويات

الاستخدام
بداية سريعة
الإعداد اليدوي
ابدء
الصور
تحديث السيرة الذاتية
- إضافة/تحديث
- تمكين/تعطيل
- لافتة مميزة
تحديث الروابط
- تمكين/تعطيل
- إضافة/تحديث
الواجهة
كبار المسئولين الاقتصاديين
Google Analytics
مجال مخصص
فافيكون
المساهمين

الاستخدام

قالب nxt-lnk المستخدم لإنشاء رابط BIO المخصص والمضيف الذاتي على Vercel أو NetLify باستخدام مجالك الخاص. بحاجة إلى فهم يذكر للرمز :) ☕

عادة ، لا داعي للقلق كثيرًا بشأن الترميز إذا كنت تقوم فقط بتحديث المعلومات في BioData.js و LinkData.js . إلى Deep Dive تعرف على المزيد next.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 مع متصفحك لرؤية النتيجة.

ملفات مهمة لتحرير أو تحديث بيانات المعلومات Components/icons/index.js data/BioData.js جميع المعلومات الأساسية تحديث data/LinksData.js Components/WebLinks.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 View nftAvatar: true تمكين شكل Hex على صورة الصورة الرمزية. nftAvatar: false جعلها في شكل بيضاوي.

العنوان بشكل افتراضي titleImg: true ويبحث عن title.svg . استبدل SVG بشعار الشعار. تأكد من استخدام اسم title.svg .

لافتة مميزة newProductUrl و newProduct المستخدمة للحصول على لافتة مميزة. يمكنك استبدال الصورة newproduct.png بأي تصميم تريده.

newProduct: true . الافتراضي هو 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: '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 type: 'featured' في LinkData.js ثم featured بتحديث جميع التعليمات install ذات الصلة في WebLinks.js

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

أضف قسمًا جديدًا

أضف قسمًا جديدًا type محدد في Linkdata.js . ثم انسخ رمز LinkSection لإنشاء قسم جديد في ملف WebLinks.js . تأكد من إنشاء الحصول على بيانات لهذا القسم أيضًا.

كبار المسئولين الاقتصاديين

أضيفت بالفعل next-seo . كل ما عليك فعله هو update next-seo.config.js . تأكد من إضافة رابط مباشر لملف preview.jpg ، مثل - https://vjy.me/preview.jpg .

Google Analytics

في Vercel ، يمكنك ضبط هذا من خلال الانتقال إلى مشروعك ، ثم الإعدادات وأخيراً متغيرات البيئات. للحصول على GA 4 رمز G-ZXX0000XXX اتبع هذه الخطوات

مجال مخصص

بشكل افتراضي ، يمنحك Vercel نطاقًا فرعيًا مع اسم مشروعك مثل - nxtlnk.vercel.app. ولكن يمكنك إضافة مجال خاص.

تمنحك Vercel/NetLify خيارًا لإضافة أي مجال إلى المشروع المنشور مثل vjy.me/lnk أو nxtlnk.xyz. كل ما عليك فعله هو اتباع Vercel Documentaion أو NetLify DocumentAion