Gatsby超速入門—前ページの次ページ機能を追加(完結編)


1.gatsby-nodeを調整する
これは簡単です.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...
でも、基礎はやはりできます.間違えたり、あなた達の会社の要求によって機能を変えたりすれば、仕方がありません.