Autor Zpráva
anonym_
Profil *
#1 · Zasláno: 1. 6. 2022, 10:31:36
Odpovědět Citovat
Ahoj,

dostal se ke mně manuál designsystem.gov.cz/#/zaciname/pro-vyvojare, na základě nějž bych měl postavit v budoucnu nějaké weby. Ty jednotlivé komponenty, atd. chápu, vypadá to jako fajn skládačka.

Ale zasekl jsem se na začátku, kdy nevím, jak ten projekt rozběhnout.

Repo mám naklonované, struktura odpovídá popisu na odkázaném webu.

Strukturu kódu mám stejnou jako na odkázaném webu, čili 

<!DOCTYPE html>
<html lang="cs" class="js-no">
<head>
    <title>Titulek stránky</title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" media="screen" href="/build/styles.min.css">
    <link rel="stylesheet" media="print" href="/build/print.min.css">
</head>
<body>
    <!-- Content -->
    <!-- JS -->
    <script src="/build/scripts.min.js"></script>
</body>
</html>

kde jsem do místa CONTENT vložil některý z elementů, třeba header kódem z designsystem.gov.cz/pl/?p=viewall-organisms--00-gov-header 

{{#> molecules-gov-container tag="header" }}
    <div class="gov-header__holder">
        <div class="gov-header__left">
            <a href="#" class="gov-link--inversed gov-header__logo">
                {{> atoms-gov-logo logo }}
            </a>
        </div>
        <div class="gov-header__right">
            <div class="gov-header__item">
                {{> molecules-gov-search search }}
            </div>
            <div class="gov-header__item gov-header__item--login">
                <a
                    class="gov-button  gov-button--primary-outlined  gov-button--inversed"
                    href="#">
                    Přihlásit se do portálu občana
                </a>
            </div>
            <div class="gov-header__fixed-items">
                <div class="gov-header__item gov-header__item--mobile">
                    <button class="gov-header__hamburger">
                        <span></span>
                        <span></span>
                        <div>MENU</div>
                    </button>
                </div>
                <div class="gov-header__item gov-header__lang">
                    {{> molecules-gov-lang-switch id=(uniID) }}
                </div>
            </div>
        </div>
    </div>

    <hr class="gov-header__separator">

    <div class="gov-header__overlay"></div>
    <nav class="gov-header__nav">
        <div class="gov-header__nav-logo">
            {{> atoms-gov-pictogram inversed-logo }}
        </div>

        <div class="gov-header__nav-holder">
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Úvod</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Životní události</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Služby veřejné správy</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">O životě v ČR</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Časté dotazy</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Další informace</a>
            </div>
            <div class="gov-header__link">
                <a href="#" class="gov-link  gov-link--standalone  gov-link--large  gov-link--inversed">Pro úřady</a>
            </div>
        </div>
    </nav>
{{/ molecules-gov-container }}

Čím to ale teď prohnat, aby se převedl ten template zápis do finálního HTML? To tam bohužel není nikde popsané a trochu v tom tápu. Máte s tím někdo zkušenosti, nebo zkušenější oko, které uvidí to, co já přehlížím?

Děkuji za případné nakopnutí :-)
Firibix
Profil
#2 · Zasláno: 1. 6. 2022, 11:08:48
Odpovědět Citovat
Reakce na anonyma:
To je Handlebars šablona. Jak přesně šablony zkompilovat záleží na nastavení tvého projektu (chceš je kompilovat ručně, nebo používáš Webpack nebo Babel, v jakém jazyce a frameworku stránky programuješ). Případně se v Pattern Labu dá zobrazit i zkompilované HTML.
anonym_
Profil *
#3 · Zasláno: 1. 6. 2022, 11:14:09
Odpovědět Citovat
Firibix:
Prvně děkuji za odpověď.

„Jak přesně šablony zkompilovat záleží na nastavení tvého projektu (chceš je kompilovat ručně, nebo používáš Webpack nebo Babel, v jakém jazyce a frameworku stránky programuješ).“
Používám webpack, ale pokud se to dá zkompilovat ručně, tak klidně tak. Jak do toho? :-)

„Případně se v Pattern Labu dá zobrazit i zkompilované HTML.“
Viděl jsem, ale popravdě nevím, jak s tím naložit. Nebudu do toho tvořit obsah, potřebuju vytvořit a dodat jen ty šablony.
Časová prodleva: 3 roky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0