mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 11:16:36 -04:00
251 lines
9.3 KiB
Markdown
251 lines
9.3 KiB
Markdown
---
|
|
title: سفارشی‌سازی Hextra
|
|
linkTitle: سفارشی‌سازی
|
|
---
|
|
|
|
Hextra برخی گزینه‌های پیش‌فرض سفارشی‌سازی را در فایل پیکربندی `hugo.yaml` ارائه می‌دهد تا تم را پیکربندی کنید.
|
|
این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
|
|
|
|
<!--more-->
|
|
|
|
## CSS سفارشی
|
|
|
|
برای افزودن CSS سفارشی، باید یک فایل `assets/css/custom.css` در سایت خود ایجاد کنیم. Hextra به طور خودکار این فایل را بارگذاری می‌کند.
|
|
|
|
### خانواده فونت
|
|
|
|
خانواده فونت محتوا را می‌توان با استفاده از موارد زیر سفارشی کرد:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
.content {
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
```
|
|
|
|
### عنصر کد درون خطی
|
|
|
|
رنگ متن مخلوط شده با `متن دیگر` را می‌توان با موارد زیر سفارشی کرد:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
.content code:not(.code-block code) {
|
|
color: #c97c2e;
|
|
}
|
|
```
|
|
|
|
### رنگ اصلی
|
|
|
|
رنگ اصلی تم را می‌توان با تنظیم متغیرهای `--primary-hue`، `--primary-saturation` و `--primary-lightness` سفارشی کرد:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
:root {
|
|
--primary-hue: 100deg;
|
|
--primary-saturation: 90%;
|
|
--primary-lightness: 50%;
|
|
}
|
|
```
|
|
|
|
### متغیرهای چیدمان کامپوننت
|
|
|
|
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 سفارشی اضافه کنیم.
|
|
|
|
## اسکریپت‌های سفارشی
|
|
|
|
می‌توانید اسکریپت‌های سفارشی را به انتهای head برای هر صفحه با افزودن فایل زیر اضافه کنید:
|
|
|
|
```
|
|
layouts/partials/custom/head-end.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/) برای افزودن محتوای خود استفاده کنید.
|
|
|
|
متغیرهای Hugo موجود در بخش پاورقی عبارتند از: `.switchesVisible` و `.displayCopyright`.
|
|
|
|
## چیدمان‌های سفارشی
|
|
|
|
چیدمان‌های تم را می‌توان با ایجاد یک فایل با همان نام در دایرکتوری `layouts` سایت خود بازنویسی کرد.
|
|
به عنوان مثال، برای بازنویسی چیدمان `single.html` برای مستندات، یک فایل `layouts/docs/single.html` در سایت خود ایجاد کنید.
|
|
|
|
برای اطلاعات بیشتر، به [مستندات قالب‌های Hugo][hugo-template-docs] مراجعه کنید.
|
|
|
|
## سفارشی‌سازی بیشتر
|
|
|
|
آیا آنچه را که به دنبالش بودید پیدا نکردید؟ با خیال راحت [یک بحث باز کنید](https://github.com/imfing/hextra/discussions) یا به تم کمک کنید!
|
|
|
|
[hugo-template-docs]: https://gohugo.io/templates/ |