<p><ahref="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <ahref="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz. Mit <ahref="https://docs.gitlab.com/ee/user/project/pages/">GitLab Pages </a> besteht für Angehörige der HFT die Möglichkeit, eine öffentliche statische Projektwebsite aus einem GitLab-Projekt heraus zu erzeugen.
</p><p>
Die URL, unter der die Seite dann zu finden ist, lautet: <br/><br/>
role="button"style="background-color: #E0001B;"href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
<ol>
<li> Anpassen der Standardwerte in settings.js
<p><b> Wichtig: </b> Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
</p>
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
</li>
<li> Anpassen der Kontaktperson in <em> kontakt.html </em>
<p><b> Wichtig: </b> Wird die Kontaktperson nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
</p>
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> kontakt.html </em> und editieren Sie die Datei.
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
Öffnen Sie den Ordner <em> public </em>
</li>
<li>
Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
<imgsrc="/img/help/publicplus.png"width="95%"/>
</li>
<li>
Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
<imgsrc="/img/help/upload_logo.png"width="95%"/>
</li>
<li>
Öffnen Sie nun im Ordner <em> public </em> die Datei <em> settings.js </em> und editieren diese.
<p>
In der Zeile mit <em>projektlogourl</em> schreiben Sie nun ./DATEINAME in die Anführungszeichen, um den Pfad zum Logo anzugeben. Ein Klick auf <em> Commit changes </em> speichert die Datei.
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
<li>
Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
<imgsrc="/img/help/publicplus.png"width="95%"/>
</li>
<li>
Klicken Sie dort auf <em> New File </em>
</li>
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarearows="28"cols="64"disabled="true">
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metaname="generator"content="GitLab Pages">
<title>Neue Seite</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<divid="topbar">
<divid="menu"class="navbar"></div>
</div>
<divclass="content">
<h1id='projectname'></h1><!--Projektname kommt aus settings.js, hier nichts einfügen-->
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<h2> Seitentitel: </h2>
<p>
Content
</p>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"></script>
</body>
</html>
</textarea>
<imgsrc="/img/help/editnewpage.png"width="95%"/>
</li>
<li>
Nun können Sie noch den Inhalt der Seite anpassen. Wenn Sie mit dem Inhalt der Seite zufrieden sind, speichern Sie sie durch Klick auf <em> Commit changes </em>
</li>
<li>
Ihre Seite wird nun automatisch auf den Server übertragen und ist unter folgender Adresse erreichbar:
<em>//Link 4: Kontakt </em> Dies ist ein Kommentar, der der Ordnung und Verständlichkeit des Codes dient
</li>
<li>
<em>let NAME = document.createElement("a") </em> Dies legt einen neuen Eintrag fest
</li>
<li>
<em>NAME.href = "addresse" </em> Dies legt die Adresse fest, auf die der neue Menüeintrag verweist. Dies kann zum Beispiel eine neu angelegte Seite sein.
</li>
<li>
<em>NAME.innerHTML="" </em> Dies legt den Text des Eintrags fest, also was später im Menü angezeigt wird
</li>
<li>
<em> menu.appendChild(NAME); </em> Dies fügt letztlich den Eintrag dem Menü hinzu.
</li>
</ul>
</li>
<li>
Nachdem Sie den Block entsprechend Ihrer Wünsche bearbeitet haben, klicken Sie auf <em> Commit changes </em>, um Ihre Änderungen zu speichern.
A template can be a single page or it can be multiple pages with a menu to select them.
If the name of a template begins with the word "simple" then it is a single page template. This is the general structure of a template:
Eine Projektwebseite kann entweder aus einer einzelnen Seite oder aber aus mehreren Seiten mit einem Auswahlmenü bestehen.
Falls der Name eines Templates mit "simple" beginnt, handelt es sich um ein Template mit einer einzigen Seite. Die allgemeine Struktur eines Templates sieht wie folgt aus:
</p>
<imgsrc="/img/help/content_public.jpg"/>
<p><em>assets</em>folder: You place in this folder files that should be common for the single page or all the pages of your gitlab template. E.g. you should place any personal avatars or partnerlogos in the corresponding folders (images, logos).</p>
<p><em>home</em>folder: This is the default folder where you place your main page (think of it as the landing page).</p>
<p><em>settings.js</em>: This is the file where you select the settings for your gitlab page.</p>
<p>You should not make changes to some of the files.</p>
<p><em>assets</em>Ordner: In diesem Ordner platzieren Sie alle Dateien, die alle Ihre Seiten des gitlab templates gemeinsm haben. Hier kommen zum Beispiel persönliche Avatare oder Partnerlogos in die entsprechenden Unterordner (images, logos).</p>
<p><em>home</em>Ordner: Dies ist der Standardordner für Ihre Hauptseite.</p>
<p><em>settings.js</em>: In dieser Datei wählen Sie die Einstellungen für Ihre gitlab-Seite.</p>
<p>Sie sollten einige dieser Dateien anpassen.</p>
<imgsrc="/img/help/content_public_colors.jpg"/>
<p>Red: Those files should not be changed.</p>
<p>Orange: Those files should be replaced by your own files. The filename should remain the same. If there are files that should be replaced depends on the template you choose.</p>
<p>Green: Those files you can edit.</p>
<p>Blue: In those folders you can add your additional files. In case of assets, images, logos etc. In case of a template folder, your custom css, javascript or any other files.</p>
<p>Rot: Diese Dateien sollten nicht geändert werden.</p>
<p>Orange: Diese Dateien sollten durch eigene Datein mit dem selben Dateinamen ersetzt werden. Ob Dateien ersetzt werden müssen, hängt vom Template ab.</p>
<p>Grün: Diese Dateien können Sie ändern</p>
<p>Blau: In diese Ordner können Sie zusätzliche Dateien platzieren. In den assets-Ordner zum Beispiel Bilder, Logos etc.; in den template-Ordner Ihr eigenes css, javascript oder weitere Dateien.</p>
<p>
Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
</p>
<ol>
<li> Anpassen der Standardwerte in settings.js
<p><b> Wichtig: </b> Werden diese Werte nicht angepasst, wird das Projekt nicht auf unseren Servern ausgerollt und die deployment-Pipeline wirft einen Fehler
</p>
<li> Anpassen der Einstellungen in settings.js
<p>
Klicken Sie dazu im Ordner <em> public </em> auf die Datei <em> settings.js </em> und editieren Sie die Datei.
Those are the default values for the social networks/personal website of a participant and the default avatar. It is recommended not to change them, but you can add another social network if you want.
Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
</p>
<imgsrc="/img/help/default_settings.png"/>
<p>The switches control which parts of you gitlab page should turn on or off. E.g. if you want a single page and not a menu then you change the menu value to OFF.</p>
<p>Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.</p>
<imgsrc="/img/help/switches.png"/>
<p>Here you change the project logo. The logo will appear centered at the top of the page. If the switch for the project logo is OFF then it will not be visible.</p>
<p>Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.</p>
<imgsrc="/img/help/pr_logo.png"/>
<p>Here you change the project name. If the switch for the project name is OFF then it will not be visible.</p>
<p>Hier ändern Sie den Projektnamen. Wenn der Schalter auf 'OFF' steht, wird kein Projektname angezeigt.</p>
<imgsrc="/img/help/pr_name.png"/>
<p>Here you change the menu of your gitlab page. A menu can be linked with a folder/template or with an external link, e.g. a demo. You can add or remove menu entries. You hide the menu when the switch is OFF.
Don't forget to add the forward slash at the end of a menu link if it is pointing to a folder.
<p>Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen.
Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
</p>
<imgsrc="/img/help/menu.png"/>
<p>Here you change the participants. You can use default values for a social network (They point to HFT's social networks) or you can use your own profiles.
You can also add your personal webpage. You can add or remove a social network. You can also use a personal avatar or the default one (DEFAULT.avatar).
<p>Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Progile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
</p>
<imgsrc="/img/help/partic.png"/>
<p>
Here is an example of two participants.
<p>Hier ist ein Beispiel mit zwei Teilnehmenden:
</p>
<imgsrc="/img/help/partic2.png"/>
<p>
Here you change the footer logos of a project's partners. If you don't want a logo to link to an external website then use the href value EMPTY_LINK. The title will appear when you hover the mouse over a logo.
Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
<li>
Visit the templates folder and edit the index.html file. Select all the text inside this file and copy it. Then click the button<em>cancel</em>.
Gehen Sie in den templates-Ordner und editieren Sie die Datei index.html. Wählen Sie den gesamten Text in dieser Datei aus und kopieren ihn. Dann Klicken Sie auf<em>cancel</em>.
</li>
<li>
Klicken Sie im Ordner <em> public </em> auf das +, das sich oben neben dem Pfad befindet
...
...
@@ -359,7 +558,7 @@
<li>
Klicken Sie dort auf <em> New File </em>
</li>
<li>Paste the text you copied from the template</li>
<li>Fügen Sie den Text, den Sie kopiert haben, ein</li>
<li>
Geben Sie die Dateinamen index.html (<b> wichtig: </b> Endung .html)
This is a single page template for a thesis. Inside the home folder you have to replace the files with the cover of your thesis and the actual thesis file.
Then you have to edit the index.html file and replace your name, year, etc.
Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden.
When you use the generic template there is an additional folder called templates. Inside this folder you will find all the available templates.
In order to use a template, you have to copy the folder from templates/<template name> and paste it (when you edit your pages locally) in the root folder.
Then it’s a good practice to rename this folder with the menu text you want to link it. Notice that the home page always points to the home folder.
That means if you want to use a template as home page then you have to rename the folder to home.
Wenn Sie die generic Vorlage wählen, finden Sie den zusätzlichen Ordner tempaltes. In diesem Ordner finden Sie die für Unterseiten verfügbaren Vorlagen.
Um eine solche Vorlage für eine Unterseite zu nutzen, kopieren Sie den Ordner aus templates/<template name> und kopieren Ihn unter neuem Namen in Ihrem root-Ordner. Bitte beachten Sie, dass dies nicht in Gitlabs Webclient geschehen kann, sondern Sie dazu lokal auf Ihren Rechner arbeiten müssen.
Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen.
