سفارشی کردن نحوه نمایش ماژول ها

روش countModules را می توان در قالب برای تعیین تعداد ماژول های فعال در یک موقعیت ماژول مورد استفاده قرار داد. این معمولاً برای گنجاندن HTML در اطراف ماژول ها در یک موقعیت خاص استفاده می شود، تنها در صورتی که حداقل یک ماژول برای آن موقعیت فعال باشد. این از تعریف مناطق خالی در خروجی الگو جلوگیری می‌کند و تکنیکی است که گاهی به آن «ستون‌های در حال فروپاشی» می‌گویند.

برای مثال، کد زیر تنها در صورتی شامل ماژول هایی در موقعیت 'user1' می شود که حداقل یک ماژول برای آن موقعیت فعال باشد.

<?php if ($this->countModules( 'user1' )) : ?>
  <div class="user1">
    <jdoc:include type="modules" name="user1" style="rounded" />
  </div>
<?php endif; ?>

 

استفاده اساسی از روش countModules در اینجا توضیح داده شده است

روش countModules را می توان برای تعیین تعداد ماژول ها در یک موقعیت ماژول مورد استفاده قرار داد.

آرگومان تابع countModules معمولاً فقط نام یک موقعیت ماژول است. این تابع تعداد ماژول‌هایی را که در حال حاضر برای آن موقعیت ماژول فعال هستند، برمی‌گرداند.

از زمان جوملا! 3.0 همه قالب های رسمی از کد php ساده برای محاسبه تعداد موقعیت های چند ماژول استفاده می کنند. این کد عرض محتوا را محاسبه می کند و در index.php protostar یافت می شود:

// تنظیم عرض محتوا
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span9";
}
دیگر
{
	$span = "span12";
}

این کد در قسمت اصلی قالب استفاده می شود و به طور خودکار عرض آن را مرتب می کند. بنابراین اگر کاربر برخی از ماژول ها را در سمت چپ فعال کند، عرض ها به ترتیب span9 و span3 می شوند (span12 عرض کامل است). اگر کاربر هر دو سمت چپ و راست را فعال کند، عرض ها به span3 span6 span3 تبدیل می شوند. و اگر هیچ ماژول، چپ یا راست، فعال نباشد، عرض به span12 (ردیف کامل) تبدیل می‌شود.

حذف ماژول وقتی فعال نیست یا خالی است.

یک نیاز رایج هنگام طراحی صفحات وب در جوملا! زمانی که هیچ ماژولی در آن موقعیت فعال نباشد، موقعیت ماژول حذف می شود تا فضا برای سایر عناصر صفحه در دسترس باشد. منطقه حذف شده به عنوان "ستون فرو ریخته" نامیده می شود. این را می توان با استفاده از countModulesتابع به دست آورد.

برای مثال، اگر می‌خواهید user1موقعیت ماژول را فقط در صورتی درج کنید که ماژول‌هایی در آن موقعیت فعال باشند، می‌توانید از این کد استفاده کنید:

<?php if ($this->countModules( 'user1' )) : ?>
  <div class="user1">
    <jdoc:include type="modules" name="user1" style="xhtml" />
  </div>
<?php endif; ?>

