Gatsby超速入門—前ページの次ページ機能を追加(完結編)
2485 ワード
1.gatsby-nodeを調整する
これは簡単です.gatsby-node.jsを開けて、コードを追加すると次のようになります.
締め括りをつける
ここで、gatsbyを通じて、ブログサイトを素早く構築しました.私たちはmarkdownファイルを書くだけで対応するウェブページを作成できます.ウェブサイトの美化に関しては、それはカット図のことです.ここでは書きません.
もちろんです.カットしたくないです.様々な既存のUIライブラリ、例えばantdesignを使用してもいいです.私のウェブサイトは直接使うant designです.
ガツビーを深く勉強するのが面倒くさいと思ったら、直接に私の書いたテンプレートを使ってもいいです.
ソースライブラリのアドレスを直接クローンして使えばいいです.
https://github.com/leolau2012...
でも、基礎はやはりできます.間違えたり、あなた達の会社の要求によって機能を変えたりすれば、仕方がありません.
これは簡単です.gatsby-node.jsを開けて、コードを追加すると次のようになります.
const path = require("path");
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)
return graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
path,
title,
tags
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors)
}
const posts = result.data.allMarkdownRemark.edges;
createTagPages(createPage, posts);
posts.forEach(({ node }, index) => {
const path = node.frontmatter.path;
const title = node.frontmatter.title;
createPage({
title,
path,
component: blogPostTemplate,
context: {
pathSlug: path,
//
prev: index === 0 ? null : posts[index - 1].node,
next: index === (posts.length - 1) ? null : posts[index + 1].node
}, // additional data can be passed via context
})
})
})
}
2.blogPost.jsを調整するimport React from "react"
import { graphql,Link } from 'gatsby'
const Template = ({ data, pageContext }) => {
const {next,prev} = pageContext;
const {markdownRemark} = data;
const title = markdownRemark.frontmatter.title;
const html = markdownRemark.html;
return (
{title}
{next&&Next}
{prev&&Prev}
)
}
export const query = graphql`
query($pathSlug: String!) {
markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`
export default Template;
トップページを開けて、ページをクリックして対応するページに移動します.締め括りをつける
ここで、gatsbyを通じて、ブログサイトを素早く構築しました.私たちはmarkdownファイルを書くだけで対応するウェブページを作成できます.ウェブサイトの美化に関しては、それはカット図のことです.ここでは書きません.
もちろんです.カットしたくないです.様々な既存のUIライブラリ、例えばantdesignを使用してもいいです.私のウェブサイトは直接使うant designです.
ガツビーを深く勉強するのが面倒くさいと思ったら、直接に私の書いたテンプレートを使ってもいいです.
ソースライブラリのアドレスを直接クローンして使えばいいです.
https://github.com/leolau2012...
でも、基礎はやはりできます.間違えたり、あなた達の会社の要求によって機能を変えたりすれば、仕方がありません.