close

ਨਕਸ 3 ਬੇਸ ਬਲੌਗ ਟੈਂਪਲੇਟ- Bfotool Nuxtjs ਬੇਸ ਬਲੌਗ(ਵਿਊ 3 + ਟਾਈਪਸਕ੍ਰਿਪਟ + ਟੇਲਵਿੰਡ)

ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਆਧੁਨਿਕ Nuxt 3 ਬਲੌਗ ਸਟਾਰਟਰ ਟੈਂਪਲੇਟ ਦੀ ਭਾਲ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ Bfotool Nuxtjs ਬੇਸ ਬਲੌਗ ਇੱਕ ਸ਼ਾਨਦਾਰ ਹੱਲ ਹੈ। ਇਹ Nuxt 3, Vue 3, TypeScript, ਅਤੇ Tailwind CSS ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਜਸ਼ੀਲ ਬਲੌਗ ਐਪਲੀਕੇਸ਼ਨ ਹੈ, ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਵਿਕਾਸ ਦੌਰਾਨ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਇੱਕ ਪੇਸ਼ੇਵਰ ਬਲੌਗ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।

ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ Axios ਇੰਟਰਸੈਪਟਰਾਂ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਇੱਕ ਨਕਲੀ API ਪਰਤ ਸ਼ਾਮਲ ਹੈ, ਜੋ ਇੱਕ ਅਸਲੀ REST API ਦੀ ਨਕਲ ਕਰਦੀ ਹੈ। ਇਹ ਇਸਨੂੰ Nuxt ਆਰਕੀਟੈਕਚਰ ਸਿੱਖਣ, ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਐਪਲੀਕੇਸ਼ਨਾਂ, ਜਾਂ ਉਤਪਾਦਨ-ਤਿਆਰ ਬਲੌਗ ਪਲੇਟਫਾਰਮ ਬਣਾਉਣ ਲਈ ਸੰਪੂਰਨ ਬਣਾਉਂਦਾ ਹੈ।

ਤੁਸੀਂ ਇੱਥੇ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਪੜਚੋਲ ਕਰ ਸਕਦੇ ਹੋ: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs ਬੇਸ ਬਲੌਗ ਕੀ ਹੈ?

Bfotool Nuxtjs ਬੇਸ ਬਲੌਗ ਇੱਕ ਆਧੁਨਿਕ ਬਲੌਗ ਐਪਲੀਕੇਸ਼ਨ ਟੈਂਪਲੇਟ ਹੈ ਜੋ ਨਵੀਨਤਮ ਫਰੰਟਐਂਡ ਤਕਨਾਲੋਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਪੋਸਟਾਂ, ਸ਼੍ਰੇਣੀਆਂ, ਖੋਜ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸੰਪਰਕ ਪੰਨਿਆਂ ਦੇ ਨਾਲ ਇੱਕ ਸੰਪੂਰਨ ਬਲੌਗਿੰਗ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਇਹ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਸਾਫ਼ 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

ਕਿਉਂਕਿ API ਨੂੰ useApi ਕੰਪੋਜ਼ੇਬਲ ਰਾਹੀਂ ਐਬਸਟਰੈਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਇੱਕ ਅਸਲੀ ਬੈਕਐਂਡ ਤੇ ਜਾਣ ਲਈ ਘੱਟੋ-ਘੱਟ ਸੰਰਚਨਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਆਧੁਨਿਕ ਨਕਸ 3 ਆਰਕੀਟੈਕਚਰ

ਇਹ ਪ੍ਰੋਜੈਕਟ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੇ Nuxt 3 ਵਿਕਾਸ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ, ਜੋ ਇਸਨੂੰ ਫਰੇਮਵਰਕ ਸਿੱਖਣ ਵਾਲੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇੱਕ ਵਧੀਆ ਹਵਾਲਾ ਬਣਾਉਂਦਾ ਹੈ।

