mirror of
https://github.com/imfing/hextra.git
synced 2025-08-25 11:36:41 -04:00
docs(blog): prepare for v0.10 release post (#746)
* docs(blog): prepare for v0.10 release post * Update v0.10.md * Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation. * Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience. * Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements. * Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes. * chore: update zh-cn translation * chore: update ja translation * chore: update fa and ja translations * chore: prepare release
This commit is contained in:
Xin
@@ -1,16 +1,16 @@
|
||||
---
|
||||
linkTitle: پیشرفته
|
||||
title: موضوعات پیشرفته
|
||||
prev: /docs/guide/shortcodes/steps
|
||||
title: مباحث پیشرفته
|
||||
prev: /docs/guide/shortcodes/tabs
|
||||
next: /docs/advanced/multi-language
|
||||
---
|
||||
|
||||
این بخش برخی از موضوعات پیشرفته تم را پوشش می‌دهد.
|
||||
این بخش برخی از مباحث پیشرفته این پوسته را پوشش می‌دهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="multi-language" title="چند زبانه" icon="translate" >}}
|
||||
{{< card link="multi-language" title="چندزبانه" icon="translate" >}}
|
||||
{{< card link="customization" title="سفارشی‌سازی" icon="pencil" >}}
|
||||
{{< card link="comments" title="سیستم نظردهی" icon="chat-alt" >}}
|
||||
{{< /cards >}}
|
||||
{{< card link="comments" title="سیستم نظرات" icon="chat-alt" >}}
|
||||
{{< /cards >}}
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
linkTitle: 上級者向け
|
||||
title: 上級者向けトピック
|
||||
linkTitle: 高度な設定
|
||||
title: 高度なトピック
|
||||
prev: /docs/guide/shortcodes/tabs
|
||||
next: /docs/advanced/multi-language
|
||||
---
|
||||
|
||||
このセクションでは、テーマの上級者向けトピックをカバーします。
|
||||
このセクションでは、テーマの高度なトピックについて説明します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
@@ -5,12 +5,12 @@ prev: /docs/guide/shortcodes/tabs
|
||||
next: /docs/advanced/multi-language
|
||||
---
|
||||
|
||||
本节涵盖了一些主题的高级内容。
|
||||
本节涵盖该主题的一些高级内容。
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="multi-language" title="多语言" icon="translate" >}}
|
||||
{{< card link="customization" title="自定义" icon="pencil" >}}
|
||||
{{< card link="multi-language" title="多语言支持" icon="translate" >}}
|
||||
{{< card link="customization" title="自定义配置" icon="pencil" >}}
|
||||
{{< card link="comments" title="评论系统" icon="chat-alt" >}}
|
||||
{{< /cards >}}
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: سیستم نظردهی
|
||||
linkTitle: نظردهی
|
||||
title: سیستم نظرات
|
||||
linkTitle: نظرات
|
||||
---
|
||||
|
||||
هگزترا از افزودن سیستم نظردهی به سایت شما پشتیبانی می‌کند.
|
||||
در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود.
|
||||
Hextra از افزودن سیستم نظرات به سایت شما پشتیبانی می‌کند.
|
||||
در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## giscus
|
||||
|
||||
[giscus](https://giscus.app/) یک سیستم نظردهی است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) طراحی شده است. رایگان و متن باز است.
|
||||
[giscus](https://giscus.app/) یک سیستم نظرات است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) قدرت می‌گیرد. این سیستم رایگان و متن‌باز است.
|
||||
|
||||
برای فعال کردن giscus، باید موارد زیر را به پرونده پیکربندی سایت اضافه کنید:
|
||||
برای فعال کردن giscus، باید موارد زیر را به فایل پیکربندی سایت اضافه کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -27,13 +27,13 @@ params:
|
||||
categoryId: <category ID>
|
||||
```
|
||||
|
||||
تنظیمات giscus را می توانید از وبسایت [giscus.app](https://giscus.app/) ساخت. جزئیات بیشتر را نیز می‌توانید در آنجا ببینید.
|
||||
تنظیمات giscus را می‌توان از وبسایت [giscus.app](https://giscus.app/) ساخت. جزئیات بیشتر نیز در آنجا موجود است.
|
||||
|
||||
دیدگاه‌ها را می‌توانید برای یک صفحه خاص در بالای همان صفحه فعال یا غیرفعال کرد:
|
||||
می‌توان نظرات را برای یک صفحه خاص در front matter صفحه فعال یا غیرفعال کرد:
|
||||
|
||||
```yaml {filename="content/docs/about.md"}
|
||||
---
|
||||
title: درباره ما
|
||||
title: درباره
|
||||
comments: true
|
||||
---
|
||||
```
|
||||
```
|
||||
@@ -3,16 +3,16 @@ title: コメントシステム
|
||||
linkTitle: コメント
|
||||
---
|
||||
|
||||
Hextraは、サイトにコメントシステムを追加することをサポートしています。
|
||||
現在、[giscus](https://giscus.app/)がサポートされています。
|
||||
Hextra はサイトにコメントシステムを追加する機能をサポートしています。
|
||||
現在 [giscus](https://giscus.app/) が利用可能です。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## giscus
|
||||
|
||||
[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。
|
||||
[giscus](https://giscus.app/) は [GitHub Discussions](https://docs.github.com/ja/discussions) を利用したコメントシステムです。無料でオープンソースです。
|
||||
|
||||
giscusを有効にするには、サイトの設定ファイルに以下を追加する必要があります：
|
||||
giscus を有効にするには、サイト設定ファイルに以下を追加してください:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -27,13 +27,13 @@ params:
|
||||
categoryId: <カテゴリID>
|
||||
```
|
||||
|
||||
giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。
|
||||
giscus の設定は [giscus.app](https://giscus.app/) ウェブサイトから構築できます。詳細もそちらで確認できます。
|
||||
|
||||
特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します：
|
||||
特定のページでコメントを有効/無効にするには、ページのフロントマターで設定します:
|
||||
|
||||
```yaml {filename="content/docs/about.md"}
|
||||
---
|
||||
title: について
|
||||
title: このサイトについて
|
||||
comments: true
|
||||
---
|
||||
```
|
||||
@@ -10,7 +10,7 @@ Hextra 支持为您的网站添加评论系统。
|
||||
|
||||
## giscus
|
||||
|
||||
[giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 提供支持的评论系统。它是免费且开源的。
|
||||
[giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 驱动的评论系统。它是免费且开源的。
|
||||
|
||||
要启用 giscus，您需要在网站配置文件中添加以下内容：
|
||||
|
||||
@@ -27,7 +27,7 @@ params:
|
||||
categoryId: <分类 ID>
|
||||
```
|
||||
|
||||
giscus 的配置可以从 [giscus.app](https://giscus.app/) 网站生成。更多详细信息也可以在那里找到。
|
||||
giscus 的配置可以从 [giscus.app](https://giscus.app/) 网站生成。更多详情也可以在那里找到。
|
||||
|
||||
可以在页面的 front matter 中为特定页面启用或禁用评论：
|
||||
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
---
|
||||
title: سفارشی‌سازی هگزترا
|
||||
title: سفارشی‌سازی Hextra
|
||||
linkTitle: سفارشی‌سازی
|
||||
---
|
||||
|
||||
هگزترا برخی از گزینه‌های سفارشی‌سازی پیش‌فرض را در پرونده `hugo.yaml` برای پیکربندی تم ارائه می‌کند.
|
||||
این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
|
||||
Hextra برخی گزینه‌های پیش‌فرض سفارشی‌سازی را در فایل پیکربندی `hugo.yaml` ارائه می‌دهد تا تم را پیکربندی کنید.
|
||||
این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## CSS سفارشی
|
||||
|
||||
برای افزودن CSS سفارشی، باید یک پرونده `assets/css/custom.css` در سایت خود ایجاد کنیم. هگزترا به طور خودکار این پرونده را بارگیری خواهد کرد.
|
||||
برای افزودن CSS سفارشی، باید یک فایل `assets/css/custom.css` در سایت خود ایجاد کنیم. Hextra به طور خودکار این فایل را بارگذاری می‌کند.
|
||||
|
||||
### خانواده فونت
|
||||
|
||||
خانواده فونت برای محتوا را می‌توانید با استفاده از این سفارشی کنید:
|
||||
خانواده فونت محتوا را می‌توان با استفاده از موارد زیر سفارشی کرد:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content {
|
||||
@@ -22,9 +22,9 @@ linkTitle: سفارشی‌سازی
|
||||
}
|
||||
```
|
||||
|
||||
### عنصر کد درون‌خطی
|
||||
### عنصر کد درون خطی
|
||||
|
||||
رنگ متن ترکیب شده با `متن دیگر` را می‌توانید با موارد زیر سفارشی کرد:
|
||||
رنگ متن مخلوط شده با `متن دیگر` را می‌توان با موارد زیر سفارشی کرد:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content code:not(.code-block code) {
|
||||
@@ -34,40 +34,218 @@ linkTitle: سفارشی‌سازی
|
||||
|
||||
### رنگ اصلی
|
||||
|
||||
رنگ اصلی تم را می‌توانید با تنظیم متغیرهای `--primary-hue` و `--primary-saturation` سفارشی کرد:
|
||||
رنگ اصلی تم را می‌توان با تنظیم متغیرهای `--primary-hue`، `--primary-saturation` و `--primary-lightness` سفارشی کرد:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--primary-hue: 100deg;
|
||||
--primary-saturation: 90%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
### برجسته‌کردن سینتکس
|
||||
### متغیرهای چیدمان کامپوننت
|
||||
|
||||
فهرست تم‌های برجسته‌کردن سینتکس در دسترس [گالری Chroma Styles](https://xyproto.github.io/splash/docs/all.html) موجود است. شیوه‌نامه را می‌توانید با استفاده از دستور زیر تولید کرد:
|
||||
Hextra متغیرهای CSS را برای سفارشی‌سازی عرض صفحات، نوار ناوبری و پاورقی ارائه می‌دهد:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
/* عرض صفحه - همچنین از طریق params.page.width در hugo.yaml قابل پیکربندی است */
|
||||
--hextra-max-page-width: 80rem; /* پیش‌فرض: 80rem (نرمال)، 90rem (عریض)، 100% (کامل) */
|
||||
|
||||
/* عرض نوار ناوبری - همچنین از طریق params.navbar.width در hugo.yaml قابل پیکربندی است */
|
||||
--hextra-max-navbar-width: 90rem; /* عرض مستقل نوار ناوبری */
|
||||
|
||||
/* عرض پاورقی - همچنین از طریق params.footer.width در hugo.yaml قابل پیکربندی است */
|
||||
--hextra-max-footer-width: 80rem; /* عرض مستقل پاورقی */
|
||||
}
|
||||
```
|
||||
|
||||
### متغیرهای تم Tailwind
|
||||
|
||||
با شروع از Hextra v0.10.0 که بر پایه Tailwind CSS v4 ساخته شده است، می‌توانید تم را با بازنویسی متغیرهای CSS در بلوک `@layer theme` سفارشی کنید.
|
||||
|
||||
این به شما امکان می‌دهد ظاهر کلی را بدون نیاز به تغییر هر کلاس به صورت جداگانه سفارشی کنید.
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
@layer theme {
|
||||
:root {
|
||||
--hx-default-mono-font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
برای جزئیات بیشتر، [مستندات متغیرهای تم Tailwind](https://tailwindcss.com/docs/theme#default-theme-variable-reference) را بررسی کنید.
|
||||
|
||||
### سفارشی‌سازی بیشتر تم
|
||||
|
||||
تم را می‌توان با بازنویسی استایل‌های پیش‌فرض از طریق کلاس‌های CSS در معرض، بیشتر سفارشی کرد. مثالی برای سفارشی‌سازی عنصر پاورقی:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.hextra-footer {
|
||||
/* استایل‌ها روی عنصر پاورقی اعمال می‌شوند */
|
||||
}
|
||||
|
||||
.hextra-footer:is(html[class~="dark"] *) {
|
||||
/* استایل‌ها روی عنصر پاورقی در حالت تاریک اعمال می‌شوند */
|
||||
}
|
||||
```
|
||||
|
||||
از کلاس‌های زیر می‌توان برای سفارشی‌سازی بخش‌های مختلف تم استفاده کرد.
|
||||
|
||||
#### عمومی
|
||||
|
||||
- `hextra-scrollbar` - عنصر نوار پیمایش
|
||||
- `content` - ظرف محتوای صفحه
|
||||
|
||||
#### شورتکدها
|
||||
|
||||
##### نشان
|
||||
|
||||
- `hextra-badge` - عنصر نشان
|
||||
|
||||
##### کارت
|
||||
|
||||
- `hextra-card` - عنصر کارت
|
||||
- `hextra-card-image` - عنصر تصویر کارت
|
||||
- `hextra-card-icon` - عنصر آیکون کارت
|
||||
- `hextra-card-subtitle` - عنصر زیرنویس کارت
|
||||
|
||||
##### کارت‌ها
|
||||
|
||||
- `hextra-cards` - ظرف شبکه‌ای کارت‌ها
|
||||
|
||||
##### نوت‌بوک Jupyter
|
||||
|
||||
- `hextra-jupyter-code-cell` - ظرف سلول کد Jupyter
|
||||
- `hextra-jupyter-code-cell-outputs-container` - ظرف خروجی‌های سلول کد Jupyter
|
||||
- `hextra-jupyter-code-cell-outputs` - عنصر div خروجی سلول کد Jupyter
|
||||
|
||||
##### PDF
|
||||
|
||||
- `hextra-pdf` - عنصر ظرف PDF
|
||||
|
||||
##### مراحل
|
||||
|
||||
- `hextra-steps` - ظرف مراحل
|
||||
|
||||
##### تب‌ها
|
||||
|
||||
- `hextra-tabs-panel` - ظرف پنل تب‌ها
|
||||
- `hextra-tabs-toggle` - دکمه تغییر تب‌ها
|
||||
|
||||
##### درخت فایل
|
||||
|
||||
- `hextra-filetree` - ظرف درخت فایل
|
||||
|
||||
##### پوشه
|
||||
|
||||
- `hextra-filetree-folder` - ظرف پوشه درخت فایل
|
||||
|
||||
#### نوار ناوبری
|
||||
|
||||
- `hextra-nav-container` - ظرف نوار ناوبری
|
||||
- `hextra-nav-container-blur` - عنصر ظرف نوار ناوبری در حالت محو
|
||||
- `hextra-hamburger-menu` - دکمه منوی همبرگری
|
||||
|
||||
#### پاورقی
|
||||
|
||||
- `hextra-footer` - عنصر پاورقی
|
||||
- `hextra-custom-footer` - ظرف بخش پاورقی سفارشی
|
||||
|
||||
#### جستجو
|
||||
|
||||
- `hextra-search-wrapper` - ظرف wrapper جستجو
|
||||
- `hextra-search-input` - عنصر ورودی جستجو
|
||||
- `hextra-search-results` - ظرف لیست نتایج جستجو
|
||||
|
||||
کلاس‌های تو در تو اختیاری مورد استفاده در رابط کاربری جستجو:
|
||||
|
||||
- `hextra-search-title` - عنصر عنوان نتیجه
|
||||
- `hextra-search-active` - لنکر نتیجه فعال
|
||||
- `hextra-search-no-result` - عنصر حالت خالی
|
||||
- `hextra-search-prefix` - برچسب مسیر/پیشوند برای نتایج گروه‌بندی شده
|
||||
- `hextra-search-excerpt` - متن خلاصه نتیجه
|
||||
- `hextra-search-match` - span پرس و جوی هایلایت شده
|
||||
|
||||
#### فهرست مطالب
|
||||
|
||||
- `hextra-toc` - ظرف فهرست مطالب
|
||||
|
||||
#### نوار کناری
|
||||
|
||||
- `hextra-sidebar-container` - ظرف نوار کناری
|
||||
- `hextra-sidebar-active-item` - آیتم فعال در نوار کناری
|
||||
|
||||
#### تغییردهنده زبان
|
||||
|
||||
- `hextra-language-switcher` - دکمه تغییردهنده زبان
|
||||
- `hextra-language-options` - ظرف گزینه‌های زبان
|
||||
|
||||
#### تغییردهنده تم
|
||||
|
||||
- `hextra-theme-toggle` - دکمه تغییر تم
|
||||
|
||||
#### دکمه کپی کد
|
||||
|
||||
- `hextra-code-copy-btn-container` - ظرف دکمه کپی کد
|
||||
- `hextra-code-copy-btn` - دکمه کپی کد
|
||||
- `hextra-copy-icon` - عنصر آیکون کپی
|
||||
- `hextra-success-icon` - عنصر آیکون موفقیت
|
||||
|
||||
#### بلوک کد
|
||||
|
||||
- `hextra-code-block` - ظرف بلوک کد
|
||||
- `hextra-code-filename` - عنصر نام فایل برای بلوک‌های کد
|
||||
|
||||
#### کارت ویژگی
|
||||
|
||||
- `hextra-feature-card` - عنصر لینک کارت ویژگی
|
||||
|
||||
#### شبکه ویژگی
|
||||
|
||||
- `hextra-feature-grid` - ظرف شبکه ویژگی
|
||||
|
||||
#### هایلایت سینتکس
|
||||
|
||||
لیست تم‌های هایلایت سینتکس موجود در [گالری استایل‌های Chroma](https://xyproto.github.io/splash/docs/all.html) قابل مشاهده است. برگه استایل را می‌توان با دستور زیر تولید کرد:
|
||||
|
||||
```shell
|
||||
hugo gen chromastyles --style=github
|
||||
```
|
||||
|
||||
برای نادیده گرفتن طرح زمینه برجسته‌کردن سینتکس پیش‌فرض، می‌توانید استایل‌های تولید شده را به پرونده CSS سفارشی اضافه کنیم.
|
||||
برای بازنویسی تم پیش‌فرض هایلایت سینتکس، می‌توانیم استایل‌های تولید شده را به فایل CSS سفارشی اضافه کنیم.
|
||||
|
||||
## اسکریپت‌های سفارشی
|
||||
|
||||
با افزودن پرونده زیر می‌توانید اسکریپت‌های سفارشی را برای هر صفحه به انتهای اون اضافه کنید:
|
||||
می‌توانید اسکریپت‌های سفارشی را به انتهای head برای هر صفحه با افزودن فایل زیر اضافه کنید:
|
||||
|
||||
```
|
||||
layouts/partials/custom/head-end.html
|
||||
```
|
||||
|
||||
## طرح‌بندی‌های سفارشی
|
||||
## بخش اضافی سفارشی در پاورقی
|
||||
|
||||
با ایجاد پرونده‌ای با همین نام در دایرکتوری `layouts` سایت خود، می‌توانید طرح‌های تم را نادیده بگیرید.
|
||||
به عنوان مثال، برای لغو طرح‌بندی `single.html` برای مستندات، یک پرونده`layouts/docs/single.html` در سایت خود ایجاد کنید.
|
||||
می‌توانید بخش اضافی در پاورقی با ایجاد یک فایل `layouts/partials/custom/footer.html` در سایت خود اضافه کنید.
|
||||
|
||||
برای اطلاعات بیشتر، به [Templateهای هیوگو](https://gohugo.io/templates/) مراجعه کنید.
|
||||
```html {filename="layouts/partials/custom/footer.html"}
|
||||
<!-- عنصر پاورقی شما اینجا -->
|
||||
```
|
||||
|
||||
بخش اضافه شده قبل از بخش کپی‌رایت در پاورقی اضافه می‌شود.
|
||||
می‌توانید از [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) و [سینتکس قالب Hugo](https://gohugo.io/templates/) برای افزودن محتوای خود استفاده کنید.
|
||||
|
||||
متغیرهای Hugo موجود در بخش پاورقی عبارتند از: `.switchesVisible` و `.displayCopyright`.
|
||||
|
||||
## چیدمان‌های سفارشی
|
||||
|
||||
چیدمان‌های تم را می‌توان با ایجاد یک فایل با همان نام در دایرکتوری `layouts` سایت خود بازنویسی کرد.
|
||||
به عنوان مثال، برای بازنویسی چیدمان `single.html` برای مستندات، یک فایل `layouts/docs/single.html` در سایت خود ایجاد کنید.
|
||||
|
||||
برای اطلاعات بیشتر، به [مستندات قالب‌های Hugo][hugo-template-docs] مراجعه کنید.
|
||||
|
||||
## سفارشی‌سازی بیشتر
|
||||
|
||||
چیزی را که دنبالش بودید پیدا نکردید؟ با خیال راحت [بحثی را باز کنید](https://github.com/imfing/hextra/discussions) یا به موضوع کمک کنید!
|
||||
آیا آنچه را که به دنبالش بودید پیدا نکردید؟ با خیال راحت [یک بحث باز کنید](https://github.com/imfing/hextra/discussions) یا به تم کمک کنید!
|
||||
|
||||
[hugo-template-docs]: https://gohugo.io/templates/
|
||||
@@ -3,18 +3,18 @@ title: Hextraのカスタマイズ
|
||||
linkTitle: カスタマイズ
|
||||
---
|
||||
|
||||
Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。
|
||||
このページでは、利用可能なオプションと、テーマをさらにカスタマイズする方法について説明します。
|
||||
Hextraは、`hugo.yaml`設定ファイル内でテーマを設定するためのデフォルトのカスタマイズオプションを提供しています。
|
||||
このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## カスタムCSS
|
||||
|
||||
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。
|
||||
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成します。Hextraはこのファイルを自動的に読み込みます。
|
||||
|
||||
### フォントファミリー
|
||||
|
||||
コンテンツのフォントファミリーは、以下のようにカスタマイズできます：
|
||||
コンテンツのフォントファミリーは以下のようにカスタマイズできます:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content {
|
||||
@@ -24,7 +24,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
### インラインコード要素
|
||||
|
||||
`other text`と混在するテキストの色は、以下のようにカスタマイズできます：
|
||||
`他のテキスト`と混在するテキストの色は以下のようにカスタマイズできます:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content code:not(.code-block code) {
|
||||
@@ -34,7 +34,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
### プライマリカラー
|
||||
|
||||
テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます：
|
||||
テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
@@ -44,9 +44,42 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
}
|
||||
```
|
||||
|
||||
### テーマのさらなるカスタマイズ
|
||||
### コンポーネントレイアウト変数
|
||||
|
||||
テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例：
|
||||
Hextraは、ページ、ナビゲーションバー、フッターの幅をカスタマイズするためのCSS変数を提供しています:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
/* ページ幅 - hugo.yamlのparams.page.widthでも設定可能 */
|
||||
--hextra-max-page-width: 80rem; /* デフォルト: 80rem (標準), 90rem (ワイド), 100% (フル) */
|
||||
|
||||
/* ナビゲーションバー幅 - hugo.yamlのparams.navbar.widthでも設定可能 */
|
||||
--hextra-max-navbar-width: 90rem; /* 独立したナビゲーションバー幅 */
|
||||
|
||||
/* フッター幅 - hugo.yamlのparams.footer.widthでも設定可能 */
|
||||
--hextra-max-footer-width: 80rem; /* 独立したフッター幅 */
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwindテーマ変数
|
||||
|
||||
Tailwind CSS v4をベースにしたHextra v0.10.0以降では、`@layer theme`ブロック内でCSS変数をオーバーライドすることでテーマをカスタマイズできます。
|
||||
|
||||
これにより、個々のクラスを変更することなく、グローバルな外観をカスタマイズできます。
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
@layer theme {
|
||||
:root {
|
||||
--hx-default-mono-font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
詳細については、[Tailwindテーマ変数のドキュメント](https://tailwindcss.com/docs/theme#default-theme-variable-reference)を参照してください。
|
||||
|
||||
### さらなるテーマカスタマイズ
|
||||
|
||||
テーマは、公開されているCSSクラスをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.hextra-footer {
|
||||
@@ -94,7 +127,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
##### ステップ
|
||||
|
||||
- `steps` - ステップコンテナ
|
||||
- `hextra-steps` - ステップコンテナ
|
||||
|
||||
##### タブ
|
||||
|
||||
@@ -111,9 +144,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
#### ナビゲーションバー
|
||||
|
||||
- `nav-container` - ナビゲーションバーコンテナ
|
||||
- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素
|
||||
- `hamburger-menu` - ハンバーガーメニューボタン
|
||||
- `hextra-nav-container` - ナビゲーションバーコンテナ
|
||||
- `hextra-nav-container-blur` - ブラー効果付きナビゲーションバーコンテナ
|
||||
- `hextra-hamburger-menu` - ハンバーガーメニューボタン
|
||||
|
||||
#### フッター
|
||||
|
||||
@@ -122,9 +155,18 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
#### 検索
|
||||
|
||||
- `search-wrapper` - 検索ラッパーコンテナ
|
||||
- `search-input` - 検索入力要素
|
||||
- `search-results` - 検索結果リストコンテナ
|
||||
- `hextra-search-wrapper` - 検索ラッパーコンテナ
|
||||
- `hextra-search-input` - 検索入力要素
|
||||
- `hextra-search-results` - 検索結果リストコンテナ
|
||||
|
||||
検索UI内で使用されるオプションのネストされたクラス:
|
||||
|
||||
- `hextra-search-title` - 結果タイトル要素
|
||||
- `hextra-search-active` - アクティブな結果アンカー
|
||||
- `hextra-search-no-result` - 空の状態要素
|
||||
- `hextra-search-prefix` - グループ化された結果のパンくずリスト/プレフィックスラベル
|
||||
- `hextra-search-excerpt` - 結果スニペットテキスト
|
||||
- `hextra-search-match` - ハイライトされたクエリスパン
|
||||
|
||||
#### 目次
|
||||
|
||||
@@ -132,27 +174,29 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
#### サイドバー
|
||||
|
||||
- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素
|
||||
- `sidebar-container` - サイドバーコンテナ
|
||||
- `sidebar-active-item` - サイドバーのアクティブアイテム
|
||||
- `hextra-sidebar-container` - サイドバーコンテナ
|
||||
- `hextra-sidebar-active-item` - サイドバーのアクティブアイテム
|
||||
|
||||
#### 言語スイッチャー
|
||||
|
||||
- `language-switcher` - 言語スイッチャーボタン
|
||||
- `language-options` - 言語オプションコンテナ
|
||||
- `hextra-language-switcher` - 言語スイッチャーボタン
|
||||
- `hextra-language-options` - 言語オプションコンテナ
|
||||
|
||||
#### テーマトグル
|
||||
|
||||
- `theme-toggle` - テーマトグルボタン
|
||||
- `hextra-theme-toggle` - テーマトグルボタン
|
||||
|
||||
#### コードコピーボタン
|
||||
|
||||
- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
|
||||
- `hextra-code-copy-btn` - コードコピーボタン
|
||||
- `hextra-copy-icon` - コピーアイコン要素
|
||||
- `hextra-success-icon` - 成功アイコン要素
|
||||
|
||||
#### コードブロック
|
||||
|
||||
- `hextra-code-block` - コードブロックコンテナ
|
||||
- `hextra-code-filename` - コードブロックのファイル名要素
|
||||
|
||||
#### フィーチャーカード
|
||||
|
||||
@@ -162,13 +206,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
|
||||
|
||||
- `hextra-feature-grid` - フィーチャーグリッドコンテナ
|
||||
|
||||
#### パンくずリスト
|
||||
|
||||
パンくずリスト用の特定のクラスはありません。
|
||||
|
||||
### シンタックスハイライト
|
||||
|
||||
利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます：
|
||||
利用可能なシンタックスハイライトテーマの一覧は、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます:
|
||||
|
||||
```shell
|
||||
hugo gen chromastyles --style=github
|
||||
@@ -178,34 +218,34 @@ hugo gen chromastyles --style=github
|
||||
|
||||
## カスタムスクリプト
|
||||
|
||||
すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します：
|
||||
すべてのページのheadの終わりにカスタムスクリプトを追加するには、以下のファイルを作成します:
|
||||
|
||||
```
|
||||
layouts/partials/custom/head-end.html
|
||||
```
|
||||
|
||||
## フッターのカスタムセクション
|
||||
## フッターへのカスタムセクション追加
|
||||
|
||||
フッターに追加のセクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
|
||||
フッターに追加セクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
|
||||
|
||||
```html {filename="layouts/partials/custom/footer.html"}
|
||||
<!-- ここにフッター要素を追加 -->
|
||||
```
|
||||
|
||||
追加されたセクションは、フッターの著作権セクションの前に追加されます。
|
||||
[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して、独自のコンテンツを追加できます。
|
||||
[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して独自のコンテンツを追加できます。
|
||||
|
||||
フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。
|
||||
フッターセクションで利用可能なHugo変数: `.switchesVisible`と`.displayCopyright`。
|
||||
|
||||
## カスタムレイアウト
|
||||
|
||||
テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。
|
||||
例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
|
||||
テーマのレイアウトは、サイトの`layouts`ディレクトリに同じ名前のファイルを作成することでオーバーライドできます。
|
||||
例えば、ドキュメントの`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
|
||||
|
||||
詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
|
||||
|
||||
## さらなるカスタマイズ
|
||||
|
||||
探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください！
|
||||
探しているものが見つかりませんでしたか？[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマへの貢献をお願いします！
|
||||
|
||||
[hugo-template-docs]: https://gohugo.io/templates/
|
||||
@@ -61,6 +61,22 @@ Hextra provides CSS variables to customize the width of pages, navbar, and foote
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind Theme Variables
|
||||
|
||||
Starting with Hextra v0.10.0, which is built on Tailwind CSS v4, you can customize the theme by overriding CSS variables inside the `@layer theme` block.
|
||||
|
||||
This lets you customize the global look and feel without having to modify every individual class.
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
@layer theme {
|
||||
:root {
|
||||
--hx-default-mono-font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Check out [Tailwind Theme Variables documentation](https://tailwindcss.com/docs/theme#default-theme-variable-reference) for details.
|
||||
|
||||
### Further Theme Customization
|
||||
|
||||
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
|
||||
|
||||
@@ -3,18 +3,18 @@ title: 自定义 Hextra
|
||||
linkTitle: 自定义
|
||||
---
|
||||
|
||||
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，用于配置主题。
|
||||
本页描述了可用的选项以及如何进一步自定义主题。
|
||||
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项来配置主题。
|
||||
本页描述了可用选项以及如何进一步自定义主题。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 自定义 CSS
|
||||
|
||||
要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 会自动加载此文件。
|
||||
要添加自定义 CSS，我们需要在站点中创建 `assets/css/custom.css` 文件。Hextra 会自动加载此文件。
|
||||
|
||||
### 字体
|
||||
### 字体家族
|
||||
|
||||
内容的字体可以通过以下方式自定义：
|
||||
可以使用以下方式自定义内容的字体家族：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content {
|
||||
@@ -22,9 +22,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
}
|
||||
```
|
||||
|
||||
### 内联代码元素
|
||||
### 行内代码元素
|
||||
|
||||
与 `其他文本` 混合的文本颜色可以通过以下方式自定义：
|
||||
与 `其他文本` 混合的代码文本颜色可以通过以下方式自定义：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.content code:not(.code-block code) {
|
||||
@@ -34,7 +34,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
### 主色调
|
||||
|
||||
主题的主色调可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义：
|
||||
可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义主题的主色调：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
@@ -44,9 +44,42 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
}
|
||||
```
|
||||
|
||||
### 进一步的主题自定义
|
||||
### 组件布局变量
|
||||
|
||||
可以通过覆盖暴露的 CSS 类来进一步自定义主题。以下是一个自定义页脚元素的示例：
|
||||
Hextra 提供了 CSS 变量来自定义页面、导航栏和页脚的宽度：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
/* 页面宽度 - 也可以通过 hugo.yaml 中的 params.page.width 配置 */
|
||||
--hextra-max-page-width: 80rem; /* 默认值：80rem（普通），90rem（宽版），100%（全宽） */
|
||||
|
||||
/* 导航栏宽度 - 也可以通过 hugo.yaml 中的 params.navbar.width 配置 */
|
||||
--hextra-max-navbar-width: 90rem; /* 独立的导航栏宽度 */
|
||||
|
||||
/* 页脚宽度 - 也可以通过 hugo.yaml 中的 params.footer.width 配置 */
|
||||
--hextra-max-footer-width: 80rem; /* 独立的页脚宽度 */
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind 主题变量
|
||||
|
||||
从基于 Tailwind CSS v4 的 Hextra v0.10.0 开始，您可以通过在 `@layer theme` 块中覆盖 CSS 变量来自定义主题。
|
||||
|
||||
这样可以在不修改每个单独类的情况下自定义全局外观。
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
@layer theme {
|
||||
:root {
|
||||
--hx-default-mono-font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
详情请参阅 [Tailwind 主题变量文档](https://tailwindcss.com/docs/theme#default-theme-variable-reference)。
|
||||
|
||||
### 进一步主题自定义
|
||||
|
||||
可以通过覆盖暴露的 CSS 类来自定义主题的默认样式。以下是一个自定义页脚元素的示例：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
.hextra-footer {
|
||||
@@ -54,7 +87,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
}
|
||||
|
||||
.hextra-footer:is(html[class~="dark"] *) {
|
||||
/* 样式将应用于暗模式下的页脚元素 */
|
||||
/* 样式将应用于暗黑模式下的页脚元素 */
|
||||
}
|
||||
```
|
||||
|
||||
@@ -82,11 +115,11 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
- `hextra-cards` - 卡片网格容器
|
||||
|
||||
##### Jupyter Notebook
|
||||
##### Jupyter 笔记本
|
||||
|
||||
- `hextra-jupyter-code-cell` - Jupyter 代码单元容器
|
||||
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器
|
||||
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素
|
||||
- `hextra-jupyter-code-cell` - Jupyter 代码单元格容器
|
||||
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元格输出容器
|
||||
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元格输出 div 元素
|
||||
|
||||
##### PDF
|
||||
|
||||
@@ -94,7 +127,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
##### 步骤
|
||||
|
||||
- `steps` - 步骤容器
|
||||
- `hextra-steps` - 步骤容器
|
||||
|
||||
##### 标签页
|
||||
|
||||
@@ -111,9 +144,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
#### 导航栏
|
||||
|
||||
- `nav-container` - 导航栏容器
|
||||
- `nav-container-blur` - 导航栏模糊元素
|
||||
- `hamburger-menu` - 汉堡菜单按钮
|
||||
- `hextra-nav-container` - 导航栏容器
|
||||
- `hextra-nav-container-blur` - 导航栏模糊效果容器
|
||||
- `hextra-hamburger-menu` - 汉堡菜单按钮
|
||||
|
||||
#### 页脚
|
||||
|
||||
@@ -122,9 +155,18 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
#### 搜索
|
||||
|
||||
- `search-wrapper` - 搜索包装容器
|
||||
- `search-input` - 搜索输入元素
|
||||
- `search-results` - 搜索结果列表容器
|
||||
- `hextra-search-wrapper` - 搜索包装容器
|
||||
- `hextra-search-input` - 搜索输入元素
|
||||
- `hextra-search-results` - 搜索结果列表容器
|
||||
|
||||
搜索 UI 中使用的可选嵌套类：
|
||||
|
||||
- `hextra-search-title` - 结果标题元素
|
||||
- `hextra-search-active` - 活动结果锚点
|
||||
- `hextra-search-no-result` - 空状态元素
|
||||
- `hextra-search-prefix` - 分组结果的面包屑/前缀标签
|
||||
- `hextra-search-excerpt` - 结果片段文本
|
||||
- `hextra-search-match` - 高亮查询范围
|
||||
|
||||
#### 目录
|
||||
|
||||
@@ -132,27 +174,29 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
#### 侧边栏
|
||||
|
||||
- `mobile-menu-overlay` - 移动菜单的覆盖元素
|
||||
- `sidebar-container` - 侧边栏容器
|
||||
- `sidebar-active-item` - 侧边栏中的活动项
|
||||
- `hextra-sidebar-container` - 侧边栏容器
|
||||
- `hextra-sidebar-active-item` - 侧边栏中的活动项
|
||||
|
||||
#### 语言切换器
|
||||
|
||||
- `language-switcher` - 语言切换按钮
|
||||
- `language-options` - 语言选项容器
|
||||
- `hextra-language-switcher` - 语言切换按钮
|
||||
- `hextra-language-options` - 语言选项容器
|
||||
|
||||
#### 主题切换
|
||||
|
||||
- `theme-toggle` - 主题切换按钮
|
||||
- `hextra-theme-toggle` - 主题切换按钮
|
||||
|
||||
#### 代码复制按钮
|
||||
|
||||
- `hextra-code-copy-btn-container` - 代码复制按钮容器
|
||||
- `hextra-code-copy-btn` - 代码复制按钮
|
||||
- `hextra-copy-icon` - 复制图标元素
|
||||
- `hextra-success-icon` - 成功图标元素
|
||||
|
||||
#### 代码块
|
||||
|
||||
- `hextra-code-block` - 代码块容器
|
||||
- `hextra-code-filename` - 代码块的文件名元素
|
||||
|
||||
#### 功能卡片
|
||||
|
||||
@@ -162,10 +206,6 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
|
||||
|
||||
- `hextra-feature-grid` - 功能网格容器
|
||||
|
||||
#### 面包屑导航
|
||||
|
||||
面包屑导航没有特定的类。
|
||||
|
||||
### 语法高亮
|
||||
|
||||
可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
|
||||
@@ -178,7 +218,7 @@ hugo gen chromastyles --style=github
|
||||
|
||||
## 自定义脚本
|
||||
|
||||
你可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本：
|
||||
您可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本：
|
||||
|
||||
```
|
||||
layouts/partials/custom/head-end.html
|
||||
@@ -186,26 +226,26 @@ layouts/partials/custom/head-end.html
|
||||
|
||||
## 自定义页脚额外部分
|
||||
|
||||
你可以通过在站点中创建文件 `layouts/partials/custom/footer.html` 来在页脚中添加额外部分。
|
||||
您可以通过在站点中创建 `layouts/partials/custom/footer.html` 文件来添加页脚的额外部分。
|
||||
|
||||
```html {filename="layouts/partials/custom/footer.html"}
|
||||
<!-- 你的页脚元素在这里 -->
|
||||
<!-- 您的页脚元素放在这里 -->
|
||||
```
|
||||
|
||||
添加的部分将出现在页脚的版权部分之前。
|
||||
你可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 来添加自己的内容。
|
||||
您可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 添加自己的内容。
|
||||
|
||||
页脚部分可用的 Hugo 变量有：`.switchesVisible` 和 `.copyrightVisible`。
|
||||
页脚部分可用的 Hugo 变量有：`.switchesVisible` 和 `.displayCopyright`。
|
||||
|
||||
## 自定义布局
|
||||
|
||||
可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。
|
||||
例如，要覆盖文档的 `single.html` 布局，可以在站点中创建文件 `layouts/docs/single.html`。
|
||||
例如，要覆盖文档的 `single.html` 布局，可以在站点中创建 `layouts/docs/single.html` 文件。
|
||||
|
||||
更多信息，请参阅 [Hugo 模板文档][hugo-template-docs]。
|
||||
|
||||
## 进一步自定义
|
||||
|
||||
没有找到你想要的？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
|
||||
没有找到您需要的内容？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
|
||||
|
||||
[hugo-template-docs]: https://gohugo.io/templates/
|
||||
@@ -4,13 +4,13 @@ weight: 1
|
||||
prev: /docs/advanced
|
||||
---
|
||||
|
||||
هگزترا از ایجاد سایت با چندین زبان با استفاده از [حالت چند زبانه](https://gohugo.io/content-management/multilingual/) Hugo پشتیبانی می‌کند.
|
||||
Hextra از ایجاد سایت با چندین زبان با استفاده از [حالت چندزبانه](https://gohugo.io/content-management/multilingual/) هوگو پشتیبانی می‌کند.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## فعال‌سازی چند زبانه
|
||||
## فعال‌سازی چندزبانه
|
||||
|
||||
برای اینکه سایت ما چند زبانه شود، باید زبان‌های پشتیبانی شده را به Hugo بگوییم. باید به پرونده پیکربندی سایت اضافه کنیم:
|
||||
برای چندزبانه کردن سایت، باید به هوگو زبان‌های پشتیبانی شده را اطلاع دهیم. باید به فایل پیکربندی سایت اضافه کنیم:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
defaultContentLanguage: en
|
||||
@@ -18,33 +18,33 @@ languages:
|
||||
en:
|
||||
languageName: English
|
||||
weight: 1
|
||||
fa:
|
||||
languageName: فارسی
|
||||
fr:
|
||||
languageName: Français
|
||||
weight: 2
|
||||
ja:
|
||||
languageName: 日本語
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## مدیریت ترجمه‌ها بر اساس نام پرونده
|
||||
## مدیریت ترجمه‌ها بر اساس نام فایل
|
||||
|
||||
Hugo از مدیریت ترجمه با نام پرونده پشتیبانی می‌کند. به عنوان مثال، اگر یک پرونده `content/docs/_index.md` به زبان انگلیسی داشته باشیم، می توانیم یک پرونده `content/docs/_index.fa.md` برای ترجمه فارسی ایجاد کنیم.
|
||||
هوگو از مدیریت ترجمه‌ها بر اساس نام فایل پشتیبانی می‌کند. به عنوان مثال، اگر فایلی به نام `content/docs/_index.md` به زبان انگلیسی داریم، می‌توانیم فایل `content/docs/_index.fr.md` را برای ترجمه فرانسوی ایجاد کنیم.
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="_index.fa.md" >}}
|
||||
{{< filetree/file name="_index.fr.md" >}}
|
||||
{{< filetree/file name="_index.ja.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
توجه: Hugo همچنین از ت[ترجمه توسط دایرکتوری محتوا](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) پشتیبانی می‌کند.
|
||||
توجه: هوگو از [ترجمه بر اساس دایرکتوری محتوا](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) نیز پشتیبانی می‌کند.
|
||||
|
||||
## ترجمه آیتم‌های منو
|
||||
|
||||
برای ترجمه آیتم‌های منو در نوار پیمایش، باید فیلد `identifier` را تنظیم کنیم:
|
||||
برای ترجمه آیتم‌های منو در نوار ناوبری، باید فیلد `identifier` را تنظیم کنیم:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -59,25 +59,25 @@ menu:
|
||||
weight: 2
|
||||
```
|
||||
|
||||
و آنها را در پرونده i18n مربوطه ترجمه کنید:
|
||||
و آنها را در فایل i18n مربوطه ترجمه کنیم:
|
||||
|
||||
```yaml {filename="i18n/fa.yaml"}
|
||||
documentation: مستندات
|
||||
blog: وبلاگ
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
documentation: Documentation
|
||||
blog: Blog
|
||||
```
|
||||
|
||||
## ترجمه رشته‌ها
|
||||
|
||||
برای ترجمه رشته‌ها در مکان‌های دیگر، باید ترجمه را به پرونده i18n مربوطه اضافه کنیم:
|
||||
برای ترجمه رشته‌ها در سایر قسمت‌ها، باید ترجمه را به فایل i18n مربوطه اضافه کنیم:
|
||||
|
||||
```yaml {filename="i18n/fa.yaml"}
|
||||
readMore: ادامه مطلب
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
readMore: Lire la suite
|
||||
```
|
||||
|
||||
فهرستی از رشته‌های استفاده شده در تم را می‌توان در پرونده `i18n/en.yaml` پیدا کرد.
|
||||
لیستی از رشته‌های استفاده شده در قالب را می‌توان در فایل `i18n/en.yaml` یافت.
|
||||
|
||||
## بیشتر بخوانید
|
||||
## مطالعه بیشتر
|
||||
|
||||
- [حالت چند زبانه هیوگو](https://gohugo.io/content-management/multilingual/)
|
||||
- [هیوگو چند زبانه قسمت ۱: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [هیوگو چند زبانه قسمت ۲: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
- [حالت چندزبانه هوگو](https://gohugo.io/content-management/multilingual/)
|
||||
- [چندزبانه هوگو بخش 1: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [چندزبانه هوگو بخش 2: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
@@ -4,13 +4,13 @@ weight: 1
|
||||
prev: /docs/advanced
|
||||
---
|
||||
|
||||
Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。
|
||||
Hextra は Hugo の [多言語モード](https://gohugo.io/content-management/multilingual/) を使用して、複数言語のサイトを作成することをサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 多言語対応を有効にする
|
||||
|
||||
サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイトの設定ファイルに以下を追加します：
|
||||
サイトを多言語対応にするには、Hugo にサポートする言語を伝える必要があります。サイト設定ファイルに以下を追加します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
defaultContentLanguage: en
|
||||
@@ -28,7 +28,7 @@ languages:
|
||||
|
||||
## ファイル名による翻訳管理
|
||||
|
||||
Hugoは、ファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
|
||||
Hugo はファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -40,11 +40,11 @@ Hugoは、ファイル名による翻訳管理をサポートしています。
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
注: Hugoは[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)もサポートしています。
|
||||
注: Hugo は [コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) もサポートしています。
|
||||
|
||||
## メニュー項目の翻訳
|
||||
|
||||
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります：
|
||||
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -59,7 +59,7 @@ menu:
|
||||
weight: 2
|
||||
```
|
||||
|
||||
そして、対応するi18nファイルで翻訳します：
|
||||
そして、対応する i18n ファイルで翻訳します:
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
documentation: Documentation
|
||||
@@ -68,16 +68,16 @@ blog: Blog
|
||||
|
||||
## 文字列の翻訳
|
||||
|
||||
他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります：
|
||||
他の場所の文字列を翻訳するには、対応する i18n ファイルに翻訳を追加する必要があります:
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
readMore: Lire la suite
|
||||
```
|
||||
|
||||
テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。
|
||||
テーマで使用される文字列の一覧は `i18n/en.yaml` ファイルで確認できます。
|
||||
|
||||
## さらに詳しく
|
||||
|
||||
- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
|
||||
- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
- [Hugo 多言語対応 パート1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
- [Hugo 多言語対応 パート2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
|
||||
@@ -8,9 +8,9 @@ Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-manageme
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 启用多语言
|
||||
## 启用多语言功能
|
||||
|
||||
要使我们的网站支持多语言，我们需要告诉 Hugo 支持的语言。我们需要在站点配置文件中添加：
|
||||
要使网站支持多语言，我们需要在站点配置文件中指定支持的语言：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
defaultContentLanguage: en
|
||||
@@ -28,7 +28,7 @@ languages:
|
||||
|
||||
## 通过文件名管理翻译
|
||||
|
||||
Hugo 支持通过文件名管理翻译。例如，如果我们有一个英文文件 `content/docs/_index.md`，我们可以创建一个文件 `content/docs/_index.fr.md` 作为法语翻译。
|
||||
Hugo 支持通过文件名管理翻译。例如，如果我们有一个英文文件 `content/docs/_index.md`，可以创建 `content/docs/_index.fr.md` 作为法语翻译。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -40,11 +40,11 @@ Hugo 支持通过文件名管理翻译。例如，如果我们有一个英文文
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
注意：Hugo 还支持[通过内容目录进行翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
|
||||
注意：Hugo 还支持[通过内容目录翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
|
||||
|
||||
## 翻译菜单项
|
||||
|
||||
要翻译导航栏中的菜单项，我们需要设置 `identifier` 字段：
|
||||
要翻译导航栏中的菜单项，需要设置 `identifier` 字段：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -59,7 +59,7 @@ menu:
|
||||
weight: 2
|
||||
```
|
||||
|
||||
并在相应的 i18n 文件中进行翻译：
|
||||
并在对应的 i18n 文件中进行翻译：
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
documentation: Documentation
|
||||
@@ -68,7 +68,7 @@ blog: Blog
|
||||
|
||||
## 翻译字符串
|
||||
|
||||
要翻译其他地方的字符串，我们需要将翻译添加到相应的 i18n 文件中：
|
||||
要翻译其他位置的字符串，需要将翻译添加到对应的 i18n 文件中：
|
||||
|
||||
```yaml {filename="i18n/fr.yaml"}
|
||||
readMore: Lire la suite
|
||||
@@ -76,7 +76,7 @@ readMore: Lire la suite
|
||||
|
||||
主题中使用的字符串列表可以在 `i18n/en.yaml` 文件中找到。
|
||||
|
||||
## 了解更多
|
||||
## 延伸阅读
|
||||
|
||||
- [Hugo 多语言模式](https://gohugo.io/content-management/multilingual/)
|
||||
- [Hugo 多语言第一部分：内容翻译](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
|
||||
|
||||
Reference in New Issue
Block a user