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


۳.ایجاد پست های وبلاگ

حالا بریم سراغ ایجاد پست های وبلاگ. Gatsby از GraphQL برای دریافت داده از منابع مختلف(درایو محلی، API وردپرس و …) استفاده می کند.

شخصا دوست دارم یک وبلاگ استاتیک ایجاد کنم و داده هایش را از وردپرس بوسیله API دریافت کنم. مشتری هم به ادیتور وردپرس دسترسی دارد و می تواند پست ها را ایجاد کند.

در این مطلب ولی، مطالب را از فایل هایی که به زبان MarkDown نوشته ایم و روی درایو کامپیوترمان ذخیره کرده ایم دریافت خواهیم کرد. پلاگین gatsby-source-filesystem که قبلا نصب و تنظیم کردیم، انتظار این فایل ها را در src/pages می کشد، بنابراین ما هم دقیقا فایل ها را آنجا قرار می دهیم.

یکی از روش های متداول برای پست های وبلاگ اینست که پوشه آن را چیزی مثل MM-DD-YYYY-title نامگذاری کنیم. شما می توانید هر چیز دیگری که خواستید آن را نامگذاری کنید یا حتی فایل را مستقیما داخل پوشه /pages قرار دهید.

پس حالا این پوشه src/pages/12–۲۲–۲۰۱۷-first-post را ایجاد می کنیم و یک فایل بنام index.md داخلش قرار می دهیم با محتویات زیر:

---
path: "/hello-world"
date: "2017-07-12T17:12:33.962Z"
title: "My First Gatsby Post"
---
Oooooh-weeee, my first blog post!
First post Ipsum is a major key to success. Congratulations, you played yourself. Surround yourself with angels. Celebrate success right, the only way, apple.

The key is to drink coconut, fresh coconut, trust me. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast.

بلاک محصور در خط تیره ها frontmatter هستند که توسط پلاگین gatsby-transformer-remark تشخیص داده می شوند.

در همین رابطه :   آشنایی با مفهوم ها و نصب ساده React.js

وقتی در بخش ۴ (بعدی) شروع کردیم به ساختن صفحات وبلاگ از فایل های مارک داون، path به عنوان آدرس صفحه استفاده خواهد شد. به عنوان مثال فایل مارک داون بالا در این آدرس باز خواهد شد: localhost:8000/hello-world.

قبل از آن، نیاز است یک template برای رندر فایل های مارک داون داخل صفحهات وبلاگ مان بسازیم. فایل src/templates/blog-post.js را ایجاد کنید.(پوشه src/templates را هم ایجاد کنید).

import React from "react";
import Helmet from "react-helmet";

export default function Template({
data
}) {
const post = data.markdownRemark;
return (
<div className="blog-post-container">
<Helmet title={`CodeStack - ${post.frontmatter.title}`} />
<div className="blog-post">
<h1>{post.frontmatter.title}</h1>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</div>
</div>
);
}

یکبار دیگر به کوئری GraphQL برای انتقال داده به کامپوننت نیاز داریم. نتیجه کوئری توسط Gatsby به کامپوننت template به عنوان data و markdownRemark تزریق می شود.

خواهیم دید که خصیصه markdownRemark حاوی همه جزئیات فایل مارک داون است.

حالا بریم سراغ نوشتن کوئری که باید زیر کامپوننت Template نوشته شود:

export const pageQuery = graphql`
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`
;

اگر با GraphQL آشنا نیستید اینجا منبع خیلی خوبی برای آشنایی با آن است.

حالا فایل blog-template.js به این شکل خواهد بود:

import React from "react";
import Helmet from "react-helmet";
export default function Template({
data
}) {
const post = data.markdownRemark;
return (
<div className="blog-post-container">
<Helmet title={`CodeStack - ${post.frontmatter.title}`} />
<div className="blog-post">
<h1>{post.frontmatter.title}</h1>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</div>
</div>
);
}
export const pageQuery = graphql`
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`
;

۴. ایجاد صفحات جدید از اطلاعات Post

gatsby یک API ناد دارد که کار ایجاد صفحات بلاگ داینامیک از روی پست ها را انجام می دهد.این API در فایل gatsby-node.js در پوشه اصلی پروژه قرار دارد که ما با createPages آن کار داریم.

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

از تکه کدی که در سایت اصلی gatsby آمده استفاده می کنیم(دقت کنید که blogPostTemplate نسبت به هر پروژه می تواند تغییر کند):

const path = require('path');
exports.createPages = ({ boundActionCreators, graphql }) => {
const { createPage } = boundActionCreators;
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
return graphql(`{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
excerpt(pruneLength: 250)
html
id
frontmatter {
date
path
title
}
}
}
}
}`)
.then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
result.data.allMarkdownRemark.edges
.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {} // additional data can be passed via context
});
});
});
}

حالا کارکرد آن را چک می کنیم. پیشنهاد می کنیم تب مرورگر با ببندید، دستور gatsby develop را با زدن دکمه Ctrl + C متوقف کرده و دوباره آن را اجرا کنید و به آدرس http://localhost:8000/hello-world بروید:

یک فایل دیگر بنام src/pages/24–۱۲–۲۰۱۷-learning-grid/index.md ایجاد کنید:

---
path: "/another-one"
date: "2017-07-12T17:12:33.962Z"
title: "My Second Gatsby Post"
---
In life there will be road blocks but we will over come it. Special cloth alert. Don’t ever play yourself. The key to more success is to get a massage once a week, very important, major key, cloth talk.
<pre><code>// some css grid code </code></pre>

و باز تب مرورگر با بسته و دستور را متوفق کرده و دوباره اجرا کنید و این بار به آدرس http://localhost:8000/another-one بروید:

حالا می توانید هر صفحه ای می خواهید بسازید✌

۵.ایجاد لیستی از فایل های Markdown برای Landing page

صفحه اصلی پیش فرض Gatsby در مسیر src/pages/index.js قرار دارد. اینجا جایی است که باید یک template تعریف کنیم، و یک کوئری برای انتقال لیست فایل های .md به آن. این کار را بکنید:

import React from "react";
import Link from "gatsby-link";
import Helmet from "react-helmet";
import '../styles/blog-listing.css';
export default function Index({ data }) {
const { edges: posts } = data.allMarkdownRemark;
return (
<div className="blog-posts">
{posts
.filter(post => post.node.frontmatter.title.length > 0)
.map(({ node: post }) => {
return (
<div className="blog-post-preview" key={post.id}>
<h1>
<Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
</h1>
<h2>{post.frontmatter.date}</h2>
<p>{post.excerpt}</p>
</div>
);
})}
</div>
);
}
export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
excerpt(pruneLength: 250)
id
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
path
}
}
}
}
}
`;

با کارهایی که انجام دادیم حتما آشنایی دارید. دقت کنید که یک import نوشتیم برای فایلی که وجود ندارد. پس آن را ایجاد می کنیم /styles/blog-listing.css :

div.blog-post-preview {
border-bottom: 2px solid #e6e6e6;
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
h1 > * {
font-size: 1.2rem;
text-decoration-line: none;
}
h2 {
font-size: 0.8rem !important;
font-weight: 100 !important;
}

سرور را مثل قبل ری استارت کنید و به صفحه اصلی پروژه بروید تا لیست پست ها را ببینید:

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

منبع

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

پاسخ دهید

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

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

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

Close