控制页面布局

控制页面布局#

Warning

本页中的许多功能是实验性的，可能会随时更改。

有几种方法可以使用Jupyter Book控制页面的布局。其中许多想法受到Edward Tufte布局CSS指南的启发。

让我们从一个示例图开始。您可以点击右侧的切换按钮查看生成它的代码。

Hide code cell source 
def make_fig(figsize):
    from matplotlib import rcParams, cycler
    import matplotlib.pyplot as plt
    import numpy as np
    plt.ion()

    # 固定随机状态以确保可重复性
    np.random.seed(19680801)

    N = 10
    data = [np.logspace(0, 1, 100) + .2 * np.random.randn(100) + ii for ii in range(N)]
    data = np.array(data).T
    cmap = plt.cm.coolwarm
    rcParams['axes.prop_cycle'] = cycler(color=cmap(np.linspace(0, 1, N)))


    from matplotlib.lines import Line2D
    custom_lines = [Line2D([0], [0], color=cmap(0.), lw=4),
                    Line2D([0], [0], color=cmap(.5), lw=4),
                    Line2D([0], [0], color=cmap(1.), lw=4)]

    fig, ax = plt.subplots(figsize=figsize)
    lines = ax.plot(data)
    ax.legend(custom_lines, ['Cold', 'Medium', 'Hot'])
make_fig(figsize=(10, 5))

---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
Cell In[1], line 25
     23     lines = ax.plot(data)
     24     ax.legend(custom_lines, ['Cold', 'Medium', 'Hot'])
---> 25 make_fig(figsize=(10, 5))

Cell In[1], line 2, in make_fig(figsize)
      1 def make_fig(figsize):
----> 2     from matplotlib import rcParams, cycler
      3     import matplotlib.pyplot as plt
      4     import numpy as np

ModuleNotFoundError: No module named 'matplotlib'

侧边栏内容#

添加侧边栏元素可以让您提供不中断主要内容流程的上下文信息。它是Tufte样式指南中推荐的主要模式之一。

Jupyter Book支持两种侧边栏。我们将在下面描述它们。

Note

某些侧边栏内容在不同的屏幕尺寸下表现不同。如果屏幕足够窄，侧边栏内容将与您的内容内联显示。将屏幕加宽，它将弹出到右侧。

内容内的侧边栏#

如果您在内容中使用侧边栏，侧边栏将与页面内容内联显示。然而，它将被放置在右侧，使您的内容围绕它环绕。这可以防止侧边栏打断内容的流程。这在您有高且长的内容块或图像时特别有用，您希望在整个内容中提供上下文信息。

要向内容添加侧边栏，请使用以下语法：

```{sidebar} 我的侧边栏标题
我的侧边栏内容
```

边距内容#

要使用MyST Markdown在边距中添加内容，请使用以下语法：

```{margin} 可选标题
我的边距内容
```

使用代码单元格控制边距内容需要稍微不同的语法，我们将在下面介绍。

带有代码单元的边距#

您可以通过在单元格的标签中添加 margin 来将代码单元格移动到右侧边距。

以下是边距单元格的元数据示例：

{
    "tags": [
        "margin",
    ]
}

See also

为笔记本添加元数据

对于MyST文本文件，这些标签可以添加到 code-cell 中

```{code-cell} <语言>
:tags: [margin]
```

例如，我们将重新显示上图，并向代码单元格添加一个 margin 标签。

make_fig(figsize=(10, 5))

---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
Cell In[2], line 1
----> 1 make_fig(figsize=(10, 5))

Cell In[1], line 2, in make_fig(figsize)
      1 def make_fig(figsize):
----> 2     from matplotlib import rcParams, cycler
      3     import matplotlib.pyplot as plt
      4     import numpy as np

ModuleNotFoundError: No module named 'matplotlib'

这可以与其他标签（如 remove-input）结合使用，以仅显示图形。

MyST速查表 提供了 可用的 code-cell 标签列表

全宽内容#

有时，您希望使用所有可用的水平空间。这允许您突出显示特定的想法、可视化等。

全宽代码单元格#

您可以使用以下单元格元数据标签指定代码单元格的输入和/或输出应占用所有水平空间（包括右侧的边距）：

{
    "tags": [
        "full-width",
    ]
}

See also

有关如何将单元格元数据添加到笔记本的提示，请参阅 为笔记本添加元数据。

例如，让我们在上面的边距中查看图形，并在设置为 full-width 的单元格中查看。我们将告诉Matplotlib使其更宽一些，以便我们可以利用额外的空间！

Hide code cell source 
make_fig(figsize=(20, 5))

---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
Cell In[3], line 1
----> 1 make_fig(figsize=(20, 5))

Cell In[1], line 2, in make_fig(figsize)
      1 def make_fig(figsize):
----> 2     from matplotlib import rcParams, cycler
      3     import matplotlib.pyplot as plt
      4     import numpy as np

ModuleNotFoundError: No module named 'matplotlib'

全宽Markdown内容#

如果你想要使你的Markdown内容全屏显示，你不能通过单元格标签来实现。 相反，你有几个选择：

  1. 使用带有full-width类的{div}指令。 任何带有full-width类的内容将占据屏幕的全部宽度。例如，以下代码：

    ````{div} full-width
```{note}
这里是一个将占据全屏宽度的注释
```

    
结果为：

````{div} full-width
```{note}
这里是一个将占据全屏宽度的注释
```
````

有关`<div>`块的更多信息，请参见 [](custom-div-blocks)。

  2. 为支持类的指令添加full-width类。许多指令允许你直接向它们添加CSS类。

    例如，上面的{note}指令允许这样做：

    ```{note}
:class: full-width
这里是一个将占据全屏宽度的注释
```

    结果为：

    Note

    这里是一个将占据全屏宽度的注释

    检查指令的文档，看看它是否支持添加你自己的类，或者如上所述使用{div}指令。

混合使用边距和全屏内容

在混合使用边距和全屏内容时要小心。 有时这些可能会在视觉空间上相互冲突。你应该相对节制地使用它们，以便它们能够充分发挥突出信息的效果。