如何使用Gatsby和MDX構建開發人員博客

>您可以輕鬆地將您的想法發佈到諸如Dev.to，Hashnode或Medium之類的網站，但理想是對自己的內容充分控制。有一個不斷增長的工具清單，用於構建自己的網站並控制自己的內容。在這個廣泛的教程中，我將介紹如何使用蓋茨比（Gatsby）發出內容，並在這種生態系統中獲得添加的鈴鐺和哨子。

>

>我最初使用jekyll發布我的博客，但隨後使用Lumen模板切換到Gatsby。自2017年5月左右，我一直在使用Gatsby。

>

>我將從你好，世界上去！ Gatsby項目通過代碼語法突出顯示的編碼博客和該深色模式的主題切換。

>有一個豐富的插件，開頭和主題生態系統可供蓋茨比迅速啟動並運行，但我想採用一種漸進的披露方法來展示蓋茨比，重點是蓋茨比項目的基礎知識。 >

為什麼蓋茨比？

gatsby是一個靜態站點生成器，因此當要求頁面時沒有動態的頁面。 Gatsby網站的構建輸出可以託管在CDN上，使其在全球範圍內可用且超級可擴展。 Gatsby可以使用Markdown文件在站點項目中創建頁面。 Gatsby將把Markdown文件讀取到Gatsby文件系統中，並將其轉換為HTML，然後在構建網站時創建靜態頁面。

最終結果是一個超快速站點，在請求頁面時，延遲很少。

Markdown和MDX

>自2016年以來，我一直在記錄自己的開發旅程。 Markdown提供了一種啟用可以轉換為HTML的純文本文件中簡單編輯的方法。

到目前為止，Gatsby是我用於使用Markdown和MDX的最佳框架，因為上面不需要使用FrontMatter的特殊符號。

>

我需要什麼？

>

如果您要遵循，則需要一些事情：

>

基本的Web開發設置：節點，終端（bash，zsh或Fish）>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

文本編輯器

對React的基本理解

如果您沒有這些，則既有stackblitz and github代碼碼

>在下面的示例中，我將使用VS代碼作為文本編輯器，將紗線作為我的首選軟件包管理器。如果您喜歡NPM，那很酷。 ？

• 您還可以在GitHub上找到本教程的完整代碼。 好吧，是時候開始了！
• >
你好，世界！
是時候啟動一個蓋茨比項目了。我將從命令行中進行大部分，首先：

>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

酷。現在，在其他任何地方去其他任何地方之前，我都需要在安裝任何NPM模塊之前添加.gitignore文件：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

>現在，我可以安裝所有需要的NPM優點，而無需VS代碼git尖叫我太多的活動更改。現在，讓我們安裝一些依賴項，以與Gatsby一起啟動並運行：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

接下來，我們將為該項目添加第一個React組件（許多）。我將以下內容添加到我創建的index.js文件中：>

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

>我現在準備從命令行運行gatsby開發命令：>

>這將旋轉Gatsby Dev Sever，並說我的項目可以在端口8000（默認的蓋茨比端口）的瀏覽器中查看。 URL是http：// localhost：8000/。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

>直接使用命令行接口（CLI）的gatsby二進制命令是完全可行的，但是大多數人會將可用命令添加到package.json文件上的腳本部分。

作為額外的獎勵，可以在此處添加一些其他功能。

>

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

>如果我們不想每次在同一端口上運行該項目，則可以使用-P標誌和指定的端口進行更改。例如，蓋茨比開發-p 8945。

如果我們想打開“瀏覽器”選項卡，一旦項目準備就緒，我們可以將-O添加到腳本中。

我將使用服務腳本做同樣的事情，所以我知道當我構建一個項目時，它是在開發一個端口上的不同端口：>

，強制性的“你好，世界！”歡迎使用，我可以繼續介紹本文的其餘部分！ ？

最後，我將提交我到目前為止所做的更改：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>博客的內容

好吧，該項目現在沒有很多事情要做，所以首先，我將再次從命令行中添加一些內容：

>

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

我將在我製作的整個示例中使用這些。

>您會注意到文件擴展名.mdx。這是一個MDX文件。

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

>前物質

>在為博客添加一些內容之前，我需要談論前提。

