如何利用GitHub GraphQL API開發(fā)個人博客？

fireflow 發(fā)布于2019-08-22 16:45 / 3007人閱讀

摘要：獲取標(biāo)簽及相關(guān)通常，我們會在博客首頁設(shè)計一個有分類的文章列表，這就要求在發(fā)布時需要選擇對應(yīng)的。這里我用的是的和的庫，核心代碼如下結(jié)合開發(fā)個人博客的核心內(nèi)容基本就這么多了，具體代碼歡迎查看，一起踩坑。

作為一個程序員，搭建一個個人博客幾乎是所有人的需求，一來比較酷，二來也可以記錄自己的學(xué)習(xí)和生活總結(jié)。但如果你不是全棧工程師，實現(xiàn)這個需求還是有點麻煩。后端搭建一套現(xiàn)有的前端框架及前端寫API都還是有一定門檻的，當(dāng)然，如果你是大牛當(dāng)我沒說，哈哈哈！

下面，我將介紹一個特別簡單的方法，甚至不用寫代碼，執(zhí)行幾個命令就可以搭建一個博客，就算你不是程序員，也是So easy。那就是：fork我的博客。為什么說fork我的博客就可以搭建一個博客呢？博客重要的是有內(nèi)容，并且可以隨時更新，而不是一個靜態(tài)頁。這就要用到本文的核心：GitHub GraphQL API，這是github提供的一個開放式的API。我們只需要將文章用Markdown寫好后，放到博客項目Issues里面，然后通過這個api，獲取我們的寫的文章，再前端渲染，就可以啦??！是不是特別棒，都不要寫API，也不用考慮文章存哪。下面我來介紹如何實現(xiàn)：

獲取access token

請求GitHub GraphQL API，首先需要按照以下步驟在github申請一個access token：

右上角個人頭像 > Settings > Developer settings > Personal access tokens > Generate new token

然后在Token description 寫好關(guān)于這個token的描述，在Select scopes選擇相應(yīng)的權(quán)限，這里只需要user > read:user 就可以，點擊Generate token按鈕后會跳轉(zhuǎn)到token列表頁，這時需要馬上把這個token記錄下來，因為這是敏感數(shù)據(jù)，刷新后就沒有了，不然得重新申請。

項目搭建

建議大家直接Fork我的項目 simbawus/blog，再修改相應(yīng)配置，這樣可以免去開發(fā)的成本，并且這個項目會持續(xù)更新，配置修改及啟動可查看我項目的README。當(dāng)然也可以fork后進行二次開發(fā)。也十分鼓勵大家從零開始開發(fā)，也順便練練手。

獲取GraphQL API數(shù)據(jù)

關(guān)于GraphQL的介紹，可查看我些的這篇文章前端應(yīng)該知道的GraphQL。

GitHub GraphQL API的文檔并沒有使用示例，如果之前沒用過GraphQL API，還是有點懵的，下面我舉三個常見的例子說明下，具體可以看我博客代碼，別忘了Star噢～。

獲取標(biāo)簽及相關(guān)issues

通常，我們會在博客首頁設(shè)計一個有分類的文章列表，這就要求在發(fā)布Issue時需要選擇對應(yīng)的label。先看官方label文檔：

Connections 里面有issues，所以在查詢labels的同時，還可以查詢issues。先列出要傳輸?shù)臄?shù)據(jù)data，核心也在這：

