資訊專欄INFORMATION COLUMN
摘要：調整這個就簡單了打開，增加代碼如下這里是新增加的調整打開首頁，點擊頁面跳轉到對應的頁面大功告成?？偨Y到此，通過就快速的搭建了一個博客網站，我們只需書寫文件就能生成對應的網頁了。至于網頁美化，那是切圖的事兒，我就不在這里墨跡了。
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。我的網站就是直接用的antdesign.
如果你覺得深入學習gatsby太麻煩，你可以直接用我寫好的模板就行，
開源庫地址，直接克隆就可以用了：
https://github.com/leolau2012...
但是基礎還是要會的，不然出錯或者要根據你們公司需求改動功能，就沒辦法了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://hztianpu.com/yun/104461.html
摘要：安裝插件我用就是因為它支持所以不墨跡，直接整支持。添加格式化文章在下面添加三篇文章，頭部格式如下教程完整代碼如圖所示 1.安裝插件 我用Gatsby就是因為它支持Markdown.所以不墨跡，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>page...
摘要：查數據注意，這里跟前面不一樣了，我用這個文件去提供數據，沒有什么為什么，規(guī)定，照做就好。很清晰明顯，這里就說一點我傳遞了一個參數，到內容頁。創(chuàng)建內容頁模板在下創(chuàng)建這里只要對應的路徑的那個文章查詢 1.查數據 注意，這里跟前面不一樣了，我用gatsby-node.js這個文件去提供數據，沒有什么為什么，規(guī)定，照做就好。 const path = require(path); export...
摘要：查數據如圖所示，套頁面打開打開首頁，看到文章列表就大功告成了。 1.查數據 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...
摘要：安裝創(chuàng)建項目開發(fā)注意報錯文件空格問題，最好不要用空格和中文。直接放在硬盤根目錄下就不會有問題。打開，看到如下效果就成功了構建查看效果打開瀏覽器看到如下效果大功告成 1.安裝 yarn global add gatsby-cli 2.創(chuàng)建gatsby項目 gatsby new blog 3.開發(fā) gatsby develop 注意報錯： error UNHANDLED EXCEPT...
摘要：什么是既是一種用于的查詢語言也是一個滿足你數據查詢的運行時。嵌套將組件扔到下面的里面打開首頁，看到網站的描述就大功告成了。 1.什么是GraphQL GraphQL 既是一種用于 API 的查詢語言也是一個滿足你數據查詢的運行時。 GraphQL 對你的 API 中的數據提供了一套易于理解的完整描述，使得客戶端能夠準確地獲得它需要的數據，而且沒有任何冗余，也讓 API 更容易地隨著時間...
