سفارشی‌سازی Hextra

Hextra برخی گزینه‌های پیش‌فرض سفارشی‌سازی را در فایل پیکربندی hugo.yaml ارائه می‌دهد تا تم را پیکربندی کنید. این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.

CSS سفارشی

برای افزودن CSS سفارشی، باید یک فایل assets/css/custom.css در سایت خود ایجاد کنیم. Hextra به طور خودکار این فایل را بارگذاری می‌کند.

خانواده فونت

خانواده فونت محتوا را می‌توان با استفاده از موارد زیر سفارشی کرد:

.content {
  font-family: "Times New Roman", Times, serif;
}

عنصر کد درون خطی

رنگ متن مخلوط شده با متن دیگر را می‌توان با موارد زیر سفارشی کرد:

.content code:not(.code-block code) {
  color: #c97c2e;
}

رنگ اصلی

رنگ اصلی تم را می‌توان با تنظیم متغیرهای --primary-hue، --primary-saturation و --primary-lightness سفارشی کرد:

:root {
  --primary-hue: 100deg;
  --primary-saturation: 90%;
  --primary-lightness: 50%;
}

متغیرهای چیدمان کامپوننت

Hextra متغیرهای 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 سفارشی کنید.

این به شما امکان می‌دهد ظاهر کلی را بدون نیاز به تغییر هر کلاس به صورت جداگانه سفارشی کنید.

@layer theme {
  :root {
    --hx-default-mono-font-family: "JetBrains Mono", monospace;
  }
}

برای جزئیات بیشتر، مستندات متغیرهای تم Tailwind را بررسی کنید.

سفارشی‌سازی بیشتر تم

تم را می‌توان با بازنویسی استایل‌های پیش‌فرض از طریق کلاس‌های 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 قابل مشاهده است. برگه استایل را می‌توان با دستور زیر تولید کرد:

hugo gen chromastyles --style=github

برای بازنویسی تم پیش‌فرض هایلایت سینتکس، می‌توانیم استایل‌های تولید شده را به فایل CSS سفارشی اضافه کنیم.

اسکریپت‌های سفارشی

می‌توانید اسکریپت‌های سفارشی را به انتهای head برای هر صفحه با افزودن فایل زیر اضافه کنید:

layouts/partials/custom/head-end.html

بخش اضافی سفارشی در پاورقی

می‌توانید بخش اضافی در پاورقی با ایجاد یک فایل layouts/partials/custom/footer.html در سایت خود اضافه کنید.

<!-- عنصر پاورقی شما اینجا -->

بخش اضافه شده قبل از بخش کپی‌رایت در پاورقی اضافه می‌شود. می‌توانید از HTML و سینتکس قالب Hugo برای افزودن محتوای خود استفاده کنید.

متغیرهای Hugo موجود در بخش پاورقی عبارتند از: .switchesVisible و .displayCopyright.

چیدمان‌های سفارشی

چیدمان‌های تم را می‌توان با ایجاد یک فایل با همان نام در دایرکتوری layouts سایت خود بازنویسی کرد. به عنوان مثال، برای بازنویسی چیدمان single.html برای مستندات، یک فایل layouts/docs/single.html در سایت خود ایجاد کنید.

برای اطلاعات بیشتر، به مستندات قالب‌های Hugo مراجعه کنید.

سفارشی‌سازی بیشتر

آیا آنچه را که به دنبالش بودید پیدا نکردید؟ با خیال راحت یک بحث باز کنید یا به تم کمک کنید!