文章 | 刘圣鼎

使用 Jupyter Notebook 写博客！

Sat, 04 Nov 2023 00:00:00 +0000

from IPython.core.display import Image
Image('https://www.python.org/static/community_logos/python-logo-master-v3-TM-flattened.png')

print("Welcome to Academic!")

Welcome to Academic!

整理你的 Notebook

将要发布的 Notebook 放入网站根目录下的 notebooks 文件夹。

将 Notebook 导入网站

pipx install academic
academic import 'notebooks/**.ipynb' content/post/ --verbose

Notebook 将发布到上面指定的文件夹中。在本例中，它们会发布到 content/post/ 文件夹。

欢迎使用 Hugo 网站构建工具 Hugo Blox Builder

Sun, 13 Dec 2020 00:00:00 +0000

import libr
print('hello')

概览

面向 Hugo 的 Wowchemy 网站构建工具及其入门模板，专为专业创作者、教育工作者以及团队和组织设计，也可以用于创建任何类型的网站
模板可以根据你的需求修改和定制。它适合希望掌握自己的数据与网络身份，同时便捷地从无代码方案（使用 Markdown 写作、用 YAML 参数定制）开始，并保留日后通过 HTML 和 CSS 深度个性化能力的用户
你可以借助数百种插件与集成，使用喜爱的工具和应用，加快工作流程、与读者互动，并实现更多功能

开始使用

👉 创建新网站
📚 个性化你的网站
💬 与 Wowchemy 社区交流或 Hugo 社区
🐦 Twitter: @wowchemy @GeorgeCushen #MadeWithWowchemy
💡 为 Wowchemy 提出功能建议或报告 Bug
⬆️ 需要更新 Wowchemy？ 查看更新教程和版本说明

众筹支持的开源软件

为了让我们能在 MIT 许可证下持续开发模板与软件，我们邀请使用它的个人和企业通过赞助支持长期维护与开发。

❤️ 点击成为赞助者，支持 Wowchemy 的未来 ❤️

为感谢你的赞助，你可以解锁这些精彩奖励与额外功能 🦄✨

生态系统

Hugo Academic CLI: 自动从 BibTeX 导入论文

灵感

查看最新演示，了解不到 10 分钟即可获得的网站效果，或浏览个人、项目与商业网站的展示案例。

功能

页面构建器——使用组件和元素
编辑各种内容——博客、论文、演讲、幻灯片、项目等！
通过以下工具创建内容： Markdown, Jupyter, or RStudio
插件系统——完全可定制的配色与字体主题
展示代码与公式——代码高亮和 LaTeX 数学公式支持
集成—— Google Analytics, Disqus 评论, 地图、联系表单等！
美观的网站——简洁清新的单页设计
出色的 SEO——帮助用户通过搜索引擎和社交媒体找到你的网站
媒体相册——在可定制的相册中展示带说明的图片与视频
移动端友好——适配移动设备，在各种屏幕上都有良好效果
多语言——提供 34 种以上语言包，包括英语、中文与葡萄牙语
多用户——每位作者都有独立的个人资料页
隐私工具包——协助满足 GDPR 要求
脱颖而出——用动画、视差背景和滚动效果为网站增添活力
一键部署——无需服务器或数据库，只需文件。

主题

Wowchemy 及其模板内置自动日间（浅色）与夜间（深色）模式。访客也可以选择偏好的模式——点击演示网站右上角的月亮图标即可体验！网站管理员还可以在 params.toml 中关闭日夜模式。

为网站选择美观的主题与字体。主题支持全面定制。

许可证

基于 MIT 许可证发布。

使用 Markdown 撰写技术内容

Fri, 12 Jul 2019 00:00:00 +0000

Hugo Blox Builder 旨在为技术内容创作者提供流畅的体验。你可以专注于内容，其余交给 Wowchemy。

高亮代码片段、记录数学课堂笔记，并通过文字描述绘制图表。

本页展示了一些可由 Wowchemy 渲染的技术内容示例。

示例

代码