ਮਹੱਤਵਪੂਰਨ ਆਰਕੀਟੈਕਚਰਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  • ਆਟੋ-ਆਯਾਤ ਕੀਤੇ ਹਿੱਸੇ ਅਤੇ ਕੰਪੋਜ਼ੇਬਲ

  • ਟਾਈਪਸਕ੍ਰਿਪਟ-ਪਹਿਲਾ ਵਿਕਾਸ

  • ਕੰਪੋਜ਼ੇਬਲ API ਸੇਵਾ ਪਰਤ

  • ਮਾਡਯੂਲਰ ਫੋਲਡਰ ਬਣਤਰ

  • SEO ਮੈਟਾ ਸੰਰਚਨਾ

  • ਪੰਨਾ ਪਰਿਵਰਤਨ

ਐਪਲੀਕੇਸ਼ਨ ਇਹ ਵੀ ਵਰਤਦੀ ਹੈ:

  • useSeoMeta()SEO ਟੈਗਾਂ ਲਈ

  • useColorMode()ਥੀਮ ਬਦਲਣ ਲਈ

  • useRoute()ਅਤੇ ਹੋਰ ਬਿਲਟ-ਇਨ ਨਕਸਟ ਕੰਪੋਜ਼ੇਬਲ

<class="ac-h3"h3>ਡਾਰਕ ਮੋਡ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ

UI ਡਾਰਕ ਅਤੇ ਲਾਈਟ ਥੀਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪੋਰਟ ਕਰਦਾ ਹੈ @nuxtjs/color-mode।

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  • ਆਟੋਮੈਟਿਕ ਸਿਸਟਮ ਥੀਮ ਖੋਜ

  • ਮੈਨੁਅਲ ਥੀਮ ਟੌਗਲ

  • ਟੇਲਵਿੰਡ CSS ਸਟਾਈਲਿੰਗ

  • ਮੋਬਾਈਲ-ਪਹਿਲਾ ਜਵਾਬਦੇਹ ਲੇਆਉਟ

ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਬਲੌਗ ਇਹਨਾਂ ਵਿੱਚ ਸਹਿਜੇ ਹੀ ਕੰਮ ਕਰਦਾ ਹੈ:

  • ਡੈਸਕਟਾਪ

  • ਗੋਲੀਆਂ

  • ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ

P class="ac-h3"owerful ਬਲੌਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਬਲੌਗ ਟੈਂਪਲੇਟ ਵਿੱਚ ਕਈ ਉੱਨਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਉਤਪਾਦਨ ਬਲੌਗ ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਪਾਈਆਂ ਜਾਂਦੀਆਂ ਹਨ।

ਇਹਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  • ਮਾਰਕਡਾਊਨ ਸਿਰਲੇਖਾਂ ਤੋਂ ਤਿਆਰ ਕੀਤੀ ਗਈ ਸਮੱਗਰੀ ਦੀ ਸਾਰਣੀ

  • ਸੰਬੰਧਿਤ ਪੋਸਟਾਂ ਦੇ ਸੁਝਾਅ

  • ਪੜ੍ਹਨ ਦਾ ਅਨੁਮਾਨਿਤ ਸਮਾਂ

  • ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ

  • ਪੂਰੀ-ਲਿਖਤ ਖੋਜ ਨੂੰ ਰੱਦ ਕੀਤਾ ਗਿਆ

  • ਸਮਾਰਟ ਪੰਨਾਕਰਨ

  • ਟੋਸਟ ਸੂਚਨਾਵਾਂ

  • ਸਕਲੀਟਨ ਕੰਪੋਨੈਂਟ ਲੋਡ ਕੀਤੇ ਜਾ ਰਹੇ ਹਨ

  • ਐਨੀਮੇਟਡ ਪੰਨਾ ਪਰਿਵਰਤਨ

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਲੌਗ ਵਿਜ਼ਟਰਾਂ ਲਈ ਇੱਕ ਆਧੁਨਿਕ ਪੜ੍ਹਨ ਦਾ ਅਨੁਭਵ ਬਣਾਉਂਦੀਆਂ ਹਨ।

ਤਕਨਾਲੋਜੀ ਸਟੈਕ

ਇਹ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਹੈ।

