From e1adad36788aa4e6d0be1c9d485a19c9f44d055b Mon Sep 17 00:00:00 2001 From: wenqili Date: Sat, 11 May 2019 22:32:55 -0400 Subject: [PATCH] Upddate tag page --- gatsby-node.js | 62 ++++++++++++++-------------- src/templates/tags-page.js | 84 ++++++++++++++++++++++++++++++++++++++ src/templates/tags.js | 74 --------------------------------- 3 files changed, 115 insertions(+), 105 deletions(-) create mode 100755 src/templates/tags-page.js delete mode 100755 src/templates/tags.js diff --git a/gatsby-node.js b/gatsby-node.js index 1c73a4e..ff006f3 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,10 +1,10 @@ -const _ = require('lodash') -const path = require('path') -const { createFilePath } = require('gatsby-source-filesystem') -const { fmImagesToRelative } = require('gatsby-remark-relative-images') +const _ = require("lodash"); +const path = require("path"); +const { createFilePath } = require("gatsby-source-filesystem"); +const { fmImagesToRelative } = require("gatsby-remark-relative-images"); exports.createPages = ({ actions, graphql }) => { - const { createPage } = actions + const { createPage } = actions; return graphql(` { @@ -25,14 +25,14 @@ exports.createPages = ({ actions, graphql }) => { } `).then(result => { if (result.errors) { - result.errors.forEach(e => console.error(e.toString())) - return Promise.reject(result.errors) + result.errors.forEach(e => console.error(e.toString())); + return Promise.reject(result.errors); } - const posts = result.data.allMarkdownRemark.edges + const posts = result.data.allMarkdownRemark.edges; posts.forEach(edge => { - const id = edge.node.id + const id = edge.node.id; createPage({ path: edge.node.fields.slug, tags: edge.node.frontmatter.tags, @@ -41,47 +41,47 @@ exports.createPages = ({ actions, graphql }) => { ), // additional data can be passed via context context: { - id, - }, - }) - }) + id + } + }); + }); // Tag pages: - let tags = [] + let tags = []; // Iterate through each post, putting all found tags into `tags` posts.forEach(edge => { if (_.get(edge, `node.frontmatter.tags`)) { - tags = tags.concat(edge.node.frontmatter.tags) + tags = tags.concat(edge.node.frontmatter.tags); } - }) + }); // Eliminate duplicate tags - tags = _.uniq(tags) + tags = _.uniq(tags); // Make tag pages tags.forEach(tag => { - const tagPath = `/tags/${_.kebabCase(tag)}/` + const tagPath = `/tags/${_.kebabCase(tag)}/`; createPage({ path: tagPath, - component: path.resolve(`src/templates/tags.js`), + component: path.resolve(`src/templates/tags-page.js`), context: { - tag, - }, - }) - }) - }) -} + tag + } + }); + }); + }); +}; exports.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions - fmImagesToRelative(node) // convert image paths for gatsby images + const { createNodeField } = actions; + fmImagesToRelative(node); // convert image paths for gatsby images if (node.internal.type === `MarkdownRemark`) { - const value = createFilePath({ node, getNode }) + const value = createFilePath({ node, getNode }); createNodeField({ name: `slug`, node, - value, - }) + value + }); } -} +}; diff --git a/src/templates/tags-page.js b/src/templates/tags-page.js new file mode 100755 index 0000000..13b6889 --- /dev/null +++ b/src/templates/tags-page.js @@ -0,0 +1,84 @@ +import React from "react"; +import Helmet from "react-helmet"; +import { Link, graphql } from "gatsby"; +import Layout from "../components/Layout"; +import ModelList from "../components/ModelList"; + +class TagRoute extends React.Component { + render() { + const posts = this.props.data.allMarkdownRemark.edges; + const postLinks = posts.map(post => ( +
  • +
    + {post.node.frontmatter.title} +
    +
    • + )); + const tag = this.props.pageContext.tag; + const title = this.props.data.site.siteMetadata.title; + const tagHeader = `${tag}`; + + return ( + +
    + +
    +
    +
    +
    + Reference +
    + +
    +
    + +
    +
    +

    {tagHeader}

    +
      + {postLinks} +
    • +
      + + Back to API Reference + +
      +
      • +
    +
    +
    +
    +
    +     + ); + } +} + +export default TagRoute; + +export const tagPageQuery = graphql` + query TagPage($tag: String) { + site { + siteMetadata { + title + } + } + allMarkdownRemark( + limit: 1000 + sort: { fields: [frontmatter___date], order: DESC } + filter: { frontmatter: { tags: { in: [$tag] } } } + ) { + totalCount + edges { + node { + fields { + slug + } + frontmatter { + title + } + } + } + } + } +`; diff --git a/src/templates/tags.js b/src/templates/tags.js deleted file mode 100755 index 189c249..0000000 --- a/src/templates/tags.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -import Helmet from "react-helmet"; -import { Link, graphql } from "gatsby"; -import Layout from "../components/Layout"; - -class TagRoute extends React.Component { - render() { - const posts = this.props.data.allMarkdownRemark.edges; - const postLinks = posts.map(post => ( -
  • - -

    {post.node.frontmatter.title}

    - -
    • - )); - const tag = this.props.pageContext.tag; - const title = this.props.data.site.siteMetadata.title; - const totalCount = this.props.data.allMarkdownRemark.totalCount; - const tagHeader = `${totalCount} model${ - totalCount === 1 ? "" : "s" - } tagged with “${tag}”`; - - return ( - -
    - -
    -
    -
    -

    {tagHeader}

    -
      {postLinks}
    -

    - Browse all tags -

    -
    -
    -
    -
    -     - ); - } -} - -export default TagRoute; - -export const tagPageQuery = graphql` - query TagPage($tag: String) { - site { - siteMetadata { - title - } - } - allMarkdownRemark( - limit: 1000 - sort: { fields: [frontmatter___date], order: DESC } - filter: { frontmatter: { tags: { in: [$tag] } } } - ) { - totalCount - edges { - node { - fields { - slug - } - frontmatter { - title - } - } - } - } - } -`;