前提是一種存儲有關蓋茨比在構建頁面時可以使用的文件的信息的方法。現在，我將添加帖子標題和日期。我還將為他們添加一些內容。這是我們的第一篇文章：

這是我們的第二篇文章：

第三篇文章：

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

>目前的帖子就是這樣，因為這些帖子尚未被蓋茨比（Gatsby）識別為頁面。我需要讓Gatsby知道在哪裡可以找到可以添加到項目中的內容。為此，我將向蓋茨比添加一個配置文件。

>

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

讓我們提交我為git所做的更改：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

gatsby config

gatsby配置是用於定義和配置您可以使用的許多蓋茨比插件的方法。在蓋茨比插件生態系統上有更多信息。現在，我將在終端中再次創建文件：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

這將在項目的根部創建gatsby-config.js，因此我可以開始配置gatsby來讀取我之前創建的.mdx文件。 >

蓋茨比插件

>現在，我可以安裝和配置插件蓋茨比所需的源，並顯示我創建的文件。我現在將它們全部安裝，並簡要詳細介紹它們的目的：

快速查看軟件包。 JSON現在表明我已安裝了以下依賴項：>

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

>要注意的一件事是，在蓋茨比（Gatsby）中，不需要在您的組件中導入react 17的反應。但是，為了完整，為了避免任何混亂，我將其包括在這些示例中。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

現在，我需要配置Gatsby-Plugin-MDX和Gatsby-Plugin-MDX。在gatsby-config.js文件中，我會添加以下內容：

>

commit變化到現在：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

gatsby graphql

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

>現在是時候通過使用gatsby graphql claphiql來查看我在蓋茨比的文件的位置。您可能已經註意到，如果您正在關注，CLI指示兩個URL位置來查看該項目：>

>我將使用___graphql（三個下劃線）路由來查看文件系統中的文件。

如果這似乎有些嚇人，我將嘗試涵蓋所有似乎沒有意義的部分。如果您要跟進，則應該很好地將示例複製到Graphiql Explorer中。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>打開GraphiQl Explorer時，我有幾個Explorer面板。這些都是可以在項目中探索的所有可用數據，並且取決於我在gatsby-config.js文件中配置的內容。

graphiql查詢面板和結果旁邊。在這裡，我將編寫GraphQl查詢以檢索所需的數據。查詢面板底部還有一個查詢變量部分，稍後我將進行。

。 最右邊的

是GraphQl文檔資源管理器。由於GraphQl的嚴格鍵入，這意味著它能夠在其數據上生成自己的文檔。但這超出了這篇文章的範圍。

>

>與GraphQl

的查詢本地文件

接下來，我將查詢我在Graphiql查詢面板中之前添加的文件。在此查詢中，我要查詢文件字體問題中定義的標題和日期：

>

>如果我們將其彈出到查詢面板中，請按“大播放”按鈕，我們會在結果面板中獲取一些數據。我們還可以使用左圖中的資源管理器來挑選數據。這是我在運行查詢後得到的：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

這是一個很大的JSON對象，其中包含我們在查詢中要求的相關信息。我們將盡快查看如何使用它。目前，這意味著我們可以在Gatsby項目中使用此數據來製作頁面。

>站點元數據

在gatsby-config.js文件中，還有一個可以指定站點元數據的選項。網站元數據是為了重複使用常見數據，例如網站標題和描述。

> 當我想在網站上添加元標記以進行搜索引擎優化（SEO）時，這將是進一步有用的。 （同樣，稍後再詳細介紹。

i

可以直接在模塊中定義網站metada.exports。

>網站元數據對象可能會變得有些大，我發現將其保存在自己的對像中可以使其更簡單地進行推理，因此，我將分別定義它：>

然後，將SiteMetAdata對象添加到Gatsby配置文件：>

現在，我可以再次跳到Graphiql Explorer，並使用以下查詢查詢該站點元數據：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

>如果您要更改gatsby-config.js文件，請停止和重新啟動開發服務器總是一個好主意，因此我要這樣做（

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

ctrl

>，然後開發紗線），然後在GraphIQL Explorer中刷新頁面並再次運行查詢以獲取數據：

>

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

做一個站點元數據鉤

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

>現在，我已經在蓋茨比文件系統中擁有網站元數據，我可以在要與蓋茨比靜態查詢掛鉤Usestaticquery一起使用的任何地方查詢它。在將以下內容添加到src/pages/index.js文件之後，我將殺死開發服務器並重新啟動

