استایل‌دهی به پوسته

این پوشه فایل‌های SCSS را در بر می‌گیرد. عبارت index.scss is required. به الزامی‌بودن فایل اصلی اشاره دارد.

برای ساده‌تر شدن ویرایش پوسته، استایل‌ها را می‌توان به چند فایل کوچک تقسیم کرد. برای امکانات بیشتر از SCSS استفاده می‌شود. هر CSS معتبر، SCSS معتبر نیز هست؛ بنابراین می‌توانید CSS بنویسید.

برای مثال، اگر قالب بخش سربرگ (templates/_header.twig) را ساخته‌اید، می‌توانید استایل آن را در فایل جداگانه‌ای (header.scss) قرار دهید. در پایان، همهٔ این فایل‌ها را با دستورهای @import در index.scss وارد کنید.

@import 'css-variables.scss';
@import 'header.scss';
@import 'body.scss';

فایل index.scss پردازش و فایل styles.css تولید می‌شود که از مسیر /styles.css در دسترس است. این تنها فایل CSS برای کل وبلاگ است.

فونت‌ها

ساده‌ترین راه بارگذاری فونت، افزودن THEME_FONTS به فایل پیکربندی است.

THEME_FONTS: 'mulish:400'

سپس می‌توانید از فونت در فایل‌های SCSS خود استفاده کنید. برای راهنمای کامل‌تر، صفحهٔ فونت‌ها را ببینید.

گره‌های پیشرفته

صفحهٔ نوشتن همهٔ گره‌های پشتیبانی‌شده را توضیح می‌دهد. برای نمایش گره‌ها تا حد امکان از عناصر سادهٔ HTML استفاده می‌شود؛ اما بعضی از اجزای پیشرفته هنگام نوشتن استایل نیاز به توجه بیشتری دارند.

تصویر

<figure>
	<img src="https://exmaple.com/image.png" />
	<figcaption>Here goes the caption</figcaption>
</figure>

توجه داشته باشید که figcaption می تواند خالی باشد. بنابراین، بررسی کنید که آیا حاشیه‌ها زمانی که figcaption وجود ندارد، خوب به نظر می‌رسند.

محتوای جاسازی‌شده

