From 61bf1a1f2b32116ff6ed62abb52144aeaebffeaa Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sat, 12 Mar 2022 11:26:41 +0800
Subject: [PATCH] :memo: Docs: add documentation for print style (#61)

---
 assets/css/_core/_media.scss                  |  2 +-
 .../theme-documentation-basics/index.en.md    | 22 ++++++++++++++++++-
 .../theme-documentation-basics/index.zh-cn.md | 22 ++++++++++++++++++-
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
index e8f37015..176ee2a0 100644
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -146,7 +146,7 @@
     }
   }
 
-  // TODO add common class for all elements
+  .print-d-none,
   header,
   footer .footer-line:not(.powered):not(.copyright),
   #toc-auto,
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index c9da8bca..d116d2a2 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -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.
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
index 44818552..9a5ef7d1 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -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 的多语言模式，并且支持在网页上切换语言。