>關於其中一些符號的快速註釋：const {stity：{siteMetAdata}，}是快速獲取網站查詢中數據的方法，在此我將SiteMetAdata從站點對像中拉出。這被稱為破壞性。 > 現在，在我再次啟動Dev Server之後，我可以轉到Windows/Linux中的瀏覽器控制台（ control

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

shift

J

J

命令

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

option

j在macOS上），請參見控制台輸出中的sitemetadata對象。 > 我將獲得以下控制台輸出： >不必擔心找不到缺少404頁的控制台警告（net :: err_aborted 404（找不到））。我稍後再做。 > 要避免每次都必須編寫此查詢，我想在組件中使用它。我將把它抽到自己的鉤子中：

>現在，我將在新創建的src/hooks/use-supe-metadata.js文件中添加鉤子，以獲取site get ecter ot-octe of the網站元數據：

>

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

您可能已經註意到，此查詢與Graphiql Explorer的查詢不同：>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

這是為了命名查詢。因為我會在項目中使用很多查詢，所以給他們有意義的名字很有意義。

現在，我將在src/peg/index.js文件中實現新鉤子：

>少量的詳細信息，我能夠從site_metadata_query中選擇我想要的項目。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

是時候到目前為止進行更改了：

>主題UI

的樣式

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

為了設置此項目，我將使用主題UI，因為它的速度是實現佈局和諸如DAMP模式之類的功能。我將詳細介紹與我所做的事情和理由有關的內容，儘管這並不是有關如何使用主題UI的指南。

>為主題UI添加一些其他依賴項，這些依賴項是：>

>安裝了這些>，我需要將gatsby-plugin-theme-ui添加到gatsby-config.js插件陣列：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

>現在，如果我停止並重新啟動Dev Server，我的外觀略有不同！確切地說，這一切都變得有點藍色，或者Periwinkle！這是Gatsby-Plugin-theme-UI做的事情，顏色是默認的。

>

>主題UI的Gatsby插件提供了許多配置選項，其中有些我將在需要時詳細介紹。目前，我將創建一個文件夾並為主題UI定義一個主題對象：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

>

在src/gatsby-plugin-theme-ui/index.js文件中，我將添加一些主題UI預設，定義主題對象，然後在瑞士預設中傳播到主題，主題顏色和样式。

>

>對於黑暗模式，我使用的是深層主題UI預設，並將其擴散到模式對像中的黑暗對象。 （很快就會詳細介紹。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

>現在，如果我重新啟動Dev Server（再次，是的，您將學會處理它），隨著瑞士主題的應用，它看起來更容易接受。在撰寫本文時，主題UI有時不會刷新Local -Host頁面，因此有必要進行瀏覽器頁面刷新。

將更改提交到git：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

是時候添加一些React組件！

佈局組件

Gatsby沒有特定的佈局，向開發人員付出了責任。在這種情況下，我正在為整個網站進行佈局。可以將許多佈局納入蓋茨比項目中，但是在此示例中，我將僅使用一個。

>

>現在，我將重構我當前擁有的內容，以使所有內容都被佈局組件包裹。我當前在src/pepages/index.js中使用的內容可用於標題組件，因此我現在要製作幾個文件以進行佈局和標題：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>

現在將標題和描述從src/pages/index.js移動到新創建的src/components/header.js component。

>而不是讓標題組件中使用的使用intemetadata，而是將我需要從佈局組件的標頭傳遞給標頭，這是標題將要使用的位置。 （不久此信息。）首先，這是居住在src/components/header.js的標題組件：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

>我使用主題UI佈局元素添加了一些基本樣式。這看起來與以前有些不同：框，鏈接，標題……什麼？這些都是所有主題UI組件，可用於佈局，形式元素等。

>

>您可能會注意到AS = {gatsbylink}鏈接prop添加到鏈接組件中。這在主題UI中使用AS Prop，並讓將組件傳遞到主題UI樣式中。 Paul Scanlon有一篇很棒的帖子，更詳細地解釋瞭如何在主題UI中完成。為了對主題UI進行真正的全面解釋，同一作者也有“理解主題UI”。

