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
- 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ộ
Không thể sử dụng
target='_blank'
với<Link>
- Sử dụng
className
thay vìclass=
Ví dụ:className = "abc"
hayclassName = "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 -
Active className
trongmenu
trên trang web với GatsbyJS:<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
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
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
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
}
`)
}
---
title: Tieu de bai viet
date: 2020-01-27
draft: true
---
query {
allMarkdownRemark(filter: { frontmatter: { draft: { eq: false } } }) {
nodes {
frontmatter {
title
date
}
}
}
}
Tích hợp MathJax
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
}
}
Sử dụng file Javascript
- Tạo một thư mục gốc có tên
static
- Tạo một file
script.js
trong thư mụcstatic
-
Import vào:
import Helmet from "react-helmet" import { withPrefix, Link } from "gatsby"
và gọi file trong cặp
<Helmet>
<Helmet> <script src={withPrefix('script.js')} type="text/javascript" /> </Helmet>