محتوا
- 01. وابستگی ها را نصب کنید
- 02. ساخت سرور
- 03. برنامه را نصب کنید
- 04. سرور توسعه را راه اندازی کنید
- 05. یک مسیر سرور ایجاد کنید
- 06. ارسال پست های وبلاگ
- 07. صفحه فهرست ایجاد کنید
- 08. واکشی داده های ارسال وبلاگ
- 09. نمایش خلاصه پست ها
- 10. ظرف را سبک کنید
- 11. یک اسلات تعریف کنید>
- 12. نکات مربوط به PostSummary را در معرض دید قرار دهید
- 13. نمایش خلاصه پست وبلاگ
- 14. پیوند به پست وبلاگ
- 15. پست را با اسلاگ واکشی کنید
- 16. اگر پست پیدا نشد خطا می کند
- 17. نمایش پست وبلاگ
- 18- به جای آن HTML را نمایش دهید
- 19. عنوان صفحه> مقدار را تنظیم کنید
- 20. به روزرسانی عنوان>
- 21. هدر دائمی اضافه کنید
Sapper چارچوبی است که در بالای Svelte ساخته شده است. این تمرکز بر سرعت خارج از جعبه با ارائه سرور ، بارگیری مجدد لینک و توانایی ایجاد کارکنان خدمات است. در ترکیب با Svelte ، نتیجه نهایی یک سایت بسیار سریع قابل رعد و برق با یک ردپای کوچک است.
در این آموزش ، ما از Sapper برای ساختن یک سایت سبک وبلاگ نویسی با استفاده از م Sلفه های Svelte استفاده خواهیم کرد (برای برخی از نکات فنی کمتر درباره وبلاگ نویسی به نحوه شروع ارسال یک وبلاگ مراجعه کنید). Svelte یک چارچوب با اختلاف است. این کد را در زمان کامپایل تجزیه و تحلیل می کند و مجموعه ای از ماژول ها را در JavaScript وانیلی ایجاد می کند ، که از نیاز به زمان اجرا جلوگیری می کند. اگر در زمینه طرح بندی به کمک بیشتری نیاز دارید ، پست ما را در مورد چگونگی دستیابی به آرایش کامل وب سایت بررسی کنید. یا برای گزینه های دیگر ، به این سازندگان برتر وب سایت مراجعه کنید و به یاد داشته باشید ، شما همچنین باید خدمات میزبانی وب خود را به صورت on-point انجام دهید.
فایلهای آموزشی در FileSilo را از اینجا بارگیری کنید
01. وابستگی ها را نصب کنید
در مرحله اول ، ما باید وابستگی ها را بارگیری و نصب کنیم. این برای کار به Svelte متکی است و برای ساخت سرور به چارچوب دیگری نیاز دارد ، اما بقیه موارد به برنامه ساخته شده بستگی دارد. در این حالت ، ما به چند بسته برای کمک به استخراج پرونده های Markdown بعداً نیاز داریم.
پرونده های آموزش را بارگیری کنید ، آنها را در خط فرمان پیدا کنید و وابستگی ها را نصب کنید.
02. ساخت سرور
Sapper در دو قسمت ساخته شده است - چارچوب سمت مشتری و رندر آن چارچوب در سمت سرور. این کمک می کند که افزایش سرعت اضافی برای کسانی که در شبکه های کندتر هستند افزایش یابد. این با استفاده از Node ساخته شده است ، که به میان افزار Sapper اجازه می دهد تا تمام کارهای سنگین را برای ما انجام دهد.
server.js را باز کرده و سرور را با Express ایجاد کنید. با استفاده از توصیه های آنها ، ما شامل می شویم فشرده سازی برای کوچک کردن پرونده هایی که ارسال می کنیم و sirv برای سرویس دادن به پرونده های ثابت
express () .use (فشرده سازی ({آستانه: 0}) ، sirv ("استاتیک" ، {dev}) ، sapper.middleware ()). گوش دادن (PORT) ؛
03. برنامه را نصب کنید
در سمت مشتری ، باید به Sapper بگوییم که کجا برنامه را نصب کند. این شبیه React DOM است ارائه دادن یا Vue است $ سوار مواد و روش ها. در داخل client.js ، Sapper را شروع کرده و آن را به ریشه نصب کنید div> عنصر این عنصر در پرونده الگو گنجانده شده است که بعداً به آن خواهیم رسید.
وارد کردن * به عنوان شناور از "@ sapper / app" ؛ sapper.start ({target: document.getElementById ("ریشه")})؛
04. سرور توسعه را راه اندازی کنید
با راه اندازی سرورهای اصلی و پرونده های سرویس گیرنده ، می توانیم سرور توسعه را راه اندازی کنیم. این کار باعث ایجاد پرونده های سرور ، سرویس گیرنده و سرویس دهنده می شود و به طور پیش فرض از پورت 3000 شروع می شود. هر وقت فایلی تغییر کند ، بخشی از برنامه را که تغییر داده دوباره ایجاد می کند.
سرور را روی خط فرمان اجرا کنید. هنگام توسعه سایت ، این پنجره را باز نگه دارید.
05. یک مسیر سرور ایجاد کنید
هر چیزی که در فهرست راهنمای مسیرها قرار دارد ، به یک مسیر برای برنامه تبدیل می شود. پرونده ها با .js پسوند به آنچه مسیرهای سرور نامیده می شود تبدیل خواهد شد. این مسیرها فاقد رابط کاربر هستند ، اما در عوض توسط برنامه درخواست می شود داده ها را واکشی کند. در مورد ما ، از آنها برای بارگذاری پست های وبلاگ استفاده خواهیم کرد.
route / blog / index.json.js پرونده ایجاد خواهد کرد /blog.json نقطه پایانی بر روی سرور ما. پست های وبلاگ را وارد کنید و از آنها مقداری JSON ایجاد کنید.
وارد کردن پست از "./_posts.js" ؛ محتوای ساختار = JSON.stringify (posts.map (post => ({نویسنده: post.author ، تصویر: post.image ، عنوان: post.title ، حلزون حرکت: post.slug})))؛
06. ارسال پست های وبلاگ
مسیرهای سرور توابع صادراتی متناسب با روشهای HTTP را دنبال می کند. به عنوان مثال ، برای پاسخگویی به درخواست GET ، تابعی به نام صادر می کنیم گرفتن از پرونده مسیر سرور. ایجاد یک گرفتن عملکردی که با داده هایی که در مرحله قبل در قالب JSON جمع آوری کردیم پاسخ می دهد. باز کن http: // localhost: 3000 / blog.json در مرورگر و بررسی ارسالهای از طریق
تابع صادرات get (req، res) {res.writeHead (200، {"Content-Type": "application / json"})؛ res.end (مطالب) }
07. صفحه فهرست ایجاد کنید
صفحات موجود در Sapper اجزای منظم Svelte هستند. هر جز component یک فایل واحد با یک است .سولت پسوند ، و شامل تمام منطق و سبک مدیریت خود است. هر جاوا اسکریپت که این م componentلفه برای اجرا نیاز دارد ، در داخل یک a زندگی می کند اسکریپت> برچسب - درست مثل هر صفحه HTML.
داخل مسیرها / index.svelte، چند م Sلفه دیگر Svelte را وارد کنید که می توانیم برای ساخت این صفحه استفاده کنیم. صادرات نوشته ها متغیری که بعداً جمع خواهیم کرد.
script> Container را از "../components/Container.svelte" وارد کنید؛ وارد کردن پست خلاصه از “../components/PostSummary.svelte”؛ صادر کردن اجازه ارسال؛ / اسکریپت>
08. واکشی داده های ارسال وبلاگ
با راه اندازی صفحه ، می توانیم پست های وبلاگ را وارد کنیم (ممکن است بخواهید از آنها در فضای ذخیره سازی ابر پشتیبان تهیه کنید). به محض بارگیری صفحه باید این کار را انجام دهیم. برای اینکه سرور از این موضوع مطلع باشد و سپس هنگام ارائه صفحه ، این داده ها را درخواست کند ، باید به صورت جداگانه در بیاید. متن متن = "ماژول"> برچسب
در سرور ، Sapper به دنبال a پیش بارگیری تابع ، و منتظر بمانید تا قبل از نمایش صفحه کامل شود. در اینجا ، ما در حال جمع کردن هستیم نوشته ها متغیر مرحله قبل.
متن متن = "ماژول"> صادر کردن async تابع پیش بارگذاری () {const res = منتظر این باشید. واکشی ("blog.json")؛ داده های ثابت = در انتظار res.json ()؛ بازگشت {پست ها: داده ها}؛ } / script>
09. نمایش خلاصه پست ها
در Svelte ، متغیرها به طور پیش فرض واکنش پذیر هستند. این بدان معنی است که ، با بروزرسانی ، اجزای سازنده ما نیز به روز می شوند. به عنوان نوشته ها متغیر اکنون آرایه ای از پست های وبلاگ را در خود نگه می دارد ، می توانیم اینها را مرور کرده و نمایش دهیم.
ما می توانیم این کار را با استفاده از #هر یک مسدود کردن. این موارد آنچه را که در داخل براکت های هر آرایه قرار دارد تکرار می کنند. در پایین م componentلفه ، خارج از برچسب ها ، HTML را برای نمایش پست ها اضافه کنید.
کانتینر> ul> {# هر پست به عنوان post} li> PostSummary {... post} /> / li> {/ each} / ul> / Container>
10. ظرف را سبک کنید
ما می توانیم از م componentsلفه ها برای هر منطق تکراری استفاده کنیم و از آنها در هر کجا که لازم باشد استفاده کنیم - شامل سبک. کانتینر> کامپوننت در حال حاضر کاری انجام نمی دهد ، اما می توانیم از آن برای ایجاد حداکثر عرض به محتوای داخل آن استفاده کنیم.
باز کن اجزای سازنده / Container.svelte، و برخی از سبک ها را در داخل a اضافه کنید سبک> برچسب هر سبکی که در داخل یک م componentلفه اعمال کنیم در آن م componentلفه محدوده دارند ، به این معنی که می توانیم از یک انتخاب کننده عمومی استفاده کنیم.
style> div {margin: 0 auto؛ بالشتک: 0 1rem؛ حداکثر عرض: 50rem } / style>
11. یک اسلات تعریف کنید>
اگر م componentلفه ای به عنوان والدین سایر ملفه ها طراحی شده باشد ، ما به روشی برای عبور از آن م needلفه ها نیاز داریم. شیار> عنصر دقیقاً همین کار را می کند و می تواند در هر مکانی که در علامت گذاری یک جز sense منطقی باشد قرار گیرد.
با کانتینر>، ما در حال بسته بندی محتویات در یک مدل هستیم div>. استفاده کنید شیار> درون div> به همه چیز دیگر
12. نکات مربوط به PostSummary را در معرض دید قرار دهید
قرار نیست همه م componentلفه ها برخی از داده ها را واکشی کنند. همانطور که پست ها را از ملفه اصلی صفحه بارگیری می کنیم ، می توان از طریق ویژگی های خود به م componentsلفه هایی که ارائه می دهد ، منتقل شد.
باز کن کامپوننت ها / PostSummary.svelte و برخی از ویژگی ها را در بالای پرونده تعریف کنید. اینها توسط اپراتور اسپردی که در مرحله 09 اضافه کردیم پر می شود.
اسکریپت> صادر کردن اجازه نویسنده صادر کردن اجازه دهید تصویر؛ صادرات let slug؛ صادر کردن عنوان؛ / اسکریپت>
13. نمایش خلاصه پست وبلاگ
وقتی صفات جمع می شوند ، مانند هر متغیر دیگری به آنها دسترسی می یابند. با داشتن ویژگی های جداگانه برای هر قسمت از خلاصه پست ، ما نشانه گذاری را برای خواندن آسان می کنیم.
در پایین م componentلفه ، مقداری HTML برای ایجاد خلاصه اضافه کنید. کلاسها به سبکهای از پیش تعریف شده مربوط می شوند.
مقاله> div class = "post-image" style = "background-image: url ({image})" /> div class = "body"> div class = "author-image"> img src = {author.image} alt = {author.name} /> / div> div class = "about"> h1> {title} / h1> span class = "byline"> توسط {author.name} / span> / div> / div> / مقاله>
14. پیوند به پست وبلاگ
برخلاف چارچوب های مشابه مانند Next.js ، Sapper با لینک های لنگر منظم کار می کند. در زمان ساخت ، قادر است پیوندهای داخلی را تشخیص داده و همچنین بهینه سازی های خود را انجام دهد.
با قرار دادن علامت گذاری در مرحله قبل ، آن را در یک لینک قرار دهید. برای ساختن URL پایین نیازی به ایجاد رشته های الگو نیست.
a rel = "prefetch" href = "/ blog / {slug}"> مقاله>… / مقاله> / a>
15. پست را با اسلاگ واکشی کنید
Sapper قادر است صفحات را بر اساس پارامترهای URL ایجاد کند. در مورد ما ، ما به پیوند می دهیم / وبلاگ / حلزون حرکت کردن ، که به معنای آن است که م theلفه را در ارائه می دهد /routes/blog/ceptsslug برگزite.svelte.
در داخل این م componentلفه ، داده های وبلاگ را مانند آنچه برای صفحه فهرست انجام داده ایم ، واکشی کنید. پارام شی حاوی پارامترهای موجود در URL است که در این حالت slug است.
متن متن = "ماژول"> صادر کردن بارگیری تابع همگام سازی پیش بارگذاری ({params}) {const res = منتظر این باشید. واکشی ("وبلاگ / $ {params.slug} .json")؛ داده های ثابت = در انتظار res.json ()؛ } / script>
16. اگر پست پیدا نشد خطا می کند
بر خلاف صفحه فهرست ، این احتمال وجود دارد که یک پست وبلاگ در URL وجود نداشته باشد. در این صورت ، باید خطایی نمایش دهیم. همراه با رفتن و آوردن، پیش بارگیری روش نیز شامل می شود خطا در عوض پاسخ به صفحه خطا را تغییر می دهد.
در پایان روش پیش بارگذاری ، اگر پستی یافت نشد خطایی نشان دهید. در غیر این صورت ، تنظیم کنید پست متغیر برای صفحه.
if (res.status === 200) {return {post: data}؛ } else {this.error (res.status ، data.message)؛ }
17. نمایش پست وبلاگ
با واکشی داده ها ، اکنون می توانیم پست موجود در صفحه را نشان دهیم. مشابه م componentلفه PostSummary ، ما هر قسمت از محتوای پست را در داخل براکت های مجعد نمایش می دهیم. در پایین م componentلفه ، علامت گذاری را برای نمایش در صفحه اضافه کنید.
مقاله> کانتینر> div class = "title"> h1> {post.title} / h1> div class = "byline"> توسط {post.author.name} / div> / div> img class = "post-image" src = {post.image} alt = "" /> {post.html} / کانتینر> / مقاله>
18- به جای آن HTML را نمایش دهید
با نگاهی به صفحه ، همه چیز به درستی نمایش داده می شود ، جدا از محتوای واقعی پست. تبدیل markdown HTML ایجاد می کند ، اما می بینیم که به صورت متن روی خود پست چاپ شده است. Sapper برای این مورد یک تجزیه کننده HTML دارد. قرار دادن html در جلوی آن از این تجزیه کننده استفاده خواهد شد.
19. عنوان صفحه> مقدار را تنظیم کنید
وبلاگ ما به درستی کار می کند ، اما برای پایان دادن به آن چند تغییر لازم است. یکی از این موارد به روز رسانی است عنوان> در صفحه برای برچسب زدن مجدد برگه ای که در آن نمایش داده شده است.
Svelte از a پشتیبانی می کند svelte: head> عنصر ، که هر چیزی از داخل آن را به داخل تزریق می کند سر> از صفحه با استفاده از این عنوان عنوان را به صورت تنظیم کنید عنوان>.
svelte: head> title> {post.title} | Sapper Blog / عنوان> / svelte: head>
20. به روزرسانی عنوان>
هر صفحه الگویی را طی می کند تا HTML را برای بقیه صفحه حذف کند. این جایی است که هرگونه تنظیماتی مانند وارد کردن قلم و برچسب های متا وارد می شود. template.html را باز کرده و برای محتویات آن قلاب اضافه کنید svelte: head> عنصر مرحله قبل. این را درست قبل از بسته شدن اضافه کنید / سر> برچسب
head> […]٪ sapper.head٪ / head> آخرین چیزی که باید اضافه کنیم طرح بندی وبلاگ است. به جای اینکه هر صفحه را در یک جز component بپیچد ، Sapper به دنبال یک پرونده "_layout.svelte" خواهد بود تا این کار را برای ما انجام دهد. داخل _layout.svelte ، عنصر Header> را وارد کنید و آن را در بالای هر صفحه نشان دهید. این یک لینک مناسب برای بازگشت به صفحه اصلی فراهم می کند.
21. هدر دائمی اضافه کنید
آخرین موردی که باید اضافه کنیم طرح بندی وبلاگ است. به جای اینکه هر صفحه را در یک جز component بپیچد ، Sapper به دنبال a _ layout.svelte پرونده را انجام دهید تا این کار را برای ما انجام دهید. داخل _ layout.svelte، عنصر Header> را وارد کنید و آن را در بالای هر صفحه نشان دهید. این یک لینک مناسب برای بازگشت به صفحه اصلی فراهم می کند.
script> وارد کردن عنوان از "../components/Header.svelte"؛ / script> main> Header /> slot /> / main>
این محتوا در ابتدا در Web Designer ظاهر شد.
- اجزای وب: راهنمای نهایی
- 30 برنامه افزودنی Chrome برای طراحان وب و توسعه دهندگان
- 52 ابزار طراحی وب برای کمک به شما در کار هوشمندانه در سال 2019
