Gatsby精品文章

• 

  用Gatsby和Strapi創(chuàng)建一個(gè)靜態(tài)博客(翻譯和自己探索過(guò)程中的經(jīng)驗(yàn)總結(jié))

  用Gatsby和Strapi創(chuàng)建一個(gè)靜態(tài)博客(翻譯和自己探索過(guò)程中的經(jīng)驗(yàn)總結(jié)) 原文參閱: Building a static blog using Gatsby and Strapi或https://blog.strapi.io/buildi.... 本篇主要是對(duì)其精華內(nèi)容進(jìn)行翻譯, 以及實(shí)操過(guò)程中遇到的問(wèn)題解決和探索. 一些具...

  lijy91 2019-06-26 17:32 評(píng)論0 收藏0
• 

  使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

  ...建過(guò)，不過(guò)使用 Hexo 一鍵生成的，其實(shí)當(dāng)時(shí)也有考慮過(guò) Gatsby，不過(guò)這個(gè)框架搭建博客入門(mén)還是比較難的，前置知識(shí)點(diǎn)包括 react 和 graphQL。 這個(gè)系列的文章記錄的就是這個(gè)博客搭建中需要注意的點(diǎn)。 此博客使用 gatsby-starter-blog 作...

  mzlogin 2019-08-23 13:58 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—安裝和博客搭建（0）

  1.安裝 yarn global add gatsby-cli 2.創(chuàng)建gatsby項(xiàng)目 gatsby new blog 3.開(kāi)發(fā) gatsby develop 注意報(bào)錯(cuò)： error UNHANDLED EXCEPTION Error: no parsers registered for: 文件空格問(wèn)題，最好不要用空格和中文。直接放在硬盤(pán)根目錄下就不會(huì)有問(wèn)題。 打開(kāi)http...

  qieangel2013 2019-08-23 17:21 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—支持Markdown（1）

  1.安裝插件 我用Gatsby就是因?yàn)樗С諱arkdown.所以不墨跡，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>pages下面,添加三篇文章，頭部格式如下： path : /blog/my-first-post date : 2019-05...

  RobinTang 2019-08-26 18:27 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—添加上一頁(yè)下一頁(yè)功能（完結(jié)篇）

  1.調(diào)整gatsby-node 這個(gè)就簡(jiǎn)單了,打開(kāi)gatsby-node.js，增加代碼如下： const path = require(path); exports.createPages = ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.resolve(`...

  youkede 2019-08-23 17:59 評(píng)論0 收藏0
• 

  AntdSite - 一個(gè)基于React.Js的靜態(tài)網(wǎng)站生成器

  ... Antdsite 是一個(gè)基于 React.js 的靜態(tài)網(wǎng)站生成器。 它是由Gatsby Js驅(qū)動(dòng)的 使用 Ant Design設(shè)計(jì)構(gòu)建， 并且它的配置項(xiàng)借鑒了Vuepress 由來(lái) 以前我是vuepress的用戶(hù)，在開(kāi)發(fā) vue 組件中使用它來(lái)寫(xiě)文檔感覺(jué)非常順手。 后來(lái)我開(kāi)始研究上了 r...

  jlanglang 2019-08-26 10:34 評(píng)論0 收藏0
• 

  創(chuàng)造屬于自己的靜態(tài)博客

  ...ttps://ssshooter.com/2019-02... 0 前言 本文并不是從 0 開(kāi)始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項(xiàng)目搭建時(shí)間，直接得到一個(gè)最簡(jiǎn)單的博客模版，這個(gè)模板的缺點(diǎn)是功能少，但是反...

  Channe 2019-08-23 15:05 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—添加博客內(nèi)容頁(yè)（4）

  1.查數(shù)據(jù) 注意，這里跟前面不一樣了，我用gatsby-node.js這個(gè)文件去提供數(shù)據(jù)，沒(méi)有什么為什么，規(guī)定，照做就好。 const path = require(path); exports.createPages = ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate =...

  wean 2019-08-23 17:51 評(píng)論0 收藏0
• 

  使用 Gatsby.js 搭建靜態(tài)博客 4 標(biāo)簽系統(tǒng)

  原文鏈接：https://ssshooter.com/2018-12... 回顧：使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整 官方自帶標(biāo)簽系統(tǒng)教程，英語(yǔ)過(guò)關(guān)可以直接閱讀官方教程。 以下說(shuō)一下重點(diǎn)： 提示：以下所有查詢(xún)都可以在 localhost:8000/___graphql 測(cè)試 建立標(biāo)...

  AndroidTraveler 2019-08-23 14:23 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—添加博客文章列表（3）

  ...t import Header from ../components/header import { Link,graphql } from gatsby const Layout = ({ data }) => { const { edges } = data.allMarkdownRemark; return ( { ...

  cnTomato 2019-08-26 13:55 評(píng)論0 收藏0
• 

  Gatsby極速入門(mén)—使用GraphQL解析Markdown（2）

  ... src>components>Header.js里面， import { StaticQuery, graphql } from gatsby import React from react const TitleAndDescription = ({ data }) => { //這里的數(shù)據(jù)是下面查出來(lái)的 const title = data.site.siteMetadata.ti...

  fou7 2019-08-26 13:48 評(píng)論0 收藏0
• 

  使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整

  原文鏈接：https://ssshooter.com/2018-12... 回顧：使用 Gatsby.js 搭建靜態(tài)博客 2 實(shí)現(xiàn)分頁(yè) 修復(fù)代碼高亮 為了測(cè)試樣式，隨便找一個(gè)以前的 .md 文件粘貼到 blog 項(xiàng)目中渲染看看效果： emmm，問(wèn)題大了，必備的代碼高亮都沒(méi)有... 但是當(dāng)...

  Julylovin 2019-08-23 14:04 評(píng)論0 收藏0
• 

  使用 Gatsby.js 搭建靜態(tài)博客 2 實(shí)現(xiàn)分頁(yè)

  原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件 0 && ( ← 上一頁(yè) )} {currentPage + 1 { createPage({ path: i === 0 ? `/blog` : `/blog/${i + 1}`, componen...

  william 2019-08-23 13:59 評(píng)論0 收藏0
• 

  使用 Gatsby.js 搭建靜態(tài)博客 EX 使用語(yǔ)雀發(fā)布到博客

  ...很方便，實(shí)現(xiàn)過(guò)程也很有意思。同樣的原理可以運(yùn)用到 Gatsby.js 博客上。 因?yàn)槭褂昧?netlify，自動(dòng)部署的事情就不用自己擔(dān)心了，本文講述的有一下兩點(diǎn)： 熟悉語(yǔ)雀 webhook 使用 GitHub api 更新 GitHub 倉(cāng)庫(kù)（更新倉(cāng)庫(kù)后 netlify 自動(dòng)部...

  DoINsiSt 2019-08-23 14:47 評(píng)論0 收藏0