051 gatsby创建博客

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-tags`,
      options: {
        templatePath: `${__dirname}/src/templates/tags.js`, // 标签页模板路径
        contentPath: `${__dirname}/src/posts`, // 数据源路径
        slugify: (tag) => tag.toLowerCase().replace(/\s+/g, "-"), // 自定义 slug 生成函数
        useTagsInPath: true, // 是否为标签页添加前缀路由
        postTypes: ["MarkdownRemark"], // 数据源类型
        args: { limit: 1000 }, // 数据源查询参数
      },
    },
  ],
};

// src/templates/tags.js
import React from "react";
import { Link, graphql } from "gatsby";

import Layout from "../components/layout"

const TagsTemplate = ({ pageContext, data, location }) => {
  const { tag } = pageContext;
  const { edges, totalCount } = data.allMarkdownRemark;
  const siteTitle = data.site.siteMetadata?.title || `Title`

  return (
    <Layout location={location} title={siteTitle}>
      <div>
        <h1>Tag: {tag}</h1>
        <p>{totalCount} posts</p>
        <ul>
          {edges.map(({ node }) => (
            <li key={node.fields.slug}>
              <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
            </li>
          ))}
        </ul>
      </div>
      <hr />
      <footer>
      </footer>
    </Layout>
  );
};

export const query = graphql`
  query($tag: String!) {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      limit: 1000
      sort: { frontmatter: { date: DESC } }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
        }
      }
    }
  }
`;

export default TagsTemplate;

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: "Table of Contents",
              tight: false,
              ordered: false,
              fromHeading: 1,
              toHeading: 6,
              className: "table-of-contents"
            },
          },
          `gatsby-remark-autolink-headers`,
          `gatsby-remark-prismjs`,
        ],
      },
    }

function chineseTimeToRead(content) {
  const wordsPerMinute = 300 // 假设中文阅读速度为每分钟300字
  const chineseCharacters = content.replace(/[^\u4e00-\u9fa5]/gi, '') //只保留中文字符
  const chineseCharactersCount = chineseCharacters.length
  const timeInMinutes = chineseCharactersCount / wordsPerMinute
  return Math.ceil(timeInMinutes)
}

// 在 gatsby-node.js 文件中添加 chineseTimeToRead 函数
// PS: createNodeField可以多次调用以便添加其他字段, 如slug等
exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const content = node.rawMarkdownBody
    const chineseTime = chineseTimeToRead(content)
    createNodeField({
      node,
      name: `chineseTimeToRead`,
      value: chineseTime
    })
  }
}

// 在需要显示阅读时间的地方使用 node.fields.chineseTimeToRead
// post.timeToRead 英文阅读时间
// post.fields.chineseTimeToRead 中文阅读时间
import React from "react"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.markdownRemark
  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
      <p>阅读时间: {post.timeToRead + post.fields.chineseTimeToRead} 分钟</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      frontmatter {
        title
      }
      fields {
        chineseTimeToRead
      }
    }
  }
`