Misc

…

Kuinka mutatoin sivun sisältöä backendissä?

Jos haluat muuttaa sivun sisältöä ohjelmallisesti backendissä ennen renderöintiä (esim. järjestää Listaus-sisällön sivujen järjestystä jonkin tietyn logiikan mukaan), voit tehdä sen ON_PAGE_BEFORE_RENDER-eventissä Site-luokassa:

<?php declare(strict_types=1);

namespace MySite;

use Sivujetti\Block\BlockTree;
use Sivujetti\Block\Entities\Block;
use Sivujetti\Page\Entities\Page;
use Sivujetti\UserSite\{UserSiteAPI, UserSiteInterface};

class Site implements UserSiteInterface {
    /**
     * @param \Sivujetti\UserSite\UserSiteAPI $api
     */
    public function __construct(UserSiteAPI $api) {
        // ...
        $api->on($api::ON_PAGE_BEFORE_RENDER, function(Page $page, bool $editModeIsOn) {
            if ($editModeIsOn)
                return;
            if ($page->slug !== "/some-page")
                return; // ei sivu jonka sisältöä halutaan muokata

            $someListing = BlockTree::findBlock($page->blocks, fn($b) => $b->type === Block::TYPE_LISTING);
            if (!$someListing)
                return; // "/some-page":sta ei löytynyt yhtään Listaus -sisältölohkoa

            // Tämä esimerkki siirtää listauksen ensimmäisen sivun aina viimeiseksi
            $first = $someListing->__pages[0];
            $allButFirst = array_slice($someListing->__pages, 1);
            $someListing->__pages = [...$allButFirst, $first];
        });
    }
}

Kuinka muutan sivun <head>-tagin sisältöä backendissä?

Voit myös määritellä <head>-tagiin renderöityvää koodia suoraan muokkaustilassa, “Sivusto > Globaalit skriptit” -näkymässä.

Näin:

<?php declare(strict_types=1);

namespace MySite;

use Sivujetti\UserSite\{UserSiteAPI, UserSiteInterface};

class Site implements UserSiteInterface {
    /**
     * @param \Sivujetti\UserSite\UserSiteAPI $api
     */
    public function __construct(UserSiteAPI $api) {
        // ...
        $api->filter("sivujetti:webPageGeneratedHeadHtml", fn(string $head) => str_replace(
            "</title>",
            implode("\n    ", [
                "</title>",
                "<link rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\">",
                "<link rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\">",
            ]),
            $head
        ));
    }
}

Kuinka lisään custom-templaatin listaussisällölle?

Uppaa tiedosto ${sivustonPolkuPalvelimella}site/templates/ kansioon palvelimella
Rekisteröi edellisen stepin tiedosto Site-luokassa

Step 1:

Uppaa tiedosto ${sivustonPolkuPalvelimella}site/templates/block-listing-jokin-nimi.tmpl.php (esim. /var/www/sivujetti-backend/site/templates/block-listing-links-only.tmpl.php) ja kirjoita sen sisälläksi:

<div
    class="j-Listing<?= $props->styleClasses ? " {$this->escAttr($props->styleClasses)}" : "" ?>"
    data-block-type="Listing"
    data-block="<?= $props->id ?>">
    <ul>
    <?php if ($props->__pages ?? null): ?>
        <?php foreach ($props->__pages as $page): ?>
        <li class="list-item list-item-<?= $page->slug ?>">
            <a href="<?= $this->url($page->slug) ?>">
                <?= $this->e($page->title) ?>
            </a>
        </li>
        <?php endforeach; ?>
    <?php else: ?>
        <li><p><?= $this->__("No %s found.", strtolower($props->__pageType->friendlyNamePlural)) ?></p></li>
    <?php endif; ?>
    </ul>
    <?= $this->renderChildren($props); // mikäli tällä listaussisällöllä on lapsisisältöä ?>
</div>

Step 2:

<?php declare(strict_types=1);

namespace MySite;

use Sivujetti\UserSite\{UserSiteAPI, UserSiteInterface};

class Site implements UserSiteInterface {
    /**
     * @param \Sivujetti\UserSite\UserSiteAPI $api
     */
    public function __construct(UserSiteAPI $api) {
        $api->registerBlockRenderer("block-listing-jokin-nimi", for: "Pages");
        ...
    }
}

## Generoidun CSS-tiedoston (themename-generated.css) rakenne

Katso myös [ScssWizardFuncs.js#L55](https://github.com/sivujetti/sivujetti/blob/next/frontend/commons-for-edit-app/ScssWizardFuncs.js#L55).

```css
@charset "utf-8";

/* Generated by Sivujetti at Fri, Sep 22 2023 11:02:04 UTC */

/* ==== Generated styles start ==== */
@import "maybeImport1";
@import "maybeImport2";
@font-face { /* maybe local import 1 */ }
@font-face { /* maybe local import 2 */ }
@layer base-styles {
    :root { --var1: ... }  ....
}
@layer user-styles {
    /* == global-scoped:start */
    /* - */
    /* == global-scoped:end */
    /* == page-scoped:start */
    /* page:-O3lA7PbrJDULirZ0NlU:Pages */
    [data-block="ulkAUbRlw5e"] { ... } ...
    /* page:-O7JLcA-Ged96ot1dle7:Pages */
    [data-block="up0xjJiaJkX"] { ... } ...
    /* == page-scoped:end */
}
@layer dev-styles {
    .cc-1 { ... } ...
}

/* ==== Generated styles end ==== */