>還有主題UI的SX和變體道具。 SX使其他樣式可以傳遞給組件。將其視為與JSX樣式= {{}} prop相當的。變體道具允許將一組預定義的樣式從主題應用於所使用的組件。

現在，位於src/components/layout.js中的佈局組件：>

在這裡，我要保留使用intemetadata鉤子並通過標頭組件需求的道具，再次使用SX Prop添加一些基本樣式，以使對齊方式在主包含Div中。然後，我正在為孩子們創建一個主要包裝紙。

>

孩子的道具是返回任何佈局組件封裝的東西，其中包括我要應用該佈局的任何內容。例如：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

這將返回佈局組件中的所有內容及其包裝的內容。在上面的示例中，當前將是標題和佈局組件包裹的H1。 例如，我將返回索引頁面（src/pages.index.js），然後添加以下內容：

>

結果是標題，在佈局組件中提供，並包裝H1。

索引頁面帖子查詢

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

>現在是時候獲取我在開始時創建的帖子，並在索引頁面上顯示它們作為可點擊鏈接的列表。

>

>獲取帖子信息，我將重新創建有關使用GraphQl查詢本地文件的部分中的查詢

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

>我已經添加了節點和slug的ID。這是.mdx文件的文件路徑。

>摘錄是使用蓋茨比函數從帖子主體中獲取前250個字符，還可以通過另一個內置的蓋茨比函數在日期添加一些格式。

>

