Gatsby極速入門—添加博客內容頁（4）

wean 發布于2019-08-23 17:51 / 502人閱讀

摘要：查數據注意，這里跟前面不一樣了，我用這個文件去提供數據，沒有什么為什么，規定，照做就好。很清晰明顯，這里就說一點我傳遞了一個參數，到內容頁。創建內容頁模板在下創建這里只要對應的路徑的那個文章查詢

1.查數據

注意，這里跟前面不一樣了，我用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
        }, 
      })
    })
  })
}

很清晰明顯，這里就說一點我傳遞了一個參數，pathSlug到內容頁。

2.創建內容頁模板

在src>templates下創建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}
      
    
  )
}

export const query = graphql`
  query($pathSlug: String!) {
    markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`
export default Template;

這里只要對應的路徑的那個文章查詢

frontmatter: { path: { eq: $pathSlug } }

云服務器 GPU云服務器 html內容頁編輯內容頁模板html js實現添加標簽頁 Gatsby

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104258.html

Gatsby極速入門—添加上一頁下一頁功能（完結篇）

摘要：調整這個就簡單了打開，增加代碼如下這里是新增加的調整打開首頁，點擊頁面跳轉到對應的頁面大功告成。總結到此，通過就快速的搭建了一個博客網站，我們只需書寫文件就能生成對應的網頁了。至于網頁美化，那是切圖的事兒，我就不在這里墨跡了。 1.調整gatsby-node 這個就簡單了,打開gatsby-node.js，增加代碼如下： const path = require(path); expo...

youkede 2019-08-23 17:59 評論0 收藏0
Gatsby極速入門—添加博客文章列表（3）

摘要：查數據如圖所示，套頁面打開打開首頁，看到文章列表就大功告成了。 1.查數據 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...

cnTomato 2019-08-26 13:55 評論0 收藏0
Gatsby極速入門—安裝和博客搭建（0）

摘要：安裝創建項目開發注意報錯文件空格問題，最好不要用空格和中文。直接放在硬盤根目錄下就不會有問題。打開，看到如下效果就成功了構建查看效果打開瀏覽器看到如下效果大功告成 1.安裝 yarn global add gatsby-cli 2.創建gatsby項目 gatsby new blog 3.開發 gatsby develop 注意報錯： error UNHANDLED EXCEPT...

qieangel2013 2019-08-23 17:21 評論0 收藏0
Gatsby極速入門—支持Markdown（1）

摘要：安裝插件我用就是因為它支持所以不墨跡，直接整支持。添加格式化文章在下面添加三篇文章，頭部格式如下教程完整代碼如圖所示 1.安裝插件我用Gatsby就是因為它支持Markdown.所以不墨跡，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章在src>page...

RobinTang 2019-08-26 18:27 評論0 收藏0
創造屬于自己的靜態博客

摘要：所以自己定值博客，或許可以讓自己堅持更新下去。配合上語雀的文章發布推送絕配，于是有了這么個功能專題。可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節省項目搭...

Channe 2019-08-23 15:05 評論0 收藏0