Evan You، سازنده Vue اخیرا با انتشار VuePress، یک مولد سایت استاتیک بر پایه Vue سر و صدای زیادی راه انداخت.
یک وبسایت استاتیک، وبسایتی است که با HTML خالی نوشته شده است و آن HTML به همان صورت که هست، به کاربر تحویل داده می‌شود. یک مولد سایت استاتیک، فایل‌های منبع (markdown، فایل‌های Vue یا هر چیز دیگری) را می‌‌گیرد و به صورت دینامیک یک وبسایت HTML کاملا استاتیک را تولید می‌کند. این کار می‌تواند به شما کمک کند تا به شدت SEO خود را ارتقا دهید.
اگر با Nuxt.js آشنا باشید، شاید از قبل بدانید که امکانی به نام nuxt generate را به همراه دارد که شما را قادر می‌سازد تا با ایجاد هر مسیر به عنوان یک فایل HTML، یک نسخه استاتیک از برنامه خود بسازید.
شاید بپرسید: «VuePress چگونه از Nuxt متفاوت است؟ چه کاری می‌توان با VuePress انجام داد که با Nuxt نمی‌توان؟ آیا می‌توانم از VuePress برای ساخت یک بلاگ استفاده کنم؟»
در این پست، بزرگ‌ترین تفاوت میان این دو، و منفعت‌های اصلی در استفاده از VuePress را بررسی خواهیم کرد.
برنامه‌ها در مقابل سندنگاری
اول و مهم‌تر از همه این که Nuxt یک فریم‌وورک سطح بالاتر است، که هدفش ساده‌سازی توسعه برنامه‌های JavaScript جهانی می‌باشد. این فریم‌وورک امکانی به نام nuxt generate دارد که شما را قادر می‌سازد تا با ایجاد هر مسیر به عنوان یک فایل HTML، یک نسخه استاتیک از برنامه خود بسازید.
در سمت دیگر VuePress، یک مولد سایت استاتیک است که ساخت وبسایت‌های سندنگاری، مانند اسناد Vue.js را ساده‌تر می‌کنند. VuePress از امکان nuxt generate در Nuxt، در کنار برخی فریم‌وورک‌های مشابه دیگر مانند Gatsby.js، یک مولد سایت استاتیک برای React الهام گرفته شده بود.
هر کاری که بتوانید با VuePress انجام دهید را همچنین میتوانید با Nuxt انجام دهید. شما می‌تواند VuePress را به عنوان یک زیر مجموعه از کاری که Nuxt قادر به انجام آن است، به همراه امکاناتی که مدیریت ساخت حجم زیادی از محتویات را ساده‌تر می‌کنند، در نظر بگیرید.
در اینجا سه روش را مشاهده می‌‌کنید، که VuePress با بکارگیری آن‌ها، نوشتن اسناد پر از محتویات را ساده‌تر می‌کند.
۱. از markdown برای محتویات استفاده کنید
با استفاده از VuePress شما میتوانید به طور پیشفرض یک تلفیق بومی از فایل‌های markdown خود به دست بیاورید. به زبانی دیگر، شما میتوانید یک فایل markdown را بنویسید و سپس آن را بدون هیچ گونه راه‌اندازی اضافی پلاگین‌های تبدیل کردن، به HTML تبدیل کنید.
Nuxt به طور پیشفرض فایل‌های markdown را کمپایل نمی‌کند؛ پس در به کار گرفتن تلفیقات markdown مقداری راه‌اندازی بیشتر مورد نیاز است.
برای مثال Nuxt از خودش برای اسناد خود استفاده می‌کند. آن‌ها همچنین از markdown برای محتویات خود استفاده می‌کنند، اما آن‌ها مجبور بودند که از یک سرور API میانجی برای ترجمه فایل‌های markdown خود به JSON استفاده کنند، تا وبسایتشان بتواند آن را هضم کند. برداشتن تمام این قدم‌ها می‌توانند با استفاده از VuePress جلوگیری شوند.
از کامپوننت‌های Vue داخل markdown خود استفاده کنید
یک منفعت دیگر در VuePress این است که شما را قادر می‌سازد تا از کامپوننت‌های Vue مستقیما در فایل‌های markdown خود استفاده کنید، و به این صورت آن‌ها را راه‌اندازی می‌کند. نحوه کار آن به این صورت است که هر فایل markdown اول به HTML کمپایل می‌شود و سپس به عنوان یک کامپوننت Vue به vue-loader منتقل می‌شود. این یعنی شما میتوانید از قالب‌ها و کامپوننت‌های Vue در متن خود استفاده کنید.
# Blogging Like a Hacker
**My Component:**
<Stats :start="3"></Stats>
<p v-for="n of 15">{{ n }}</p>پیش گفتار YAML در فایل‌های markdown شما
شما همچنین میتوانید YAML، یک زبان ترتیب بندی داده که به صورت رایج برای پیکربندی استفاده می‌شود را به عنوان یک مقدمه در بالای فایل‌های markdown خود قرار دهید و سپس VuePress به طور خودکار آن را برای شما تفسیر خواهد کرد.
---
title: Blogging Like a Hacker
lang: en-US
---
# Blogging Like a Hacker
**My Component:**شما همچنین میتوانید از مقدمه YAML برای راه‌اندازی عنوان‌ها و برخی تگ‌های دیگر مربوط به SEO در صفحات تکی خود استفاده کنید.
۲. پشتیبانی چند زبانه
VuePress همچنین به طور پیشفرض با پشتیبانی i18n راه‌اندازی شده است تا وبسایت سندنگاری شما بتواند تنوع بزرگی از زبان‌‌های مختلف را پشتیبانی کند. برای مثال خود وبسایت VuePress به همراه یک نسخه چینی راه‌اندازی شده است.
شما میتوانید با اضافه کردن آبجکت locale در آبجکت themeConfig داخل فایل config.js مربوط به پروژه VuePress خود، localeهای زبان بیشتر را اضافه کنید.
locales: {
'/': {
label: 'English',
selectText: 'Languages',
editLinkText: 'Edit this page on GitHub',
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Config Reference',
link: '/config/'
},
{
text: 'Default Theme Config',
link: '/default-theme-config/'
}
],
sidebar: {
'/guide/': genSidebarConfig('Guide')
}
},
'/zh/': {
label: '简体中文',
selectText: '选择语言',
editLinkText: '在 GitHub 上编辑此页',
nav: [
{
text: '指南',
link: '/zh/guide/',
},
{
text: '配置',
link: '/zh/config/'
},
{
text: '默认主题',
link: '/zh/default-theme-config/'
}
],
sidebar: {
'/zh/guide/': genSidebarConfig('指南')
}
}
}برای دیدن مثال کامل، فایل config.js مربوط به وبسایت سندنگاری VuePress را بر روی گیت‌هاب مشاهده نمایید.
۳. تم پیشفرض دارای تمامی امکانات
VuePress یک تم پیشفرض به همراه دارد، که طراحی شده است تا به صورتی نرم به اسناد فنی رسیدگی کند. این تم یک نوار جانبی که تمام صفحات شما در آن لیست شده‌اند و یک نوار جهت‌یابی به همراه جستجو به همراه تمام امکانات به شما می‌دهد
برای دیدن گزینه‌‌های مختلفی که میتوانید با تم پیشفرض VuePress سفارشی‌سازی کنید، بر روی این لینک کلیک کنید.
آیا می‌توانم با استفاده از VuePress یک بلاگ بسازم؟
بله، از نظر فنی میتوانید؛ اما در حال حاضر (سال ۲۰۱۸) این ابزار تمام امکاناتی که فریم‌وورک‌های بلاگ‌‌سازی استاتیک دیگر مانند Jekyll دارند را به همراه ندارد. برای تازه‌کاران، این ابزار یک سیستم تگ کردن و یک قالب پیشفرض بلاگ دوست را کم دارد.
بلاگ دوستانه کردن VuePress در دست کار است. پشتیبانی بلاگ یک فعالیت تحت بحث بوده، و طبق گفته Evan You هدف اصلی این است که API هسته VuePress را به نقطه‌ای برساند که جامعه مربوطه بتواند به آن وارد شده، و شروع به اضافه کردن امکاناتی برای پشتیبانی بلاگ نماید.
پس چه زمانی باید از VuePress استفاده کنم؟
بهترین زمان برای استفاده از VuePress، وقتی است که شما در حال ساخت یک وبسایت سندنگاری هستید که از markdown برای محتویات استفاده می‌کند. اگر از قبل در حال استفاده از Nuxt برای چیز مشابهی هستید، در نظر گرفتن VuePress بسیار مناسب است.
مقاله مرتبط:
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید