diff --git a/assets/css/variables.css b/assets/css/variables.css index 86766c7..9969182 100644 --- a/assets/css/variables.css +++ b/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 { diff --git a/docs/content/docs/guide/configuration.fa.md b/docs/content/docs/guide/configuration.fa.md index 67e9bb0..d8264bb 100644 --- a/docs/content/docs/guide/configuration.fa.md +++ b/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` سفارشی کرد. diff --git a/docs/content/docs/guide/configuration.ja.md b/docs/content/docs/guide/configuration.ja.md index be6e9f5..9175796 100644 --- a/docs/content/docs/guide/configuration.ja.md +++ b/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` パラメータでカスタマイズできます。 diff --git a/docs/content/docs/guide/configuration.md b/docs/content/docs/guide/configuration.md index da12905..8d74d9d 100644 --- a/docs/content/docs/guide/configuration.md +++ b/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. diff --git a/docs/content/docs/guide/configuration.zh-cn.md b/docs/content/docs/guide/configuration.zh-cn.md index a02f0ed..e936b29 100644 --- a/docs/content/docs/guide/configuration.zh-cn.md +++ b/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` 参数自定义。 diff --git a/layouts/_partials/utils/page-width-override.html b/layouts/_partials/utils/page-width-override.html index db13d05..32c1bc8 100644 --- a/layouts/_partials/utils/page-width-override.html +++ b/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") -}} {{- end -}}