📝 Docs: add documentation for print style (#61)

This commit is contained in:
Cell
2022-03-12 11:26:41 +08:00
parent f7fe83fa39
commit 61bf1a1f2b
3 changed files with 43 additions and 3 deletions
@@ -937,7 +937,7 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
In `assets/css/_custom.scss`, you can add some css style code to customize the style.
#### 3.3.1 Page Style Customization {#page-style}
#### 3.3.1 Page Style {#page-style}
{{< version 0.2.13 >}}
@@ -989,6 +989,26 @@ For example: `pageStyle="custom"`
}
```
#### 3.3.2 Print Style {#print-style}
{{< version 0.2.13 >}}
There are three css common class for print view in FixIt Theme.
* `page-break-before` Insert page break before element
* `page-break-after` Insert page break after element
* `print-d-none` Hide elements in print view
Here is a simple exmple:
```html
<div class="page-break-before"></div>
<div class="page-break-after"></div>
<div class="print-d-none">
Something you want to hide in the print view is written here.
</div>
```
## 4 Multilingual and i18n
**FixIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
@@ -949,7 +949,7 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
`assets/css/_custom.scss` 中,你可以添加一些 CSS 样式代码以自定义样式。
#### 3.3.1 自定义页面宽度 {#page-style}
#### 3.3.1 页面宽度 {#page-style}
{{< version 0.2.13 >}}
@@ -1001,6 +1001,26 @@ FixIt 主题提供了页面宽度配置选项 `pageStyle` 并提供三种选项
}
```
#### 3.3.2 打印样式 {#print-style}
{{< version 0.2.13 >}}
在 FixIt 主题中,提供有三个打印视图相关的 css class
* `page-break-before` 在元素之前插入分页符
* `page-break-after` 在元素之后插入分页符
* `print-d-none` 在打印视图中隐藏元素
下面是一个简单的例子:
```html
<div class="page-break-before"></div>
<div class="page-break-after"></div>
<div class="print-d-none">
您希望在打印视图中隐藏的某些内容写在此处。
</div>
```
## 4 多语言和 i18n
**FixIt** 主题完全兼容 Hugo 的多语言模式,并且支持在网页上切换语言。