Gatsby Theme Intro 项目教程

Gatsby Theme Intro 项目教程

gatsby-theme-intro Personal branding theme for developers 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-theme-intro

1. 项目的目录结构及介绍

gatsby-theme-intro/
├── content/
│   ├── profile.yaml
│   ├── projects.yaml
│   └── work-history.yaml
├── src/
│   ├── components/
│   └── types/
├── gatsby-config.js
├── package.json
├── README.md
├── LICENSE
└── yarn.lock

目录结构介绍

• content/: 包含项目的配置文件，用于定义个人资料、项目和职业历史。

  • profile.yaml: 个人资料配置文件。
  • projects.yaml: 项目配置文件。
  • work-history.yaml: 职业历史配置文件。

• src/: 包含项目的源代码。

  • components/: 存放项目的React组件。
  • types/: 存放项目的类型定义文件。

• gatsby-config.js: Gatsby项目的配置文件。

• package.json: 项目的依赖管理文件。

• README.md: 项目的介绍和使用说明。

• LICENSE: 项目的开源许可证。

• yarn.lock: 锁定项目依赖版本的文件。

2. 项目的启动文件介绍

gatsby-config.js

gatsby-config.js 是 Gatsby 项目的主要配置文件，用于配置网站的元数据、插件和其他设置。以下是一个示例配置：

module.exports = {
  siteMetadata: {
    description: "Personal page of John Doe",
    locale: "en",
    title: "John Doe",
    formspreeEndpoint: "https://formspree.io/f/[your-id]"
  },
  plugins: [
    {
      resolve: "@wkocjan/gatsby-theme-intro",
      options: {
        basePath: "/",
        contentPath: "content/",
        showThemeLogo: true,
        theme: "classic"
      }
    }
  ]
};

启动命令

在项目根目录下运行以下命令启动项目：

gatsby develop

3. 项目的配置文件介绍

content/profile.yaml

profile.yaml 文件用于配置个人资料信息，例如姓名、职业、技能等。以下是一个示例配置：

name: John Doe
position: Software Engineer
location: San Francisco, CA
bio: Passionate about coding and open source.
skills:
  - JavaScript
  - React
  - Node.js
tools:
  - VSCode
  - Git

content/projects.yaml

projects.yaml 文件用于配置项目信息，例如项目名称、描述、状态等。以下是一个示例配置：

- name: Project A
  url: https://project-a.com
  description: A web application built with React.
  status: live
  tags:
    - React
    - JavaScript
  icon: website
  image: project-a.png

content/work-history.yaml

work-history.yaml 文件用于配置职业历史信息，例如公司名称、职位、时间段等。以下是一个示例配置：

- company: Company A
  period: 2018-2020
  position: Software Engineer
  url: https://company-a.com

通过以上配置文件，您可以自定义您的个人品牌网站，展示您的技能、项目和职业历史。

gatsby-theme-intro Personal branding theme for developers 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-theme-intro