然後，作為在日期下訂單中訂購帖子的一種方式，我添加了一種：allmdx（sort：{fields：[frontMatter__date]，order：desc}）{。這是在帖子前提下的日期進行排序。

>

>將其添加到Graphiql Explorer中給了我這個結果：>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

>現在，我可以在src/peg/index.js文件中使用該查詢來獲取該數據以在索引頁面中使用。在IndExpage函數中，我將通過GraphQl查詢從提供給組件的Prop的破壞數據：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

這使用了先前詳細介紹的組件。請注意，摘錄，前磨和sl被data.allmdx.nodes破壞了：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

>單擊鏈接將帶我到gatsby.js開發404頁。那是因為我還沒有為.mxd文件製作頁面。那是下一個。

>我將在繼續前進之前做出的事情：

>

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

使用gatsby文件系統路由API與MDX

>我將使用Gatsby文件系統路由API獲取我之前創建的帖子的文件路徑。文件系統路由API是從我的GraphQl數據編程創建頁面的一種方式。

>此方法具有針對頁面的特殊文件符號，當Gatsby在構建時間生成文件系統數據時，將針對目標。該文件指示節點和sl。我將首先創建文件，然後詳細說明數據來自何處：

>

在文件中，我將為要在此模板中包含的數據定義一個GraphQl查詢：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

>現在是很多代碼，所以我會將其分解。這主要與GraphQl查詢有關：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

>

>查詢的開始使用post_by_slug（$ slug：string），主節點是mdx，所以我使用mdx.slug，例如filename {mdx.slug}.js.js。 <span>"scripts": { </span> <span>"build": "gatsby build", </span> <span>"dev": "gatsby develop", </span> <span>"serve": "gatsby serve", </span> <span>"clean": "gatsby clean" </span><span>}, </span>

如果我將查詢粘貼到我的graphiql explorer中，然後按播放按鈕，我會得到：

這是因為GraphIQL Explorer中沒有為$ slug定義的變量。如果查看查詢面板的底部，您會看到一個查詢變量部分。單擊此會將其擴展。在這裡，我需要為slug添加變量。我將用一個文件的路徑在捲曲括號中定義它：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>

>再次運行查詢，我將獲取該文件的所有數據。我已經評論了身體輸出的可讀性：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

文件系統路由API正在執行的操作是將單個文件路徑傳遞到src/pages/{mdx.slug} .js中的頁面查詢中，並將數據從（{data}）中的該查詢返回到頁面支柱被傳遞到頁面。

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

在此文件中，您可能會注意到我已經從返回的數據中破壞了屍體，然後從前桅杆上，在兩級破壞中從前桅杆上產生標題：>

的另一種方法是：

>

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

使用破壞使它的詳細信息要少得多。

>

>要注意的最後一件事是將帖子的主體包裹起來。這是前物質塊之後的.mdx文件中包含的所有內容。從GraphIQL查詢中進行了評論的MDX，這是在MDXRenderer中包裝的內容：

>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

我現在將提交更改：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

root包裝器概念

現在，單擊索引頁面上的一個鏈接將帶我到所需的.mdx頁面，但看起來與索引頁面有些不同，對嗎？

那是因為還沒有佈局包裝它。在這裡，我可以使用Gatsby瀏覽器API並使用包裝功能來包裝所有頁面元素。還建議我在Gatsby Ssr中使用相同的功能。

為了避免在兩個文件中復制相同的代碼，我將創建一個使用我要使用的實際代碼並將其導入到提到的兩個gatsby-*文件中的第三個文件。

>

首先，我將創建所需的文件：

>

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

root包裝器文件是我將使用包裝函數的地方：

然後，在gatsby-browser.js和gatsby-ssr.js文件中，我將添加此信息：

>

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

如果包裝功能需要任何更改，我可以在一個文件root-wrapper.js。

是時候停止並再次重新啟動Dev Server以查看更改生效！

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

>

>由於在此處使用佈局組件來包裝網站上的所有頁面元素，因此無需將其保存在索引頁面上，因此我將從src/peg/pages/index.js中刪除該頁面：

>我將在繼續前進之前進行更改：

>

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

404頁

是時候製作404頁！

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>

>在src/pages/404.js文件中，我將添加一條消息：>

現在，我可以直接導航到404頁進行檢查：http：// localhost：8000/404。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

請注意，在使用Gatsby開發開發時，Gatsby將繼續使用覆蓋您的自定義404頁的默認404頁。

提交此事，然後繼續進行下一部分：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

>

深色主題切換

暗模式是編碼博客的重要特徵。 （我是說一個開玩笑的是，如果您不確定！）我將使用主題UI顏色模式掛鉤UseColormode，並在我之前在主題對像中定義的兩種模式之間進行簡單的切換。以下是將其添加到src/components/header.js的內容：

>但這看起來不太好，所以我將用主題UI flex組件包裝容器，然後將按鈕向右移動：

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

在轉到下一節之前，

git提交：

>

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

代碼塊

>目前，代碼塊看起來有點meh，因此我將使用許多方便的dandy主題UI軟件包之一添加一些語法突出顯示。我為此使用的是棱鏡。

<span><span>---
</span></span><span><span><span>title: Second Post!
</span></span></span><span><span><span>date: 2021-03-07</span>
</span></span><span><span>---</span>
</span>
This is my second post!

>

>我需要安裝軟件包並在稱為組件的蓋茨比 - plugin-theme-ui文件夾中創建一個組件。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

在該文件中，我需要定義我要在哪裡應用棱鏡樣式，這都是PRES和代碼標籤：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

有了這個定義，我還需要在主題對像中定義我要使用的棱鏡主題：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

需要另一個停靠點，並且需要開發開發服務器才能查看更改生效！

提交更改並移至下一部分：

>將組件添加到MDX

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

>下一個位是可選的。 Markdown JSX允許React（JSX）組件包含在Markdown中。為了證明這一點，我將添加一個RainbowText組件，該組件將在動畫週期中為某些顏色而動畫。動畫需要額外的依賴性： @emotion/react的鍵框。我現在要安裝：

如果它正在運行，這可能會丟棄Dev服務器，因此我現在停止它。 > 在src/components/rainbow-text.js文件中，我將添加此組件：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

這是可選的，我不會詳細介紹這裡發生的事情。只知道對懸停而產生的CSS效果很不錯。

>

>創建了該組件，我可以將其導入我要使用的任何.mdx文件。在此示例中，我將其添加到Content/2021/03/third-post/index.mdx中。現在，我添加了該組件：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

再次啟動開發服務器後，我可以轉到添加該組件的帖子，當我將懸停在 wheeeeeeeeeeeee中包裹的文本上時，我可以看到動畫的作用。

>您可能會對該導入進行惡作劇：../../../。不斷！但是，有一種方法可以解決這個問題，但是使用我之前詳細介紹的根包裝器概念，並使用MDXProvider，它將 - 啊！ - 向MDX提供您傳遞給它的任何組件。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

回到root包裝器（root-wrapper.js），我可以用mdxprovider包裝頁面元素，然後將彩虹文本組件傳遞給mdxprovider：

>

現在，我可以從.mdx文件中刪除導入：>

>停止並重新啟動開發服務器後，我可以轉到這篇文章，仍然看到RainbowText工作。直接將組件直接添加到MDXProvider的額外優勢在於，當您要使用時，無需將組件導入.mdx文檔。它可通過提供商用於所有MDX文檔。

>

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

我現在就提交這個：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

降標圖像

如果我想將圖像添加到我的博客文章中，我可以將它們包含在MDX文件中，類似的內容：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

./mdx-logo.png是我添加到content/2021/03/06/hello-world文件夾中的文件，我將其稱為相對文件。不過，這不是。如果我轉到“ Hello World帖子”，則顯示的圖像被打破了。我需要將gatsby-remark-images作為插件添加到gatsby-plugin-mdx上，以便知道該如何處理圖像文件：

>

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

然後，我需要在gatsby-config.js中配置插件：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

其他蓋茨比源文件系統對象正在讓蓋茨比知道在哪裡查找要處理的圖像。

立即提交：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

seo

如果我想通過搜索引擎在互聯網上找到我的內容，那麼 SEO非常重要，因此我需要在此處的博客中添加相關的元標記。定義所有相關標籤的過程可能是一個非常涉及的過程，因此，為了節省時間，我創建了一個react SEO組件，用於蓋茨比生成所需的所有元標記。 >

>我要YARN添加組件以及其工作所需的依賴項：>

>我需要將gatsby-plugin-react-helmet添加到gatsby-config.js插件陣列：

>

然後，這是在我需要具有元標籤的整個網站中使用SEO組件的一種情況。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

該組件需要很多道具，其中許多是在整個站點中定義的一次，因此添加這些的最佳位置是在Sitemetadata對像中。然後，我可以用usedemetadata鉤子拉出所需的東西。

>

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

我將在SiteMetAdata對像中添加更多屬性：>

如果您繼續前進，則可以根據需要進行更改。 siteurl現在可以是虛擬網址。這是為了指向在“開放圖”協議中使用所需的任何圖像，這是您在Twitter，Facebook，LinkedIn和Reddit上共享帖子時看到的圖像。

>現在，這些其他屬性就在SiteMetadata對像上了，我需要能夠查詢它們。當前，使用initemetadata Hook僅具有標題和描述，因此我現在將其餘的內容添加：>

>我將SEO組件添加到所有頁面。首先，我將在src/pages/{mdx.slug} .js page中完成帖子頁面。這是最參與其中之一，因此我將在此處丟棄差異，並詳細說明發生了什麼：>

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

siteurl，slug和摘錄是規範鏈接（在SEO中非常重要），摘錄是用於元描述的。

>我正在使用sitemetadata掛鉤來獲取組件所需的其餘信息。標題和標題板用於彌補您在瀏覽器選項卡中看到的內容。

>

文章布爾值適用於組件，因此它可以以JSONLD格式創建BreadCrumb列表。其餘的道具旨在幫助識別作者和發布日期。 ？

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

>很多。我希望它的某些有意義！對於這篇文章的範圍，我將其留在那裡，但是還有很多關於這個主題的知識，我的意思是！ 幸運的是，SRC/pages/index.js頁面更簡單！ >

>我有意從兩個示例中省略了圖像。如果您有興趣製作自己的開放式圖像圖像在此組件中使用，請查看帖子“帶有蓋茨比和Vercel的開放圖像”，以了解如何使用無服務器函數進行此操作。 ？

>現在我可以構建該網站（幾乎可以準備生產），一旦建造，我就可以查看元標籤的頁面源：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

>構建完成後，我可以使用紗線服務器在Localhost：9000上在本地提供的網站。在瀏覽器中，我可以使用鍵盤快捷鍵

ctrl

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

u 查看頁面源。從這裡，我可以檢查典型的元標記，這將是元數據中使用的虛擬URL。 好吧！將此付諸實踐並繼續前進：

將其推到github

>您可能想知道為什麼我在每個部分的末尾都進行了git提交。那是因為我現在要把項目推到github。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

>

>我將登錄到我的github帳戶，然後在右上角選擇我的頭像映像旁邊的加上圖標，然後選擇新的存儲庫。

>在存儲庫名稱中，我將添加項目名稱my-gatsby-blog，但留下其餘的默認設置，然後單擊“創建存儲庫”。

下一個屏幕為我提供了我需要將本地項目推向github的終端命令：

>將所有這些都放入終端並命中

Enter

>後，請刷新GitHub頁面以查看新項目！ <span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>>部署

是時候把這個嬰兒放在網上了！有很多方法可以做到這一點。因為蓋茨比（Gatsby）構建到平坦的文件結構，因此您可以在任何文件服務器上託管一個具有訪問Internet的文件服務器。

>有許多服務在CDN上提供託管，許多服務免費！ NetLify，Vercel和渲染等服務將使您可以通過CLI，GitHub集成將您的構建站點推向其CDN，或者在Netlify的情況下，直接拖放！

> vercel

要與Vercel部署，您需要一個GitHub，Gitlab或Bitbucket帳戶進行身份驗證。然後，您將提示您安裝Vercel CLI：

我已經安裝了它，所以現在是運行CLI命令的情況：>

然後，我提示我設置並部署新項目。我將使用

> Enter

的所有問題回答默認值：

>

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1 id="gt">></h1></span>Hello, World!<span><span></span>></span>;
</span><span>}
</span></span>

