Skip to content

GitLab

Commits (5)
Hide whitespace changes
Inline Side-by-side
help/gitlab-pages.html
View file @ d06f64a9
......@@ -73,8 +73,8 @@
<li> Nun können Sie ihr Projekt befüllen. Tragen Sie mindestens die Grundinformationen wie <em> Project name </em> und <em> Project description </em> ein.<img src="/img/help/createproject.png" width="95%"/> </li>
<li> Klicken Sie auf <em> Create project</em></li>
<li>
Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt. <img src="/img/help/folderpublic.png" width="95%"/> <br/>
In diesem Ordner befinden sich die Dateien <em> index.html, aktuelles.html </em>, <em> style.css </em> und <em>settings.js</em>. Diese sorgen für Inhalt (aktuelles.html, index.html) und Aussehen (style.css) der statischen Webseite und enthalten allgemeine Projektinformationen (settings.js). Direkt nach Projekterstellung enthalten sie zunächst nur allgemeine, grundsätzliche Informationen aus dem Template. <img src="/img/help/content_public.png" width="95%"/>
Ihr Projekt wird nun erstellt und enthält automatisch die notwendigen Grundeinstellungen für das Publizieren einer Website über die Funktion Pages. Vor allem wird im Repositorium der Ordner <em> Public </em> angelegt.
<img src="/img/help/folderpublic.png" width="95%"/> <br/>
</li>
<li>
Um Ihre eigenen Projektinhalte zu veröffentlichen, können Sie entweder eine komplett eigene HTML-Seite erzeugen oder sich an unseren Vorgaben aus dem Template orientieren. Eine Anleitung zur Verwendung unserer Vorlage finden Sie im Bereich <a href="#template_Text">Gitlab-pages Template benutzen</a>
......@@ -306,34 +306,32 @@
<li>
Geben Sie einen Dateinamen (<b> wichtig: </b> Endung .html) an und fügen Sie folgenden Standardtext ein:
<textarea rows="28" cols="64" disabled="true">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Neue Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<h2> Seitentitel: </h2>
<p>
Content
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Neue Seite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='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>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"> </script>
</body>
</html>
</textarea>
<img src="/img/help/editnewpage.png" width="95%"/>
</li>
......@@ -396,6 +394,241 @@
</div>
</div>
</div>
<div id="template_Text" class="margin_middle">
<div class="container background_ffffff">
<div class="margin_top_bottom">
<div class="col-lg-12">
<h2 class="d-flex flex-column order-1 justify-content-lg-start text-center mailinglist_heading"><strong>Gitlab-pages Templates <em>generic/ simple_raw / simple_thesis</em> benutzen</strong></h2>
</div>
<div class="col-auto background_ffffff">
<p>
Wir stellen mehrere Vorlagen für Projektwebseiten zur Verfügung.
</p>
<div class="help">
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse3t" aria-expanded="false" aria-controls="collapse3t">
<small>Erste Schritte</small></a>
</h3>
</div>
<div id="collapse3t" class="card-body collapse">
<p>
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>
<img src="/img/help/content_public.jpg"/>
<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>
<img src="/img/help/content_public_colors.jpg"/>
<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 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.
</p>
<img src="/img/help/select_settings_generic.png" width="95%"/>
<p>
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>
<img src="/img/help/default_settings.png"/>
<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>
<img src="/img/help/switches.png"/>
<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>
<img src="/img/help/pr_logo.png"/>
<p>Hier ändern Sie den Projektnamen. Wenn der Schalter auf 'OFF' steht, wird kein Projektname angezeigt.</p>
<img src="/img/help/pr_name.png"/>
<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>
<img src="/img/help/menu.png"/>
<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>
<img src="/img/help/partic.png"/>
<p>Hier ist ein Beispiel mit zwei Teilnehmenden:
</p>
<img src="/img/help/partic2.png"/>
<p>
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.
</p>
<img src="/img/help/f_logos.png"/>
<p>
Klicken Sie anschließend auf <em> commit changes </em>, um die Änderungen zu speichern.
</p>
<img src="/img/help/edit_settings.png" width="95%"/>
</li>
</ol>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse4t" aria-expanded="false" aria-controls="collapse4t">
<small>Avatar hinzufügen</small></a>
</h3>
</div>
<div id="collapse4t" class="card-body collapse">
<p> Um einen persönlichen Avatar hinzuzufügen:
<ol>
<li>
Öffnen Sie den Ordner <em> public/assets/images </em>
</li>
<li>
Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
</li>
<li>
Wir empfehlen, dass das Bild quadratisch oder im Porträtformat ist. Zudem empfehlen wir keine allzu großen Bilder (>500px) hochzuladen.
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<small>Logo hinzufügen</small></a>
</h3>
</div>
<div id="collapse5" class="card-body collapse">
<p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen:
<ol>
<li>
Öffnen Sie den Ordner <em> public/assets/logos </em>
</li>
<li>
Klicken Sie auf das + im Oberen Bereich, und anschließend auf <em> Upload File </em>
<img src="/img/help/publicplus.png" width="95%"/>
</li>
<li>
<p>
Das Logo sollte quadratisch mit einer Auflösung von 300x300 pixel sein.
</p>
</li>
<li>
Fügen Sie die gewünschte Datei hinzu und klicken Sie auf <em> Upload File </em>
<img src="/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>projectLogo</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.
</p>
<img src="/img/help/pr_logo.png"/>
</li>
<li>
Nun erscheint auf all Ihren Seiten das Projektlogo neben dem Logo der Hochschule.
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse6t" aria-expanded="false" aria-controls="collapse6t">
<small>Neue Seite hinzufügen</small></a>
</h3>
</div>
<div id="collapse6t" class="card-body collapse">
<p>
Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
<ol>
<li>
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
<img src="/img/help/publicplus.png" width="95%"/>
</li>
<li>
Klicken Sie dort auf <em> New File </em>
</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)
<img src="/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:
<p>https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/DATEINAME</p>
</li>
</ol>
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse7t" aria-expanded="false" aria-controls="collapse7t">
<small>simple_raw Vorlage</small></a>
</h3>
</div>
<div id="collapse7t" class="card-body collapse">
<p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse8t" aria-expanded="false" aria-controls="collapse8t">
<small>simple_thesis Vorlage</small></a>
</h3>
</div>
<div id="collapse8t" class="card-body collapse">
<p>
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.
</p>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h3 class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapse9t" aria-expanded="false" aria-controls="collapse9t">
<small>generic Vorlage</small></a>
</h3>
</div>
<div id="collapse9t" class="card-body collapse">
<p>
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/&lttemplate name&gt 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.
</p>
<img src="/img/help/generic.png"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
img/help/content_index_marked.png
View replaced file @ 5ca74a3c View file @ d06f64a9
img/help/content_index_marked.png

40.3 KB | W: | H:

img/help/content_index_marked.png

12.2 KB | W: | H:

img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
img/help/content_index_marked.png
  • 2-up
  • Swipe
  • Onion skin
img/help/editnewpage.png
View replaced file @ 5ca74a3c View file @ d06f64a9
img/help/editnewpage.png

55.2 KB | W: | H:

img/help/editnewpage.png

70.3 KB | W: | H:

img/help/editnewpage.png
img/help/editnewpage.png
img/help/editnewpage.png
img/help/editnewpage.png
  • 2-up
  • Swipe
  • Onion skin

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal