Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue #1

Open
grimmer0125 opened this Issue Apr 12, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@grimmer0125
Copy link
Owner

grimmer0125 commented Apr 12, 2018

現在 Metadata (from Gatsby+Lumen) 的rule:


https://raw.githubusercontent.com/grimmer0125/gatsby-blog/master/src/pages/articles/2011-11-08---use-c%2B%2B-with-objective-c/index.md 為例,

---
title: 'Let Objective-C use C++ code'
date: "2011-11-08"
layout: post
draft: false
path: "/posts/perfecting-the-art-of-perfection/"
category: "Objective-C"
tags:
- Objective-C
- C++
description: "" 
---
最少要有一篇文章像上面一樣每個item都有寫 (path可拿掉, title拿掉build也會成功頁面會show但文章就沒title), 不然會build/query失敗. ui就show不出來. `category` 現在ui是沒有的但至少要加一個在某一篇文章上.

第二篇以上的文章如果要show完整資訊在UI上, 最低限度的metadata:
---
title: 'Callback In CSharp'
date: "2013-12-15"
layout: post
---

query 失敗: build成功但頁面整個show失敗, 雖然是可連graphql server來測試), 如果是多個都沒有但有一個metadata item有, 則就ok (GraphiQL會顯示其他object的那item是null 但唯一一篇的那item有值)
e.g. GraphiQL的 error: "message": "Cannot query field \"description\" on type \"frontmatter_2\".",

build 失敗: 頁面跟 graphql server都完全沒有. case1: 若都沒有含 draft, 則其build 失敗時:node_modules/graphql/validation/rules/ArgumentsOfCorrectType.js 出現exception. e.g. [ { GraphQLError: Argument "filter" has invalid value {frontmatter: {draft: {ne: true}}}. In field "frontmatter": In field "draft": Unknown field.

ref: gatsbyjs/gatsby#2670
ref: gatsbyjs/gatsby#2392 (GraphQL失敗)

case2: tags若都沒有文章有, 則會build失敗, 但出現的是 Cannot query field. 所以build失敗應該是 gatsby-node.js 造成的. build成功但 query失敗的case則是 react頁面自己內部的 GraphQL失敗造成的.

gatsby-node.js 造成的build失敗應該可以用 try-catch 解決. 但build成功但 (GraphQL) query還是沒有soultion. 除非gatsby的high order component那邊可以try-catch.

以前 githug pages + jekyll: Metadata 是都有加tag, 大部份有加title, 有部份有加date, 其他items都沒加. 然後ui上它會自動抓 excerpt (description) 來show. ui上也無category.

Gatsby官方的example: 只有title跟date. 所以以下其他rule限制是 Lumen 造成的.

https://github.com/AustinGreen/gatsby-starter-netlify-cms : 也有 title, date, tag跟description.


title (考慮如沒有, 就從自動從folder產生)

要加. 不然可show但 text/link會變成undefind

date (有下面issue, 考慮如沒有, 就從自動從folder產生)

(舊jekyll+github pages的只有部份html文章才有加). 至少要有一篇文章有, 不然會query 失敗.

layout (有下面issue->徹底拿掉就好了)

至少有一篇文章有, 不然會query fail. 文章如果不加 layout: post 則不會顯示此文章. 如果markdowm文章 是在 pages/pages裡面則是 layout: page.

draft (有下面issue->徹底拿掉就好了)

至少有一篇文章有, 不然會build失敗

path

(Optional) 此文章的url, 可不加, 建議不加讓系統自動判斷.

category (有下面issue->徹底拿掉就好了)

至少有一篇文章有, 不然會build失敗(連graphql server也不ok). p.s. 現在localhost/categories ui 是空的 (先拿掉內容不能會有更多問題, 好像是query之類的)

tag (有下面issue->每篇都記得加就好了)

至少有一篇文章有, 不然會build失敗

description (有下面issue, 考慮徹底拿掉)

Issues:

  1. 現在是全部文章裡至少要有一篇文章有寫 description:"" (內容空字串也行), 不然query會失敗(build成功但頁面整個show失敗, 雖然是可連graphql server來測試).

  2. 想辦法像舊的blog (jekyll+github pages)一樣, 自動抓 excerpt 來show (就算沒有文章有包含此metadata). 現在如果沒有 description, 會show excerpt.

query error的google:
https://www.google.com.tw/search?q=Cannot+query+field+on+type+graphql&rlz=1C5CHFA_enTW699TW699&oq=Cannot+query+field++on+type+graphql&aqs=chrome..69i57.12797j0j4&sourceid=chrome&ie=UTF-8

--

GraphiQL: http://localhost:8000/___graphql

{
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
            title
            date
            layout
            draft
            category
            description
       }
      }
    }
  }
}

--

todo

其他可考慮的 gatsby starter

清單: https://www.gatsbyjs.org/docs/gatsby-starters/

一些不錯的:

https://github.com/ryanwiemer/rw
https://github.com/praagyajoshi/gatsby-starter-2column-portfolio
https://github.com/v4iv/gatsby-starter-business
https://github.com/taylorbryant/gatsby-starter-tailwind
https://github.com/ryanwiemer/gatsby-starter-gcn
https://github.com/LeKoArts/gatsby-starter-minimal-blog

https://github.com/greglobinski/gatsby-starter-personal-blog 不錯, 考慮換成這個或加上search以及快速切換到下一個文章功能(side bar show 文章list)

https://github.com/haysclark/gatsby-starter-casper 不錯, 考慮換成這個. 有分頁pagination功能+前後page button!!
https://github.com/ericwindmill/gatsby-starter-docs
https://github.com/codebushi/gatsby-starter-photon https://github.com/codebushi/gatsby-starter-stellar 不錯

https://dschau.github.io/gatsby-blog-starter-kit/ 有前後page button
http://gatsby-forty.surge.sh/ 有用netlify的form讓瀏覽的人可以填問題寄email, 另外 它說有 pagination !!!
https://github.com/wonism/gatsby-advanced-blog, https://kind-cori-836fe1.netlify.com/ 有pagination , search

https://github.com/calpa/blog

Markdown� engine設定及其syntax highlight也可考慮加強一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.