data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issues(orderBy:{field: UPDATED_AT, direction: DESC} , labels: null, first: 10, after: ${page}) {
        edges{
          cursor
          node{
            title
            updatedAt
            bodyText
            number
          }
        }
      }
      labels(first: 100){
        nodes{
          name
        }
      }
    }
  }`
};

repository代表查詢指定的倉庫，括號里的參數(shù)owner代表這個倉庫的所有者，name代表倉庫名稱。issues表示要查詢的issue列表，里面的參數(shù)表示這個列表的條件：orderBy為排序方式，根據(jù)更新時間UPDATED_AT和倒序DESC來，labels為null，說明查詢的是所有issues，first表示一次查詢返回的issues數(shù)量，after傳上一個issue的id，可用來分頁，最終這次請求拿到的數(shù)據(jù)結(jié)構(gòu)如下，完整的請瀏覽器查看：

{
  "data": {
    "repository": {
      "issues": {
        "edges": {
          "0": {
            "cursor": "Y3Vyc29yOnYyOpK5MjAxOC0wNC0yNlQxMDoyNjoxNiswODowMM4S8hYL",
            "node": {
              "bodyText": "作為一個程序員...",
              "number": "11",
              "title": "如何利用GitHub GraphQL API開發(fā)個人博客？",
              "updatedAt": "2018-04-22T03:46:34Z",
            }
          }
        }
      },
      "labels": {
        "nodes": {
          "0": {
            "name": "JavaScript"
          }
        }
      }
    }
  }
}

搜索

search這個connections的文檔寫的讓我一臉懵逼，摸索了好久才寫出來，大家可以試著按官網(wǎng)文檔寫一下。

let data = {
  query: `query {
      search(query:"${keyWords} repo:simbawus/blog", type: ISSUE, first: 10) {
        issueCount
        edges{
          cursor
          node{
            ... on Issue {
              title
              number
              bodyText
              updatedAt
            }
          }
        }
      }
    }`
};

search的query參數(shù)類型為String!，表示一個非空的字符串，怎么也想不到要這么寫才行吧？query:"${keyWords} repo:simbawus/blog"。node 這個fields的文檔，看的也是二臉懵逼，還好想到es6的擴展符。

詳情

最重要的是文章內(nèi)容這部分了，傳輸數(shù)據(jù)比較簡單：

let data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issue(number: ${articleId}) {
        title
        updatedAt
        bodyHTML
      }
    }
  }`
};

請求直接返回一段HTML，問題是如何處理這段HTML，格式化并且高亮文章里面的代碼。這里我用的是React的dangerouslySetInnerHTML和github的css庫github-markdown-css，核心代碼如下：

import "github-markdown-css";
class ArticlePage extends React.Component {
  _renderHTML() {
    return { __html: this.state.bodyHTML };
  }
  render() {
    return ( 
      
      
    );
  }
}

結(jié)合GitHub GraphQL API開發(fā)個人博客的核心內(nèi)容基本就這么多了，具體代碼歡迎查看github：simbawus/blog，一起踩坑。

歡迎討論，點個贊再走吧～

文章同步于以下社區(qū)，可以選一個關(guān)注我噢 ?????

simbawu | github | segmentfault | 知乎 | 簡書 | 掘金

GPU云服務(wù)器云服務(wù)器如何制作個人博客個人博客域名如何選擇如何開發(fā)api 個人如何開發(fā)小程序

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94624.html

發(fā)表評論

登陸后可評論

0條評論

fireflow

男|高級講師

我要關(guān)注我要私信

TA的文章

HostDare：洛杉磯CN2 GIA線路VPS年付44.99美元起,全場9折

閱讀 2657·2021-09-13 10:26
大學(xué)渾渾噩噩度過四年；畢業(yè)做過行政、人事、繪圖等工作；也沒呆多久，選擇軟件測試成功逆襲達到月薪25K

閱讀 1915·2021-09-03 10:28
前端20個靈魂拷問徹底搞明白你就是中級前端工程師【下篇】

閱讀 1991·2019-08-30 15:44
簡單說 JavaScript中的事件委托（上）

閱讀 808·2019-08-29 14:07
深入理解ES6之《擴展對象》

閱讀 396·2019-08-29 13:12
你需要知道的requestAnimationFrame

閱讀 2154·2019-08-26 11:44
Node.js學(xué)習(xí)筆記（二）

閱讀 2345·2019-08-26 11:36
有趣的 JavaScript 格式轉(zhuǎn)換

閱讀 2015·2019-08-26 10:19

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何利用GitHub GraphQL API開發(fā)個人博客？

相關(guān)文章

前端應(yīng)該知道的GraphQL

**為什么我選擇用 Github issues 來寫博客**

**為什么我選擇用 Github issues 來寫博客**

框架的游戲：2019 年 JavaScript 流行趨勢

專治前端焦慮的學(xué)習(xí)方案

發(fā)表評論

0條評論

fireflow

男|高級講師

TA的文章

HostDare：洛杉磯CN2 GIA線路VPS年付44.99美元起,全場9折

大學(xué)渾渾噩噩度過四年；畢業(yè)做過行政、人事、繪圖等工作；也沒呆多久，選擇軟件測試成功逆襲達到月薪25K

前端20個靈魂拷問徹底搞明白你就是中級前端工程師【下篇】

簡單說 JavaScript中的事件委托（上）

深入理解ES6之《擴展對象》

你需要知道的requestAnimationFrame

Node.js學(xué)習(xí)筆記（二）

有趣的 JavaScript 格式轉(zhuǎn)換

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何利用GitHub GraphQL API開發(fā)個人博客？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何利用GitHub GraphQL API開發(fā)個人博客？