ਪਰਤ ਤਕਨਾਲੋਜੀ
ਫਰੇਮਵਰਕ ਨੈਕਸਟ 3.15
UI ਲਾਇਬ੍ਰੇਰੀ ਵਿਊ 3.5
ਭਾਸ਼ਾ ਟਾਈਪਸਕ੍ਰਿਪਟ 5.7
ਸਟਾਈਲਿੰਗ ਟੇਲਵਿੰਡ CSS 3.4
ਰਾਜ ਪ੍ਰਬੰਧਨ ਪਿਨੀਆ
HTTP ਕਲਾਇੰਟ ਐਕਸੀਓਸ
ਆਈਕਾਨ @nuxt/icon ਰਾਹੀਂ ਆਈਕੋਨਾਈਫਾਈ ਕਰੋ
ਥੀਮ @nuxtjs/ਰੰਗ-ਮੋਡ
ਲਿੰਟਿੰਗ ਈਐਸਲਿੰਟ
ਫਾਰਮੈਟਿੰਗ ਪ੍ਰਿਟੀਅਰ

ਇਹ ਸਟੈਕ ਪ੍ਰਦਰਸ਼ਨ, ਸਕੇਲੇਬਿਲਟੀ, ਅਤੇ ਰੱਖ-ਰਖਾਅਯੋਗਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ।

ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਦੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਰਿਪੋਜ਼ਟਰੀ ਇੱਕ ਸਾਫ਼ ਅਤੇ ਸੰਗਠਿਤ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ।

ਮਹੱਤਵਪੂਰਨ ਡਾਇਰੈਕਟਰੀਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

ਪੰਨੇ

ਡਾਇਰੈਕਟਰੀ pagesਮੁੱਖ ਰੂਟਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ:

  • index.vue- ਹੋਮਪੇਜ

  • about.vue- ਪੰਨੇ ਬਾਰੇ

  • contact.vue- ਸੰਪਰਕ ਫਾਰਮ

  • search.vue- ਖੋਜ ਇੰਟਰਫੇਸ

  • blog/[slug].vue- ਬਲੌਗ ਪੋਸਟ ਪੇਜ

  • blog/category/[slug].vue- ਸ਼੍ਰੇਣੀ ਪੰਨਾ

ਕਾਮ ਕਲਾਸ="ac-h3" ਭਾਗ

ਮੁੜ ਵਰਤੋਂ ਯੋਗ UI ਭਾਗਾਂ ਨੂੰ ਲਾਜ਼ੀਕਲ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਵੰਡਿਆ ਗਿਆ ਹੈ:

  • layout- ਹੈਡਰ ਅਤੇ ਫੁੱਟਰ

  • common- ਪੰਨਾਬੰਦੀ, ਪਿੰਜਰ ਲੋਡਰ, ਟੋਸਟ ਸੂਚਨਾਵਾਂ

  • blog– ਬਲੌਗ-ਵਿਸ਼ੇਸ਼ ਹਿੱਸੇ ਜਿਵੇਂ ਕਿ ਪੋਸਟ ਕਾਰਡ ਅਤੇ ਸਮੱਗਰੀ ਦੀ ਸਾਰਣੀ

ਕੰਪ ਕਲਾਸ="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

ਫਾਈਲਾਂ ਬਦਲਣ 'ਤੇ ਨਕਸਟ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਆਪਣੇ ਆਪ ਰੀਲੋਡ ਹੋ ਜਾਵੇਗਾ।

ਮੌਕ API ਤੋਂ ਰੀਅਲ API ਵਿੱਚ ਬਦਲਣਾ

ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਡਿਜ਼ਾਈਨ ਫੈਸਲਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਆਸਾਨ API ਸਵਿੱਚ ਹੈ ।

ਇੱਕ ਅਸਲੀ ਬੈਕਐਂਡ ਜੋੜਨ ਲਈ:

  1. ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਸੈੱਟ ਕਰੋ:

NUXT_PUBLIC_USE_MOCK_API=false

  1. ਆਪਣੇ API ਬੇਸ URL ਨੂੰ ਕੌਂਫਿਗਰ ਕਰੋ:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

  1. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ ਬੈਕਐਂਡ ਜਵਾਬ ਇਹਨਾਂ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕਿਸਮਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ:

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

ਜੇਕਰ ਤੁਹਾਨੂੰ ਪ੍ਰੋਜੈਕਟ ਲਾਭਦਾਇਕ ਲੱਗਦਾ ਹੈ, ਤਾਂ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਸਟਾਰ ਕਰਨ ਅਤੇ ਸੁਧਾਰਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।