تم ها

تم ها راهی برای سفارشی کردن ظاهر و احساس Blockly هستند. می‌توانید رنگ‌های بلوک، رنگ‌های دسته‌بندی و اجزای خاص را از طریق کلاس Themes سفارشی کنید. اگر می‌خواهید اجزای اضافی را سفارشی کنید، نام موضوع را به عنوان یک کلاس در بخش تزریق ارائه می‌کنیم. این به کاربران اجازه می دهد تا ظاهر اجزای پشتیبانی نشده را از طریق CSS تغییر دهند. هدف اصلی ما از ایجاد تم‌ها، توانمندسازی توسعه‌دهندگان برای ایجاد تجربیات Blockly است که در دسترس‌تر هستند.

ویژگی های تم

تم یک شی با چندین ویژگی است: تم پایه برای گسترش، یک شی سبک برای بلوک‌ها، دسته‌ها، مؤلفه‌ها و فونت‌ها، و استفاده یا عدم استفاده از کلاه برای بلوک‌های شروع.

سبک بلوک

یک سبک بلوک از چهار فیلد تشکیل شده است:

  • colourPrimary (الزامی) - رنگ پس زمینه بلوک.
  • colourSecondary (اختیاری) - رنگ پس زمینه اگر بلوک یک بلوک سایه باشد.
  • colourTertiary (اختیاری) - حاشیه یا رنگ برجسته بلوک.
  • hat (اختیاری) - یک کلاه را به یک بلوک اضافه می کند، اگر مقدار آن روی cap تنظیم شده باشد. درباره کلاه بیشتر بدانید.

بلوک با فلش هایی که به رنگ اصلی، ثانویه و ثالث اشاره دارند

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

یک موضوع شامل نگاشت نام سبک بلوک به شیء بلوک سبک است:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

سبک دسته

سبک دسته فقط دارای یک ویژگی رنگ است.

  • رنگ (الزامی) - رنگ دسته در جعبه ابزار. معمولاً این رنگ‌ها باید با colourPrimary در اکثر بلوک‌های دسته یکسان باشند. این امر باعث می شود تا کاربران تشخیص دهند که کدام بلوک ها به یک دسته خاص تعلق دارند.

اسکرین شات جعبه ابزار با رنگ های دسته بندی مختلف

const mathCategory = {
   'colour':'290'
}

یک موضوع شامل نگاشت نام دسته به شی سبک دسته است:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

سبک های کامپوننت

یک موضوع می تواند رنگ یا مقدار اجزای زیر را تعیین کند:

  • workspaceBackgroundColour : رنگ پس‌زمینه فضای کاری
  • toolboxBackgroundColour : رنگ پس زمینه جعبه ابزار
  • toolboxForegroundColour : رنگ متن دسته جعبه ابزار
  • flyoutBackgroundColour : رنگ پس‌زمینه Flyout
  • flyoutForegroundColour : رنگ متن برچسب Flyout
  • flyoutOpacity : Opacity Flyout
  • scrollbarColour : رنگ نوار پیمایش
  • scrollbarOpacity : تیرگی نوار پیمایش
  • insertionMarkerColour : رنگ نشانگر درج (نام رنگ را نمی پذیرد)
  • insertionMarkerOpacity : کدورت نشانگر درج
  • markerColour : رنگ نشانگر که در حالت پیمایش صفحه کلید نمایش داده می شود
  • cursorColour : رنگ مکان نما که در حالت پیمایش صفحه کلید نمایش داده می شود

اکثر اجزای دیگر را می توان با استفاده از نام تم در CSS تغییر داد. با این حال، اگر مؤلفه‌ای وجود دارد که می‌خواهید تغییر دهید که قبلاً بخشی از این لیست نیست و نمی‌توان آن را با استفاده از CSS تغییر داد، لطفاً یک مشکل را با اطلاعات بیشتر ثبت کنید.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

سبک های فونت

سبک فونت شیئی است که خانواده، وزن و اندازه یک فونت را در خود جای می دهد.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

شروع کلاه

