Gatsby: Post template and sidebar post template – Learn WordPress from a to z

In  the previous post, I showed you how to add pagination and sidebar to the archive template on Gatsby . In this article, you and I will make a Post template and add a sidebar to the Post Template .

Configuration in gatsby-node.js

To configure first you need to go to the file gatsby-node.js . Right below the configuration section for the archive template, you add the following paragraph:

<code>.then(() =&gt; {
        graphql(
          `
            {
              allWordpressWpBlogs {
                edges {
                  node {
                    id
                    title
                    slug
                    content
                    date(formatString: "DD,MMMM, YYYY")
                    featured_media {
                      source_url
                    }
                    yoast_meta {
                     yoast_wpseo_metadesc
                   }
                   acf {
                    keyword
                   }
                  }
                }
              }
            }
          `
        ).then(result =&gt; {
          if (result.errors) {
            console.log(result.errors);
            reject(result.errors);
          }
          const postTemplate = path.resolve("./src/templates/post.js");
          _.each(result.data.allWordpressWpBlogs.edges, edge =&gt; {
            createPage({
              path: `/${edge.node.slug}`,
              component: slash(postTemplate),
              context: edge.node
            });
          });
        });
      })</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span>
</div>

Here I use GraphQL to query posts and I convert the release date in the format “DD,MMMM, YYYY” . However, you will see that there are schools of yoast seo, this part I will explain clearly in the following articles. Mainly this item to optimize SEO for the web. Then you also see that in the above code, for each post, there will be a template of post.js with the path being the path of that post in WordPress. Then I pass the fields of information I want to use into the template. You create your own ./src/templates/post.js file and you continue to make post templates.

Make Post Template and add sidebar

First, you and I will import the necessary modules for the template

Xem code tại đây: <a href="https://anotepad.com/notes/dwqyn9cg" target="_blank" rel="noopener noreferrer">https://anotepad.com/notes/dwqyn9cg</a><div><span>1</span></div>

Here I use dangerouslySetInnerHTML to render the title and content so that the browser converts the HTML characters, this is equivalent to innerHTML in vanilla JavaScript . Continue we insert the sidebar like the previous pages you and I did. So we are done with the post template.

summary

So I have finished guiding you to create Post templates and add sidebar to Post Template . Through the next post, I will show you how to deploy to the server.

Thank you for watching