用Gatsby＋microCMS采取措施

2 年 ago
清, 宇
5 minutes

用Gatsby和microCMS开始行动

介绍

Angular…… 以及 Next.js……。
许多人在开发单页应用程序时没有考虑到 SSR，我认为这是从 Angular 流传下来的。因此我开始使用 Next.js，但是当重新加载页面时会遇到 404 错误之类的问题……为了解决这个问题，我尝试使用 Function 或者在服务器端编写函数……我开始觉得已经够了。
我考虑要不要用 Nuxt，然后又买了一本书，但是调查后发现它似乎也是一样的浪费开销，我又陷入了无奈的循环中。然后 Gatsby 出现了，虽然信息有限，但是它说「无论是直接访问 URL 还是重新加载，都不会再返回 404 错误」（想传达 Gatsby.js 这个最强 React 框架的优点！！）
所以我决定赌一把。

创建Gatsby项目

image.png
image.png

看一下 package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^2.20.12",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-react-helmet": "^3.2.2",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-transformer-sharp": "^2.4.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },
  "devDependencies": {
    "prettier": "2.0.4"
  },
・・・以下略・・・

我能从反应中看出它是派生自react的。

与microCMS的集成

由于microCMS在无头CMS领域口碑良好，所以选择它。

    安装用于microCMS的插件。
$ yarn add gatsby-source-microcms
    下一步修改gatsby-config.js。
・・・前略・・・
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
// 追加↓
    {
      resolve: "gatsby-source-microcms",
      options: {
        apiKey: "X-API-KEY",
        serviceId: "guitar-club",
        endpoint: "news",
      },
    },
// 追加↑
  ],
}

只需将micorCMS的API-KEY、服务ID和终点写入options:{…}即可。即使不写也不会导致gatsby develop出现错误。

所以需要进行microCMS的设置。

微信公眾號已全部開放註冊

以下是microCMS的网站链接：https://microcms.io/
在这里创建账户并登录。
在这个网站上，我们可以设想成医疗信息网站，有普通信息、针对患者和医生的不同分类。每个分类下都会有许多信息页面，就好像是一个简单的两层网站。

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

獲取/articles/{CONTENT_ID}是指該端點為https://＜服務ID＞.microcms.io/api/v1/articles/。在gatsby中，只需要在gatsby-config.js的endpoint中寫入”articles”即可，但在Next.js等其他情況下，需要使用getInitialProps()函數。

const res = await axios.get(`https://＜サービスID＞.microcms.io/api/v1/articles/`,
key
)

似乎需要像这样做。参考：使用Next.js + microCMS + Netlify进入JAMstack世界的入门方法。

image.png
image.png
image.png
image.png
image.png

创建每篇文章介绍页面

image.png

在pages下创建一个名为patients.js的文件，并按以下方式编写代码。

// pages/patient.js
import React from "react"
import { graphql　} from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"


const PatientsPage = ({ data }) => (
 <Layout>
   <SEO title="患者の方へ" />

   {data.allMicrocmsArticles.edges.map(edge => {
     const articles = edge.node
     const category = edge.node.category[0].name
     console.log('◆categoryは　' + category)

     if (category == 'patients') {      //カテゴリーが患者さん用の場合表示
       return (
        <React.Fragment key={articles.id}>
         <div>
             <h2>{articles.title}</h2>
             <p>{articles.feature}</p>
           <img
             src={articles.pict.url}
             width={110}
             height={110}
             alt="pict画像"
           />
         </div>
         <div>
             {articles.category.map(category => (
               <React.Fragment key={category.id}>
                 <span>カテゴリー：{category.name}</span>
               </React.Fragment>
             ))}
        </div>
        <hr />
       </React.Fragment>
       )
     } else { return }
   })}
 </Layout>
)