就是這樣。然後，我給了一個部署URL，可以在其中觀看Vercel上的網站的構建。

>在Vercel儀表板上，我可以配置該域，也可以從Vercel購買一個。我個人使用namecheap.com，但這是一種選擇。

>

netlify

通過CLI與Netlify一起部署與Vercel的部署相同，但我要進行拖放創建。

>

>用於身份驗證，我需要GitHub，Gitlab，Bitbucket或電子郵件帳戶之一。經過身份驗證並登錄後，我可以在菜單欄中選擇站點，然後有一個下降區域想要部署新站點而不連接到Git？在此處拖放您的站點輸出文件夾。我將在我的文件資源管理器中導航到項目的根源，然後將公共文件夾拖放到下降區域。

> NETLIFY將構建文件並將其部署到生成的URL進行檢查。與Vercel幾乎相同，Netlify將使您在那裡購買一個域並部署到它。

渲染

渲染沒有CLI或Drop選項，而是使用GitHub集成。為了進行身份驗證，我需要一個github，gitlab或Google帳戶。經過身份驗證並登錄後，我將在服務部分。從這裡，我可以選擇新的靜態站點，然後輸入我的github url，以便我以前推到GitHub的項目。

>

在下一頁上，我將給它以下設置：

>

>名稱：my-gatsby-blog

