From 09b4443df84f22f7f8ae970faaa75efab8cc0029 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Fri, 11 Mar 2022 21:00:12 +0800
Subject: [PATCH] :memo: Docs: add documentation for page style usage (#62)

---
 .../theme-documentation-basics/index.en.md    | 52 +++++++++++++++++++
 .../theme-documentation-basics/index.zh-cn.md | 52 +++++++++++++++++++
 2 files changed, 104 insertions(+)

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index fb4f7532..c9da8bca 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -937,6 +937,58 @@ $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}
+
+{{< version 0.2.13 >}}
+
+The FixIt theme provides a page width configuration option `pageStyle` and three values.
+
+* **narrow** Keep `<v0.2.12` page/toc width ratio
+* **normal** New default page/toc width ratio
+* **wide** Larger page/toc width ratio
+
+In addition, you can also customize the `pageStyle` value in `assets/css/_custom.scss`
+
+For example: `pageStyle="custom"`
+
+```scss
+@media only screen and (min-width: 1441px) {
+  [page-style='custom'] {
+    .page {
+      width: 70%;
+    }
+
+    aside {
+      width: 15%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  [page-style='custom'] {
+    .page {
+      width: 60%;
+    }
+
+    aside {
+      width: 20%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  [page-style='custom'] {
+    .page {
+      width: 56%;
+    }
+
+    aside {
+      width: 22%;
+    }
+  }
+}
+```
+
 ## 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 fba51b05..44818552 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -949,6 +949,58 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
 
 在 `assets/css/_custom.scss` 中，你可以添加一些 CSS 样式代码以自定义样式。
 
+#### 3.3.1 自定义页面宽度 {#page-style}
+
+{{< version 0.2.13 >}}
+
+FixIt 主题提供了页面宽度配置选项 `pageStyle` 并提供三种选项。
+
+* **narrow** 保留 `<v0.2.12` 页面目录宽度比
+* **normal** 新的默认页面目录宽度比
+* **wide** 较大的页面目录宽度比
+
+另外，你还可以在 `assets/css/_custom.scss` 中，自定义 `pageStyle` 值
+
+例如： `pageStyle="custom"` 
+
+```scss
+@media only screen and (min-width: 1441px) {
+  [page-style='custom'] {
+    .page {
+      width: 70%;
+    }
+
+    aside {
+      width: 15%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  [page-style='custom'] {
+    .page {
+      width: 60%;
+    }
+
+    aside {
+      width: 20%;
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  [page-style='custom'] {
+    .page {
+      width: 56%;
+    }
+
+    aside {
+      width: 22%;
+    }
+  }
+}
+```
+
 ## 4 多语言和 i18n
 
 **FixIt** 主题完全兼容 Hugo 的多语言模式，并且支持在网页上切换语言。