export const query = graphql`
 {
    allMicrocmsArticles(
     sort: { fields: [createdAt], order: DESC }
   ) {
     edges {
       node {
         id
         title
         title_origin
         category {
           id
           name
         }
         pict {
           url
         }
         body
         feature
       }
     }
   }
 }
`

export default PatientsPage
image.png

虽然我不太了解GraphQL，但是它的写法好像是这样的呢。

// pages/patients.js
・・・略・・・

export const query = graphql`
 {
    allMicrocmsArticles(
     sort: { fields: [createdAt], order: DESC }
   ) {
     edges {
       node {
         id
         title
         title_origin
         category {
           id
           name
         }
         pict {
           url
         }
         body
         feature
       }
     }
   }
 }
`
・・・略・・・
image.png
image.png

用 GraphQL 接收到的数据通过 map 循环并显示在界面上。

创建个别文章的全显示页面

在创建动态页面时，我们通常会在本来是空白的gatsby-node.js文件中编写代码（哎？）。就是这样的安排。

// gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
 const { createPage } = actions

 const result = await graphql(
   `
     {
        allMicrocmsArticles {
         edges {
           node {
             id
             title
             title_origin
             category {
                id
                name
             }
             body
             feature
             pict {
                 url
             }
           }
         }
       }
     }
   `
 )

 if (result.errors) {
   throw result.errors
 }

 result.data.allMicrocmsArticles.edges.forEach(edge => {
     //上記のGraphQLでcategoryを書いてないがnode.categoryを掴めるようだ
     const categoryName = edge.node.category[0].name
     switch (categoryName) {
         case 'patients':  // categoryがpatientsだったらサブパスをpatientsに
             subDir = '/patients/'+ edge.node.id
             break;
         case 'doctors':  // categoryがdoctorsだったらサブパスをdoctorsに
             subDir = '/doctors/'+edge.node.id
             break;
         default:
             subDir = '/articles/'+edge.node.id
     }
   createPage({
     //path: `/patients/${edge.node.id}`,
     path: `${subDir}`,
     component: path.resolve(
       "./src/templates/article.js"
     ),
     context: {
       id: edge.node.id,
     },
   })

 })
}

为了创建动态页面，Gatsby提供了一个叫做createPages的API，在上述代码中，最重要的是createPages函数的内部。我想要区分患者向文章和医生向文章，所以使用了Switch语句，但简单地如下所示也可以：只需以下代码即可。

 result.data.allMicrocmsArticles.edges.forEach(edge => {
   createPage({
     path: `/articles/${edge.node.id}`,
     component: path.resolve(
       "./src/templates/article.js"
     ),
     context: {
       id: edge.node.id,
     },
   })

 })

组件: path.resolve( “./src/templates/article.js” ) 指定了一个名为article.js的模板视图文件。在下一步中将创建它。
在templates文件夹中创建的原因可能是出于约定或惯例。

在这里，通过指定文章数据的ID，即可在下一步中将其传递给要创建的模板。

在templates文件夹下创建一个article.js文件（文件名可以自定义）。

//templates/article.js
import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const ArticlePost = props => {
 const post = props.data.microcmsArticles // ㊟allMicrocmsArticleでない
 return (
   <Layout>
     <div>
       <h2>{post.title}</h2>
       <h3>原文：{post.title_origin}</h3>
       <br />
       <img
         src={post.pict.url}
         width={160}
         height={110}
         alt="pict画像"
       />
       <p
         dangerouslySetInnerHTML={{
           __html: `${post.body}`,
         }}
       ></p>
     </div>
   </Layout>
 )
}

export default ArticlePost

export const query = graphql`
 query($id: String!) {
   microcmsArticles(id: { eq: $id }) {
     title
     title_origin
     body
     pict {
       url
     }
     body
   }
 }
`

在第34行的`microcmsArticles(id: { eq: $id })`中，使用gatsby-node.js中的context指定的文章ID进行值传递。然后，通过此ID从microcmsArticles中使用GraphQL获取数据。请注意，我们需要获取特定的文章，因此不要使用`allMicrocmsArticle`。

 


