Wie man einen Abschnitt auf theme-builder entwirft: das Fallbeispiel

ERINNERUNG:

Nachdem wir im ersten Artikel gesehen haben, wie man theme-builder und wbu-atomique klont, wollen wir uns nun damit beschäftigen, einen Abschnitt unserer Website zu erstellen. In diesem Kapitel werden wir Sie Schritt für Schritt anleiten, wie Sie diesen Bereich mithilfe von HTML und SCSS gestalten können. Um diesem Kapitel folgen zu können, müssen Sie den vorherigen Artikel gelesen haben. Falls nicht, empfehlen wir Ihnen, ihn zu lesen, bevor Sie mit Artikel1 fortfahren.

Dies ist der Abschnitt, den wir gemeinsam gestalten werden :

Wir werden sehen, wie Sie mithilfe von HTML, scss auf theme-builder und wbu-atomique eine ansprechende und interaktive Benutzeroberfläche erstellen können. Wir folgen den folgenden Schritten, um diesen Bereich zu erstellen:

Erster Schritt: Öffnen des AppVuejs-Ordners mit einem Code-Editor.
Zweiter Schritt: Einrichten der Struktur eines Themas.
Dritter Schritt: Importieren der Inhalte der Dateien „js“, „scss“ und _variables des Themas.
QVierter Schritt: Kodierung

Dieses Fallbeispiel geht davon aus, dass Sie den theme-builder und wbu-atomique bereits geklont haben. Falls Sie dies noch nicht getan haben, empfehle ich Ihnen, den ersten Artikel dieser Serie zu lesen,

Artikel1.

Erster Schritt: Öffnen Sie den AppVuejs-Ordner mit einem Code-Editor.

Hier geht es darum, einen Code-Editor Ihrer Wahl zu öffnen und die Ordner zu erstellen, die Sie für die Erstellung des obigen Abschnitts benötigen.
Um dies im theme-builder zu implementieren, benötigen Sie einen Code-Editor (Visual Studio Code ist installiert). Wenn Sie den Editor installiert haben, können Sie ihn mit einem Doppelklick öffnen. Dieses Fenster wird erscheinen:

Sie haben die Schritte zum Klonen von theme-builder und wbu-atomique in den Ordner AppVuejs befolgt. Um diesen Ordner mit Visual Studio Code zu öffnen, müssen Sie auf die Registerkarte File und dann auf Open Folder klicken. Sie sehen dann ein Fenster, in dem Sie durch die Ordner auf Ihrem Computer navigieren können. Suchen Sie den Ordner AppVuejs, klicken Sie darauf und dann auf OK. Sie sehen dann den Inhalt des Ordners AppVuejs im Code-Editor.

wird dieses Fenster erscheinen

dann klicken Sie auf siteweb, dann auf den Ordner AppVuejs und schließlich auf die Schaltfläche „Öffnen“.

es ist tatsächlich das Fenster von Visual Studio Code. Sie können die Dateien und Ordner des theme-builder- und wbu-atomique-Projekts im linken Fensterbereich sehen. Sie können die Dateien auch im rechten Panel öffnen und bearbeiten. Sie können auch die Menüleiste oben verwenden, um auf die verschiedenen Funktionen des Code-Editors zuzugreifen

Zweiter Schritt: Einrichten der Struktur eines Themas

Um ein Thema zu erstellen, müssen Sie die Funktionsweise des theme-builder und von wbu-atomique verstehen:

auf der Seite des theme-builder

Gehen Sie einfach in den Ordner src im Wurzelverzeichnis des theme-builder und erstellen Sie einen Ordner mit dem Namen unseres zukünftigen Themas. Themennamen werden nie durch Leerzeichen getrennt, sondern durch Bindestriche (-) und Unterstriche (_).

öffnen Sie den Ordner src .

Klicken Sie dann auf das Symbol; für „Neuen Ordner als Fortsetzung hinzufügen“.

So können Sie Ihr Thema benennen.Wir haben es Wohnzimmer genannt

Danach werden wir zwei Dateien innerhalb unseres neuen Ordners (theme) erstellen, wobei die erste den Namen unseres Themas und die Erweiterung. „js“ hat. Diese Datei wird in der Datei webpack.config.js initialisiert, weshalb es entscheidend ist, dass sie denselben Namen wie unser Thema hat. Die Unterordner (js-Dateien) unseres Themas, die unsere verschiedenen Bereiche darstellen, können mithilfe dieser Datei aufgerufen werden. Die zweite trägt den Namen unseres Themas, gefolgt von der Erweiterung. „scss“, die die „scss“-Datei des in wbu-atomique erstellten Themas importiert.

Vielleicht haben Sie bemerkt, dass Sie die Datei „_variables.scss“ benötigen, um Ihre Variablen, wie z. B. Farben, zu importieren oder zu speichern.

Wir werden einen Unterordner (Abschnitt ) erstellen, um einen Teil unseres Themas (z. B. „FirstSection“) in unserem; Thema darzustellen. Innerhalb dieses Abschnitts werden wir drei Dateien erstellen. :

