Gatsby WooCommerce 主题项目教程

Gatsby WooCommerce 主题项目教程

gatsby-woocommerce-themes ⚡ A Gatsby Theme for WooCommerce E-commerce site Gatsby WooCommerce WordPress 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-woocommerce-themes

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

gatsby-woocommerce-themes/
├── demos/
│   └── ...
├── packages/
│   └── gatsby-woocommerce-theme/
│       ├── src/
│       │   ├── components/
│       │   ├── pages/
│       │   ├── templates/
│       │   └── ...
│       ├── gatsby-config.js
│       ├── package.json
│       └── ...
├── site/
│   ├── gatsby-config.js
│   ├── package.json
│   └── ...
└── wordpress/
    └── plugins/
        └── ...

目录结构介绍

• demos/: 包含项目的演示文件。
• packages/gatsby-woocommerce-theme/: 核心主题文件夹，包含前端React组件、页面模板等。
  • src/: 主题的源代码文件夹。
    • components/: 包含React组件。
    • pages/: 包含Gatsby页面组件。
    • templates/: 包含页面模板。
  • gatsby-config.js: 主题的Gatsby配置文件。
  • package.json: 主题的依赖和脚本配置。
• site/: 包含Gatsby站点的配置文件和依赖。
  • gatsby-config.js: 站点的Gatsby配置文件。
  • package.json: 站点的依赖和脚本配置。
• wordpress/plugins/: 包含WordPress插件文件。

2. 项目的启动文件介绍

启动文件

• site/package.json: 包含启动脚本。

{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  }
}

启动命令

• 开发模式: npm run develop 或 yarn develop
• 构建模式: npm run build 或 yarn build
• 服务模式: npm run serve 或 yarn serve

3. 项目的配置文件介绍

配置文件

• site/gatsby-config.js: 站点的Gatsby配置文件。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        // WordPress站点配置
        baseUrl: 'your-wordpress-site.com',
        protocol: 'https',
        hostingWPCOM: false,
        useACF: true,
        acfOptionPageIds: [],
        auth: {
          // 认证配置
        },
        verboseOutput: false,
        perPage: 100,
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: [],
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
    // 其他插件配置
  ],
}

配置说明

• baseUrl: WordPress站点的URL。
• protocol: 协议（http或https）。
• hostingWPCOM: 是否托管在WordPress.com。
• useACF: 是否使用ACF（高级自定义字段）。
• auth: 认证配置（如果需要）。
• includedRoutes: 包含的WordPress路由。
• excludedRoutes: 排除的WordPress路由。

通过以上配置，您可以自定义Gatsby站点与WordPress WooCommerce的集成。

gatsby-woocommerce-themes ⚡ A Gatsby Theme for WooCommerce E-commerce site Gatsby WooCommerce WordPress 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby-woocommerce-themes