<figure>
	<div class="rich-embed">{# embed HTML code goes here... #}</div>
	<figcaption>Here goes the caption</figcaption>
</figure>

پیش‌نمایش پیوند

<figure>
	<a class="rich-link">
		<div class="rich-link-details">
			<div class="rich-link-title">{{ data.title }}</div>
			<div class="rich-link-description">{{ data.description }}</div>
			<div class="rich-link-domain">{{ data.domain }}</div>
		</div>
		<div class="rich-link-thumbnail">
			<img src="{{ data.thumbnail }}" />
		</div>
	</a>
	<figcaption>{{ data.caption }}</figcaption>
</figure>

کادر اطلاع‌رسانی

<aside style="background-color:#0000000;color:#ffffff">
	<mark></mark>
</aside>

قالب‌های گره

برخی از گره ها دارای قالب هستند. و به‌عنوان توسعه‌دهنده پوسته، اگر قالب پیش‌فرض با طراحی شما مطابقت نداشت، می‌توانید آن‌ها را سفارشی کنید. برای انجام این کار، فایل داده شده را به پوشه /templates اضافه کنید.

پیش‌نمایش پیوند

نام فایل سفارشی: node-bookmark.twig

قالب پیش فرض:

<a class="bookmark" target="_blank" href="{{ data.url }}" data-url="{{ data.original_url }}">
	<div class="bookmark-details">
		<div class="bookmark-title">{{ data.title }}</div>
		<div class="bookmark-description">{{ data.description }}</div>
		<div class="bookmark-domain">{{ data.domain }}</div>
	</div>
	<div class="bookmark-thumbnail">
		<img src="{{ data.thumbnail_url }}" alt="{{ data.title }}" />
	</div>
</a>

تعریف شی data :

{
	"url": "https://blog.taptik.ir",
	"original_url": "https://blog.taptik.ir",
	"title": "ویترو بلاگ",
	"description": "A simple blogging platform",
	"domain": "blog.taptik.ir",
	"thumbnail_url": "https://blog.taptik.ir/thumbnail.png"
}

فهرست مطالب

نام فایل سفارشی: node-toc.twig

قالب پیش فرض:

{{ toc | raw }}

متغیر toc رشته‌ای است که حاوی HTML از TOC به عنوان عناصر ul و li تودرتو است.

مثال: اگر می خواهید یک عنوان به TOC اضافه کنید، می توانید این کار را به صورت زیر انجام دهید. فیلتر raw برای ارائه HTML از TOC مورد نیاز است.

<div class="toc-wrap">
	<h2>Table of Contents</h2>
	{{ toc | raw }}
</div>

حالت روشن و تاریک

وبلاگ نویس گزینه های زیر را برای انتخاب در کنسول دارد.

• چه حالت هایی مجاز است؟
  • نور
  • تاریک
  • هر دو
• حالت پیش فرض چیست؟
  • اولویت سطح سیستم عامل کاربر (پیش‌فرض)
  • نور
  • تاریک

برای شما دردسرساز خواهد بود که منطق بنویسید تا همه این گزینه ها را در نظر بگیرید و بفهمید که چه پوستهی را به کاربر نشان دهید. بنابراین، ما توسعه نور/تاریکی را با افزودن نام کلاس به آن آسان می کنیم <html></html> عنصر شما می توانید رنگ ها را بر اساس آن کلاس انتخاب کنید. توصیه می کنیم استفاده کنید CSS متغیرها برای تعریف رنگ ها در colors.scss فایل

در اینجا مثالی از نحوه تعریف رنگ برای حالت های روشن و تاریک آورده شده است.

.mode-light:root {
	--color-background: #ffffff;
	--color-text: #000000;
}
.mode-dark:root {
	--color-background: #000000;
	--color-text: #ffffff;
}

سپس، در عناصر، از آن متغیرها استفاده کنید. از مقادیر رنگ های کدگذاری سخت خودداری کنید!

body {
	background-color: var(--color-background);
	color: var(--color-text);
}

این تنها کاری است که برای پشتیبانی از حالت های روشن و تاریک باید انجام دهید. ما مراقب نمایش پوسته صحیح به کاربر هستیم.

تغییر حالت روشن و تاریک

اگر از پوسته‌های روشن و تاریک پشتیبانی می‌کنید، احتمالاً دکمه‌ای خواهید داشت که به کاربران اجازه می‌دهد بین حالت‌های رنگی جابجا شوند. در اکثر پلتفرم های دیگر، برای انجام این کار به صورت دستی باید منطق بنویسید و تنظیمات برگزیده را در حافظه محلی ذخیره کنید - اما نه در ویترو بلاگ!

در بالا ذکر کردیم که یک کد کوچک Javascript اضافه می کنیم تا به شما در تعیین حالت های روشن/تاریک کمک کند. همچنین یک API ساده را در معرض دید شما قرار می دهد تا در تغییر حالت ها به شما کمک کند.

_hb.changeColorMode(mode); // mode = os|light|dark _hb.getColorMode() // returns light|dark
_hb.getColorModePreference() // returns light|dark|os

از این توابع سراسری در دکمه‌های جابجایی استفاده کنید - ما LocalStorage را مدیریت می‌کنیم.

<div class="mode-toggler">
	<button class="toggle-dark" onclick="_hb.changeColorMode('dark')"><!-- DARK MODE ICON --></button>
	<button class="toggle-light" onclick="_hb.changeColorMode('light')">
		<!-- LIGHT MODE ICON -->
	</button>
</div>

می توانید از یک SCSS مانند این برای نشان دادن دکمه ها بر اساس پوسته استفاده کنید. این نماد حالت روشن را در حالت تاریک و دکمه حالت تاریک را در حالت روشن نشان می دهد.

.mode-dark {
	.toggle-dark {
		display: none;
	}
}
.mode-light {
	.toggle-light {
		display: none;
	}
}

تغییر حالت روشن، تاریک و تنظیمات سیستم

برخی نیز ممکن است بخواهند گزینه ترجیحی سیستم عامل را به جابجایی اضافه کنند. در آن صورت، HTML مشابه خواهد بود، اما باید از کلاس‌های mode-preference-* برای تشخیص اولویت کاربر استفاده کنیم.

• mode-light و mode-dark کلاس ها به <html>، و آنها نشان دهنده جریان هستند حالت رنگ.
• mode-preference-light, mode-preference-dark, mode-preference-os به اضافه می شوند <html> و نشان دهنده جریان هستند ترجیح حالت رنگ.

<div class="mode-toggler">
	<button class="toggle-light" onclick="_hb.changeColorMode('dark')">
		<!-- LIGHT MODE ICON -->
	</button>
	<button class="toggle-dark" onclick="_hb.changeColorMode('os')"><!-- DARK MODE ICON --></button>
	<button class="toggle-os" onclick="_hb.changeColorMode('light')"><!-- OS MODE ICON --></button>
</div>

کد SCSS زیر دکمه ترجیح حالت فعال فعلی را نمایش می دهد.

.toggle-dark,
.toggle-light,
.toggle-os {
	display: none;
}
.mode-preference-light .toggle-light {
	display: inline-block;
}
.mode-preference-dark .toggle-dark {
	display: inline-block;
}
.mode-preference-os .toggle-os {
	display: inline-block;
}