نحوه استفاده از تم ها در Gatsby
معرفی
Gatsby 1.0 در سال 2017 منتشر شد و از آن زمان به بعد ویژگی های جدید خود را همچنان حفظ می کند ، در حالی که قابلیت سفارشی سازی بالا را به عنوان یک تولید کننده سایت استاتیک حفظ می کند. ویژگی های افزوده شده به شکل افزونه ها ، API های جدید ، ابزارهای کمکی و گزینه های پیکربندی است. هر یک از این ویژگی ها را می توان به صورت جداگانه استفاده کرد و سفارشی کرد یا با هم ترکیب کرد تا موارد خاص استفاده را اعمال کند. با این حال ، از آنجا که بسیاری از سایت ها از ترکیب ویژگی ها و تنظیمات یکسانی بهره می برند ، Gatsby تم های Gatsby را معرفی کرد.
تم ها در Gatsby به طور خاص به افزونه هایی اشاره می کنند که به عنوان مجموعه ای از گزینه های پیکربندی ، عملکرد و/یا عناصر رابط کاربر (UI) عمل می کنند. تفکیک ویژگی های به اشتراک گذاشته شده در موضوعات حفظ شده باعث می شود سایت شما به روزتر باشد و همچنین به شما اجازه می دهد زمان کمتری را برای پیکربندی سایت خود صرف کنید و زمان بیشتری را برای توسعه محتوا اختصاص دهید.
در این آموزش ، شما تم Gatsby را برای انتشار پست های وبلاگ نصب ، پیکربندی و استفاده می کنید: gatsby-theme-blog. این افزونه چندین ویژگی مانند پشتیبانی از MDX و برجسته سازی کد را در یک بسته مناسب قرار می دهد. در طول دوره آموزشی ، روند استفاده از این موضوع خاص Gatsby را دنبال می کنید ، که می توانید آن را به طور کلی در موضوعات اعمال کنید.
هر مرحله شما را در قسمت مهمی از استفاده از تم های Gatsby راهنمایی می کند و در پایان خواهید دید که چگونه می توان این فرآیند را روی هر موضوع Gatsby که در آینده می خواهید استفاده کنید ، اعمال کنید.
پیش نیازها
قبل از شروع کار ، چند مورد را که لازم دارید در اینجا آورده ایم:
- نصب محلی Node.js برای اجرای Gatsby و ایجاد سایت شما. روش نصب بر اساس سیستم عامل متفاوت است ، اما vpsgol دارای راهنمای Ubuntu 20.04 و macOS است و همیشه می توانید آخرین نسخه را در صفحه بارگیری رسمی Node.js پیدا کنید.
- آشنایی با جاوا اسکریپت برای کار در Gatsby. زبان جاوا اسکریپت یک مبحث گسترده است ، اما یک نقطه شروع خوب نحوه کدگذاری ما در سری جاوا اسکریپت است.
- یک پروژه جدید Gatsby ، داربست از gatsby-starter-default. برای ساخت یک پروژه جدید Gatsby از ابتدا ، می توانید به مرحله 1 آموزش نحوه راه اندازی اولین وب سایت Gatsby مراجعه کنید.
این آموزش روی Node.js v14.16.1 ، npm v6.14.12 ، Gatsby v3.11.1 و gatsby-theme-blog v3.0.0 آزمایش شده است.
مرحله 1 – پیدا کردن و نصب یک تم
اگرچه این آموزش با استفاده از یک موضوع خاص ، gatsby-theme-blog ، شما را راهنمایی می کند ، اما هر مرحله به طور کلی در مورد موضوعات Gatsby نیز کاربرد دارد. این امر در مورد اولین مرحله نیز صدق می کند: یافتن موضوعی که می خواهید استفاده کنید و نصب آن با npm.
Gatsby به نویسندگان افزونه و موضوع درباره نحوه انتشار بسته هایGatsby خود راهنمایی می کند ، که پیدا کردن موضوعی متناسب با نیازهای شما را آسان تر می کند. به توسعه دهندگان تم دستور داده می شود که بسته های موضوعی خود را با gatsby و gatsby-theme به عنوان کلمات کلیدی برچسب گذاری کنند ، که سپس توسط رجیسترهای بسته (جایی که فایلها در واقع میزبانی می شوند) اسکن شده و قابل جستجو می شوند.
این آموزش موارد استفاده از ساخت سایت دارای Gatsby با زیر بخش وبلاگ را دنبال می کند. شما به عنوان توسعه دهنده به دنبال موضوعی برای افزودن پشتیبانی از MDX ، برجسته سازی کد و موارد دیگر هستید. گرچه Gatsby مرورگر افزونه خود را دارد ، اما در واقع لیست های خود را از رجیستری npm خارج می کند ، بنابراین اولین قدم شما این است که جستجوی خود را مستقیماً در موتور جستجوی رجیستری npm شروع کنید. با استفاده از ورودی جستجوی کلمات کلیدی وبلاگ: gatsby-theme ، نتایج خود را تنها به آن افزونه هایی که دارای کلمه کلیدی gatsby-theme هستند محدود می کنید ، همانطور که در تصویر زیر نشان داده شده است:
در این آموزش ، شما از gatsby-theme-blog استفاده می کنید ، بنابراین آن بسته را انتخاب کنید. با انتخاب gatsby-theme-blog به عنوان موضوعی که قصد نصب آن را دارید ، قسمت بعدی این مرحله این است که در واقع آن را به همراه وابستگی های آن نصب کنید. به پروژه موجود Gatsby بروید و دستور زیر را در فهرست اجرا کنید:
npm install gatsby-theme-blog
پس از اتمام نصب وابستگی ها ، پیامی مشابه زیر مشاهده خواهید کرد:
Output
...
+ gatsby-theme-blog@3.0.0
added 262 packages from 181 contributors and audited 2391 packages in 49.706sاکنون که تم و وابستگی های آن را در پروژه خود نصب کرده اید ، وقت آن است که به بارگیری و پیکربندی تم در پروژه Gatsby خود بپردازید.
مرحله 2 – بارگیری و پیکربندی تم
اکنون که تم شما نصب شده است ، می توانید از آن در سایت خود استفاده کرده و آن را بر اساس نیاز خود تغییر دهید. در Gatsby ، راه اندازی اولیه و پیکربندی تم اصلی با ویرایش فایل پیکربندی ریشه ، gatsby-config.js انجام می شود. در این مرحله ، فایل پیکربندی را ویرایش می کنید تا در گزینه مورد نظر خود در تم خود بارگذاری شود.
فایل پیکربندی gatsby-config.js را در ویرایشگر دلخواه خود باز کنید ، سپس موارد زیر را اضافه کنید:
gatsby-config.js
module.exports = {
plugins: [
...
`gatsby-plugin-image`,
{
resolve: 'gatsby-theme-blog',
options: {
basePath: '/posts',
contentPath: `md/posts`,
}
},
`gatsby-transformer-sharp`,
...
]
}در این کد پیکربندی ، دو تنظیم مهم وجود دارد که از مقادیر سفارشی برای آنها استفاده می کنید. موضوع از گزینه basePath برای تنظیم آدرس وبلاگ استفاده می کند و contentPath به موضوع می گوید که کجا فایلهای Markdown را برای انتشار به عنوان پست وبلاگ پیدا کنید. استفاده از مقدار md/posts برای contentPath به این معنی است که فایلهای Markdown شما باید در فهرست md/posts قرار داشته باشند.
پس از افزودن این کد ، فایل پیکربندی خود را ذخیره کنید.
موضوع gatsby-theme-blog تنظیمات بیشتری را ارائه می دهد ، که در فایل README gatsby-theme-blog ثبت شده است. از آنجا که هر موضوع Gatsby متفاوت است ، مهمترین قسمت این مرحله مراجعه به مستندات موضوع انتخابی شما و پیروی از راهنمایی های دقیق ارائه شده در آن است.
شما اکنون تم را طوری تنظیم کرده اید که از طریق فایل پیکربندی Gatsby بارگیری و به دلخواه پیکربندی شود. گام بعدی این است که برخی از قابلیت های جدیدی را که به سایت شما اضافه می کند ، در طول راه آزمایش کنید.
مرحله 3 – آزمایش عملکرد
همانطور که تم شما اکنون نصب ، پیکربندی و بارگذاری شده است ، اکنون می توانید آن را در سایت خود پیاده سازی کنید. این مرحله نحوه امتحان برخی از قابلیت های جدید همراه با موضوع و پیش نمایش نتایج را پوشش می دهد.
شما MDX ، برجسته سازی کد و پشتیبانی پردازش Markdown از gatsby-theme-blog را با یک فایل پست وبلاگ جدید آزمایش خواهید کرد. ابتدا ، شما باید پوشه ای را برای نگهداری فایل ها ایجاد کنید ، که باید با تنظیم محتوای مسیر md/post هایی که در مرحله شماره 2 استفاده کرده اید مطابقت داشته باشد. شما می توانید این فهرست را به صورت دستی در مرورگر فایل خود ایجاد کنید یا با اجرای این دستور در ریشه پروژه Gatsby خود ، آن را در ترمینال خود ایجاد کنید:
mkdir -p ./md/posts
در مرحله بعد ، یک فایل خالی MDX ، my-first-post.mdx ایجاد کنید که حاوی محتوای پست جدید شما باشد. دوباره می توانید این را به صورت دستی یا در ترمینال ایجاد کنید:
touch ./md/posts/my-first-post.mdx
حالا فایل خالی MDX را باز کرده و کد زیر را به آن اضافه کنید:
md/posts/my-first-post.mdx
---
title: Learning Gatsby Themes and Trying MDX
slug: /posts/gatsby-theme-learning
date: 2021-08-16
excerpt: A post about learning Gatsby themes and trying out some MDX.
---
## Welcome!
This is a post where I plan to share my journey learning Gatsby Themes, and to try out some MDX.
## Resources
<ul>
{[
{
link: 'https://www.gatsbyjs.com/',
text: 'Gatsby Website',
note: 'Official Website for Gatsby'
},
{
link: 'https://www.gatsbyjs.com/docs/themes/',
text: 'Gatsby Theme Documentation',
note: 'Documentation for Gatsby Theme usage and development'
},
{
link: 'https://www.vpsgol.com/community/tutorial_series/how-to-create-static-web-sites-with-gatsby-js',
text: 'vpsgol - "How To Create Static Web Sites with Gatsby.js"',
note: 'A vpsgol tutorial series on using Gatsby JS'
}
].map(item => (
<li key={item.link}>
<a href={item.link} target="_blank">{item.text}</a>
<ul>
<li>{item.note}</li>
</ul>
</li>
))}
</ul>
## Code Sample
To try out code highlighting in this theme, here is a snippet of JavaScript code. This code won't run in your browser; it is for visual use only.در بالای فایل ، قسمتی که توسط — محصور شده است مجموعه ای از جفت های کلید-مقدار است که frontmatter نامیده می شود. همه موضوعات از کلیدهای یکسانی استفاده نمی کنند و آنهایی که در پست خود استفاده می کنید از بین کلیدهای مورد استفاده gatsby-theme-blog با دقت انتخاب شده اند. شما یک عنوان سفارشی ، راه حل (مسیر URL) ، تاریخ انتشار و گزیده ای (پیش نمایش متن برای نمایش در صفحه فهرست پست ها) را تعریف کرده اید.
تمام متنی که از دستور جلو پیروی می کند ، بدنه پست می شود و با خوش آمدید شما شروع می شود! بخش. دو علامت هش (##) قبل از متن عنوان به Markdown می گویند که این یک عنوان سطح 2 است که برای بخش منابع نیز استفاده می شود.
در بخش منابع ، اولین استفاده خود را از آنچه MDX را از Markdown معمولی متمایز می کند ، استفاده می کنید: استفاده از نحو JSX React برای جاسازی اجزای React که با Markdown شما ادغام شده و به یک صفحه واحد تبدیل می شوند. در پست خود ، از JSX برای تبدیل مجموعه ای از منابع درباره Gatsby به لیست پیوندهای HTML استفاده می کنید.
سرانجام ، برای آزمایش ویژگی برجسته سازی نحو کد همراه با gatsby-theme-blog ، یک بلوک Markdown Fidden Code Block در انتهای فایل اضافه کنید:
md/posts/my-first-post.mdx
```js
function saySomething(name) {
console.log(`Hello ${name}!`);
console.log(`Isn't learning about Gatsby fun?!`);
}
saySomething('Arthur');
```در این حالت از backticks سه گانه برای نشان دادن مرزهای شروع و توقف کد استفاده می شود.
پس از اتمام ویرایش پست جدید ، فایل MDX را ذخیره و ببندید.
برای مشاهده این پست به عنوان یک بیننده ، با آزمایش تمام ویژگی های افزونه تم ، دستور زیر را اجرا کنید:
npm run develop
پس از آماده شدن ، Gatsby CLI از شما می خواهد که پروژه خود را در مرورگر وب خود باز کنید ، که می توانید با رفتن به localhost: 8000 این کار را انجام دهید. برای مشاهده صفحه فهرست وبلاگ جدید ، از localhost: 8000/posts دیدن کنید و برای مشاهده این پست جدید ، به localhost بروید: 8000/posts/gatsby-theme-learning/. پست وبلاگ به شکل زیر خواهد بود:
شما به تازگی برخی از قابلیت هایی را که تم تازه نصب شده شما ارائه می دهد آزمایش کرده اید و نتایج تلاش های خود را در یک مرورگر وب مشاهده کرده اید. برای بسیاری از کاربران ، این ممکن است تمام نیازهای آنها را پوشش دهد ، اما برای سفارشی سازی بیشتر ، مرحله بعدی مفهوم Gatsby به نام سایه را بررسی می کند که به شما امکان می دهد قطعات یک موضوع را نادیده بگیرید.
مرحله 4 – استفاده از سایه (اختیاری)
در این مرحله از آموزش ، شما قبلاً یک تم شخص ثالث را در Gatsby نصب کرده و پیکربندی کرده اید. پیکربندی در gatsby-config.js انجام شد و محدود به گزینه هایی بود که ناشر موضوع برای سفارشی سازی آنها انتخاب کرده بود. اگر نیاز به سفارشی سازی یک موضوع فراتر از این گزینه ها دارید ، از یک مفهوم Gatsby به نام سایه استفاده می کنید ، که در این مرحله این کار را انجام می دهید.
اصطلاح سایه زنی به تمرین لغو یا گسترش یک فایل تم داخلی با تغییرات دلخواه شما اشاره دارد. برای کسانی که با وردپرس آشنا هستند ، این شبیه مفهوم تم کودک است.
با تم های Gatsby ، هر فایلی در کد منبع تم می تواند تحت سایه قرار گیرد ، از روش هایی که بر روی گره Gatsby و ایجاد فایل تأثیر می گذارد تا عناصر و طرح های UI. برای وبلاگ خود ، یک فایل کامپوننت React به نام bio-content.js را تحت سایه قرار دهید تا نحوه نمایش بیوگرافی وبلاگ شما در زیر هر پست سفارشی شود. با سایه انداختن این یک فایل ، بر ظاهر هر پست وبلاگی که از طریق افزونه gatsby-theme-blog می گذرد تأثیر می گذارید.
اولین قدم برای ایجاد سایه این است که یک پوشه در فهرست src خود با نام دقیق افزونه تم مورد نظر خود ایجاد کنید. می توانید این کار را به صورت دستی یا با ترمینال انجام دهید:
mkdir src/gatsby-theme-blog
برای هر فایل خاصی در تم که می خواهید سایه داشته باشد ، مرحله بعدی ایجاد یک پرونده با همان نام و ساختار دایرکتوری مشابه در موضوع است. از آنجا که قصد دارید جزء زیستی موجود را کمی تغییر دهید ، می توانید با کپی کردن فایل موجود به عنوان نقطه شروع ، با دستور cp (copy) در زمان خود صرفه جویی کنید.
mkdir -p src/gatsby-theme-blog/components
cp node_modules/gatsby-theme-blog/src/components/bio-content.js src/gatsby-theme-blog/components/bio-content.js
اکنون فایل تازه کپی شده را باز کرده و تغییرات زیر را انجام دهید:
src/gatsby-theme-blog/components/bio-content.js
import React, { Fragment } from "react"
const BioContent = () => (
<Fragment>
<p>Content by vpsgol</p>
<p>License Info:</p>
<p
style={{
margin: "10px 20px",
padding: 8,
backgroundColor: "#0069ff",
color: "white",
borderRadius: 12,
}}
>
This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 4.0 International License.
</p>
</Fragment>
)
export default BioContentاین فایل را ذخیره و ببندید ، زیرا اکنون ویرایش فایل سایه را انجام داده اید.
در این فایل ، شما فایل اصلی bio-content.js را تحت سایه قرار داده اید ، و متن نویسنده را با نام نویسنده و اطلاعات مجوز جایگزین کرده اید. شما این کار را با جایگزینی JSX برگردانده شده توسط کامپوننت BioContent React انجام داده اید. کد style = {{}} نمونه ای از CSS درون خطی است که از آن برای افزودن رنگ و فاصله به فراخوان مجوز استفاده کرده اید.
با اجرای مجدد npm run در ترمینال خود ، سرور توسعه Gatsby را راه اندازی می کنید و می توانید تغییرات را در همه پست های وبلاگ خود پیش نمایش کنید:
با استفاده از سایه زدن Gatsby ، شما فقط یک موضوع شخص ثالث Gatsby را فراتر از پیکربندی استاندارد تغییر داده اید و در لغو و افزونه های سفارشی خود مخلوط شده اید.
نتیجه
با دنبال کردن مراحل این آموزش ، اکنون یک سایت Gatsby دارید که از یک موضوع منتشر شده برای جمع آوری اجزای متعدد و قطعات عملکرد بسته به عنوان یک وابستگی واحد استفاده می کند. به لطف این قابلیت بسته بندی شده ، اکنون به روز رسانی سایت شما آسان تر است و علیرغم داشتن ویژگی های اضافی ، می تواند پیکربندی و کد راه اندازی بسیار کمتری داشته باشد. شما همچنین آموخته اید که چگونه از سایه برای سفارشی کردن تم های Gatsby در سطح عمیق تری بر اساس فایل استفاده کنید و قفل لایه دیگری از قابلیت توسعه را باز کنید.
اگرچه این آموزش یک موضوع خاص را پوشش می دهد ، اما مفاهیم و رویکردهایی که به آن اشاره می شود به طور کلی در موضوعات Gatsby کاربرد دارد. برای اطلاعات بیشتر در مورد موضوعات Gatsby ، به اسناد رسمی Gatsby نگاه کنید. اگر مایل به مطالعه بیشتر در مورد Gatsby هستید ، بقیه نحوه ایجاد وب سایت های استاتیک با سری Gatsby.js را بررسی کنید.
Gatsby, اتصال به سرور مجازی, جاوا اسکریپت, خرید سرور, خرید سرور لینوکس, سرور