分支：默認值
構建命令：紗線構建
發布目錄：./public
• 然後單擊“創建靜態站點”。

等待渲染做事，然後單擊項目名稱下方的鏈接以查看網站Live。

渲染還可以選擇為網站設置自己的自定義域！

>可選的蓋茨比插件

許多

更多的蓋茨比插件可供選擇以添加其他功能。如果您想添加更多，我將把這些留給您。例如：

您是否想嵌入YouTube視頻，推文，Strava運行，Coodepens和Codesandbox？查看gatsby-plugin-mdx-embed。

您是否正在使用Google/bing搜索控制台？然後，您需要使用Gatsby-Plugin-sitemap生成一個站點地圖。

>
• >您是否想以PWA為單位的網站？加入gatsby-plugin-offline。
• 您是否想在您的網站的瀏覽器選項卡中使用Favicon？查看gatsby-plugin-manifest。
>分析
如果您有興趣了解網站的流行程度，則有分析選項。我不久前就停止使用Google Analytics（在自己的項目上使用Google Analytics），現在我更喜歡更多以隱私為中心的替代方案。我推薦的是Fathom Analytics。 （如果您想為您的第一個月訂閱享受10美元的折扣，我有一個會員鏈接。）

>

>另一種選擇是合理的，我也聽到了關於的好消息。

>

>要在蓋茨比網站上實現fathom Analytics，我需要在我的網站的頭部添加附加腳本標籤。這意味著什麼？好吧，首先，我需要在我的fathom儀表板上創建網站，然後訪問https://app.usefathom.com/#/settings/sites/sites，滾動到列表的底部，添加我的新網站（ my -gatsby-blog），然後單擊“獲取站點代碼”。然後，我獲得了帶網站代碼的彈出模式。我需要將其添加到Gatsby Project的負責人的腳本中。這是腳本的樣子：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><rainbowtext>></rainbowtext></span>Wheeeeeeee<span><span></span>></span>
</span></span>

