Sử dụng GatsbyJS

 / /
# Gatsbyjs

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

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

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

  1. Kiểm tra các phiên bản mới bằng lệnh npm outdated
  2. Mở package.json sửa bản cũ thành thành bản mới. Xem thêm tại đây
  3. 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ộ

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".

Sử dụng CSS
<div style={{ color: "#ffff", paddingTop: "10px" }}></div>

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

Áp dụng Bootstrap

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

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
Cập nhật vào gatsby-browser.js
import 'bootstrap/dist/css/bootstrap.min.css';

Sử dụng SASS

// 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

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

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

Cập nhật gatsby-node.js
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
    }
  `)
}
Markdown
---
title: Tieu de bai viet
date: 2020-01-27
draft: true
---
GraphQL
query {
  allMarkdownRemark(filter: { frontmatter: { draft: { eq: false } } }) {
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

Tích hợp MathJax

Table of Content

GraphQL
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
  }
}