توجه داشته باشید که <jdoc:include />تگ و اطراف <div>آن تنها در صورتی گنجانده می شوند که countModulesفراخوانی یک مقدار غیر صفر برگرداند ( ifعبارت PHP صفر را نادرست و هر مقدار غیر صفر را درست در نظر می گیرد.

گاهی اوقات ممکن است بخواهید یک جفت موقعیت ماژول به تنهایی یا با هم جمع شوند.

<?php if ($this->countModules( 'user1 or user2' )) : ?>
  <div class="user1user2">
    <?php if ($this->countModules( 'user1' )) : ?>
      <jdoc:include type="modules" name="user1" style="xhtml" />
    <?php endif; ?>

    <?php if ($this->countModules( 'user2' )) : ?>
      <jdoc:include type="modules" name="user2" style="xhtml" />
    <?php endif; ?>
  </div>
<?php endif; ?>

توجه کنید که چگونه منطقه (که با کلاس CSS " user1user2" استایل‌بندی شده است) تنها در صورتی خروجی می‌شود که " user1" یا " user2"، یا هر دو ، حداقل یک ماژول فعال داشته باشند.

اگر می‌خواهید یک تقسیم‌کننده دو موقعیت ماژول را از هم جدا کند، باید مراقب باشید که فقط در صورتی که هر دو موقعیت ماژول دارای ماژول‌های فعال باشند، از تقسیم‌کننده خروجی بگیرید. مثلا،

<?php if ($this->countModules( 'user1 or user2' )) : ?>
  <div class="user1user2">
    <?php if ($this->countModules( 'user1' )) : ?>
      <jdoc:include type="modules" name="user1" style="xhtml" />
    <?php endif; ?>

    <?php if ($this->countModules( 'user1 and user2' )) : ?>
      <div class="divider"></div>
    <?php endif; ?>

    <?php if ($this->countModules( 'user2' )) : ?>
      <jdoc:include type="modules" name="user2" style="xhtml" />
    <?php endif; ?>
  </div>
<?php endif; ?>

ماژول کروم چیست؟

ماژول کروم به طراحان قالب اجازه می دهد تا مقدار مشخصی بر نحوه نمایش خروجی یک ماژول در قالب خود کنترل داشته باشند. اساساً از مقدار کمی HTML از پیش تعریف شده تشکیل شده است که قبل، بعد یا اطراف خروجی هر ماژول درج می شود و سپس می توان با استفاده از CSS استایل دهی کرد. ماژول کروم معمولاً برای ایجاد حاشیه در اطراف ماژول ها، به ویژه با گوشه های گرد استفاده می شود، اما می توان از آن برای خیلی بیشتر از آن استفاده کرد.

کروم ماژول با استفاده از ویژگی ' style ' در عبارت فراخوانی ماژول تعیین می شود. به عنوان مثال، عبارت زیر ممکن است در فایل index.php از قالبی که در حال حاضر به عنوان الگوی اصلی اختصاص داده شده است، برای قرار دادن ماژول ها در موقعیت " user1 " و اعمال کروم " سفارشی " ماژول استفاده شود:

<jdoc:include type="modules" name="user1" style="custom" />

مشاهده می شود که همان ماژول کروم برای هر ماژول در آن موقعیت اعمال می شود - به عبارت دیگر، اگر می خواهید دو ماژول در یک ستون داشته باشید، اما می خواهید ماژول کروم متفاوتی داشته باشند، باید آنها را راه اندازی کنید. به عنوان دو "موقعیت" متفاوت (به عنوان مثال " user1 " و " user2 ").

جوملا استاندارد! بسته 1.5+ شامل شش سبک پیش‌فرض ماژول کروم است. با این حال، انعطاف پذیری سیستم قالب به این معنی است که شما به این سبک ها محدود نمی شوید - ایجاد سبک های جدید به هر تعداد که می خواهید بسیار آسان است!

همچنین ببینید: ماژول استاندارد کروم

 

 

استفاده از ماژول سفارشی کروم

برای تعریف ماژول سفارشی کروم در قالب خود باید فایلی به نام modules.php در دایرکتوری html قالب خود ایجاد کنید. برای مثال، این ممکن است PATH_TO_JOOMLA/templates/TEMPLATE_NAME/html/modules.php باشد.

در این فایل باید تابعی به نام تعریف کنید modChrome_STYLEکه " STYLE" نام ماژول سفارشی کروم شما باشد. این تابع سه آرگومان، $module, &$paramsو &$attribs, همانطور که نشان داده شده است:

<?php
  تابع modChrome_STYLE ($module، &$params، &$attribs)
  {
    /* خروجی ماژول کروم به اینجا می رود */
  }
?>

در این تابع می‌توانید از هر یک از ویژگی‌های ماژول موجود (یعنی فیلدهای jos_modulesجدول در پایگاه داده جوملا روی سرور خود) برای آن ماژول استفاده کنید، اما اصلی‌هایی که احتمالاً به آنها نیاز دارید $module->content، $module->showtitleو $module->title. $module->showtitleیک متغیر بولی است، بنابراین یا درست است (زمانی که عنوان ماژول باید نشان داده شود) یا نادرست (زمانی که نباید نشان داده شود). $module->contentو $module->titleمحتوای اصلی ماژول و عنوان ماژول را به ترتیب برمی گرداند.

تابع یک تابع معمولی PHP است و بنابراین می تواند از هر کد PHP معمولی استفاده کند. یک مثال رایج این است که از یک ifعبارت برای بررسی مقدار استفاده کنید $module->showtitleو سپس عنوان را بر اساس آن درج کنید یا نه:

<?php
  if ($module->showtitle)
  {
    echo '<h2>' .$module->title .'</h2>';
  }
?>

پارامترهای ماژول با استفاده از $paramsشی قابل دسترسی هستند. به عنوان مثال، ممکن است یک پسوند کلاس Module به یک Module در باطن جوملا اختصاص دهید! سایت؛ سپس در پارامترهای آن ماژول به عنوان ذخیره می شود moduleclass_sfx. برای ایجاد یک <div>با classپسوند کلاس Module تعیین می شود، باید از:

<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <!-- محتویات div -->
</div>

ویژگی های سفارشی کروم 

همچنین می‌توان با استفاده از همان عبارتی که Module chrome را تنظیم می‌کند، ویژگی‌های بیشتری را به تابع <jdoc:include />Module chrome منتقل کرد. این ویژگی های اضافی می توانند هر چیزی که دوست دارید باشد و در $attribsآرایه ذخیره می شوند. مثال زیر Module chrome function را در نظر بگیرید:

<?php
  تابع modChrome_custom ($module، &$params، &$attribs) {
    if (isset( $attribs['headerLevel'] ))
    {
      $headerLevel = $attribs['headerLevel'];
    }دیگر {
      $headerLevel = 3;
    }

    <!--T:11-->
if (isset( $attribs['background'] ))
    {
      $background = $attribs['background'];
    }دیگر {
      $background = 'آبی';
    }

    <!--T:12-->
echo '<div class="' .$params->get( 'moduleclass_sfx' ) .'" >';

    <!--T:13-->
if ($module->showtitle)
    {
      echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>';
    }

    <!--T:14-->
echo '<div class="' .$background .'">';
    echo $module->content;
    پژواک '</div>';

    <!--T:15-->
پژواک '</div>';
  }
?>

سپس مقادیر را برای backgroundو headerLevelدر <jdoc:include />عبارت مطابق شکل زیر تنظیم می کنید. اگر هیچ مقداری تنظیم نشده باشد، ویژگی ها به ترتیب به صورت پیش فرض «آبی» و «3» هستند.

انتقال ویژگی‌ها به ماژول کروم از <jdoc:include />
<jdoc:include /> خروجی

<jdoc:include type="modules" name="user1" style="custom" />

<div>
  <h3><!-- عنوان ماژول --></h3>

  <!--T:18-->
<div class="blue">
    <!-- محتوای ماژول -->
  </div>
</div>

<jdoc:include type="modules" name="user1" style="custom" background="green" />

<div>
  <h3><!-- عنوان ماژول --></h3>

  <!--T:19-->
<div class="green">
    <!-- محتوای ماژول -->
  </div>
</div>

<jdoc:include type="modules" name="user1" style="custom" headerLevel="1" background="yellow" />

<div>
  <h1><!-- عنوان ماژول --></h1>

  <!--T:20-->
<div class="yellow">
    <!-- محتوای ماژول -->
  </div>
</div>

 

نظرات کاربران
ثبت نظرات
برای ثبت نظر باید عضو سایت باشید!