Sử dụng GatsbyJS – Phan Nhật Chánh

GatsbyJS là một framework phát triển web tiên tiến, được xây dựng trên nền tảng React và GraphQL, nhằm tối ưu hóa hiệu suất và trải nghiệm người dùng của các trang web tĩnh và động. Với kiến trúc tĩnh được xây dựng trước, GatsbyJS cho phép phát triển viên xây dựng các trang web nhanh chóng và hiệu quả, đồng thời tối ưu hóa SEO và khả năng tương tác. Bài viết này sẽ giới thiệu độc đáo của GatsbyJS, cách sử dụng nó để tạo ra các trang web nhanh chóng và linh hoạt, cũng như lợi ích của việc tích hợp GraphQL trong quá trình phát triển. Đọc tiếp để khám phá cách GatsbyJS có thể nâng cao quy trình phát triển web của bạn và mang lại trải nghiệm người dùng tốt nhất.

Cài đặt môi trường trên localhost

Cài đặt npm và NodeJS (với npm) . Kiểm tra phiên bản hiện tại: npm -v (đối với npm) và node -v (đối với nodejs). Sau đó, bạn có thể cài đặt Gatsby:

# install
npm install --global gatsby-cli
# check version
gatsby -v
# update
npm i -g gatsby-cli

# install
npm install --global gatsby-cli
# check version
gatsby -v
# update
npm i -g gatsby-cli

Cài đặt trang web mới với lệnh

gatsby new gatsby-site #Tạo một trang với tên 'gatsby-site'
cd gatsby-site
gatsby develop #Chạy tại địa chỉ http://localhost:8000

gatsby new gatsby-site #Tạo một trang với tên 'gatsby-site'
cd gatsby-site
gatsby develop #Chạy tại địa chỉ http://localhost:8000

Bạn có thể xem GraphiQL , một IDE trong trình duyệt, để xem dữ liệu của trang web http://localhost:8000/___GraphQL

Cập nhật, nâng cấp phiên bản

Kiểm tra các phiên bản mới bằng lệnh npm outdated
Mở package.json sửa bản cũ thành thành bản mới. Xem thêm tại đây
Chạy lệnh npm update để cập nhật.

Các thành phần từ Gatsby

Sử dụng Link (sử dụng cho liên kết nội bộ thay thế cho thẻ <a>). Đối với các liên kết bên ngoài, sử dụng <a> như bình thường.

import { Link } from 'gatsby'
<Link to="/">Text<Link/> //Chỉ sử dụng cho liên kết nội bộ

import { Link } from 'gatsby'
<Link to="/">Text<Link/> //Chỉ sử dụng cho liên kết nội bộ

Không thể sử dụng target='_blank' với <Link>

Sử dụng className thay vì class= Ví dụ: className = "abc" hay className = "abc xyz".

<div style={{ color: "#ffff", paddingTop: "10px" }}></div>

<div style={{ color: "#ffff", paddingTop: "10px" }}></div>

Ngày trong Gatsby {new Date().getFullYear()} hoặc sử dụng moment.js

Active className trong menu trên trang web với GatsbyJS:

<Link to="/about/" activeClassName="active">About Me</Link>
<Link to="/contact/" activeClassName="active">Contact</Link>

<Link to="/about/" activeClassName="active">About Me</Link>
<Link to="/contact/" activeClassName="active">Contact</Link>

Áp dụng Bootstrap

Bạn có thể cài đặt Gatsby Bootstrap Starter.

gatsby new gatstrap https://github.com/jaxx2104/gatsby-starter-bootstrap

gatsby new gatstrap https://github.com/jaxx2104/gatsby-starter-bootstrap

Sử dụng plugin

Nếu bạn muốn bắt đầu lại từ đầu thì sao? Cài đặt react-bootstrap và bootstrap

npm install react-bootstrap bootstrap --save
# --save to save to package.json

npm install react-bootstrap bootstrap --save
# --save to save to package.json

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/css/bootstrap.min.css';

Sử dụng SASS

Để sử dụng import scss trong gatsby hãy tham khảo cách sau

// in /scr/pages/index.js
import Layout from "../layouts/layout"
 
// in /scr/layouts/layout.js
import "../styles/main.scss"
 
// in /scr/styles/main.scss
@import "layout";
 
// in /scr/styles/_layout.scss
// scss codes

// in /scr/pages/index.js
import Layout from "../layouts/layout"
 
// in /scr/layouts/layout.js
import "../styles/main.scss"
 
// in /scr/styles/main.scss
@import "layout";
 
// in /scr/styles/_layout.scss
// scss codes

Bạn có thể xem thêm các cách biên dịch SCSS sang CSS.

Các thành phần khác

Tạo một bài viết nháp

Sử dụng plugin: gatsby plugin draft

exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: `defaultFalse`,
    extend() {
      return {
        resolve(source, args, context, info) {
          if (source[info.fieldName] == null) {
            return false
          }
          return source[info.fieldName]
        },
      }
    },
  })

  createTypes(`
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      draft: Boolean @defaultFalse
    }
  `)
}

exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: `defaultFalse`,
    extend() {
      return {
        resolve(source, args, context, info) {
          if (source[info.fieldName] == null) {
            return false
          }
          return source[info.fieldName]
        },
      }
    },
  })

  createTypes(`
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      draft: Boolean @defaultFalse
    }
  `)
}

Xác định nhiều đối tượng lồng nhau trên MarkdownRemark: tại đây

---
title: Tieu de bai viet
date: 2020-01-27
draft: true
---

---
title: Tieu de bai viet
date: 2020-01-27
draft: true
---

query {
  allMarkdownRemark(filter: { frontmatter: { draft: { eq: false } } }) {
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

query {
  allMarkdownRemark(filter: { frontmatter: { draft: { eq: false } } }) {
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

Tích hợp MathJax

Xem bài: Kích hoạt MathJax trong GatsbyJS.

Table of Content

query MyQuery {
  markdownRemark {
    frontmatter {
      title
    }
    tableOfContents(pathToSlugField: "fields.slug") //đường dẫn đầy đủ
    tableOfContents(absolute: false) //đường dẫn tuyệt đối-tương đối
  }
}

query MyQuery {
  markdownRemark {
    frontmatter {
      title
    }
    tableOfContents(pathToSlugField: "fields.slug") //đường dẫn đầy đủ
    tableOfContents(absolute: false) //đường dẫn tuyệt đối-tương đối
  }
}

Chèn file Javascript

Tạo một thư mục gốc có tên static. Tiếp theo, bạn tạo một file script.js trong thư mục static và Import đoạn code dưới đây vào:

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

gọi file trong cặp <Helmet>

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

Ngoài cách trên bạn cũng có thể chèn một file js vào trang web bằng cách chỉnh sửa file html.js.
Thời gian gần đây tôi có đăng ký một tài khoản Adsense và tìm hiểu làm cách nào để thêm Google Adsense vào trang Gatsby? Tôi đã sử dụng cách chèn đoạn javascript bằng cách trên (chèn vào cặp <Helmet><\Helmet>) nhưng nhận được lỗi AdSense head tag doesn't support data-react-helmet attribute. và đây là hướng giải quyết. Bạn sẽ thêm đoạn code sau vào file gatsby-ssr.js

const React = require("react")
 
const HeadComponents = [
 <script
   data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
   />,
]
 
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

const React = require("react")
 
const HeadComponents = [
 <script
   data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
   />,
]
 
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

Nếu bạn đã đăng ký Google Adsense và muốn chèn vào trang Gatsby của bạn thì bạn có thể tham khảo bài viết cách sử dụng google adsense trong gatsbyjs.

•••