sphinx book theme 主题特用指令

11.3. sphinx book theme 主题特用指令#

这个主题的一些特别的指令语法。 注意，这里的代码主要以 myst 作为示例。

11.3.1. 引文 （epigraph）#

Markdown 内置支持#

没有署名的引用：

Here’s my quote, it’s pretty neat. I wonder how many lines I can create with a single stream-of-consciousness quote. I could try to add a list of ideas to talk about. I suppose I could just keep going on forever, but I’ll stop here.

> Here’s my quote, it’s pretty neat. I wonder how many lines I can create with a single stream-of-consciousness quote. 
> I could try to add a list of ideas to talk about. I suppose I could just keep going on forever, but I’ll stop here.

使用 {epigraph} 指令#

有时候你会想让引用更引人注意。为此，使用 {epigraph} 指令。下面是一个引文，点击它右边的按钮，显示用于生成它的代码:

Here’s my quote, it’s pretty neat. I wonder how many lines I can create with a single stream-of-consciousness quote. I could try to add a list of ideas to talk about. I suppose I could just keep going on forever, but I’ll stop here.

```{epigraph}
Here's my quote, it's pretty neat.
I wonder how many lines I can create with
a single stream-of-consciousness quote.
I could try to add a list of ideas to talk about.
I suppose I could just keep going on forever,
but I'll stop here.
```

还可以通过添加空行，后跟以 -- 开头的行，引用内容添加引用来源。这将被渲染成这样:

Here’s my quote, it’s pretty neat. I wonder how many lines I can create with a single stream-of-consciousness quote. I could try to add a list of ideas to talk about. I suppose I could just keep going on forever, but I’ll stop here.

—Jo the Jovyan, the jupyter book docs

```{epigraph}
Here's my quote, it's pretty neat.
I wonder how many lines I can create with
a single stream-of-consciousness quote.
I could try to add a list of ideas to talk about.
I suppose I could just keep going on forever,
but I'll stop here.

-- Jo the Jovyan, *[the jupyter book docs](https://beta.jupyterbook.org)*
```

11.3.2. 侧边栏#

sphinx-book-theme 中有两种不同类型的类似边栏的内容：典型且通用的为 {sidebar} 指令，以及特定于此主题的 {margin} 指令。 两者都允许你将额外内容与主要内容分开放置。

小技巧

侧边栏的内容通常会与站点内容表所在的空白区域重叠。当阅读器将侧边栏内容滚动到视图中时，右边的导航栏应该自动隐藏。

这里显示主体内容。 侧边栏的内容代码如下所示，效果如右侧所示。

```{sidebar} 有两种方式添加内容到左侧边栏中

* 通过`{margin}`指令
* 通过添加 `margin` 这个CSS类到你自己的内容块中。
```

通过指令添加#

margin 侧边栏语法如下：

```{margin} **margin 侧边栏标题**

margin 侧边栏标题内容
```

通过上文我们可以知道，margin 侧边栏标题与代码块之类的组件是没有办法处于同一行（水平的）位置的， 我们在使用 margin 侧边栏标题时需要注意其放置的位置。

通过CSS类 margin 添加#

注解

This note will be in the margin!

:::{note}
:class: margin
This note will be in the margin!
:::

这适用于页面上的大多数指令，但一般来说，这适用于“父容器”，即内容包的顶部指令。

My figure text

图 11.3.1 And here is my figure caption#

例如： figure图片

My figure text

图 11.3.2 And here is my figure caption#

在页边空白处加上图片的文字说明#

My figure text

图 11.3.3 And here is my figure caption, if you look to the left, you can see that COOL is in big red letters. But you probably already noticed that, really I am just taking up space to see how the margin caption looks like when it is really long :-)#

```{figure} ./fun-fish.png
---
width: 60%
figclass: margin-caption
alt: My figure text
name: myfig54
---
And here is my figure caption, if you look to the left, you can see that COOL is in big red letters. But you probably already noticed that, really I am just taking up space to see how the margin caption looks like when it is really long :-)
```

11.3.3. 宽屏的内容#

全宽度的内容延伸到右边，使它在你的书的其他内容中脱颖而出。要向页面添加全宽内容，请向文档中的任何元素添加 full-width 属性。 例如，你可以像这样给 note 指令或其他指令添加一个 full-width 属性:

```{note}
:class: full-width
This content will be full-width
```

```{code-block} java
:class: full-width

public class main {
    public static void main(String[] args) {
        System.out.println("hello world");
    }
}
```

这段代码的结果如下:

注解

This content will be full-width

public class main {
    public static void main(String[] args) {
        System.out.println("hello world");
    }
}
目录