اگر startHats: true مستقیماً در یک موضوع تم تنظیم کنید، یک کلاه به همه بلوک‌ها بدون اتصال قبلی یا خروجی اضافه می‌شود. اگر می خواهید کنترل بیشتری بر روی دقیقاً کدام بلوک ها کلاه داشته باشید، می توانید در عوض از ویژگی block style استفاده کنید.

تم های سفارشی

برای افزودن تم به برنامه Blockly خود، باید موارد زیر را انجام دهید:

  1. یک تم ایجاد کنید
  2. نام سبک ها را اضافه کنید
  3. موضوع خود را در یک فضای کاری تنظیم کنید

یک تم ایجاد کنید

یک تم را می توان با استفاده از سازنده یا با استفاده از defineTheme ایجاد کرد. استفاده از defineTheme گسترش یک تم از قبل موجود را آسان می کند و همه مقادیر را با یک شی واحد تنظیم می کند. یک موضوع یک نام دارد و یک شی با سبک‌های بلوک، سبک‌های دسته‌بندی و سایر ویژگی‌هایی است که در بالا توضیح داده شد.

یک طرح زمینه همچنین می‌تواند یک تم پایه داشته باشد، که مقادیر پیش‌فرض را برای هر مقداری که در موضوع سفارشی مشخص نشده است، ارائه می‌کند.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

در اینجا مثالی از استفاده از defineTheme آورده شده است.

نام های سبک را اضافه کنید

اکنون که یک موضوع ایجاد کرده ایم، باید نام سبک ها را به تعریف بلوک و دسته اضافه کنیم.

دسته بندی ها

نحوه تعریف جعبه ابزار خود تعیین می کند که چگونه باید نام سبک را اضافه کنید. برای اطلاعات بیشتر به صفحه جعبه ابزار مراجعه کنید.

بلوک ها

نحوه تعریف بلوک خود تعیین می کند که چگونه باید نام سبک را اضافه کنید. می‌توانید در صفحه بلوک‌های سفارشی ما درباره تعاریف بلوک اطلاعات بیشتری پیدا کنید. شما یکی از سبک های بلوکی را که در ویژگی blockStyles تم تعریف کرده اید به بلوک خود اختصاص می دهید.

JSON 

"style":"logic_blocks"

جاوا اسکریپت 

this.setStyle('logic_blocks');

تم خود را تنظیم کنید

همچنین باید به Blockly بگویید که از کدام تم استفاده کند. با تعریف چندین تم که از یک سبک بلوک و نام دسته‌ها استفاده می‌کنند، می‌توانید به کاربر اجازه دهید تا تمی را انتخاب کند که برای او بهتر است، و آن را به صورت پویا بدون نیاز به تغییر تعاریف بلوک تغییر دهید.

تم اولیه

بهترین راه برای تنظیم یک تم اولیه این است که options.theme در تماس تزریقی خود قرار دهید. می توانید موضوع را در JSON یا جاوا اسکریپت ارائه کنید.

JSON 

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

جاوا اسکریپت 

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

اطلاعات بیشتر در مورد گزینه ها را می توانید در صفحه پیکربندی ما پیدا کنید. اگر تم ارائه نشده باشد، به طور پیش‌فرض روی طرح زمینه کلاسیک خواهد بود.

تم های پویا

اگر می‌خواهید طرح زمینه خود را به صورت پویا تغییر دهید (مثلاً در موردی که به کاربران اجازه می‌دهید یک تم را از منوی کشویی انتخاب کنند)، می‌توانید با yourWorkspace.setTheme(theme) تماس بگیرید.

ایجاد اسکریپت Block Styles

Blockly یک اسکریپت ارائه می دهد که نقشه ای از رنگ ها یا مقادیر هگز را می گیرد و رنگ های ثانویه و سوم را برای آنها محاسبه می کند. اسکریپت را می توان در پوشه اسکریپت ها/موضوعات یافت.

تم های داخلی

Blockly تعدادی تم برای دسترسی ارائه می کند، به ویژه انواع خاصی از کمبود دید رنگ:

همچنین داریم: