நீங்கள் ஒரு நவீன Nuxt 3 வலைப்பதிவு தொடக்க டெம்ப்ளேட்டைத் தேடுகிறீர்களானால், Bfotool Nuxtjs Base Blog ஒரு சிறந்த தீர்வாகும். இது Nuxt 3, Vue 3, TypeScript மற்றும் Tailwind CSS உடன் உருவாக்கப்பட்ட ஒரு முழுமையான செயல்பாட்டு வலைப்பதிவு பயன்பாடாகும், இது டெவலப்பர்கள் மேம்பாட்டின் போது பின்தளம் தேவையில்லாமல் ஒரு தொழில்முறை வலைப்பதிவை விரைவாக உருவாக்க உதவும் வகையில் வடிவமைக்கப்பட்டுள்ளது.
இந்த திட்டத்தில் Axios இடைமறிப்பான்களால் இயக்கப்படும் ஒரு போலி API அடுக்கு உள்ளது, இது ஒரு உண்மையான REST API ஐ உருவகப்படுத்துகிறது. இது Nuxt கட்டமைப்பைக் கற்றுக்கொள்வதற்கும், முன்மாதிரி பயன்பாடுகளை உருவாக்குவதற்கும் அல்லது உற்பத்திக்குத் தயாரான வலைப்பதிவு தளங்களை உருவாக்குவதற்கும் சரியானதாக அமைகிறது.
நீங்கள் களஞ்சியத்தை இங்கே ஆராயலாம்: 👉 https://github.com/bfotool/nuxtjs-base-blog
Bfotool Nuxtjs அடிப்படை வலைப்பதிவு என்றால் என்ன?
Bfotool Nuxtjs Base Blog என்பது சமீபத்திய முன்பக்க தொழில்நுட்பங்களைப் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு நவீன வலைப்பதிவு பயன்பாட்டு டெம்ப்ளேட் ஆகும். இது இடுகைகள், வகைகள், தேடல் செயல்பாடு மற்றும் தொடர்பு பக்கங்களுடன் முழுமையான வலைப்பதிவு இடைமுகத்தை வழங்குகிறது.
இந்த திட்டம் ஒரு சுத்தமான Nuxt 3 கட்டமைப்புடன் வடிவமைக்கப்பட்டுள்ளது, இது புரிந்துகொள்வதையும் நீட்டிப்பதையும் எளிதாக்குகிறது.
முக்கிய சிறப்பம்சங்கள் பின்வருமாறு:
பதிலளிக்கக்கூடிய வடிவமைப்புடன் கூடிய முழு வலைப்பதிவு UI.
பின்தளம் இல்லாமல் மேம்பாட்டிற்கான போலி REST API.
நவீன Vue 3 கலவை API உடன் கட்டமைக்கப்பட்டது
டைப்ஸ்கிரிப்ட் மூலம் வகை-பாதுகாப்பான மேம்பாடு
SEO-தயாரான மெட்டா உள்ளமைவு
இருண்ட மற்றும் ஒளி தீம் ஆதரவு
களஞ்சியத்தை இங்கே காணலாம்:
👉 https://github.com/bfotool/nuxtjs-base-blog
இந்த டெம்ப்ளேட் இதற்கு ஏற்றது:
தனிப்பட்ட வலைப்பதிவுகள்
நிறுவன வலைப்பதிவுகள்
டெவலப்பர் போர்ட்ஃபோலியோக்கள்
நக்ஸ்ட் 3 கட்டமைப்பைக் கற்றல்
உள்ளடக்க வலைத்தளங்களின் விரைவான முன்மாதிரி உருவாக்கம்
முக்கிய அம்சங்கள்
C class="ac-h3" வலைப்பதிவு பக்கங்களை நிரப்பவும்
இந்த டெம்ப்ளேட், வலைப்பதிவு தளத்தில் பொதுவாகத் தேவைப்படும் முழுமையாக செயல்படுத்தப்பட்ட பக்கங்களின் தொகுப்பை உள்ளடக்கியது.
முக்கிய பக்கங்களில் பின்வருவன அடங்கும்:
முகப்புப் பக்கம்- சிறப்பு ஹீரோ இடுகை, வகை வடிப்பான்கள் மற்றும் பக்கவாட்டு இடுகைகளைக் காட்டுகிறது.
வலைப்பதிவு இடுகைப் பக்கம் – உள்ளடக்க அட்டவணை மற்றும் தொடர்புடைய இடுகைகளுடன் முழு கட்டுரைக் காட்சி.
வகைப் பக்கம்- வகை வாரியாக வடிகட்டப்பட்ட இடுகைகளை உலாவுக
தேடல் பக்கம்- டீபவுன்ஸ் செயல்பாட்டுடன் நிகழ்நேர தேடல்
பக்கம் பற்றி- உங்கள் குழு, பணி அல்லது பிராண்டை அறிமுகப்படுத்துங்கள்.
தொடர்பு பக்கம்- சரிபார்ப்பு மற்றும் சிற்றுண்டி பின்னூட்டங்களுடன் தொடர்பு படிவம்.
பிழை பக்கம் – தனிப்பயன் பிழை கையாளுதல் UI
இந்த அமைப்பு பயனர்களுக்குப் பயன்படுத்தத் தயாராக இருக்கும் வலைப்பதிவு அனுபவத்தை வழங்குகிறது.
<class="ac-h3"h3>மேம்பாட்டிற்கான போலி API அடுக்கு
இந்த திட்டத்தின் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று போலி API அமைப்பு ஆகும் .
உண்மையான பின்தளத்துடன் இணைப்பதற்குப் பதிலாக, இந்த திட்டம் Axios இடைமறிப்பான்களைப் பயன்படுத்தி API பதில்களை உருவகப்படுத்துகிறது .
இந்த அணுகுமுறை டெவலப்பர்களை பின்வருவனவற்றைச் செய்ய அனுமதிக்கிறது:
பின்தள சார்புகள் இல்லாமல் முன்தள அம்சங்களை உருவாக்குங்கள்.
பக்கமாக்கல், வடிகட்டுதல் மற்றும் வரிசைப்படுத்துதல் ஆகியவற்றைச் சோதிக்கவும்.
உண்மையான API மறுமொழி தாமதங்களை உருவகப்படுத்து
பின்னர் உண்மையான பின்தளத்திற்கு எளிதாக மாறவும்.
போலி API பின்வருவன போன்ற இறுதிப் புள்ளிகளை உள்ளடக்கியது:
/posts/posts/featured/posts/:slug/categories/authors/contact
useApi composable மூலம் API சுருக்கப்படுவதால், உண்மையான பின்தளத்திற்கு மாறுவதற்கு குறைந்தபட்ச உள்ளமைவு தேவைப்படுகிறது.
நவீன நுக்ஸ்ட் 3 கட்டிடக்கலை
இந்த திட்டம் பரிந்துரைக்கப்பட்ட Nuxt 3 மேம்பாட்டு முறைகளைப் பின்பற்றுகிறது, இது கட்டமைப்பைக் கற்றுக்கொள்ளும் டெவலப்பர்களுக்கு ஒரு சிறந்த குறிப்பாக அமைகிறது.
முக்கியமான கட்டிடக்கலை அம்சங்கள் பின்வருமாறு:
தானாக இறக்குமதி செய்யப்பட்ட கூறுகள் மற்றும் தொகுக்கக்கூடியவை
டைப்ஸ்கிரிப்ட்-முதல் மேம்பாடு
தொகுக்கக்கூடிய API சேவை அடுக்கு
மட்டு கோப்புறை அமைப்பு
SEO மெட்டா உள்ளமைவு
பக்க மாற்றங்கள்
பயன்பாடு மேலும் பயன்படுத்துகிறது:
useSeoMeta()SEO குறிச்சொற்களுக்குuseColorMode()தீம் மாற்றத்திற்குuseRoute()மற்றும் பிற உள்ளமைக்கப்பட்ட Nuxt இசையமைப்புகள்
<class="ac-h3"h3>டார்க் பயன்முறை மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பு
UI ஆனது இருண்ட மற்றும் ஒளி தீம்களைப் பயன்படுத்தி ஆதரிக்கிறது @nuxtjs/color-mode.
அம்சங்கள் பின்வருமாறு:
தானியங்கி சிஸ்டம் தீம் கண்டறிதல்
கைமுறை தீம் நிலைமாற்றம்
டெயில்விண்ட் CSS ஸ்டைலிங்
மொபைலுக்கு ஏற்றவாறு செயல்படும் முதன்மையான அமைப்பு
இது வலைப்பதிவு தடையின்றி செயல்படுவதை உறுதி செய்கிறது:
டெஸ்க்டாப்
மாத்திரைகள்
மொபைல் சாதனங்கள்
P class="ac-h3"ஒவ்வொரு வலைப்பதிவு அம்சங்கள்
வலைப்பதிவு வார்ப்புரு, தயாரிப்பு வலைப்பதிவு தளங்களில் பொதுவாகக் காணப்படும் பல மேம்பட்ட அம்சங்களை உள்ளடக்கியது.
இவற்றில் அடங்கும்:
மார்க் டவுன் தலைப்புகளிலிருந்து உருவாக்கப்பட்ட உள்ளடக்க அட்டவணை
தொடர்புடைய இடுகைகள் பரிந்துரைகள்
மதிப்பிடப்பட்ட வாசிப்பு நேரம்
வகை வடிகட்டுதல்
முழு உரை தேடல் முடக்கப்பட்டது
ஸ்மார்ட் பக்கமாக்கல்
டோஸ்ட் அறிவிப்புகள்
எலும்புக்கூடு கூறுகளை ஏற்றுகிறது
அனிமேஷன் செய்யப்பட்ட பக்க மாற்றங்கள்
இந்த அம்சங்கள் வலைப்பதிவு பார்வையாளர்களுக்கு நவீன வாசிப்பு அனுபவத்தை உருவாக்குகின்றன.
தொழில்நுட்ப அடுக்கு
இந்த திட்டம் நவீன முன்பக்க அடுக்கைப் பயன்படுத்தி கட்டமைக்கப்பட்டுள்ளது.
| அடுக்கு | தொழில்நுட்பம் |
|---|---|
| கட்டமைப்பு | நக்ஸ்ட் 3.15 |
| UI நூலகம் | பார்வை 3.5 |
| மொழி | டைப்ஸ்கிரிப்ட் 5.7 |
| ஸ்டைலிங் | டெயில்விண்ட் CSS 3.4 |
| மாநில மேலாண்மை | பினியா |
| HTTP கிளையன்ட் | ஆக்சியோஸ் |
| சின்னங்கள் | @nuxt/icon வழியாக ஐகானைஃபை செய்யவும் |
| தீம் | @nuxtjs/வண்ண-முறை |
| லைனிங் | ESLint தமிழ் in இல் |
| வடிவமைத்தல் | அழகானது |
இந்த அடுக்கு செயல்திறன், அளவிடுதல் மற்றும் பராமரிக்கும் தன்மையை வழங்குகிறது .
திட்ட அமைப்பு கண்ணோட்டம்
இந்தக் களஞ்சியம் ஒரு சுத்தமான மற்றும் ஒழுங்கமைக்கப்பட்ட கட்டமைப்பைப் பின்பற்றுகிறது.
முக்கியமான கோப்பகங்கள் பின்வருமாறு:
பக்கங்கள்
அடைவு pagesமுக்கிய வழிகளை வரையறுக்கிறது:
index.vue– முகப்புப்பக்கம்about.vue– பக்கம் பற்றிcontact.vue– தொடர்பு படிவம்search.vue– தேடல் இடைமுகம்blog/[slug].vue– வலைப்பதிவு இடுகை பக்கம்blog/category/[slug].vue– வகை பக்கம்
Com வகுப்பு="ac-h3" கூறுகள்
மீண்டும் பயன்படுத்தக்கூடிய UI கூறுகள் தருக்க வகைகளாக தொகுக்கப்பட்டுள்ளன:
layout– தலைப்பு மற்றும் அடிக்குறிப்புcommon- பக்கமாக்கல், எலும்புக்கூடு ஏற்றிகள், டோஸ்ட் அறிவிப்புகள்blog– அஞ்சல் அட்டைகள் மற்றும் உள்ளடக்க அட்டவணை போன்ற வலைப்பதிவு சார்ந்த கூறுகள்
Comp class="ac-h3"osables
தொகுக்கக்கூடிய கோப்பகத்தில் மீண்டும் பயன்படுத்தக்கூடிய தர்க்கம் உள்ளது.
முக்கியமான கலவைகள் பின்வருமாறு:
useApi()– தட்டச்சு செய்யப்பட்ட API சேவை அடுக்குuseDebounce()– எதிர்வினை மதிப்புகளை நீக்குதல்
<class="ac-h3"h3> போலி API அடுக்கு
போலி அமைப்பு கோப்பகத்தின் உள்ளே அமைந்துள்ளது mocks.
இது கொண்டுள்ளது:
handlers.ts– API கோரிக்கை இடைமறிப்பாளர்கள்posts.ts– மாதிரி வலைப்பதிவு இடுகைகள்authors.ts– ஆசிரியர் தரவுcategories.ts– வகை தரவு
இந்த அமைப்பு திட்டத்தை மாற்றியமைத்து நீட்டிக்க எளிதாக்குகிறது .
திட்டத்தை எவ்வாறு நிறுவுவது மற்றும் இயக்குவது
திட்டத்தை உள்ளூரில் இயக்க இந்தப் படிகளைப் பின்பற்றவும்.
முன்கூட்டிய வகுப்பு="ac-h3"uisites
உனக்கு தேவை:
Node.js 18.17 அல்லது அதற்குப் பிறகு
npm, நூல், அல்லது pnpm
களஞ்சியத்தை குளோன் செய்யவும்
git clone https://github.com/bfotool/nuxtjs-base-blog.git
cd nuxtjs-base-blog
class="ac-h3"சார்புகளை நிறுவு
npm install
மேம்பாட்டு சேவையகத்தைத் தொடங்கு
npm run dev
பின்னர் உங்கள் உலாவியை இங்கு திறக்கவும்:
http://localhost:3000
கோப்புகள் மாறும்போது Nuxt மேம்பாட்டு சேவையகம் தானாகவே மீண்டும் ஏற்றப்படும்.
மாக் API இலிருந்து உண்மையான API க்கு மாறுதல்
இந்த திட்டத்தில் சிறந்த வடிவமைப்பு முடிவுகளில் ஒன்று எளிதான API சுவிட்ச் ஆகும் .
உண்மையான பின்தளத்தை இணைக்க:
சூழல் மாறியை அமைக்கவும்:
NUXT_PUBLIC_USE_MOCK_API=false
உங்கள் API அடிப்படை URL ஐ உள்ளமைக்கவும்:
NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com
உங்கள் பின்தள பதில் இதில் வரையறுக்கப்பட்ட வகைகளுடன் பொருந்துவதை உறுதிசெய்யவும்:
types/index.ts
கூடுதல் குறியீடு மாற்றங்கள் தேவையில்லை.
வலைப்பதிவைத் தனிப்பயனாக்குதல்
டெவலப்பர்கள் டெம்ப்ளேட்டை எளிதாகத் தனிப்பயனாக்கலாம்.
தீம் அல்லது ஸ்டைல்களை மாற்று
டெயில்விண்ட் உள்ளமைவைத் திருத்தவும்:
tailwind.config.ts
உலகளாவிய பாணிகள் இங்கு அமைந்துள்ளன:
assets/css/main.css
வலைப்பதிவு உள்ளடக்கத்தை மாற்று
போலி உள்ளடக்கத்தை இதில் புதுப்பிக்கலாம்:
mocks/posts.ts
mocks/categories.ts
mocks/authors.ts
இது வெவ்வேறு வலைப்பதிவு தரவுத்தொகுப்புகளை விரைவாக முன்மாதிரி செய்ய உங்களை அனுமதிக்கிறது.
பயன்பாட்டு அமைப்புகளைப் புதுப்பிக்கவும்
வழிசெலுத்தல், பிராண்டிங் மற்றும் சமூக இணைப்புகள் போன்ற பயன்பாட்டு மாறிலிகள் இதில் சேமிக்கப்படுகின்றன:
utils/constants.ts
இந்த நக்ஸ்ட் வலைப்பதிவு வார்ப்புருவை ஏன் பயன்படுத்த வேண்டும்?
இந்த திட்டம் டெவலப்பர்களுக்கு ஒரு சிறந்த தேர்வாகும், ஏனெனில் இது வழங்குகிறது:
சுத்தமான நுக்ஸ்ட் 3 கட்டமைப்பு
உற்பத்தி நிலை குறியீட்டு அமைப்பு
முன்பக்க மேம்பாட்டிற்கான போலி API
டெயில்விண்ட் CSS உடன் நவீன UI
SEO-தயார் பக்கங்கள்
உண்மையான APIகளுடன் எளிதான ஒருங்கிணைப்பு
இது ஒரு கற்றல் திட்டமாகவும், தயாரிப்புக்குத் தயாரான வலைப்பதிவு அடித்தளமாகவும் செயல்படுகிறது .
கிட்ஹப் களஞ்சியம்
முழு மூலக் குறியீட்டையும் இங்கே ஆராயலாம்: 👉 https://github.com/bfotool/nuxtjs-base-blog
இந்த திட்டம் உங்களுக்கு பயனுள்ளதாக இருந்தால், களஞ்சியத்தை நட்சத்திரமிட்டு மேம்பாடுகளுக்கு பங்களிப்பதைக் கருத்தில் கொள்ளுங்கள்.