تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

چگونه: در ۱۰ دقیقه یک وبلاگ با React و Gatsby بسازیم؟ (بخش اول)


گتسبی (Gatsby) ابزاری برای ایجاد سایت های استاتیک بر پایه ReactJS می باشد.

ابزارهای ایجاد سایت استاتیک (SSG) در واقع میانجی بین نوشتن کدهای HTML به صورت دستی و سیستم های مدیریت محتوا مثل WordPress هستند.

از یک SSG می توان برای تولید صفحات HTML محتوا محور(مثل وبلاگ ها) استفاده کرد. همه چیزی که برای این کار نیاز است محتوای صفحات و قالب صفحات است.

این مطلب به ۵ بخش تقسیم شده است:

  1. شروع کار
  2. ایجاد کامپوننت های Layout
  3. ایجاد پست های وبلاگ
  4. ایجاد صفحات جدید از اطلاعات Post
  5. ایجاد لیستی از فایل های Markdown برای Landing page

حالا می خواهیم داخل Gatsby شیرجه بزنیم و همانطور که یک وبلاگ بنام CodeStack می سازیم با امکانات آن نیز آشنا شویم. طرح کلی این وبلاگ را در زیر می بینید.بزن بریم ✌️

۱.شروع کار

پیش نیازها

اول از نصب بودن Node.js روی سیستم تان مطمئن شوید.برای این کار کافیست دستور node -v را در خط فرمان اجرا کنید. اگر نصب نبود می توانید از سایت nodejs.org آخرین نسخه را با توجه به سیستم عامل تان دانلود کنید.

همچنین در این مقاله فرض شده است شما در مورد ReactJS اطلاعاتی دارید.

Gatsby یک خط فرمان دارد که دستورات کمک کننده زیر را ارائه می دهید:

  • gatsby new : یک پروژه جدید gatsby می سازد.
  • gatsby develop : برای اجرای یک سرور موقت جهت نمایش پروژه با نمایش زنده تغییرات
  • gatsby build : جهت ایجاد یک نسخه آماده استفاده از پروژه

برای نصب خط فرمان Gatsby دستور زیر را در خط فرمان وارد کنید:

npm install --global gatsby-cli

حالا داخل یک پوشه بنام codestack-blog گتسبی را نصب می کنیم:

gatsby new codestack-blog && cd $_

اگر دستور gatsby develop را در خط فرمان اجرا کنید صفحه پیش نمایش Gatsby را مثل این خواهید دید:

در همین رابطه :   چگونه هر سه فریم ورک Angular2, React و Vue.js را در 1 ساعت نصب و امتحان کنیم؟

 

افزودن پلاگین ها

یکی از مزیت های Gatsby پلاگین های زیاد و در حال رشد آن است. این پلاگین های در واقع بسته های Node.js هستند که با API به Gatsby وصل می شوند.

این پلاگین ها بوسیله NPM در ترمینال نصب می شوند و عموما سه دسته بندی دارند: functionalsource و transformer.

پلاگین های Functional

این پلاگین ها امکانات و ابزارهای Gatsby را در سایت یا محیط توسعه گسترش می دهند.برای بلاگ خودمان به این پلاگین های نیاز داریم:

  • gatsby-plugin-react-helmet : اجازه اعمال تغییرات در تگ های بخش head را می دهد.توجه کنید که این پلاگین پیش فرض در پروژه ای که ایجاد کردیم نصب است.
  • gatsby-plugin-catch-links : همه لینک های داخل مارک داون و دیگر صفحات غیر react را مراقبت می کند تا باعث refresh صفحه نشوند.

برای نصب پلاگین های بالا یا پلاگین دوم دستور زیر را اجرا کنید:

npm install gatsby-plugin-react-helmet gatsby-plugin-catch-links

هر موقع یک پلاگین جدید نصب کردیم باید فایل gatsby-config.js آپدیت کنیم تا Gatsby آن را بشناسد.

module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
],
}

پلاگین های Source

این پلاگین ها داده را از منابع محلی یا راه دور دریافت و به چیزی که Gatsby آن را node می نامد می فرستند.برای اینکه پست هایمان را به زبان Markdown نوشته در روی هارد ذخیره کنیم به این پلاگین نیاز داریم:

  • gatsby-source-filesystem : داده را از فایل های روی کامپیوتر بر می گرداند.
npm install gatsby-source-filesystem

فایل تنظیمات gatsby-config.js را بروز کنید:

module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
}
],
}

اینجا چه خبره؟ هیچی ما می تونیم یک گزینه options به هر پلاگین برای تنظیمات بیشترش اضافه کنیم.ما یک path (جایی که فایل های Markdown حاوی پست ها ذخیره شده اند) اضافه کرده ایم و یک name برای اسم فایل های منبع داده. بنابراین Gatsby هم مسیر را می داند و هم اسم فایل ها را.حالا زمان استفاده از پلاگین های transformer رسیده است.

در همین رابطه :   آموزش شروع کار با React.js

پلاگین های Transformer

این پلاگین ها داده خام موجود در node ها را تبدیل به داده قابل خواندن می کنند.برای نمونه این پلاگین را نیاز داریم:

  • gatsby-transformer-remark : این پلاگین مطالب وبلاگ را که در فایل های با پسوند .md ذخیره شده اند می خواند و به HTML برای رندر تبدیل می کند.
npm install gatsby-transformer-remark

و باز هم بروزرسانی gatsby-config.js :

module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
`gatsby-transformer-remark`,
],
}

حله!

 

۲.ایجاد کامپوننت های Layout