這是root-wrapper.js的差異：

>

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

wrap！

就是我的。非常感謝您到最後。 ？

我希望您能從該廣泛的指南中獲得有關從頭開始建立蓋茨比項目的信息！

>

如果您想伸出手打個招呼，那麼最好的地方是Twitter。

關於Gatsby MDX博客的常見問題（常見問題解答）

>如何將圖像添加到我的蓋茨比MDX博客文章中？

>在蓋茨比MDX博客文章中添加圖像可以增強視覺吸引力並使您的內容更具吸引力。為此，您需要將圖像文件導入到MDX文件中。首先，將圖像文件放在蓋茨比項目的“ SRC”目錄中。然後，在您的MDX文件中，使用'../ path/to/image.jpg'導入ImageName導入圖像。導入後，您可以使用“ ImageName”作為組件中使用MDX內容中的圖像：。

>如何自定義我的Gatsby MDX博客的佈局？ > Gatsby MDX允許您自定義博客文章的佈局。您可以在“ SRC”目錄中創建一個佈局組件。該組件可以包括標頭，頁腳或側邊欄等元素。創建了佈局組件後，您可以將MDX內容包裹起來。為此，請在您的MDX文件中導入佈局組件，然後將您的內容包裝在此處：您的MDX內容。 。

>我如何添加代碼片段到我的gatsby mdx博客文章？

gatsby mdx支持在您的博客文章中包含代碼片段。要添加代碼段，您可以使用“ PRE”和“代碼”標籤。用這樣的標籤包裝代碼片段：

 <code>您的代碼在此處</code> 

。您還可以通過在這樣的第一組背景之後添加代碼段的語言來指定語法突出顯示：``javascript。

>目錄可以使您的博客文章更具導航。 Gatsby MDX支持創建目錄。您可以在GraphQl查詢中使用“ tableofcontents”字段來生成內容表。該字段返回一系列標題及其各自的深度，您可以使用它們為目錄創建嵌套列表。

>如何將SEO添加到我的Gatsby MDX博客中？ Gatsby MDX允許您將SEO添加到博客文章中。您可以使用“ Gatsby-Plugin-React-Helmet”來管理博客文章的文檔頭。該插件允許您添加諸如標題，描述和元標記之類的元素，這些元素對於SEO很重要。

我如何在我的蓋茨比MDX博客中添加分頁？

>

>分頁可以改善用戶體驗通過使您的博客更容易瀏覽您的帖子。 Gatsby MDX支持分頁。您可以使用“ Gatsby-Awesome-pagination”插件來創建分頁頁面。該插件為您的頁面創建了分頁索引和分頁的上下文。

>如何將註釋添加到我的蓋茨比MDX博客文章中？

>添加評論部分可以增加對您的博客的參與度。 Gatsby MDX允許您在博客文章中添加評論。您可以使用DISQUS或Commento等第三方服務。這些服務提供了一個可以在佈局組件中包含的腳本以啟用評論。

>

>如何將社交共享按鈕添加到我的Gatsby MDX博客文章中？

>

>社交共享按鈕可以增加觸手可及的範圍。您的博客文章。 Gatsby MDX允許您添加社交共享按鈕。您可以使用諸如gatsby-plugin-reacct-share”之類的插件來添加社交共享按鈕。該插件支持各種社交媒體平台，例如Facebook，Twitter和LinkedIn。通過更容易找到特定帖子來博客。 Gatsby MDX支持添加搜索功能。您可以使用諸如“ gatsby-plugin-elasticlunr-search”之類的插件來添加搜索功能。該插件創建了您的帖子索引，可以使用關鍵字搜索。

>如何將新聞通訊訂閱表格添加到我的gatsby MDX博客？

>

>

>新聞通訊訂閱表單可以幫助您構建一個電子郵件列表並保持讀者的更新。 Gatsby MDX允許您添加新聞通訊訂閱表格。您可以使用MailChimp或SendInblue等服務。這些服務提供了您可以嵌入佈局組件以啟用新聞通訊訂閱的表格。

>

以上是如何使用Gatsby和MDX構建開發人員博客的詳細內容。更多資訊請關注PHP中文網其他相關文章！