starters: port Academic theme to Tailwind
This commit is contained in:
Splitter
@@ -1,15 +1,4 @@
|
||||
---
|
||||
title: Posts
|
||||
cms_exclude: true
|
||||
|
||||
# View.
|
||||
# 1 = List
|
||||
# 2 = Compact
|
||||
# 3 = Card
|
||||
view: 2
|
||||
|
||||
# Optional header image (relative to `static/media/` folder).
|
||||
header:
|
||||
caption: ''
|
||||
image: ''
|
||||
title: Blog
|
||||
view: article-grid
|
||||
---
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: Blog with Jupyter Notebooks!
|
||||
date: '2023-11-04'
|
||||
summary: Easily blog from Jupyter notebooks!
|
||||
---
|
||||
|
||||
|
||||
```python
|
||||
from IPython.core.display import Image
|
||||
Image('https://www.python.org/static/community_logos/python-logo-master-v3-TM-flattened.png')
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```python
|
||||
print("Welcome to Academic!")
|
||||
```
|
||||
|
||||
Welcome to Academic!
|
||||
|
||||
## Organize your notebooks
|
||||
|
||||
Place the notebooks that you would like to publish in a `notebooks` folder at the root of your website.
|
||||
|
||||
## Import the notebooks into your site
|
||||
|
||||
```bash
|
||||
pipx install academic
|
||||
academic import 'notebooks/**.ipynb' content/post/ --verbose
|
||||
```
|
||||
|
||||
The notebooks will be published to the folder you specify above. In this case, they will be published to your `content/post/` folder.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
BIN
content/post/data-visualization/featured.jpg
Normal file
BIN
content/post/data-visualization/featured.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
155
content/post/data-visualization/index.md
Normal file
155
content/post/data-visualization/index.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
title: 📈 Communicate your results effectively with the best data visualizations
|
||||
summary: Use popular tools such as Plotly, Mermaid, and data frames.
|
||||
date: 2023-10-26
|
||||
tags:
|
||||
- Hugo
|
||||
- Wowchemy
|
||||
- Markdown
|
||||
image:
|
||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
||||
---
|
||||
|
||||
Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
|
||||
|
||||
Use popular tools such as Plotly, Mermaid, and data frames.
|
||||
|
||||
## Charts
|
||||
|
||||
Wowchemy supports the popular [Plotly](https://plot.ly/) format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!
|
||||
|
||||
Save your Plotly JSON in your page folder, for example `line-chart.json`, and then add the `{{</* chart data="line-chart" */>}}` shortcode where you would like the chart to appear.
|
||||
|
||||
Demo:
|
||||
|
||||
{{< chart data="line-chart" >}}
|
||||
|
||||
You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) useful.
|
||||
|
||||
## Diagrams
|
||||
|
||||
Wowchemy supports the _Mermaid_ Markdown extension for diagrams.
|
||||
|
||||
An example **flowchart**:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
|
||||
An example **sequence diagram**:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
An example **class diagram**:
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
An example **state diagram**:
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
## Data Frames
|
||||
|
||||
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
|
||||
|
||||
```go
|
||||
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
|
||||
|
||||
## Did you find this page helpful? Consider sharing it 🙌
|
||||
BIN
content/post/get-started/featured.jpg
Normal file
BIN
content/post/get-started/featured.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
@@ -1,50 +1,23 @@
|
||||
---
|
||||
title: Welcome to Hugo Blox Builder, the website builder for Hugo
|
||||
subtitle: Welcome 👋 We know that first impressions are important, so we've populated your new site with some initial content to help you get familiar with everything in no time.
|
||||
|
||||
# Summary for listings and search engines
|
||||
summary: Welcome 👋 We know that first impressions are important, so we've populated your new site with some initial content to help you get familiar with everything in no time.
|
||||
|
||||
# Link this post with a project
|
||||
projects: []
|
||||
|
||||
# Date published
|
||||
date: '2020-12-13T00:00:00Z'
|
||||
|
||||
# Date updated
|
||||
lastmod: '2020-12-13T00:00:00Z'
|
||||
|
||||
# Is this an unpublished draft?
|
||||
draft: false
|
||||
|
||||
# Show this page in the Featured widget?
|
||||
featured: false
|
||||
title: 🎉 Easily create your own simple yet highly customizable blog
|
||||
summary: Take full control of your personal brand and privacy by migrating away from the big tech platforms!
|
||||
date: 2023-10-27
|
||||
|
||||
# Featured image
|
||||
# Place an image named `featured.jpg/png` in this page's folder and customize its options here.
|
||||
image:
|
||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)'
|
||||
focal_point: ''
|
||||
placement: 2
|
||||
preview_only: false
|
||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
||||
|
||||
authors:
|
||||
- admin
|
||||
- 吳恩達
|
||||
|
||||
tags:
|
||||
- Academic
|
||||
- 开源
|
||||
|
||||
categories:
|
||||
- Demo
|
||||
- 教程
|
||||
- Wowchemy
|
||||
- Markdown
|
||||
---
|
||||
|
||||
```python
|
||||
import libr
|
||||
print('hello')
|
||||
```
|
||||
Welcome 👋
|
||||
|
||||
## Overview
|
||||
|
||||
@@ -61,7 +34,7 @@ print('hello')
|
||||
- 💬 [Chat with the **Wowchemy community**](https://discord.gg/z8wNYzb) or [**Hugo community**](https://discourse.gohugo.io)
|
||||
- 🐦 Twitter: [@wowchemy](https://twitter.com/wowchemy) [@GeorgeCushen](https://twitter.com/GeorgeCushen) [#MadeWithWowchemy](https://twitter.com/search?q=%23MadeWithWowchemy&src=typed_query)
|
||||
- 💡 [Request a **feature** or report a **bug** for _Wowchemy_](https://github.com/HugoBlox/hugo-blox-builder/issues)
|
||||
- ⬆️ **Updating Wowchemy?** View the [Update Tutorial](https://docs.hugoblox.com/hugo-tutorials/update/) and [Release Notes](https://hugoblox.com/updates/)
|
||||
- ⬆️ **Updating Wowchemy?** View the [Update Guide](https://docs.hugoblox.com/reference/update/) and [Release Notes](https://github.com/HugoBlox/hugo-blox-builder/releases)
|
||||
|
||||
## Crowd-funded open-source software
|
||||
|
||||
@@ -73,25 +46,25 @@ As a token of appreciation for sponsoring, you can **unlock [these](https://hugo
|
||||
|
||||
## Ecosystem
|
||||
|
||||
- **[Hugo Academic CLI](https://github.com/GetRD/academic-file-converter):** Automatically import publications from BibTeX
|
||||
- **[Bibtex To Markdown](https://github.com/GetRD/academic-file-converter):** Automatically import publications from BibTeX
|
||||
|
||||
## Inspiration
|
||||
|
||||
[Check out the latest **demo**](https://academic-demo.netlify.com/) of what you'll get in less than 10 minutes, or [view the **showcase**](https://hugoblox.com/user-stories/) of personal, project, and business sites.
|
||||
[Learn what other **creators**](https://hugoblox.com/creators/) are building with this template.
|
||||
|
||||
## Features
|
||||
|
||||
- **Page builder** - Create _anything_ with [**widgets**](https://docs.hugoblox.com/page-builder/) and [**elements**](https://docs.hugoblox.com/content/writing-markdown-latex/)
|
||||
- **Page builder** - Create _anything_ with no-code [**blocks**](https://hugoblox.com/blocks/) and [**elements**](https://docs.hugoblox.com/reference/markdown/)
|
||||
- **Edit any type of content** - Blog posts, publications, talks, slides, projects, and more!
|
||||
- **Create content** in [**Markdown**](https://docs.hugoblox.com/content/writing-markdown-latex/), [**Jupyter**](https://docs.hugoblox.com/import/jupyter/), or [**RStudio**](https://docs.hugoblox.com/install-locally/)
|
||||
- **Plugin System** - Fully customizable [**color** and **font themes**](https://docs.hugoblox.com/customization/)
|
||||
- **Display Code and Math** - Code highlighting and [LaTeX math](https://en.wikibooks.org/wiki/LaTeX/Mathematics) supported
|
||||
- **Create content** in [**Markdown**](https://docs.hugoblox.com/reference/markdown/), [**Jupyter**](https://docs.hugoblox.com/getting-started/cms/), or [**RStudio**](https://docs.hugoblox.com/getting-started/cms/)
|
||||
- **Plugin System** - Fully customizable [**color** and **font themes**](https://docs.hugoblox.com/getting-started/customize/)
|
||||
- **Display Code and Math** - Code syntax highlighting and LaTeX math supported
|
||||
- **Integrations** - [Google Analytics](https://analytics.google.com), [Disqus commenting](https://disqus.com), Maps, Contact Forms, and more!
|
||||
- **Beautiful Site** - Simple and refreshing one page design
|
||||
- **Beautiful Site** - Simple and refreshing one-page design
|
||||
- **Industry-Leading SEO** - Help get your website found on search engines and social media
|
||||
- **Media Galleries** - Display your images and videos with captions in a customizable gallery
|
||||
- **Mobile Friendly** - Look amazing on every screen with a mobile friendly version of your site
|
||||
- **Multi-language** - 34+ language packs including English, 中文, and Português
|
||||
- **Multi-language** - 35+ language packs including English, 中文, and Português
|
||||
- **Multi-user** - Each author gets their own profile page
|
||||
- **Privacy Pack** - Assists with GDPR
|
||||
- **Stand Out** - Bring your site to life with animation, parallax backgrounds, and scroll effects
|
||||
@@ -99,12 +72,12 @@ As a token of appreciation for sponsoring, you can **unlock [these](https://hugo
|
||||
|
||||
## Themes
|
||||
|
||||
Wowchemy and its templates come with **automatic day (light) and night (dark) mode** built-in. Alternatively, visitors can choose their preferred mode - click the moon icon in the top right of the [Demo](https://academic-demo.netlify.com/) to see it in action! Day/night mode can also be disabled by the site admin in `params.toml`.
|
||||
Wowchemy and its templates come with **automatic day (light) and night (dark) mode** built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.
|
||||
|
||||
[Choose a stunning **theme** and **font**](https://docs.hugoblox.com/customization) for your site. Themes are fully customizable.
|
||||
[Choose a stunning **theme** and **font**](https://docs.hugoblox.com/getting-started/customize/) for your site. Themes are fully customizable.
|
||||
|
||||
## License
|
||||
|
||||
Copyright 2016-present [George Cushen](https://georgecushen.com).
|
||||
|
||||
Released under the [MIT](https://github.com/HugoBlox/hugo-blox-builder/blob/master/LICENSE.md) license.
|
||||
Released under the [MIT](https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md) license.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB |
BIN
content/post/project-management/featured.jpg
Normal file
BIN
content/post/project-management/featured.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
92
content/post/project-management/index.md
Normal file
92
content/post/project-management/index.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: ✅ Manage your projects
|
||||
summary: Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
|
||||
date: 2023-10-23
|
||||
tags:
|
||||
- Wowchemy
|
||||
- Markdown
|
||||
image:
|
||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
||||
---
|
||||
|
||||
Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
|
||||
|
||||
## Ideation
|
||||
|
||||
Wowchemy supports a Markdown extension for mindmaps.
|
||||
|
||||
Simply insert a Markdown code block labelled as `markmap` and optionally set the height of the mindmap as shown in the example below.
|
||||
|
||||
Mindmaps can be created by simply writing the items as a Markdown list within the `markmap` code block, indenting each item to create as many sub-levels as you need:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
|
||||
## Diagrams
|
||||
|
||||
Wowchemy supports the _Mermaid_ Markdown extension for diagrams.
|
||||
|
||||
An example **Gantt diagram**:
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
```
|
||||
|
||||
## Todo lists
|
||||
|
||||
You can even write your todo lists in Markdown too:
|
||||
|
||||
```markdown
|
||||
- [x] Write math example
|
||||
- [x] Write diagram example
|
||||
- [ ] Do something else
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
- [x] Write math example
|
||||
- [x] Write diagram example
|
||||
- [ ] Do something else
|
||||
|
||||
## Did you find this page helpful? Consider sharing it 🙌
|
||||
BIN
content/post/second-brain/featured.jpg
Normal file
BIN
content/post/second-brain/featured.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
136
content/post/second-brain/index.md
Normal file
136
content/post/second-brain/index.md
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: 🧠 Sharpen your thinking with a second brain
|
||||
summary: Create a personal knowledge base and share your knowledge with your peers.
|
||||
date: 2023-10-26
|
||||
tags:
|
||||
- Second Brain
|
||||
- Markdown
|
||||
image:
|
||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
||||
---
|
||||
|
||||
Create a personal knowledge base and share your knowledge with your peers.
|
||||
|
||||
Wowchemy web framework empowers you with one of the most flexible note-taking capabilities out there.
|
||||
|
||||
Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.
|
||||
|
||||
Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.
|
||||
|
||||
## Mindmaps
|
||||
|
||||
Wowchemy supports a Markdown extension for mindmaps.
|
||||
|
||||
With this open format, can even edit your mindmaps in other popular tools such as Obsidian.
|
||||
|
||||
Simply insert a Markdown code block labelled as `markmap` and optionally set the height of the mindmap as shown in the example below.
|
||||
|
||||
Mindmaps can be created by simply writing the items as a Markdown list within the `markmap` code block, indenting each item to create as many sub-levels as you need:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
|
||||
Anh here's a more advanced mindmap with formatting, code blocks, and math:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Wowchemy Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- Features
|
||||
- Markdown formatting
|
||||
- **inline** ~~text~~ *styles*
|
||||
- multiline
|
||||
text
|
||||
- `inline code`
|
||||
-
|
||||
```js
|
||||
console.log('hello');
|
||||
console.log('code block');
|
||||
```
|
||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Wowchemy Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- Features
|
||||
- Markdown formatting
|
||||
- **inline** ~~text~~ *styles*
|
||||
- multiline
|
||||
text
|
||||
- `inline code`
|
||||
-
|
||||
```js
|
||||
console.log('hello');
|
||||
console.log('code block');
|
||||
```
|
||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||
```
|
||||
|
||||
## Highlighting
|
||||
|
||||
<mark>Highlight</mark> important text with `mark`:
|
||||
|
||||
```html
|
||||
<mark>Highlighted text</mark>
|
||||
```
|
||||
|
||||
## Callouts
|
||||
|
||||
Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings.
|
||||
|
||||
By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside.
|
||||
|
||||
```markdown
|
||||
{{%/* callout note */%}}
|
||||
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
||||
{{%/* /callout */%}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{% callout note %}}
|
||||
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
||||
{{% /callout %}}
|
||||
|
||||
Or use the `warning` callout type so your readers don't miss critical details:
|
||||
|
||||
{{% callout warning %}}
|
||||
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
||||
{{% /callout %}}
|
||||
|
||||
## Did you find this page helpful? Consider sharing it 🙌
|
||||
BIN
content/post/teach-courses/ambient-piano.mp3
Normal file
BIN
content/post/teach-courses/ambient-piano.mp3
Normal file
Binary file not shown.
BIN
content/post/teach-courses/featured.jpg
Normal file
BIN
content/post/teach-courses/featured.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
141
content/post/teach-courses/index.md
Normal file
141
content/post/teach-courses/index.md
Normal file
@@ -0,0 +1,141 @@
|
||||
---
|
||||
title: 👩🏼🏫 Teach academic courses
|
||||
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
|
||||
date: 2023-10-24
|
||||
math: true
|
||||
tags:
|
||||
- Hugo
|
||||
- Hugo Blox Builder
|
||||
- Markdown
|
||||
image:
|
||||
caption: 'Embed rich media such as videos and LaTeX math'
|
||||
---
|
||||
|
||||
[Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.
|
||||
|
||||
**Embed videos, podcasts, code, LaTeX math, and even test students!**
|
||||
|
||||
On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox.
|
||||
|
||||
## Video
|
||||
|
||||
Teach your course by sharing videos with your students. Choose from one of the following approaches:
|
||||
|
||||
{{< youtube D2vj0WcvH5c >}}
|
||||
|
||||
**Youtube**:
|
||||
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
|
||||
**Bilibili**:
|
||||
|
||||
{{</* bilibili id="BV1WV4y1r7DF" */>}}
|
||||
|
||||
**Video file**
|
||||
|
||||
Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode:
|
||||
|
||||
{{</* video src="my_video.mp4" controls="yes" */>}}
|
||||
|
||||
## Podcast
|
||||
|
||||
You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode:
|
||||
|
||||
{{</* audio src="ambient-piano.mp3" */>}}
|
||||
|
||||
Try it out:
|
||||
|
||||
{{< audio src="ambient-piano.mp3" >}}
|
||||
|
||||
## Test students
|
||||
|
||||
Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
|
||||
|
||||
```markdown
|
||||
{{</* spoiler text="👉 Click to view the solution" */>}}
|
||||
You found me!
|
||||
{{</* /spoiler */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}
|
||||
|
||||
## Math
|
||||
|
||||
Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
|
||||
|
||||
To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively.
|
||||
|
||||
{{% callout note %}}
|
||||
We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown.
|
||||
{{% /callout %}}
|
||||
|
||||
Example **math block**:
|
||||
|
||||
```latex
|
||||
{{</* math */>}}
|
||||
$$
|
||||
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
|
||||
$$
|
||||
{{</* /math */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< math >}}
|
||||
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
|
||||
{{< /math >}}
|
||||
|
||||
Example **inline math** `{{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}.
|
||||
|
||||
Example **multi-line math** using the math linebreak (`\\`):
|
||||
|
||||
```latex
|
||||
{{</* math */>}}
|
||||
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
|
||||
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
|
||||
{{</* /math */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< math >}}
|
||||
|
||||
$$
|
||||
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
|
||||
1-p_{0}^{*} & \text{if }k=0.\end{cases}
|
||||
$$
|
||||
|
||||
{{< /math >}}
|
||||
|
||||
## Code
|
||||
|
||||
Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file.
|
||||
|
||||
|
||||
```python
|
||||
import pandas as pd
|
||||
data = pd.read_csv("data.csv")
|
||||
data.head()
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```python
|
||||
import pandas as pd
|
||||
data = pd.read_csv("data.csv")
|
||||
data.head()
|
||||
```
|
||||
|
||||
## Inline Images
|
||||
|
||||
```go
|
||||
{{</* icon name="python" */>}} Python
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< icon name="python" >}} Python
|
||||
|
||||
## Did you find this page helpful? Consider sharing it 🙌
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
@@ -1,390 +0,0 @@
|
||||
---
|
||||
title: Writing technical content in Markdown
|
||||
date: 2019-07-12
|
||||
math: true
|
||||
image:
|
||||
placement: 2
|
||||
caption: 'Image credit: [**John Moeses Bauan**](https://unsplash.com/photos/OGZtQF8iC0g)'
|
||||
---
|
||||
|
||||
Hugo Blox Builder is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
|
||||
|
||||
**Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation.**
|
||||
|
||||
On this page, you'll find some examples of the types of technical content that can be rendered with Wowchemy.
|
||||
|
||||
## Examples
|
||||
|
||||
### Code
|
||||
|
||||
Wowchemy supports a Markdown extension for highlighting code syntax. You can customize the styles under the `syntax_highlighter` option in your `config/_default/params.yaml` file.
|
||||
|
||||
```python
|
||||
import pandas as pd
|
||||
data = pd.read_csv("data.csv")
|
||||
data.head()
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```python
|
||||
import pandas as pd
|
||||
data = pd.read_csv("data.csv")
|
||||
data.head()
|
||||
```
|
||||
|
||||
### Mindmaps
|
||||
|
||||
Wowchemy supports a Markdown extension for mindmaps.
|
||||
|
||||
Simply insert a Markdown `markmap` code block and optionally set the height of the mindmap as shown in the example below.
|
||||
|
||||
A simple mindmap defined as a Markdown list:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- wowchemy
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
|
||||
A more advanced mindmap with formatting, code blocks, and math:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Wowchemy Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- Features
|
||||
- Markdown formatting
|
||||
- **inline** ~~text~~ *styles*
|
||||
- multiline
|
||||
text
|
||||
- `inline code`
|
||||
-
|
||||
```js
|
||||
console.log('hello');
|
||||
console.log('code block');
|
||||
```
|
||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Wowchemy Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- Features
|
||||
- Markdown formatting
|
||||
- **inline** ~~text~~ *styles*
|
||||
- multiline
|
||||
text
|
||||
- `inline code`
|
||||
-
|
||||
```js
|
||||
console.log('hello');
|
||||
console.log('code block');
|
||||
```
|
||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||
```
|
||||
|
||||
### Charts
|
||||
|
||||
Wowchemy supports the popular [Plotly](https://plot.ly/) format for interactive charts.
|
||||
|
||||
Save your Plotly JSON in your page folder, for example `line-chart.json`, and then add the `{{</* chart data="line-chart" */>}}` shortcode where you would like the chart to appear.
|
||||
|
||||
Demo:
|
||||
|
||||
{{< chart data="line-chart" >}}
|
||||
|
||||
You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) useful.
|
||||
|
||||
### Math
|
||||
|
||||
Wowchemy supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
|
||||
|
||||
To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively. (We wrap the LaTeX math in the Wowchemy _math_ shortcode to prevent Hugo rendering our math as Markdown. The _math_ shortcode is new in v5.5-dev.)
|
||||
|
||||
Example **math block**:
|
||||
|
||||
```latex
|
||||
{{</* math */>}}
|
||||
$$
|
||||
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
|
||||
$$
|
||||
{{</* /math */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< math >}}
|
||||
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
|
||||
{{< /math >}}
|
||||
|
||||
Example **inline math** `{{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}.
|
||||
|
||||
Example **multi-line math** using the math linebreak (`\\`):
|
||||
|
||||
```latex
|
||||
{{</* math */>}}
|
||||
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
|
||||
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
|
||||
{{</* /math */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< math >}}
|
||||
|
||||
$$
|
||||
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
|
||||
1-p_{0}^{*} & \text{if }k=0.\end{cases}
|
||||
$$
|
||||
|
||||
{{< /math >}}
|
||||
|
||||
### Diagrams
|
||||
|
||||
Wowchemy supports a Markdown extension for diagrams. You can enable this feature by toggling the `diagram` option in your `config/_default/params.toml` file or by adding `diagram: true` to your page front matter.
|
||||
|
||||
An example **flowchart**:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Hard] -->|Text| B(Round)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
|
||||
An example **sequence diagram**:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
An example **Gantt diagram**:
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
```
|
||||
|
||||
An example **class diagram**:
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
```
|
||||
|
||||
An example **state diagram**:
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
### Todo lists
|
||||
|
||||
You can even write your todo lists in Markdown too:
|
||||
|
||||
```markdown
|
||||
- [x] Write math example
|
||||
- [x] Write diagram example
|
||||
- [ ] Do something else
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
- [x] Write math example
|
||||
- [x] Write diagram example
|
||||
- [ ] Do something else
|
||||
|
||||
### Tables
|
||||
|
||||
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
|
||||
|
||||
```go
|
||||
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
|
||||
|
||||
### Callouts
|
||||
|
||||
Academic supports a [shortcode for callouts](https://docs.hugoblox.com/content/writing-markdown-latex/#callouts), also referred to as _asides_, _hints_, or _alerts_. By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside.
|
||||
|
||||
```markdown
|
||||
{{%/* callout note */%}}
|
||||
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
||||
{{%/* /callout */%}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{% callout note %}}
|
||||
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
||||
{{% /callout %}}
|
||||
|
||||
### Spoilers
|
||||
|
||||
Add a spoiler to a page to reveal text, such as an answer to a question, after a button is clicked.
|
||||
|
||||
```markdown
|
||||
{{</* spoiler text="Click to view the spoiler" */>}}
|
||||
You found me!
|
||||
{{</* /spoiler */>}}
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< spoiler text="Click to view the spoiler" >}} You found me! {{< /spoiler >}}
|
||||
|
||||
### Icons
|
||||
|
||||
Academic enables you to use a wide range of [icons from _Font Awesome_ and _Academicons_](https://docs.hugoblox.com/getting-started/page-builder/#icons) in addition to [emojis](https://docs.hugoblox.com/content/writing-markdown-latex/#emojis).
|
||||
|
||||
Here are some examples using the `icon` shortcode to render icons:
|
||||
|
||||
```markdown
|
||||
{{</* icon name="terminal" pack="fas" */>}} Terminal
|
||||
{{</* icon name="python" pack="fab" */>}} Python
|
||||
{{</* icon name="r-project" pack="fab" */>}} R
|
||||
```
|
||||
|
||||
renders as
|
||||
|
||||
{{< icon name="terminal" pack="fas" >}} Terminal
|
||||
{{< icon name="python" pack="fab" >}} Python
|
||||
{{< icon name="r-project" pack="fab" >}} R
|
||||
|
||||
### Did you find this page helpful? Consider sharing it 🙌
|
||||
Reference in New Issue
Block a user