Die erste Datei heißt: First.html. Sie wird den html-Code unseres Abschnitts enthalten,aber ohne den Header des html-Dokuments oder den body-Tag, da diese automatisch in der Datei webpack.config.js erzeugt werden. :
Die nächste Datei trägt den Namen unseres Unterordners „exple: first.scss“ und importiert die Datei _Variables.scss und die Datei(en); scss, die sich im Ordner unseres Themas befinden.
Die dritte Datei ist eine js-Datei mit dem Namen: „first.js“, die die (html)- und (scss)-Datei unseres Abschnitts importieren wird.

2.wbu-atomische Seite

Gehen Sie einfach in den Ordner „wbu-atomique/scss/organisme/sections/theme_builder“ und erstellen Sie einen Ordner mit dem Namen unseres Themas. Die.scss-Dateien für jeden Abschnitt Ihres Themas werden in diesem Ordner gespeichert, so dass Sie den gewünschten scss-Code erstellen können. Die .js-Dateien werden im Ordner „js“ im Wurzelverzeichnis von; wbu-atomic abgelegt.

Schritt 3: Importieren der Inhalte der Dateien „js“, ‚scss‘ und _theme variables".

Um mit dem Importieren der Dateiinhalte beginnen zu können, müssen Sie zunächst die entsprechenden Dateien erstellen (siehe „erster“ Teil dieses Artikels):

In die .js-Datei unseres Themas (Wohnzimmer) mit dem Namen salon.js importieren Sie wie folgt:

Dieses Bild zeigt, wie die JavaScript- und Sass-Dateien, die für das Thema "Wohnzimmer" benötigt werden, importiert werden. Die erste Zeile importiert die JavaScript-Datei von Bootstrap, einem Framework, das die Erstellung von dynamischen, responsiven Weboberflächen vereinfacht. Die zweite Zeile importiert die Sass-Datei des Themas "salon.scss", die die Stile des Themas enthält. Die dritte Zeile importiert die JavaScript-Datei des Abschnitts "firstSection.js", die den spezifischen Code für diesen Teil der Website enthält. Diese Dateien befinden sich im Ordner "salon".

Dann wechseln wir zur Datei salon.scss
, die die in wbu-atomique enthaltenen saas-Dateien und die Datei _variables importiert.

Schließen wir mit der Datei _variable.scss ab, die die verschiedenen vordefinierten Variablen in wbu-atomique enthält. Bei dieser Datei handelt es sich um eine Sass-Datei, eine Sprache, mit der Sie scss-Stylesheets einfacher und effizienter erstellen können. Variablen sind Elemente, die Werte wie Farben, Größen, Schriftarten usw. speichern. Sie ermöglichen es, diese Werte im gesamten Code wiederzuverwenden und sie bei Bedarf leicht zu ändern. Beispielsweise können Sie eine Variable für die Hauptfarbe des Designs definieren und sie in allen Elementen verwenden, die diese Farbe haben sollen.

Fahren wir fort mit dem Import der Dateien des Abschnitts „firstSection“ des Themas „salon“. Die JavaScript-Datei des Abschnitts (first.js) importiert die beiden HTML- und Sass-Dateien des Abschnitts.

Dazu müssen wir in wbu-atomic/scss/organism/sections/theme-builder gehen und einen Ordner anlegen, der denselben Namen wie das in theme-builder enthaltene Thema trägt.

Erstellen Sie dann eine „.scss“-Datei, die Sie in die „.scss“-Datei des Abschnitts importieren, der sich im theme-builder befindet.

In die .scss-Datei in wbu-atomique können Sie Ihren Stil einfügen.

In der Datei „.scss“ des Abschnitts (first.scss) können wir dann die Datei importieren, die wir in wbu-atomique erstellt haben.

Vierter Schritt: Kodierung

auf der Seite des Theme-Builders

Öffnen Sie die Datei first.html, geben Sie den HTML-Code für den Abschnitt ein, den Sie erstellen möchten (ohne Header-Tag und Body-Tag), speichern Sie die Datei „first.html“.

<section class="page-header">
   <div class="container">
        <div class="row ">
            <div class="col-md-6">
                <h1 class="font-weight-bold "> 
                    Recherchez  les données  ouvertes de l administration publique de suisse
                </h1>
                <a class="btn btn-default-inverted" href="#" role="button">
                    En savoir plus sur opendata.swiss
                </a>
            </div>
            <div class="col-md-offset-1  col-md-5 text-md-right text-xs-center">
                <div class="page-right"> 
                    <div class="wbu-titre-suppra">10 328</div>
                    <div class="title">jeux de données</div>
                    <form action="#" role="search">
                        <div class="form-group">
                            <input id="search" type="search" class="form-control input" name="q" placeholder="Rechercher les jeux de données..." autocomplete="off">
                            <i class="fa fa-search form-control-feedback" aria-hidden="true"></i>
                       </div>
                    </form>
                </div>
                
               <p><a href="#">accédez au catalogue de données en utilisant l'API</a></p>

            </div>
        </div>
    </div>
   
</section>

