GatsbyReact企业官网启动器

schoolfront — Gatsby 企业官网模板

作者 orzechdev

Schoolfront 是一个基于 Gatsby 的开源学校网站前端启动器，提供首页、新闻、联系、关于、开放时间、课程与教师列表等页面，采用 TypeScript、GraphQL 与 Styled Components。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Gatsby 与 React 的学校网站前端启动器

包含首页、新闻、联系、关于、开放时间、课程与教师列表等页面

新闻内容来自 WordPress

声明支持 WCAG AA

使用 TypeScript、GraphQL 与 Styled Components

采用 BSD-3-Clause 许可，提供公开演示站点

模板详细介绍

Schoolfront 是面向学校官网场景的开源前端启动器，基于 Gatsby 与 React 构建，使用 TypeScript、GraphQL 和 Styled Components。仓库 README 说明其定位是帮助使用者搭建学校网页，并随附学校网站常见功能，可通过 Gatsby 配置文件进行配置。

已列出的第一里程碑功能包括：主页面、来自 WordPress 的新闻、联系页面、关于页面、开放时间信息、提供的课程页面、教师列表，以及 WCAG AA 支持。第二里程碑功能尚未公布。

使用方式遵循 Gatsby 启动器流程：通过 Gatsby CLI 以该仓库为模板创建站点，进入目录后运行 gatsby develop，本地默认在 8000 端口启动，并可通过 /___graphql 使用 GraphiQL 查询数据。项目提供公开演示站点，仓库采用 BSD-3-Clause 许可。

GatsbyReact企业官网启动器

适合你的项目吗？

适用场景

为学校搭建官网前端并需要常见页面结构
以 Gatsby 启动器方式快速创建学校站点项目
需要从 WordPress 获取并展示学校新闻
需要展示课程信息、教师列表与开放时间

适合人群

熟悉 Gatsby 与 React 的前端开发者
希望基于开源启动器定制学校官网的团队
需要 TypeScript 与 GraphQL 技术栈的学校网站项目
关注 WCAG AA 可访问性要求的学校网站

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
使用 Gatsby CLI 以该仓库为模板创建站点：gatsby new my-school-starter https://github.com/orzechdev/schoolfront
2
进入项目目录后运行 gatsby develop 启动开发服务器，默认地址为 http://localhost:8000
3
可通过 http://localhost:8000/___graphql 使用 GraphiQL 查询数据
4
新闻功能依赖 WordPress，需按项目配置接入对应数据源
5
演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 BSD-3-Clause 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用以及源代码或二进制形式的分发。
源代码分发需保留版权声明、三项条件和免责声明；二进制分发需在文档或随附材料中重现这些内容。
未经事先书面许可，不得使用权利人或贡献者的名称为衍生产品背书或推广。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

新闻功能依赖 WordPress 作为内容来源，需自行配置并接入对应的 WordPress 数据源，否则新闻页面无法正常显示内容。
第二里程碑功能尚未公布（TBA），当前仅第一里程碑功能可用，不应期待 README 未列出的其他能力。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 BSD-3-Clause 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Redistribution and use in source and binary forms, with or without modification, are permitted
许可证原文

News from Wordpress
README 原文

Features from 2 milestone (TBA)
README 原文

https://github.com/orzechdev/schoolfront/blob/master/LICENSE https://github.com/orzechdev/schoolfront/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 73 / 100
技术栈: Gatsby · React
网站类型: 企业官网 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2023-01-05
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Gatsby。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: f6283123fd37b870f51dea478cfcca86729f4703bab21acbde459958dad325aa

2026-10-02T08:50:10.609Z

来源文件 / 仓库

<h1 align="center">:mortar_board: Schoolfront</h1>

Schoolfront is an open source frontend built as a Gatsby starter, which you may use to create blazingly fast next generation school webpage. This starter ships with the common features available on school websites, easy to configure with Gatsby configuration files. Learn more about the [Gatsby static site generator](https://www.gatsbyjs.org/) to find out why schoolfront is the next generation of school websites.

## :mag_right: Demo

See [the public demo](https://schoolfront.netlify.app/) of Schoolfront!

## :rocket: Features from 1 milestone (to be released soon)

- [x] Main page
- [x] News from Wordpress
- [x] Contact page
- [x] About page
- [x] Open hours information
- [x] Offered curriculum page
- [x] Teachers list
- [x] WCAG AA support

## :rocket::rocket: Features from 2 milestone (TBA)

TBA

## :hammer: Used technology

- [Gatsby](https://www.gatsbyjs.org/)
- [React](https://reactjs.org/)
- [Typescript](https://www.typescriptlang.org/)
- [GraphQL](https://graphql.org/)
- [Styled Components](https://styled-components.com/)

## :airplane: Quick start

1.  **Create a Gatsby site.**

    Use the Gatsby CLI to create a new site, specifying the schoolfront starter.

    ```shell
    # create a new Gatsby site using the schoolfront starter
    gatsby new my-school-starter https://github.com/orzechdev/schoolfront
    ```

1.  **Start developing.**

    Navigate into your new site’s directory and start it up.

    ```shell
    cd my-school-starter/
    gatsby develop
    ```

1.  **Open the source code and start editing!**

    Your site is now running at `http://localhost:8000`!

    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._

    Open the `my-school-starter` directory in your code editor of choice and edit `src/pages/index.tsx`. Save your changes and the browser will update in real time!

反馈内容错误