// pages/patients.js
・・・略・・・
        <React.Fragment key={articles.id}>
         <div>
             <Link to={`/patients/${articles.id}`}>
                <h2>{articles.title}</h2>
             </Link>
             <p>{articles.feature}</p>
・・・略・・・

通过在gatsby develop中重新构建（根据gatsby-node.js文件的代码更改的内容而定，可能需要重新构建）能够显示详细页面。

image.png
image.png

网址是这个。

 

如果想将标题作为URL，请将edge.node.title设置为以下内容。如果不喜欢使用日语，只需要在文章内容API中添加一个以英文标题为字段即可（请勿包含半角空格）。
http://localhost:8000/patients/患者さん用記事②

重新加载后不会出现404错误。太棒了。

 

image.png

当然，不需要对gatsby-node.js和templates/article.js做任何更改。

// pages/doctors.js
import React from "react"
import { graphql, Link　} from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"


const PatientsPage = ({ data }) => (
 <Layout>
   <SEO title="医師の方へ" />

   {data.allMicrocmsArticles.edges.map(edge => {
     const articles = edge.node
     const category = edge.node.category[0].name
     
     console.log('◆categoryは　' + category)
     console.log('◆articles.idは　' + articles.id)
     console.log('◆リンク先は　' + `/doctors/${articles.id}`)

     if (category === 'doctors') {      //カテゴリーが医師用の場合表示
       return (
        <React.Fragment key={articles.id}>
         <div>
             <Link to={`/doctors/${articles.id}`}>
                <h2>{articles.title}</h2>
             </Link>
             <p>{articles.feature}</p>
           <img
             src={articles.pict.url}
             width={110}
             height={110}
             alt="pict画像"
           />
         </div>
         <div>
         {articles.category.map(category => (
               <React.Fragment key={category.id}>
                 <span>カテゴリー：{category.name}</span>
               </React.Fragment>
         ))}
        </div>
        <hr />
       </React.Fragment>
       )
     }
   })}
 </Layout>
)

export const query = graphql`
 {
    allMicrocmsArticles(
     sort: { fields: [createdAt], order: DESC }
   ) {
     edges {
       node {
         id
         title
         title_origin
         category {
           id
           name
         }
         pict {
           url
         }
         body
         feature
       }
     }
   }
 }
`

export default PatientsPage

充实二

React Bootstrap与React非常相配（因为React ，所以很自然）。参考：在Gatsby中引入React Bootstrap和导航栏。

补充三

GraphQL的处理方式简洁而好用。试着读取JSON数据非常顺利和简单。可能确实比REST更好。虽然只尝试过Query…。
参考：
10分钟了解GraphQL
GraphQL解释 (AWS AppSync)

盖茨比是最好的

或许这样做确实可以行得通。
在海外，如果说到静态网站生成器的话，大家似乎都会提到Gatsby，但是日本的知名度不太高的原因是不是因为和资生堂的那个GATSBY品牌同名有些令人困惑呢？

 

书籍广告

《了不起的盖茨比》版本5 >>修订版2

将前一部分的《Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト》和后一部分的《Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》》结合在一起，构建以下演示网站。
→ https://yah-space.work

使用最新版本的静态网站生成器Gatsby 5，讲解如何使用File System Route API动态生成页面。还介绍了版本5的新功能《Slicy API》《Script API》和《Head API》，以及它们的实现方法。此外，还介绍了如何使用Gatsby Functions实现查询表单，并将网站上传至Gatsby Cloud的方法！

 

用最新的Gatsby 5和microCMS结合创建企业网站的步骤进行解释。使用Gatsby版本4中的新功能”Gatsby Functions”和”microCMS的q参数”来实现”网站内搜索功能”。此外，还介绍了如何自定义SEO组件并将microCMS API显示为Twitter卡片的OGP标签实现方法。

 

bannerAds