Wowchemy 支持用于代码语法高亮的 Markdown 扩展。你可以通过 config/_default/params.yaml 中的 syntax_highlighter 选项定制样式。

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

渲染结果如下

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

思维导图

Wowchemy 支持用于思维导图的 Markdown 扩展。

只需插入 Markdown markmap 代码块，也可以按下面的示例设置思维导图高度。

使用 Markdown 列表定义的简单思维导图：


```markmap {height="200px"}
- Hugo Modules
- wowchemy
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

渲染结果如下

- Hugo Modules
- wowchemy
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

包含格式、代码块和数学公式的进阶思维导图：


```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}$
```

渲染结果如下

- 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}$

图表

Wowchemy 支持使用常见的 Plotly 格式创建交互式图表。

将 Plotly JSON 文件保存在页面文件夹中，例如 line-chart.json，然后在需要显示图表的位置加入 {{< chart data="line-chart" >}} 短代码。

演示：

你也可以使用 Plotly JSON 编辑器。

数学公式

Wowchemy 支持用于 $\LaTeX$ 数学公式的 Markdown 扩展。可以在 config/_default/params.yaml 中通过 math 选项启用。

要渲染_行内_或_独立公式块_，分别用 {{< math >}}$...${{< /math >}} 或 {{< math >}}$$...$${{< /math >}} 包裹 LaTeX 公式。（使用 Wowchemy 的 math 短代码是为了防止 Hugo 将公式作为 Markdown 渲染。math 短代码于 v5.5-dev 中加入。）

公式块示例：

{{< 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 >}}

渲染结果如下

$$\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 >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} 渲染结果如下 $\nabla F(\mathbf{x}_{n})$.

使用公式换行符（\\）的多行公式示例：

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

渲染结果如下

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

示意图

Wowchemy 支持绘图的 Markdown 扩展。可以在 config/_default/params.toml 中启用 diagram，或者在页面元数据中加入 diagram: true。

流程图示例：

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

渲染结果如下

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

时序图示例：

```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!
```

渲染结果如下

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!

甘特图示例：

```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
```

渲染结果如下

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

类图示例：

```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
```

渲染结果如下

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

状态图示例：

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

渲染结果如下

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

待办清单

你还可以用 Markdown 编写待办清单：

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

渲染结果如下

Write math example
- Write diagram example
Do something else

表格

将电子表格保存为页面文件夹中的 CSV 文件，再在页面中添加 Table 短代码进行渲染：

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

渲染结果如下

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

提示框

Academic 支持提示框短代码，也称为_旁注_、提示_或_提醒。将段落放在 {{% callout note %}} ... {{% /callout %}} 中，即可渲染为旁注。

{{% callout note %}}
Markdown 旁注可用于向读者展示通知、提示或定义。
{{% /callout %}}

渲染结果如下

Markdown 旁注可用于向读者展示通知、提示或定义。

折叠内容

在页面中添加折叠内容，即可在点击按钮后显示文字，例如问题的答案。

{{< spoiler text="点击查看折叠内容" >}}
你找到我了！
{{< /spoiler >}}

渲染结果如下

点击查看折叠内容

你找到我了！

图标

除了表情符号，Academic 还支持丰富的 Font Awesome 和 Academicons 图标。

下面展示如何使用 icon 短代码渲染图标：

{{< icon name="terminal" pack="fas" >}} Terminal
{{< icon name="python" pack="fab" >}} Python
{{< icon name="r-project" pack="fab" >}} R

渲染结果如下

Terminal
Python
R

文章 | 刘圣鼎

使用 Jupyter Notebook 写博客！

整理你的 Notebook

将 Notebook 导入网站

欢迎使用 Hugo 网站构建工具 Hugo Blox Builder

概览

开始使用

众筹支持的开源软件

❤️ 点击成为赞助者，支持 Wowchemy 的未来 ❤️

生态系统

灵感

功能

主题

许可证

使用 Markdown 撰写技术内容

示例

代码

思维导图

图表

数学公式

示意图

待办清单

表格

提示框

折叠内容

图标

觉得本页有帮助？欢迎分享 🙌