nxt lnk
1.0.0
ลิงก์ชีวภาพที่กำหนดเองสำหรับโฆษณาที่รักการเขียนโค้ด ทำสิ่งนี้เป็นอันดับแรกเพื่อใช้สำหรับ weblinks ของฉันเอง vjy.me/lnk
ทางเลือกที่กำหนดเองที่สมบูรณ์แบบสำหรับ LinkTree, Bio และแพลตฟอร์มสั้น ๆ อื่น ๆ ตรวจสอบเวอร์ชันสดที่นี่ nxtlnk.xyz
ยินดีต้อนรับคำขอดึงเสมอ ในกรณีที่คุณต้องการแรงบันดาลใจหรือคุณสมบัติใหม่ ๆ เกี่ยวกับสิ่งที่ต้องเพิ่มลองดูปัญหาสำหรับคำขอคุณสมบัติ
การเข้ารหัสด้วยเชื้อเพลิงกาแฟ☕
สารบัญ
เทมเพลต nxt-lnk ที่ใช้ในการสร้างลิงค์ชีวภาพที่กำหนดเองและโฮสต์ตัวเองบน Vercel หรือ Netlify โดยใช้โดเมนของคุณเอง ต้องการความเข้าใจเล็กน้อยเกี่ยวกับรหัส :) ☕
โดยปกติคุณไม่จำเป็นต้องกังวลมากเกี่ยวกับการเขียนโค้ดหากคุณเพิ่งอัปเดตข้อมูลใน BioData.js และ LinkData.js เพื่อดำน้ำลึกรู้เพิ่มเติมต่อไป Js และตอบสนอง Documentaion อย่างเป็นทางการ
สำหรับการปรับแต่งส่วนประกอบสไตล์ที่ใช้แล้ว หากคุณต้องการปรับแต่งสไตล์คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่
เทมเพลตรองรับโหมดมืดโดยอัตโนมัติขึ้นอยู่กับระบบ 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 เพียงแทนที่ avatar.png 200x200px จะดี
hex/nft avatar view nftAvatar: true เปิดใช้งานรูปร่าง hex บนภาพอวตาร nftAvatar: false ทำให้เป็นรูปวงรี
ชื่อเรื่อง โดยเริ่ม titleImg: true และค้นหา title.svg แทนที่ SVG ด้วย โลโก้ โลโก้ ตรวจสอบให้แน่ใจว่าใช้ชื่อ title.svg
แบนเนอร์ที่โดดเด่น newProductUrl และ newProduct ที่ใช้สำหรับรับแบนเนอร์ที่โดดเด่น คุณสามารถแทนที่ Image newproduct.png ด้วยการออกแบบที่คุณต้องการ
newProduct: true Show ค่าเริ่มต้นเป็น 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 to 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 จากนั้นอัปเดตรหัสที่เกี่ยวข้องทั้งหมดที่ install ใน WebLinks.js เป็น 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 */ }เพิ่มส่วนใหม่
เพิ่มส่วนใหม่ด้วย type เฉพาะใน Linkdata.js จากนั้นคัดลอกรหัส LinkSection เพื่อสร้างส่วนใหม่ในไฟล์ WebLinks.js ตรวจสอบให้แน่ใจว่าได้สร้างข้อมูลของส่วนนั้นเช่นกัน
เพิ่ม next-seo แล้ว สิ่งที่คุณต้องทำคือ update next-seo.config.js ตรวจสอบให้แน่ใจว่าได้เพิ่มลิงก์โดยตรงของไฟล์ preview.jpg เช่น - https://vjy.me/preview.jpg
ใน Vercel คุณสามารถตั้งค่าสิ่งนี้ได้โดยไปที่โครงการของคุณจากนั้นการตั้งค่าและตัวแปรสภาพแวดล้อมในที่สุด เพื่อรับรหัส GA 4 G-ZXX0000XXX ทำตามขั้นตอนเหล่านี้
โดยค่าเริ่มต้น vercel ให้โดเมนย่อยด้วยชื่อโครงการของคุณเช่น - nxtlnk.vercel.app แต่คุณสามารถเพิ่มโดเมนของตัวเอง
vercel/netlify ให้ตัวเลือกคุณเพื่อเพิ่มโดเมนใด ๆ ในโครงการที่ปรับใช้เช่น vjy.me/lnk หรือ nxtlnk.xyz สิ่งที่คุณต้องทำคือติดตาม Documentaion อย่างเป็นทางการหรือ documentaion netlify
สร้างไฟล์ favicon.ico และวางไว้ในโฟลเดอร์ public ฉันใช้ favicon.io
สร้างโดย Realvjy คุณยินดีที่จะแบ่งปันความคิดเห็นของคุณบน Twitter หรือแพลตฟอร์มโซเชียลมีเดียใด ๆ
หากคุณต้องการมีส่วนร่วม เพียงสร้างคำขอดึง