با Gatsby به سادگی می توانید کامپوننت های پوسته تولید کنید. این کامپوننت ها بخش های سایت شما هستند که می خواهید در چندین صفحه از آنها استفاده مجدد کنید.برای وبلاگ ما، فعلا هدر و سایدبار خواهند بود.

از پوشه اصلی به src/layouts نگاهی بیندازید. فایل index.js را می بینید که کامپوننت ها را در آن تعریف می کنیم. index.css قبلا به استایل ها اضافه شده است.

بعد از فایل index.js، دو کامپوننت می بینید: Header و TemplateWrapper. در TemplateWrapper محتویات سایت را در layout که می خواهیم در کل سایت یکسان باشد ، قرار می دهیم.

این کار بوسیله خصوصیت children() امکان پذیر شده است. دقت کنید بر خلاف زیر خصوصیت (Children Props) های خود React، زیر خصوصیتی که به کامپوننت layout پاس داده می شود یک تابع است و نیاز به اجرا شدن دارد.

اول از همه یک پوشه بسازید و فایل CSS در src/styles/layout-overide.css. سپس در فایل Index.js آن را Import کنید. دقت کنید بعد از index.css آن را ایمپورت کنید بدین ترتیب کدهای css آن به کدهای css گتسبی اولویت خواهند داشت و می توانید تغییرشان دهید.

import React from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Helmet from 'react-helmet'
import './index.css'
import "../styles/layout-overide.css";

فایل layout-overide.css را باز کنید و کدهای زیر را داخل آن کپی کنید:

* {
background: #f5f5f5;
color: black;
}
html {
height: 100%;
}
body {
height: 100%;
border: 5px solid #ffdb3a;
}
h1 {
font-size: 1.5rem;
line-height: 0.5rem;
}
p, div {
font-size: 16px;
}

کامپوننت header را نیز آپدیت کنید.

const Header = () => (
<div
style={{
background: '#f5f5f5',
marginBottom: '3rem',
borderBottom: '2px solid #e6e6e6',
}}
>
<div
style={{
margin: '0 auto',
maxWidth: 980,
padding: '1.45rem 1.0875rem',
}}
>
<h1 style={{margin: 0, textAlign: 'center',fontSize: '18px'}}>
<Link to="/"
style={{
color: 'black',
textDecoration: 'none',
}}
>
CodeStack
</Link>
</h1>
</div>
</div>
);

همچنین یک کامپوننت Sidebar ایجاد کنید.

const Sidebar = (props) => (
<div
style={{
border: '2px solid #e6e6e6',
maxWidth: 960,
padding: '0.5rem',
marginBottom: '25px'
}}
>
<strong>{props.title}.</strong> {props.description}
</div>
);

ما دوست داریم کامپوننتهای Sidebar و {children()} رندر شده به صورت واکنش گرا(Responsive) عمل کنند مثل این:

در همین رابطه :   چگونه: در ۱۰ دقیقه یک وبلاگ با React و Gatsby بسازیم؟ (بخش دوم)

با توجه به اینکه راه سرراستی برای تعریف Media Query های CSS در React وجود ندارد، من react-media را پیدا کردم، یک کامپوننت مدیا کوئری CSS برای ReactJS. نصبش کنید:

npm install --save react-media

ایمپورت کردنش را فراموش نکنید:

import Media from 'react-media'

حالا همه چیز (کامپوننت های HeaderSidebar, و children() )  را در TemplateWrapper جمع و جور کنیم تا به این شکل درآید:

const TemplateWrapper = ({ children }) => (
<div>
<Helmet
title="Gatsby Default Starter"
meta={[
{ name: "description", content: "Sample" },
{ name: "keywords", content: "sample, something" }
]}
/>
<Header />
<div
style={{
margin: "0 auto",
maxWidth: 980,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
height: "100%"
}}
>
<Media query={{ maxWidth: 848 }}>
{matches =>
matches ? (
<div
style={{
margin: "0 auto",
maxWidth: 980,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
height: "100%",
padding: "25px"
}}
>
<div style={{ flex: 1 }}>{children()}</div>
</div>
) : (
<div
style={{
margin: "0 auto",
maxWidth: 980,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
height: "100%",
padding: "25px"
}}
>
<div style={{ flex: 2.5, paddingRight: "30px" }}>
{children()}
</div>
<div style={{ flex: 1 }}>
<Sidebar
title="Codestack"
description="Articles on React and Node.js. All articles are written by Me. Fullstack Web Development."
/>
<Sidebar
title="About author"
description="I am a Full-stack Web Developer specializing in React and Node.js based in Nigeria."
/>
</div>
</div>
)
}
</Media>
</div>
</div>
);

در کد بالا دقیقا چه اتفاقی افتاد؟ React Media از دستور شرطی تک خطی (Ternary operation) برای تشخیص اینکه چه چیزی رندر شود استفاده می کند و این کار را بر اساس maxWidth انجام می دهد. وقتی پهنای مرورگر با عرض داده شده همخوانی داشت، فقط کامپوننت های Header و children() رندر می شود.

<Media query={{ maxWidth: 848 }}>
{matches =>
matches ? (
...stuff to render...
) : (
...stuff to render...
)
}
</Media>

در روش Ternary اگر شرط true باشد مقدار expr1 و اگر false باشد expr2 برگشت داده می شود.

حالا دستور gatsby develop را اجرا کنید . وبلاگ ما باشد شبیه این شده باشد:

ادامه دارد …

دسته بندی : React.js

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in فونت
فونت های حرفه ای رایگان ۲۰۱۲

اکنون داریم به نیمه سال نزدیک می شویم و به احتمال زیاد شما دنبال فونت های جدید و زیبا می...

Close