mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 23:38:56 +00:00
📝 Docs: add documentation for print style (#61)
This commit is contained in:
@@ -146,7 +146,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// TODO add common class for all elements
|
||||
.print-d-none,
|
||||
header,
|
||||
footer .footer-line:not(.powered):not(.copyright),
|
||||
#toc-auto,
|
||||
|
||||
@@ -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 的多语言模式,并且支持在网页上切换语言。
|
||||
|
||||
Reference in New Issue
Block a user