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"
hayclassName = "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
trongmenu
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 filescript.js
trong thư mụcstatic
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) }
Sử dụng Google Adsense
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.
•••