şablon değişikleri Katlanabilir Düğüm Kategorileri

İnfo · 10 Haz 2022

Kullanıcılara umursamadıkları düğümleri daraltma olanağı sağlamanın en basit yolu. Seçimleri kaydedilir, böylece sayfayı yenilediklerinde veya sitenizi ziyaret ettiklerinde kapalı düğümler kapalı kalır.

Bu düzeltme, varsayılan stili destekler, hiçbir üçüncü taraf stili desteklenmez. Ayrıca, Piksel Çıkış stilleri kullanıyorsanız, bu her stilde yerleşiktir.

En az XF 2.0.3 veya üstünü kullanmalısınız.
1-) "node_list_category" şablonunda aşağıdaki kod değişiklikleri yapılıyor.

a-) Bul:

Kod:

<div class="block block--category block--category{$node.node_id}">

Değiştirmek:

Kod:

<div class="block block--category block--category{$node.node_id} collapsible-nodes">

b-) Bul:

Kod:

<h2 class="block-header">

Aşağıdaki kodu aşağıya ekleyin:

Kod:

<div class="block-header--left">

c-) Bul:

Kod:

<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

Aşağıdaki kodu yukarıdaki satırın arkasına ekleyin:

Kod:

</div>

d-) Bul:

Kod:

</h2>

En üste aşağıdaki kodu ekleyin:

Kod:

<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

e-) Bul:

Kod:

<div class="block-body">

Değiştirmek:

Kod:

<div class="block-body block-body--collapsible is-active">

2-) " extra.less " şablonuna aşağıdaki kodu ekleyin.

Kod:

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

OPSİYONEL:
Şahsen ben pek beğenmedim ama isterseniz "On/Off" animasyonu daha belirgin hale getirebilirsiniz. Bunun için aşağıdaki kodu " extra.less " ekliyoruz.

Less:

.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}

şablon değişikleri Katlanabilir Düğüm Kategorileri

İnfo112