Python-Python交互式教学课程制作框架

# Online course starter: Python This is a starter repo based on the [course framework](https://github.com/ines/spacy-course) I developed for my [spaCy course](https://course.spacy.io). The front-end is powered by [Gatsby](http://gatsbyjs.org/) and [Reveal.js](https://revealjs.com) and the back-end code execution uses [Binder](https://mybinder.org) 💖 [](https://app.netlify.com/start/deploy?repository=https://github.com/ines/courser-starter-python) [](https://course-starter-python.netlify.com) ## ✅ Quickstart 1. [Import](https://github.com/new/import) this repo, install it and make sure the app is running locally. 2. Customize the [`meta.json`](meta.json) and [`binder/requirements.txt`](binder/requirements.txt). 3. Build a [Binder](https://mybinder.org) from the `binder` branch of this repo. 4. Add content (chapters, exercises and slides) and optionally add separate content license. 5. Customize the UI theme in [`theme.sass`](theme.sass) and update images in [`static`](static) as needed. 6. Deploy the app, e.g. to [Netlify](https://netlify.com). ### Running the app To start the local development server, install [Gatsby](https://gatsbyjs.org) and then all other dependencies. This should serve up the app on `localhost:8000`. ```bash npm install -g gatsby-cli # Install Gatsby globally npm install # Install dependencies npm run dev # Run the development server ``` ## 🎨 Customization The app separates its source and content – so you usually shouldn't have to dig into the JavaScript source to change things. The following points of customization are available: | Location | Description | | ------------------------- | ------------------------------------------------------ | | `meta.json` | General config settings, title, description etc. | | `theme.sass` | Color theme. | | `binder/requirements.txt` | Python requirements to install. | | `chapters` | The chapters, one Markdown file per chapter. | | `slides` | The slides, one Markdown file per slide deck. | | `static` | Static assets like images, will be copied to the root. | ### `meta.json` The following meta settings are available. **Note that you have to re-start Gatsby to see the changes if you're editing it while the server is running.** | Setting | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `courseId` | Unique ID of the course. Will be used when saving completed exercises to the browser's local storage. | | `title` | The title of the course. | | `slogan` | Course slogan, displayed in the page title on the front page. | | `description` | Course description. Used for site meta and in footer. | | `bio` | Author bio. Used in the footer. | | `siteUrl` | URL of the deployed site (without trailing slash). | | `twitter` | Author twitter handle, used in Twitter cards meta. | | `fonts` | [Google Fonts](https://fonts.google.com) to load. Should be the font part of the URL in the embed string, e.g. `Lato:400,400i,700,700i`. | | `testTemplate` | Template used to validate the answers. `${solution}` will be replaced with the user code and `${test}` with the contents of the test file. | | `juniper.repo` | Repo to build on Binder in `user/repo` format. Usually the same as this repo. | | `juniper.branch` | Branch to build. Ideally not `master`, so the image is not rebuilt every time you push. | | `juniper.lang` | Code language for syntax highlighting. | | `juniper.kernelType` | The name of the kernel to use. | | `juniper.debug` | Logs additional debugging info to the console. | | `showProfileImage` | Whether to show the profile image in the footer. If `true`, a file `static/profile.jpg` needs to be available. | | `footerLinks` | List of objects with `"text"` and `"url"` to display as links in the footer. | | `theme` | Currently only used for the progressive web app, e.g. as the theme color on mobile. For the UI theme, edit `theme.sass`. | ### Static assets All files added to `/static` will become available at the root of the deployed site. So `/static/image.jpg` can be referenced in your course as `/image.jpg`. The following assets need to be available and can be customized: | File | Description | | ----------------- | -------------------------------------------------------- | | `icon.png` | Custom [favicon](https://en.wikipedia.org/wiki/Favicon). | | `logo.svg` | The course logo. | | `profile.jpg` | Photo or profile image. | | `social.jpg` | Social image, displayed in Twitter and Facebook cards. | | `icon_check.svg` | "Check" icon displayed on "Mark as completed" button. | | `icon_slides.svg` | Icon displayed in the corner of a slides exercise. | ## ✏️ Content ### File formats #### Chapters Chapters are placed in [`/chapters`](/chapters) and are Markdown files consisting of `<exercise>` components. They'll be turned into pages, e.g. `/chapter1`. In their frontmatter block at the top of the file, they need to specify `type: chapter`, as well as the following meta: ```yaml --- title: The chapter title description: The chapter description prev: /chapter1 # exact path to previous chapter or null to not show a link next: /chapter3 # exact path to next chapter or null to not show a link id: 2 # unique identifier for chapter type: chapter # important: this creates a standalone page from the chapter --- ``` #### Slides Slides are placed in [`/slides`](/slides) and are markdown files consisting of slide content, separated by `---`. They need to specify the following frontmatter block at the top of the file: ```yaml --- type: slides --- ``` The **first and last slide** use a special layout and will display the headline in the center of the slide. **Speaker notes** (in this case, the script) can be added at the end of a slide, prefixed by `Notes:`. They'll then be shown on the right next to the slides. Here's an example slides file: ```markdown --- type: slides --- # Processing pipelines