refactor(layout): keep content width fixed and document CSS var override (#934)

* fix(layout): split page and content width configuration

* refactor(layout): consolidate page width settings and update documentation

- Removed separate content width configuration from `hugo.yaml` and set a default value of `72rem` in CSS.
- Updated documentation in multiple languages to reflect the changes in page and content width settings, emphasizing the new fixed content width and customization options.

assets/css/variables.css

@@ -1,15 +1,14 @@
 /* Hugo template to derive CSS variables from site and page parameters */
 
 /* Do not remove the following comment. It is used by Hugo to render CSS variables.
-{{- $pageWidth := site.Params.page.width -}}
-{{- $maxPageWidth := cond (eq $pageWidth "wide") "90rem" (cond (eq $pageWidth "full") "100%" "80rem") -}}
-{{- $maxContentWidth := cond (eq $pageWidth "wide") "80rem" (cond (eq $pageWidth "full") "100%" "72rem") -}}
+{{- $layoutWidthValues := dict "normal" "80rem" "wide" "90rem" "full" "100%" -}}
+{{- $layoutWidthDefault := index $layoutWidthValues "normal" -}}
 
-{{- $navbarWidth := site.Params.navbar.width -}}
-{{- $maxNavbarWidth := cond (eq $navbarWidth "wide") "90rem" (cond (eq $navbarWidth "full") "100%" "80rem") -}}
+{{- $maxPageWidth := (index $layoutWidthValues (site.Params.page.width | default "normal")) | default $layoutWidthDefault -}}
+{{- $maxNavbarWidth := (index $layoutWidthValues (site.Params.navbar.width | default "normal")) | default $layoutWidthDefault -}}
+{{- $maxFooterWidth := (index $layoutWidthValues (site.Params.footer.width | default "normal")) | default $layoutWidthDefault -}}
 
-{{- $footerWidth := site.Params.footer.width -}}
-{{- $maxFooterWidth := cond (eq $footerWidth "wide") "90rem" (cond (eq $footerWidth "full") "100%" "80rem") -}}
+{{- $maxContentWidth := "72rem" -}}
 */
 
 :root {

docs/content/docs/guide/configuration.fa.md

@@ -342,7 +342,7 @@ params:
 
 ### عرض صفحه
 
-عرض صفحه را می‌توان با پارامتر `params.page.width` در فایل پیکربندی سفارشی کرد:
+عرض پوستهٔ صفحه را می‌توان با پارامتر `params.page.width` تنظیم کرد:
 
 ```yaml {filename="hugo.yaml"}
 params:
@@ -351,7 +351,17 @@ params:
     width: wide
 ```
 
-سه گزینه موجود است: `full`, `wide`, و `normal`. به طور پیش‌فرض، عرض صفحه روی `normal` تنظیم شده است.
+گزینه‌های `params.page.width`: `full`، `wide`، و `normal`.
+
+عرض محتوای اصلی به صورت پیش‌فرض روی `72rem` ثابت است.
+
+برای سفارشی‌سازی عرض محتوا، متغیر CSS را در فایل استایل سفارشی خود بازنویسی کنید:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --hextra-max-content-width: 100%;
+}
+```
 
 به طور مشابه، عرض نوار ناوبری و پاورقی را می‌توان با پارامترهای `params.navbar.width` و `params.footer.width` سفارشی کرد.
 

docs/content/docs/guide/configuration.ja.md

@@ -342,7 +342,7 @@ params:
 
 ### ページ幅
 
-ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます：
+レイアウト全体の幅は `params.page.width` で設定できます：
 
 ```yaml {filename="hugo.yaml"}
 params:
@@ -351,7 +351,17 @@ params:
     width: wide
 ```
 
-利用可能なオプションは `full`、`wide`、`normal` の3つです。デフォルトではページ幅は `normal` に設定されています。
+`params.page.width` の選択肢は `full`、`wide`、`normal` です。
+
+本文コンテンツ幅はデフォルトで `72rem` に固定されています。
+
+コンテンツ幅を変更したい場合は、カスタムスタイルシートで CSS 変数を上書きしてください：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --hextra-max-content-width: 100%;
+}
+```
 
 同様に、ナビゲーションバーとフッターの幅は `params.navbar.width` と `params.footer.width` パラメータでカスタマイズできます。
 

docs/content/docs/guide/configuration.md

@@ -364,7 +364,7 @@ params:
 
 ### Page Width
 
-The width of the page can be customized by the `params.page.width` parameter in the config file:
+The layout shell width can be customized by the `params.page.width` parameter in the config file:
 
 ```yaml {filename="hugo.yaml"}
 params:
@@ -373,7 +373,17 @@ params:
     width: wide
 ```
 
-There are three available options: `full`, `wide`, and `normal`. By default, the page width is set to `normal`.
+Available options for `params.page.width`: `full`, `wide`, `normal`.
+
+The main reading content width remains fixed at `72rem` by default.
+
+To customize content width, override the CSS variable in your custom stylesheet:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --hextra-max-content-width: 100%;
+}
+```
 
 Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
 

docs/content/docs/guide/configuration.zh-cn.md

@@ -342,7 +342,7 @@ params:
 
 ### 页面宽度
 
-页面宽度可以通过配置文件中的 `params.page.width` 参数自定义：
+页面整体布局宽度可通过 `params.page.width` 配置：
 
 ```yaml {filename="hugo.yaml"}
 params:
@@ -351,7 +351,17 @@ params:
     width: wide
 ```
 
-有三个可用选项：`full`、`wide` 和 `normal`。默认页面宽度为 `normal`。
+`params.page.width` 可用选项：`full`、`wide`、`normal`。
+
+正文内容宽度默认固定为 `72rem`。
+
+如需自定义内容宽度，请在自定义样式表中覆盖 CSS 变量：
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --hextra-max-content-width: 100%;
+}
+```
 
 类似地，导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数自定义。
 

layouts/_partials/utils/page-width-override.html

@@ -1,7 +1,10 @@
 {{- with .Params.width -}}
+  {{- $pageWidthValues := dict "normal" "80rem" "wide" "90rem" "full" "100%" -}}
+  {{- $pageWidth := . -}}
+  {{- $maxPageWidth := (index $pageWidthValues $pageWidth) | default (index $pageWidthValues "normal") -}}
 <style>
 :root {
-  --hextra-max-page-width: {{ cond (eq . "wide") "90rem" (cond (eq . "full") "100%" "80rem") }};
+  --hextra-max-page-width: {{ $maxPageWidth }};
 }
 </style>
 {{- end -}}