班级门户示例帮助文档

简介

本项目为一个针对班级展示需求而设计的示例网站，主要用于展示项目小组的进度、成果和文档。

网站功能

展示一个项目驱动班级的信息

班级详情：关于班级
小组详情：某个小组的信息，包括项目进度、成员
- 成员信息：展示小组成员，包括已经结束课程的同学
- 任务进度：展示小组的进度，以及每个成员的任务和完成情况（开发中）
- 疑问解答：展示小组成员提出的问题并跳转至外部网站进行交流
- 文档浏览：浏览此小组成员的文档
项目展示：通过文档、PPT 以及其他基于 Web 的方式（跳转外部链接）的方式展示某个项目

整体架构

班级门户采取前后端分离的设计思路，依托各种平台，尽可能以接口形式实现网站的各种功能。

使用 gridsome 框架实现数据与内容聚合
使用博客 RSS 服务展示成员学习动态
使用语雀文档解决其他未尽事项
使用云文档作为表单输入的解决方案（开发中）

开发及使用注意事项

gridsome 的安装
安装好环境是开发成功的第一步。在使用 gridsome 官方教程安装框架时，不考虑网络因素的前提下，安装进程可能会卡在如下几个包的下载阶段，此时可考虑将对应文件下载至本地后重新执行 npm 命令。

sharp（蓝奏云）
- github releases
pngquant-bin（蓝奏云）
- github releases
执行gridsome命令后，命令行输出Commands:且其中包括develop、build等命令说明框架安装成功。

使用
为使用项目的成员列表功能，请在/src下新建文件夹/data，并于其中新建members.json（相关配置可在根目录下的gridsome.server.js中找到），其内容为：

{
    {
        "name": "",
        "project": "",
        "githubUsername": "",
        "gender": "",
        "studentID": "",
        "grade": "",
        "blogRSS": "",
        "blog": ""
    },
    {
        "name": "",
        "project": "",
        "githubUsername": "",
        "gender": "",
        "studentID": "",
        "grade": "",
        "blogRSS": "",
        "blog": ""
    }
}

参考文档及开源仓库

About

一个基于gridsome框架的测试网站，内容为创新实践班级展示。

Languages

Language:Vue 87.0%Language:JavaScript 11.8%Language:PowerShell 1.2%Language:CSS 0.1%

班级门户示例 帮助文档

目录