Speichern Sie Ihr Dokument (Strg + S).Hier ist ein Codebeispiel, das den Aufbau der HTML-Datei veranschaulicht. Ich möchte Sie bitten, Ihre HTML-Kenntnisse zu nutzen, um diesen Abschnitt zu codieren.
Bevor wir fortfahren, wollen wir uns dieses Codefragment genau ansehen, um seine Funktionsweise besser zu verstehen :

Hinweis :

Bevor wir unseren .scss-Abschnitt codieren, sollten wir uns einen Moment Zeit nehmen, um die Datei _variables.scss und die Rolle der Variablen zu verstehen. Die Überladung der Variablen erfolgt im theme-builder in der Datei _variables.scss.

Was ist die Rolle?

Ich werde Ihnen erklären, warum:

Wenn wir eine Website programmieren, kann es sein, dass wir einen Stil haben, der sich mehrmals wiederholt, und manchmal müssen wir eine große Anzahl von Codezeilen verwalten. Wenn wir eine Farbe ändern wollen, die häufig vorkommt, müssen wir nach jedem Vorkommen dieser Farbe suchen, was sehr mühsam ist. Deshalb erleichtert uns wbu-atomique die Arbeit, indem es eine Reihe von bereits vordefinierten Stilen anbietet. Hier ist eine Seite, die die zu verwendenden Variablen vorstellt :

$wbu- (das obligatorische Präfix für die Deklaration einer Variablen). Zum Beispiel $wbu-background, um die Hintergrundfarbe zu bezeichnen. Zusammenfassend lässt sich sagen, dass es Variablen gibt, die für bestimmte Teile bereits standardmäßig definiert sind.

Um Ihre Darstellung im Browser zu betrachten, müssen Sie das zu verwendende Design auswählen, indem Sie die Datei webpack.config.js am Ende des Ordners theme-builder aufrufen. In der Konstante „const CurrentThemeName = “theme to be displayed„“ müssen Sie das gewünschte Theme auswählen, indem Sie den Wert der Konstante durch den Namen des gewünschten Themas ersetzen.

Um den Server zu starten, öffnen Sie in der Symbolleiste des Editors ein neues Terminal, indem Sie auf „Terminal“ und dann auf „Neues Terminal“ in der Symbolleiste des Code-Editors klicken:

Wenn Sie das Terminal geöffnet haben, greifen Sie mit dem Befehl :

cd /

greifen Sie mit diesem Befehl auf den Ordner siteweb zu:

cd siteweb

und positionieren Sie sich dann mit diesem Befehl auf den Ordner AppVuejs:

cd AppVuejs

dann,greifen Sie mithilfe des Befehls auf den Ordner theme-builder zu:

cd theme-builder

und geben Sie dann den Befehl ein:

npm run serve

schließlich kopieren Sie oder drücken Sie Strg und klicken Sie mit der rechten Maustaste auf eine der Adressen, die auf dem Terminal angezeigt werden.

Sie können sich das Ergebnis im Browser ansehen.

Wir haben den HTML-Teil unseres Abschnitts abgeschlossen. Jetzt ist es an der Zeit, mit dem Saas-Stil zu beginnen.

wbu-atomics-seite

Öffnen Sie die Datei first.scss, die Sie unter "/wbu-atomique/scss/organisme/sections/theme_builder/salon" erstellt haben, und fügen Sie Ihren sass-Code ein:

@use "../../../../variables" as*;
@use "./../../../../wbu-ressources-clean.scss" as *;



.page-header {
    color: $wbu-color-primary;
    background-color:$wbu-background ;
    margin-top: 0;
    margin-bottom: $wbu-margin * 2.9;
    padding: $wbu-padding 0;
    border: 0;
    word-wrap: break-word;
 

    .container {
        padding-top: $wbu-padding * 2.7;
        padding-bottom:$wbu-padding * 3.7;
        background: url('https://opendata.swiss/images/swiss_map.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
        


        a.btn {
            color: $wbu-color-primary;;
            border: 1px solid $wbu-border-color;
            

            &:hover {
               background-color:#045a51 ;
                
            }
        }


        .page-right  {
            
            

            .title {
                font-weight: $wbu-title-font-weight;

            
            }
     }


        .form-control{
           
           height:$wbu-default-line-height * 50;
           border: 1px solid black;

        }  
         
        p a{
            color: $wbu-color-primary;;
           

            &:hover {
               text-decoration: none;
               color: $wbu-color-secondary;
            }

        }

         

    }




}

d wenn wir uns die Datei (_variables.scss aus unserem Abschnitt) noch einmal ansehen.

können Sie die verschiedenen überzeichneten Variablen sehen, die wir verwendet haben.

Gute Praktiken

es ist besser, Abschnitte mit einem Rand nach unten (margin-bottom) zu versehen.
Verwenden Sie bei der Kodierung von Abschnitten kein p-Tag.
Jeder Abschnitt muss mit dem Tag „Abschnitt“ beginnen, der die Klasse „space_bottom“ haben muss.
Container wird von einem div baslise gefolgt, das die Klassen „container, container-fluid, width-tablet, width-phone, ... oder leer“ haben kann.